add popup element and handle server messages

Audio-Transcription-Chrome/background.js

@@ -190,17 +190,19 @@ async function stopCapture() {
  * Listens for messages from the runtime and performs corresponding actions.
  * @param {Object} message - The message received from the runtime.
  */
-chrome.runtime.onMessage.addListener((message) => {
+chrome.runtime.onMessage.addListener(async (message) => {
   if (message.action === "startCapture") {
     startCapture(message);
   } else if (message.action === "stopCapture") {
     stopCapture();
   } else if (message.action === "updateSelectedLanguage") {
-    console.log("Selected language");
-    console.log(message.detectedLanguage);
     const detectedLanguage = message.detectedLanguage;
     chrome.runtime.sendMessage({ action: "updateSelectedLanguage", detectedLanguage });
     chrome.storage.local.set({ selectedLanguage: detectedLanguage });
+  } else if (message.action === "toggleCaptureButtons") {
+    chrome.runtime.sendMessage({ action: "toggleCaptureButtons", data: false });
+    chrome.storage.local.set({ capturingState: { isCapturing: false } })
+    stopCapture();
   }
 });
 

Audio-Transcription-Chrome/content.js

@@ -6,6 +6,52 @@ var elem_text = null;
 var segments = [];
 var text_segments = [];
 
+function initPopupElement() {
+  if (document.getElementById('popupElement')) {
+    return;
+  }
+
+  const popupContainer = document.createElement('div');
+  popupContainer.id = 'popupElement';
+  popupContainer.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; color: black; padding: 16px; border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); display: none; text-align: center;';
+
+  const popupText = document.createElement('span');
+  popupText.textContent = 'Default Text';
+  popupText.className = 'popupText';
+  popupText.style.fontSize = '24px';
+  popupContainer.appendChild(popupText);
+
+  const buttonContainer = document.createElement('div');
+  buttonContainer.style.marginTop = '8px';
+  const closePopupButton = document.createElement('button');
+  closePopupButton.textContent = 'Close';
+  closePopupButton.style.backgroundColor = '#65428A';
+  closePopupButton.style.color = 'white';
+  closePopupButton.style.border = 'none';
+  closePopupButton.style.padding = '8px 16px'; // Add padding for better click area
+  closePopupButton.style.cursor = 'pointer';
+  closePopupButton.addEventListener('click', async () => {
+    popupContainer.style.display = 'none';
+    await browser.runtime.sendMessage({ action: 'toggleCaptureButtons', data: false });
+  });
+  buttonContainer.appendChild(closePopupButton);
+  popupContainer.appendChild(buttonContainer);
+
+  document.body.appendChild(popupContainer);
+}
+
+
+function showPopup(customText) {
+  const popup = document.getElementById('popupElement');
+  const popupText = popup.querySelector('.popupText');
+
+  if (popup && popupText) {
+      popupText.textContent = customText || 'Default Text'; // Set default text if custom text is not provided
+      popup.style.display = 'block';
+  }
+}
+
+
 function init_element() {
     if (document.getElementById('transcription')) {
         return;
@@ -128,11 +174,18 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
         remove_element();
         sendResponse({data: "STOPPED"});
         return;
+    } else if (type === "showWaitPopup"){
+        initPopupElement();
+
+        showPopup(`Estimated wait time ~ ${Math.round(data)} minutes`);
+        sendResponse({data: "popup"});
+        return;
     }
 
     init_element();
 
     message = JSON.parse(data);
+    message = message["segments"];
 
     var text = '';
     for (var i = 0; i < message.length; i++) {

Audio-Transcription-Chrome/options.js

@@ -66,6 +66,16 @@ function resampleTo16kHZ(audioData, origSampleRate = 44100) {
   return resampledData;
 }
 
+function generateUUID() {
+  let dt = new Date().getTime();
+  const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+    const r = (dt + Math.random() * 16) % 16 | 0;
+    dt = Math.floor(dt / 16);
+    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
+  });
+  return uuid;
+}
+
 
 /**
  * Starts recording audio from the captured tab.
@@ -73,6 +83,7 @@ function resampleTo16kHZ(audioData, origSampleRate = 44100) {
  */
 async function startRecord(option) {
   const stream = await captureTabAudio();
+  const uuid = generateUUID();
 
   if (stream) {
     // call when the stream inactive
@@ -88,6 +99,7 @@ async function startRecord(option) {
     socket.onopen = function(e) { 
       socket.send(
         JSON.stringify({
+          uid: uuid,
           multilingual: option.multilingual,
           language: option.language,
           task: option.task
@@ -96,13 +108,26 @@ async function startRecord(option) {
     };
 
     socket.onmessage = async (event) => {
+      const data = JSON.parse(event.data);
+      if (data["uid"] !== uuid)
+        return;
+      
+      if (data["status"] === "WAIT"){
+        await sendMessageToTab(option.currentTabId, {
+          type: "showWaitPopup",
+          data: data["message"],
+        });
+        chrome.runtime.sendMessage({ action: "toggleCaptureButtons", data: false }) 
+        chrome.runtime.sendMessage({ action: "stopCapture" })
+        return;
+      }
+        
       if (isServerReady === false){
         isServerReady = true;
         return;
       }
       
       if (language === null) {
-        const data = JSON.parse(event.data);
         language = data["language"];
         
         // send message to popup.js to update dropdown
@@ -115,6 +140,11 @@ async function startRecord(option) {
         return;
       }
 
+      if (data["message"] === "DISCONNECT"){
+        chrome.runtime.sendMessage({ action: "toggleCaptureButtons", data: false })        
+        return;
+      }
+
       res = await sendMessageToTab(option.currentTabId, {
         type: "transcript",
         data: event.data,
@@ -136,7 +166,13 @@ async function startRecord(option) {
       audioDataCache.push(inputData);
 
       // feed inputs and run
-      socket.send(audioData16kHz);
+      const base64AudioData = btoa(String.fromCharCode.apply(null, new Uint8Array(audioData16kHz.buffer)));
+
+      socket.send(
+        JSON.stringify({
+          "audio": base64AudioData
+        })
+      );
     };
 
     // Prevent page mute

Audio-Transcription-Chrome/popup.js

@@ -119,6 +119,8 @@ document.addEventListener("DOMContentLoaded", function () {
     startButton.disabled = isCapturing;
     stopButton.disabled = !isCapturing;
     useServerCheckbox.disabled = isCapturing; 
+    useMultilingualCheckbox.disabled = isCapturing;
+    
     startButton.classList.toggle("disabled", isCapturing);
     stopButton.classList.toggle("disabled", !isCapturing);
   }
@@ -165,5 +167,12 @@ document.addEventListener("DOMContentLoaded", function () {
       }
     }
   });
+
+  chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
+    if (request.action === "toggleCaptureButtons") {
+      toggleCaptureButtons(false);
+      chrome.storage.local.set({ capturingState: { isCapturing: false } })
+    }
+  });
   
 });