add audio scribe sample (#1475)

* add audio scribe sample

* Fix wrong parameter name

* Cleanup and more robust audio scribe

* better manifest descriptions

* demo chat app clean up

Author: sebastianbenz

.gitignore

@@ -5,4 +5,4 @@ node_modules
 _debug
 _metadata
 dist
-*.swp # vim temp files
+**/*.swp 

functional-samples/ai.gemini-on-device-alt-texter/README.md

@@ -1,4 +1,4 @@
-# On-device multimodal AI with Gemini Nano - image understanding
+# Alt-texter: On-device multimodal AI with Gemini Nano - image understanding
 
 This sample demonstrates how to use the image understanding capabilities of the multi-modal Gemini Nano API preview together with [Chrome's translation API](https://developer.chrome.com/docs/ai/translator-api). To learn more about the API and how to sign-up for the origin trial, head over to [Built-in AI on developer.chrome.com](https://developer.chrome.com/docs/extensions/ai/prompt-api).
 

functional-samples/ai.gemini-on-device-alt-texter/background.js

@@ -35,7 +35,7 @@ chrome.contextMenus.onClicked.addListener(async (info, tab) => {
     ]);
     chrome.runtime.sendMessage({
       action: 'alt-text',
-      text: result.value === 'fulfilled' ? result.value : result.reason.message
+      text: result.status === 'fulfilled' ? result.value : result.reason.message
     });
   }
 });

functional-samples/ai.gemini-on-device-alt-texter/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Alt Texter",
   "version": "1.0",
-  "description": "Generates alt text for images using the Prompt API.",
+  "description": "Generates alt text for images using the Gemini Nano Prompt API.",
   "permissions": ["contextMenus", "clipboardWrite"],
   "host_permissions": ["<all_urls>"],
   "minimum_chrome_version": "138",

functional-samples/ai.gemini-on-device-audio-scribe/README.md

@@ -0,0 +1,20 @@
+# Audio-Scribe: On-device multimodal AI with Gemini Nano - audio transcription
+
+This sample demonstrates how to use the audio transcription capabilities of the multi-modal Gemini Nano API preview. To learn more about the API and how to sign-up for the origin trial, head over to [Built-in AI on developer.chrome.com](https://developer.chrome.com/docs/extensions/ai/prompt-api).
+
+## Overview
+
+This extension adds a sidepanel that will, when opened, display a transcription of all audio files on a web page (currently it looks only for audio files created using `URL.createObjectUrl`).
+
+## Running this extension
+
+1. Clone this repository.
+1. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/get-started/tutorial/hello-world#load-unpacked).
+1. Open the audio-scribe sidepanel by clicking the audio-scribe action or by pressing the `ALT + A` keyboard shortcut.
+1. Open a chat app in the browser, for example https://web.whatsapp.com/. You can also run the demo chat app via:
+   ```
+   npx serve demo-chat-app
+   ```
+1. All audio messages in the current chat will be transcribed in the side panel.
+
+![Screenshot displaying a demo chat app with a few audio messages. On the right, there is the audio-scribe extension's sidepanel which displayes the transcribed text messages](assets/screenshot.png)

functional-samples/ai.gemini-on-device-audio-scribe/assets/icon128.png

@@ -0,0 +1,15 @@
+// Copyright 2025 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });

functional-samples/ai.gemini-on-device-audio-scribe/assets/screenshot.png

@@ -0,0 +1,22 @@
+// Copyright 2025 Google LLC
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+// Forward messages from the content script in the MAIN world to the
+// side panel
+window.addEventListener('message', ({ data }) => {
+  if (data.type !== 'audio-scribe') {
+    return;
+  }
+  chrome.runtime.sendMessage({ data });
+});

functional-samples/ai.gemini-on-device-audio-scribe/background.js

@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Chat App Demo</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="app-container">
+      <div class="sidebar">
+        <!-- Chat list will go here -->
+        <h2>Chats</h2>
+        <ul id="chat-list">
+          <!-- Example chat items -->
+          <li class="chat-item active" data-chat="Alice">
+            <span class="avatar">😊</span>
+            <span>Alice</span>
+          </li>
+          <li class="chat-item" data-chat="Bob">
+            <span class="avatar">😎</span>
+            <span>Bob</span>
+          </li>
+          <li class="chat-item" data-chat="Charlie">
+            <span class="avatar">🥳</span>
+            <span>Charlie</span>
+          </li>
+        </ul>
+      </div>
+      <div class="chat-panel">
+        <div class="chat-header">
+          <!-- Header for the current chat -->
+          <span class="avatar" id="current-chat-avatar">😊</span>
+          <h3 id="current-chat-name">Alice</h3>
+        </div>
+        <div class="message-list" id="message-list">
+          <!-- Messages will be loaded here by JavaScript -->
+        </div>
+        <div class="message-input">
+          <input
+            type="text"
+            id="message-input-field"
+            placeholder="Type a message..."
+          />
+          <button id="send-button">Send</button>
+        </div>
+      </div>
+    </div>
+
+    <script src="script.js"></script>
+  </body>
+</html>