Initial commit

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.idx/.gitignore

@@ -0,0 +1,2 @@
+
+gc/

.idx/dev.nix

@@ -0,0 +1,31 @@
+# To learn more about how to use Nix to configure your environment
+# see: https://developers.google.com/idx/guides/customize-idx-env
+{ pkgs, ... }: {
+  # Which nixpkgs channel to use.
+  channel = "stable-23.11"; # or "unstable"
+  # Use https://search.nixos.org/packages to find packages
+  packages = [pkgs.nodejs];
+  # Sets environment variables in the workspace
+  env = {};
+  idx = {
+    workspace.onCreate = {
+      npm-install = "npm ci --no-audit --prefer-offline --no-progress --timing";
+      # Open editors for the following files by default, if they exist:
+      default.openFiles = [ "index.html" "src/main.ts" "README.md" ];
+    };
+    # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
+    extensions = [
+      "esbenp.prettier-vscode"
+    ];
+    # Enable previews and customize configuration
+    previews = {
+      enable = true;
+      previews = {
+        web = {
+          command = ["npm" "run" "dev" "--" "--port" "$PORT" "--host" "0.0.0.0"];
+          manager = "web";
+        };
+      };
+    };
+  };
+}

.idx/integrations.json

@@ -0,0 +1,4 @@
+{
+  "gemini_api": {},
+  "google_maps_platform": {}
+}

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

README.md

