genai-workshop/index.html at main · fer1tx/genai-workshop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>GenTrip</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
</head>
<body>

  <h1><span data-i18n="title-part1">Gen</span><span data-i18n="title-part2">Trip</span>
    <small>by Fer1tx</small>
  </h1>
  <!-- ... input fields and other UI elements with data-i18n attributes ... -->
  <input type="text" id="from" placeholder="Starting point" />
  <input type="text" id="to" placeholder="Destination" />
  <input type="text" id="days" placeholder="Number of days" />
  <input type="text" id="budget" placeholder="Your Budget (AZN)" />
  <button id="generateBtn">Generate</button>
  <button id="downloadBtn">Download Itinerary</button> <div id="output"></div>

  <script type="importmap">
    {
      "imports": {
        "@google/generative-ai": "https://esm.run/@google/generative-ai"
      }
    }
  </script>

  <script type="module">
    import { GoogleGenerativeAI } from "@google/generative-ai";

    const API_KEY = "AIzaSyBLUEIWL-0cYBzwyw7YZ_SpSONNwIeS0rA"; // Replace with your actual API key
    const genAI = new GoogleGenerativeAI(API_KEY);

    async function run() {
      const fromDest = document.getElementById("from").value;
      const toDest = document.getElementById("to").value;
      const days = document.getElementById("days").value;
      const budget = parseFloat(document.getElementById("budget").value);
      const model = genAI.getGenerativeModel({ model: "gemini-1.5-pro-latest" });

      const prompt = `Create a travel itinerary from ${fromDest} to ${toDest} for ${days} days, with a total budget of ${budget} AZN (approximately ${budget/days} AZN per day).
      Clearly mention the location names before each activity or item in the itinerary.
      Include estimated costs for each activity/item in the format "(AMOUNT AZN)". Ensure the total estimated cost does not exceed the budget.
      If the budget is insufficient, simply state "Insufficient budget for this trip."
      Also, suggest a good restaurant in the destination city and its approximate price range.`;

      try {
        const result = await model.generateContent(prompt);
        const response = await result.response;
        const text = response.text(); // Define 'text' here

        // Check for insufficient budget message
        if (text.trim() === "Insufficient budget for this trip.") {
          document.getElementById("output").innerHTML = "Unfortunately, your budget is not enough for this trip.";
          return; // Stop further processing
        }

        var converter = new showdown.Converter();
        document.getElementById("output").innerHTML = converter.makeHtml(text);

        // Enable the download button
        document.getElementById("downloadBtn").disabled = false;
      } catch (error) {
        console.error("Error generating itinerary:", error);
        // Handle the error appropriately, e.g., display an error message to the user
      }
    }

    function downloadItinerary() {
      const itineraryText = document.getElementById("output").innerText;
      const blob = new Blob([itineraryText], { type: "text/plain" });
      const url = URL.createObjectURL(blob);

      const link = document.createElement("a");
      link.href = url;
      link.download = "itinerary.txt";
      link.click();

      URL.revokeObjectURL(url); // Release the URL object
    }

    document.getElementById("generateBtn").addEventListener("click", run);
    document.getElementById("downloadBtn").addEventListener("click", downloadItinerary);

    // Initially disable the download button
    document.getElementById("downloadBtn").disabled = true;
  </script>
</body>
</html>