add support for images and audio

GoogleChrome · Sep 3, 2024 · 81b4d30 · 81b4d30
1 parent cbfd882
commit 81b4d30
Show file tree

Hide file tree

Showing 12 changed files with 209 additions and 78 deletions.
diff --git a/functional-samples/ai.gemini-in-the-cloud/images/icon128.png b/functional-samples/ai.gemini-in-the-cloud/images/icon128.png
diff --git a/functional-samples/ai.gemini-in-the-cloud/images/icon16.png b/functional-samples/ai.gemini-in-the-cloud/images/icon16.png
diff --git a/functional-samples/ai.gemini-in-the-cloud/images/icon32.png b/functional-samples/ai.gemini-in-the-cloud/images/icon32.png
diff --git a/functional-samples/ai.gemini-in-the-cloud/images/icon48.png b/functional-samples/ai.gemini-in-the-cloud/images/icon48.png
diff --git a/functional-samples/ai.gemini-in-the-cloud/images/record-audio-24.svg b/functional-samples/ai.gemini-in-the-cloud/images/record-audio-24.svg
diff --git a/functional-samples/ai.gemini-in-the-cloud/images/screenshot-monitor-24.svg b/functional-samples/ai.gemini-in-the-cloud/images/screenshot-monitor-24.svg
diff --git a/functional-samples/ai.gemini-in-the-cloud/manifest.json b/functional-samples/ai.gemini-in-the-cloud/manifest.json
@@ -6,7 +6,8 @@
   "background": {
     "service_worker": "background.js"
   },
-  "permissions": ["sidePanel"],
+  "permissions": ["sidePanel", "tabs"],
+  "host_permissions": ["<all_urls>"],
   "side_panel": {
     "default_path": "sidepanel/index.html"
   },

diff --git a/functional-samples/ai.gemini-in-the-cloud/package-lock.json b/functional-samples/ai.gemini-in-the-cloud/package-lock.json
diff --git a/functional-samples/ai.gemini-in-the-cloud/package.json b/functional-samples/ai.gemini-in-the-cloud/package.json
@@ -6,7 +6,7 @@
   },
   "private": true,
   "devDependencies": {
-    "@google/generative-ai": "0.15.0",
-    "rollup": "4.19.0"
+    "@google/generative-ai": "0.17.1",
+    "rollup": "4.21.2"
   }
 }
diff --git a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.css b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.css
@@ -31,6 +31,15 @@ button.primary {
   color: white;
 }
 
+button.img {
+  background: #333;
+  color: white;
+  padding: 0 4px;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+}
+
 button.secondary {
   background: #ccc;
   color: black;

diff --git a/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.html b/functional-samples/ai.gemini-in-the-cloud/sidepanel/index.html
@@ -11,6 +11,7 @@ <h1>Google Gemini</h1>
       cols="30"
       rows="5"
     ></textarea>
+    <ul id="files-list"></ul>
     <div>
       <input
         type="range"
@@ -25,7 +26,42 @@ <h1>Google Gemini</h1>
         >Temperature: <span id="label-temperature">1</span></label
       >
     </div>
-    <button id="button-prompt" class="primary" disabled>Run</button>
+    <div>
+      <input
+        type="file"
+        id="image-file"
+        accept="image/*"
+        style="display: none"
+      />
+      <button id="button-add-image" class="primary img">
+        <img
+          src="/images/screenshot-monitor-24.svg"
+          width="24"
+          height="24"
+          alt="take screenshot"
+        />
+      </button>
+      <input
+        type="file"
+        id="audio-file"
+        accept="audio/wav, audio/mp3"
+        style="display: none"
+      />
+      <button id="button-record-audio" class="primary img">
+        <img
+          src="/images/record-audio-24.svg"
+          width="24"
+          height="24"
+          alt="take screenshot"
+        />
+      </button>
+    </div>
+    <div>
+      <button id="button-prompt" class="primary" disabled type="submit">
+        Run
+      </button>
+      <button id="button-reset" class="primary" type="reset">Reset</button>
+    </div>
     <div id="response" class="text" hidden></div>
     <div id="loading" class="text" hidden><span class="blink">...</span></div>
     <div id="error" class="text" hidden></div>