Merge pull request #17 from makaveli10/server_option

Add Server option.

Audio-Transcription-Chrome/background.js

@@ -129,7 +129,8 @@ async function getTab(tabId) {
  * @param {number} tabId - The ID of the tab to start capturing.
  * @returns {Promise<void>} - A Promise that resolves when the capture process is started successfully.
  */
-async function startCapture(tabId) {
+async function startCapture(options) {
+  const { tabId } = options;
   const optionTabId = await getLocalStorageValue("optionTabId");
   if (optionTabId) {
     await removeChromeTab(optionTabId);
@@ -149,7 +150,7 @@ async function startCapture(tabId) {
 
       await sendMessageToTab(optionTab.id, {
         type: "start_capture",
-        data: { currentTabId: currentTab.id },
+        data: { currentTabId: currentTab.id, host: options.host, port: options.port },
       });
     } else {
       console.log("No Audio");
@@ -184,7 +185,7 @@ async function stopCapture() {
  */
 chrome.runtime.onMessage.addListener((message) => {
   if (message.action === "startCapture") {
-    startCapture(message.tabId);
+    startCapture(message);
   } else if (message.action === "stopCapture") {
     stopCapture();
   }

Audio-Transcription-Chrome/options.js

@@ -80,7 +80,7 @@ async function startRecord(option) {
       window.close();
     };
 
-    const socket = new WebSocket("ws://localhost:9090/");
+    const socket = new WebSocket(`ws://${option.host}:${option.port}/`);
     let isServerReady = false;
     socket.onopen = function(e) { 
       socket.send("handshake");

Audio-Transcription-Chrome/popup.html

@@ -11,5 +11,9 @@
     <div class="button" id="startCapture">Start Capture</div>
     <div class="button" id="stopCapture" disabled>Stop Capture</div>
   </div>
+  <div class="checkbox-container">
+    <input type="checkbox" id="useServerCheckbox">
+    <label for="useServerCheckbox">Use Collabora Whisper-Live Server</label>
+  </div>
 </body>
 </html>

Audio-Transcription-Chrome/popup.js

@@ -3,6 +3,8 @@ document.addEventListener("DOMContentLoaded", function () {
   const startButton = document.getElementById("startCapture");
   const stopButton = document.getElementById("stopCapture");
 
+  const useServerCheckbox = document.getElementById("useServerCheckbox");
+
   // Add click event listeners to the buttons
   startButton.addEventListener("click", startCapture);
   stopButton.addEventListener("click", stopCapture);
@@ -16,6 +18,13 @@ document.addEventListener("DOMContentLoaded", function () {
     }
   });
 
+  // Retrieve checkbox state from storage on popup open
+  chrome.storage.local.get("useServerState", ({ useServerState }) => {
+    if (useServerState !== undefined) {
+      useServerCheckbox.checked = useServerState;
+    }
+  });
+
   // Function to handle the start capture button click event
   async function startCapture() {
     // Ignore click if the button is disabled
@@ -27,7 +36,20 @@ document.addEventListener("DOMContentLoaded", function () {
     const currentTab = await getCurrentTab();
 
     // Send a message to the background script to start capturing
-    chrome.runtime.sendMessage({ action: "startCapture", tabId: currentTab.id }, () => {
+    let host = "localhost";
+    let port = "9090";
+    const useCollaboraServer = useServerCheckbox.checked;
+    if (useCollaboraServer){
+      host = "transcription.kurg.org"
+      port = "7090"
+    }
+
+    chrome.runtime.sendMessage(
+      { 
+        action: "startCapture", 
+        tabId: currentTab.id,
+        host: host,
+        port: port }, () => {
       // Update capturing state in storage and toggle the buttons
       chrome.storage.local.set({ capturingState: { isCapturing: true } }, () => {
         toggleCaptureButtons(true);
@@ -64,7 +86,14 @@ document.addEventListener("DOMContentLoaded", function () {
   function toggleCaptureButtons(isCapturing) {
     startButton.disabled = isCapturing;
     stopButton.disabled = !isCapturing;
+    useServerCheckbox.disabled = isCapturing; 
     startButton.classList.toggle("disabled", isCapturing);
     stopButton.classList.toggle("disabled", !isCapturing);
   }
+
+  // Save the checkbox state when it's toggled
+  useServerCheckbox.addEventListener("change", () => {
+    const useServerState = useServerCheckbox.checked;
+    chrome.storage.local.set({ useServerState });
+  });
 });

Audio-Transcription-Chrome/style.css

@@ -101,3 +101,7 @@ label {
   width: 30px;
   text-align: center;
 }
+
+.checkbox-container {
+  padding: 10px; 
+}

Audio-Transcription-Firefox/content.js

@@ -1,4 +1,3 @@
-console.log("Content script injected.");
 let socket = null;
 let isCapturing = false;
 let mediaStream = null;
@@ -39,8 +38,8 @@ function resampleTo16kHZ(audioData, origSampleRate = 44100) {
   return resampledData;
 }
 
-function startRecording() {
+function startRecording(host, port) {
-    socket = new WebSocket("ws://localhost:9090/");
+    socket = new WebSocket(`ws://${host}:${port}/`);
     socket.onopen = function(e) { 
       socket.send("handshake");
     };
@@ -210,7 +209,7 @@ browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
   const { action, data } = request;
   if (action === "startCapture") {
       isCapturing = true;
-      startRecording();
+      startRecording(data.host, data.port);
   } else if (action === "stopCapture") {
     
     isCapturing = false;

Audio-Transcription-Firefox/manifest.json

@@ -4,6 +4,7 @@
     "version": "1.0",
     "description": "Transcribe audio from any webpage.",
     "permissions": [
+      "storage",
       "activeTab",
       "<all_urls>"
     ],

Audio-Transcription-Firefox/popup.html

@@ -11,5 +11,9 @@
     <div class="button" id="startCapture">Start Capture</div>
     <div class="button" id="stopCapture" disabled>Stop Capture</div>
   </div>
+  <div class="checkbox-container">
+    <input type="checkbox" id="useServerCheckbox">
+    <label for="useServerCheckbox">Use Collabora Whisper-Live Server</label>
+  </div>
 </body>
 </html>

Audio-Transcription-Firefox/popup.js

@@ -2,11 +2,49 @@ document.addEventListener("DOMContentLoaded", function() {
   var startButton = document.getElementById("startCapture");
   var stopButton = document.getElementById("stopCapture");
 
+  const useServerCheckbox = document.getElementById("useServerCheckbox");
+  browser.storage.local.get("capturingState")
+    .then(function(result) {
+      var capturingState = result.capturingState;
+      if (capturingState && capturingState.isCapturing) {
+        toggleCaptureButtons(true);
+      } else {
+        toggleCaptureButtons(false);
+      }
+      // Enable the startButton
+      startButton.disabled = false;
+    })
+    .catch(function(error) {
+      console.error("Error retrieving capturing state:", error);
+      // Enable the startButton
+      startButton.disabled = false;
+    });
+  
+  browser.storage.local.get("useServerState", ({ useServerState }) => {
+    if (useServerState !== undefined) {
+      useServerCheckbox.checked = useServerState;
+    }
+  });
+
   startButton.addEventListener("click", function() {
+    let host = "localhost";
+    let port = "9090";
+    const useCollaboraServer = useServerCheckbox.checked;
+
+    if (useCollaboraServer){
+      host = "transcription.kurg.org"
+      port = "7090"
+    }
+
     browser.tabs.query({ active: true, currentWindow: true })
       .then(function(tabs) {
-        browser.tabs.sendMessage(tabs[0].id, { action: "startCapture" });
+        browser.tabs.sendMessage(
+          tabs[0].id, { action: "startCapture", data: {host, port} });
         toggleCaptureButtons(true);
+        browser.storage.local.set({ capturingState: { isCapturing: true } })
+          .catch(function(error) {
+            console.error("Error storing capturing state:", error);
+          });
       })
       .catch(function(error) {
         console.error("Error sending startCapture message:", error);
@@ -18,8 +56,11 @@ document.addEventListener("DOMContentLoaded", function() {
       .then(function(tabs) {
         browser.tabs.sendMessage(tabs[0].id, { action: "stopCapture" })
           .then(function(response) {
-            console.log(response);
             toggleCaptureButtons(false);
+            browser.storage.local.set({ capturingState: { isCapturing: false } })
+              .catch(function(error) {
+                console.error("Error storing capturing state:", error);
+              });
           })
           .catch(function(error) {
             console.error("Error sending stopCapture message:", error);
@@ -34,5 +75,14 @@ document.addEventListener("DOMContentLoaded", function() {
   function toggleCaptureButtons(isCapturing) {
     startButton.disabled = isCapturing;
     stopButton.disabled = !isCapturing;
+    useServerCheckbox.disabled = isCapturing; // Disable checkbox if capturing
+    startButton.classList.toggle("disabled", isCapturing);
+    stopButton.classList.toggle("disabled", !isCapturing);
   }
+
+  // Save the checkbox state when it's toggled
+  useServerCheckbox.addEventListener("change", () => {
+    const useServerState = useServerCheckbox.checked;
+    browser.storage.local.set({ useServerState });
+  });
 });

Audio-Transcription-Firefox/style.css

@@ -101,3 +101,7 @@ label {
   width: 30px;
   text-align: center;
 }
+
+.checkbox-container {
+  padding: 10px; 
+}