Cleanup and more robust audio scribe

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/background.js

@@ -33,7 +33,6 @@ chrome.contextMenus.onClicked.addListener(async (info, tab) => {
       generateAltText(info.srcUrl),
       chrome.action.openPopup()
     ]);
-    console.log(result);
     chrome.runtime.sendMessage({
       action: 'alt-text',
       text: result.status === 'fulfilled' ? result.value : result.reason.message

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

@@ -15,5 +15,8 @@
 // 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/demo-chat-app/script.js

@@ -32,14 +32,13 @@ document.addEventListener('DOMContentLoaded', () => {
           const audioElement = document.createElement('audio');
           audioElement.preload = 'metadata'; // Important for getting duration
           const sourceElement = document.createElement('source');
-          sourceElement.src = msg.audioSrc;
           sourceElement.type = 'audio/mpeg'; // Assuming MP3
           audioElement.appendChild(sourceElement);
 
           const response = await fetch(msg.audioSrc);
           const data = await response.arrayBuffer();
           const blob = new Blob([data], { type: 'audio/wav' });
-          URL.createObjectURL(blob);
+          sourceElement.src = URL.createObjectURL(blob);
           // Keep the audio element in the DOM but hidden for playback logic
           audioElement.style.display = 'none';
           messageElement.appendChild(audioElement);

functional-samples/ai.gemini-on-device-audio-scribe/demo-chat-app/style.css

@@ -274,3 +274,7 @@ body {
     text-align: right;
     flex-shrink: 0; /* Prevent duration from shrinking */
 }
+
+#chat {
+    background-color: red;
+}

functional-samples/ai.gemini-on-device-audio-scribe/demo-chat-app/test.wav

@@ -19,6 +19,6 @@ const originalCreateObjectURL = URL.createObjectURL;
 // and not for all (as we do in this demo)
 URL.createObjectURL = (object) => {
   const objectUrl = originalCreateObjectURL.call(URL, object);
-  window.postMessage({ objectUrl });
+  window.postMessage({ type: 'audio-scribe', objectUrl });
   return objectUrl;
 };

functional-samples/ai.gemini-on-device-audio-scribe/override-createobject-url.js

@@ -17,6 +17,9 @@
 chrome.runtime.onMessage.addListener(async ({ data }) => {
   let content;
   try {
+    if (data.type != 'audio-scribe' || !data || !isValidUrl(data.objectUrl)) {
+      return;
+    }
     // Check if it's an audio file
     const audio = await fetch(data.objectUrl);
     content = await audio.blob();
@@ -28,7 +31,7 @@ chrome.runtime.onMessage.addListener(async ({ data }) => {
   }
 
   // Setup message UI
-  const messages = document.gelElementById('messages');
+  const messages = document.getElementById('messages');
   const li = document.createElement('li');
   li.append('...');
   messages.append(li);
@@ -62,3 +65,14 @@ chrome.runtime.onMessage.addListener(async ({ data }) => {
     li.textContent = error.message;
   }
 });
+
+function isValidUrl(string) {
+  let url;
+
+  try {
+    url = new URL(string);
+    return true;
+  } catch (_) {
+    return false;
+  }
+}