@@ -0,0 +1,44 @@
+# Using the Gemini API and Google Maps Platform with TypeScript
+
+This template provides a sample app demonstrating use of the Gemini API with multimodal inputs (images and text) and the Google Maps JavaScript API.
+
+## Prerequisites
+
+### Gemini API
+
+In order for the Gemini API features to work, you'll need to add a Gemini API key as a local variable.
+
+1. Open the Project IDX view by pressing Ctrl+Shift+P / Cmd+Shift+P and type "IDX focus", then select "IDX: Focus on Project IDX View"
+2. Click on the "Gemini API" integration and authenticate.
+3. Click "Get API Key" to get an API key.
+4. Create or open a file named .env.local in the root directory. The .local suffix keeps secrets out of source control.
+5. In the file, add the line: VITE_GEMINI_API_KEY=YOUR_API_KEY.
+6. Replace YOUR_API_KEY with the API key you got in step 3.
+
+### Google Maps Platform, Maps JavaScript API
+
+In order for the Maps JavaScript API features to work, you'll need to add a Google Maps Platform API key as a local variable.
+
+1. Open the Project IDX view by pressing Ctrl+Shift+P / Cmd+Shift+P and type "IDX focus", then select "IDX: Focus on Project IDX View"
+2. Click on the "Google Maps Platform" integration.
+3. Click "Enable APIs" to enable the Google Maps Platform APIs.
+4. Click "Get API Key" to get an API key.
+5. Create or open the file named .env.local in the root directory. The .local suffix keeps secrets out of source control.
+6. In the file, add the line: VITE_MAPS_API_KEY=YOUR_API_KEY.
+7. Replace YOUR_API_KEY with the API key you got in step 4.
+
+## Features
+
+Most of the code powering the features of this sample are in the `src/main.ts` file.
+
+### Gemini API
+
+- Image + text prompt: When the user selects an image and presses the "Where can I see this?" button, that image and a text prompt are sent to the Gemini API.
+- Text-only prompt: The Gemini API is used to augment and refine the draft review of a destination.
+
+### Google Maps Platform, Maps JavaScript API
+
+- [Photorealistic 3D map (Experimental)](https://developers.google.com/maps/documentation/javascript/3d-maps-overview) in the Maps JavaScript API
+- [Geocoding Service](https://developers.google.com/maps/documentation/javascript/geocoding), Maps JavaScript API
+- [Nearby Search (New) in the Places Library](https://developers.google.com/maps/documentation/javascript/nearby-search), Maps JavaScript API
+- [Extended Component Library (beta)](https://developers.google.com/maps/documentation/javascript/libraries-open-source#web-components) for the Maps JavaScript API providing the split layout and the Place Overview components.

index.html

@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="/gemini.svg" />
+    <title>Using Gemini and Google Maps Platform</title>
+  </head>
+
+  <body>
+    <main>
+      <p>See <strong>src/main.ts</strong> for instructions to get API keys needed for this project.</p>
+      <h1>Using Gemini and Google Maps Platform</h1>
+      <p>Select a destination from the images below:</p>
+      <form>
+        <div class="image-picker">
+          <label class="image-choice">
+            <input
+              type="radio"
+              checked
+              name="chosen-image"
+              value="/reichstag.jpeg"
+            />
+            <img src="/reichstag.jpeg" />
+          </label>
+          <label class="image-choice">
+            <input type="radio" name="chosen-image" value="/waterfall.jpeg" />
+            <img src="/waterfall.jpeg" />
+          </label>
+          <label class="image-choice">
+            <input type="radio" name="chosen-image" value="/beach.jpeg" />
+            <img src="/beach.jpeg" />
+          </label>
+        </div>
+        <div class="prompt-box">
+          <!-- <label>
+          <input name="prompt" placeholder="Where do you want to go" type="text"
+            value="Where can I see this place? Just the place name, please.">
+        </label> -->
+          <button type="submit">Where can I see this?</button>
+        </div>
+      </form>
+
+      <section class="container">
+        <div class="container-header">
+          <h2 class="output">(Results will appear here)</h2>
+
+          <!-- <div class="weather-info">Weather data will be displayed here</div> -->
+        </div>
+
+        <div id="map-layout">
+          <gmpx-split-layout id="split-layout" row-reverse="true">
+            <div id="map" slot="main"></div>
+          </gmpx-split-layout>
+        </div>
+      </section>
+
+      <!-- Reviews -->
+      <section class="review-container">
+        <div class="container">
+          <div class="container-header">
+            <h2>Trip review</h2>
+          </div>
+
+          <div class="reviews">
+            <div id="validate-model"></div>
+            <div id="model-wrapper">
+              <input
+                type="text"
+                hidden
+                id="prompt-title"
+                placeholder="Review title"
+              />
+              <textarea
+                id="prompt-text"
+                rows="10"
+                cols="50"
+                placeholder="Write review here"
+                id="prompt-text"
+              >
+    I recently returned from a delightful trip here and I can't recommend it enough! This sunny location proved to be the perfect place to unwind and soak up some rays.
+
+    From the moment I arrived, I was struck by the warmth and hospitality of the local people. Everyone I encountered, from shopkeepers to fellow tourists, seemed genuinely friendly and helpful. The positive energy was contagious!
+
+    I was thrilled with the culinary scene. The restaurants offered a fantastic mix of fresh, flavorful dishes featuring local ingredients. Whether I was craving [type of food] or something more adventurous, I found delicious options at every turn.
+
+    Of course, the main draw of this trip was the stunning scenery. I spent hours exploring the landscape - beaches, mountains, etc. The natural beauty of the area was simply breathtaking.
+
+    Overall, this trip was everything I could have hoped for and more. It's a place I'd love to visit again and a destination I wholeheartedly recommend to anyone seeking a balance of relaxation, good food, and friendly faces.
+          </textarea
+              >
+            </div>
+          </div>
+        </div>
+
+        <div class="container" id="prettier-version">
+          <div class="container-header">
+            <h2>Prettier version</h2>
+
+            <button id="clear">Clear</button>
+          </div>
+          <div class="content">
+            <p id="ai-output">
+              <span class="ai-output-placeholder">(Results will be here)</span>
+            </p>
+            <p id="ai-output-stream"></p>
+            <p id="ai-output-tone"></p>
+          </div>
+        </div>
+      </section>
+
+      <div class="buttons-container">
+        <button id="ai-button" hidden>Run AI</button>
+        <button id="ai-button-stream" hidden>Run AI Stream</button>
+        <button id="generate-title">Generate Title</button>
+        <button id="rewrite-review">Summarize</button>
+        <button id="check-toxicity">Check Tone</button>
+      </div>
+
+      <section class="attributions">
+        <h2>Attributions</h2>
+        <ol>
+          <li>
+            Building:
+            <a
+              href="https://commons.wikimedia.org/wiki/File:Reichstagsgeb%C3%A4ude_bei_Nacht,_Berlin-Mitte,_170325,_ako.jpg"
+              >Ansgar Koreng</a
+            >,
+            <a href="https://creativecommons.org/licenses/by-sa/3.0"
+              >CC BY-SA 3.0</a
+            >, via Wikimedia Commons
+          </li>
+          <li>
+            Garden:
+            <a
+              href="https://commons.wikimedia.org/wiki/File:The_Fall_in_the_Cloud_Forest,_Gardens_by_the_Bay,_Singapore_-_20120617-01.jpg"
+              >Allie Caulfield.</a
+            >,
+            <a href="https://creativecommons.org/licenses/by/2.0">CC BY 2.0</a>,
+            via Wikimedia Commons
+          </li>
+          <li>
+            Beach:
+            <a href="https://commons.wikimedia.org/wiki/File:Mia_lifeg.jpeg"
+              >Cristo Vlahos</a
+            >,
+            <a href="https://creativecommons.org/licenses/by-sa/4.0"
+              >CC BY-SA 4.0</a
+            >, via Wikimedia Commons
+          </li>
+        </ol>
+      </section>
+    </main>
+
+    <script type="module" src="/src/main.ts"></script>
+    <script type="module" src="/src/travel.js"></script>
+  </body>
+</html>