add multilingual, language & task option in Firefox extension

Audio-Transcription-Firefox/content.js

@@ -38,10 +38,16 @@ function resampleTo16kHZ(audioData, origSampleRate = 44100) {
   return resampledData;
 }
 
-function startRecording(host, port) {
+function startRecording(data) {
-    socket = new WebSocket(`ws://${host}:${port}/`);
+    socket = new WebSocket(`ws://${data.host}:${data.port}/`);
     socket.onopen = function(e) { 
-      socket.send("handshake");
+      socket.send(
+        JSON.stringify({
+            multilingual: data.useMultilingual,
+            language: data.language,
+            task: data.task
+        })
+      );
     };
 
     let isServerReady = false;
@@ -209,7 +215,7 @@ browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
   const { action, data } = request;
   if (action === "startCapture") {
       isCapturing = true;
-      startRecording(data.host, data.port);
+      startRecording(data);
   } else if (action === "stopCapture") {
     
     isCapturing = false;

Audio-Transcription-Firefox/popup.html

@@ -15,5 +15,121 @@
     <input type="checkbox" id="useServerCheckbox">
     <label for="useServerCheckbox">Use Collabora Whisper-Live Server</label>
   </div>
+  <div class="checkbox-container">
+    <input type="checkbox" id="useMultilingualCheckbox">
+    <label for="useMultilingualCheckbox">Use Multilingual Model</label>
+  </div>
+  <div class="dropdown-container">
+    <label for="languageDropdown">Select Language:</label>
+    <select id="languageDropdown" disabled>
+      <option value="">Select Language</option>
+      <option value="zh">Chinese</option>
+      <option value="de">German</option>
+      <option value="es">Spanish</option>
+      <option value="ru">Russian</option>
+      <option value="ko">Korean</option>
+      <option value="fr">French</option>
+      <option value="ja">Japanese</option>
+      <option value="pt">Portuguese</option>
+      <option value="tr">Turkish</option>
+      <option value="pl">Polish</option>
+      <option value="ca">Catalan</option>
+      <option value="nl">Dutch</option>
+      <option value="ar">Arabic</option>
+      <option value="sv">Swedish</option>
+      <option value="it">Italian</option>
+      <option value="id">Indonesian</option>
+      <option value="hi">Hindi</option>
+      <option value="fi">Finnish</option>
+      <option value="vi">Vietnamese</option>
+      <option value="he">Hebrew</option>
+      <option value="uk">Ukrainian</option>
+      <option value="el">Greek</option>
+      <option value="ms">Malay</option>
+      <option value="cs">Czech</option>
+      <option value="ro">Romanian</option>
+      <option value="da">Danish</option>
+      <option value="hu">Hungarian</option>
+      <option value="ta">Tamil</option>
+      <option value="no">Norwegian</option>
+      <option value="th">Thai</option>
+      <option value="ur">Urdu</option>
+      <option value="hr">Croatian</option>
+      <option value="bg">Bulgarian</option>
+      <option value="lt">Lithuanian</option>
+      <option value="la">Latin</option>
+      <option value="mi">Maori</option>
+      <option value="ml">Malayalam</option>
+      <option value="cy">Welsh</option>
+      <option value="sk">Slovak</option>
+      <option value="te">Telugu</option>
+      <option value="fa">Persian</option>
+      <option value="lv">Latvian</option>
+      <option value="bn">Bengali</option>
+      <option value="sr">Serbian</option>
+      <option value="az">Azerbaijani</option>
+      <option value="sl">Slovenian</option>
+      <option value="kn">Kannada</option>
+      <option value="et">Estonian</option>
+      <option value="mk">Macedonian</option>
+      <option value="br">Breton</option>
+      <option value="eu">Basque</option>
+      <option value="is">Icelandic</option>
+      <option value="hy">Armenian</option>
+      <option value="ne">Nepali</option>
+      <option value="mn">Mongolian</option>
+      <option value="bs">Bosnian</option>
+      <option value="kk">Kazakh</option>
+      <option value="sq">Albanian</option>
+      <option value="sw">Swahili</option>
+      <option value="gl">Galician</option>
+      <option value="mr">Marathi</option>
+      <option value="pa">Punjabi</option>
+      <option value="si">Sinhala</option>
+      <option value="km">Khmer</option>
+      <option value="sn">Shona</option>
+      <option value="yo">Yoruba</option>
+      <option value="so">Somali</option>
+      <option value="af">Afrikaans</option>
+      <option value="oc">Occitan</option>
+      <option value="ka">Georgian</option>
+      <option value="be">Belarusian</option>
+      <option value="tg">Tajik</option>
+      <option value="sd">Sindhi</option>
+      <option value="gu">Gujarati</option>
+      <option value="am">Amharic</option>
+      <option value="yi">Yiddish</option>
+      <option value="lo">Lao</option>
+      <option value="uz">Uzbek</option>
+      <option value="fo">Faroese</option>
+      <option value="ht">Haitian Creole</option>
+      <option value="ps">Pashto</option>
+      <option value="tk">Turkmen</option>
+      <option value="nn">Nynorsk</option>
+      <option value="mt">Maltese</option>
+      <option value="sa">Sanskrit</option>
+      <option value="lb">Luxembourgish</option>
+      <option value="my">Myanmar</option>
+      <option value="bo">Tibetan</option>
+      <option value="tl">Tagalog</option>
+      <option value="mg">Malagasy</option>
+      <option value="as">Assamese</option>
+      <option value="tt">Tatar</option>
+      <option value="haw">Hawaiian</option>
+      <option value="ln">Lingala</option>
+      <option value="ha">Hausa</option>
+      <option value="ba">Bashkir</option>
+      <option value="jw">Javanese</option>
+      <option value="su">Sundanese</option>
+    </select>
+  </div>
+  <div class="dropdown-container">
+    <label for="taskDropdown">Select task:</label>
+    <select id="taskDropdown" disabled>
+      <option value="">Select Task</option>
+      <option value="transcribe" selected>Transcribe</option>
+      <option value="translate">Translate</option>
+    </select>
+  </div>
 </body>
 </html>

Audio-Transcription-Firefox/popup.js

@@ -1,11 +1,17 @@
 document.addEventListener("DOMContentLoaded", function() {
-  var startButton = document.getElementById("startCapture");
+  const startButton = document.getElementById("startCapture");
-  var stopButton = document.getElementById("stopCapture");
+  const stopButton = document.getElementById("stopCapture");
 
   const useServerCheckbox = document.getElementById("useServerCheckbox");
+  const useMultilingualCheckbox = document.getElementById('useMultilingualCheckbox');
+  const languageDropdown = document.getElementById('languageDropdown');
+  const taskDropdown = document.getElementById('taskDropdown');
+  let selectedLanguage = undefined;
+  let selectedTask = taskDropdown.value;
+
   browser.storage.local.get("capturingState")
     .then(function(result) {
-      var capturingState = result.capturingState;
+      const capturingState = result.capturingState;
       if (capturingState && capturingState.isCapturing) {
         toggleCaptureButtons(true);
       } else {
@@ -26,6 +32,28 @@ document.addEventListener("DOMContentLoaded", function() {
     }
   });
 
+  browser.storage.local.get("useMultilingualModelState", ({ useMultilingualModelState }) => {
+    if (useMultilingualModelState !== undefined) {
+      useMultilingualCheckbox.checked = useMultilingualModelState;
+      languageDropdown.disabled = !useMultilingualModelState;
+      taskDropdown.disabled = !useMultilingualModelState;
+    }
+  });
+
+  browser.storage.local.get("selectedLanguage", ({ selectedLanguage: storedLanguage }) => {
+    if (storedLanguage !== undefined) {
+      languageDropdown.value = storedLanguage;
+      selectedLanguage = storedLanguage;
+    }
+  });
+
+  browser.storage.local.get("selectedTask", ({ selectedTask: storedTask }) => {
+    if (storedTask !== undefined) {
+      taskDropdown.value = storedTask;
+      selectedTask = storedTask;
+    }
+  });
+
   startButton.addEventListener("click", function() {
     let host = "localhost";
     let port = "9090";
@@ -39,7 +67,17 @@ document.addEventListener("DOMContentLoaded", function() {
     browser.tabs.query({ active: true, currentWindow: true })
       .then(function(tabs) {
         browser.tabs.sendMessage(
-          tabs[0].id, { action: "startCapture", data: {host, port} });
+          tabs[0].id, 
+          { 
+            action: "startCapture", 
+            data: {
+              host: host,
+              port: port,
+              useMultilingual: useMultilingualCheckbox.checked,
+              language: selectedLanguage,
+              task: selectedTask
+            } 
+          });
         toggleCaptureButtons(true);
         browser.storage.local.set({ capturingState: { isCapturing: true } })
           .catch(function(error) {
@@ -85,4 +123,26 @@ document.addEventListener("DOMContentLoaded", function() {
     const useServerState = useServerCheckbox.checked;
     browser.storage.local.set({ useServerState });
   });
+
+  useMultilingualCheckbox.addEventListener('change', function() {
+    const useMultilingualModelState = useMultilingualCheckbox.checked;
+    if (useMultilingualModelState) {
+      languageDropdown.disabled = false;
+      taskDropdown.disabled = false;
+    } else {
+      languageDropdown.disabled = true;
+      taskDropdown.disabled = true;
+    }
+    browser.storage.local.set({ useMultilingualModelState });
+  });
+
+  languageDropdown.addEventListener('change', function() {
+    selectedLanguage = languageDropdown.value;
+    browser.storage.local.set({ selectedLanguage });
+  });
+
+  taskDropdown.addEventListener('change', function() {
+    selectedTask = taskDropdown.value;
+    browser.storage.local.set({ selectedTask });
+  });
 });

Audio-Transcription-Firefox/style.css

@@ -105,3 +105,7 @@ label {
 .checkbox-container {
   padding: 10px; 
 }
+
+.dropdown-container {
+  padding: 10px; 
+}