add multilingual, language & task option in Chrome extension

Audio-Transcription-Chrome/background.js

@@ -150,7 +150,14 @@ async function startCapture(options) {
 
       await sendMessageToTab(optionTab.id, {
         type: "start_capture",
-        data: { currentTabId: currentTab.id, host: options.host, port: options.port },
+        data: { 
+          currentTabId: currentTab.id, 
+          host: options.host, 
+          port: options.port, 
+          multilingual: options.useMultilingual,
+          language: options.language,
+          task: options.task
+        },
       });
     } else {
       console.log("No Audio");

Audio-Transcription-Chrome/options.js

@@ -79,11 +79,16 @@ async function startRecord(option) {
     stream.oninactive = () => {
       window.close();
     };
-
     const socket = new WebSocket(`ws://${option.host}:${option.port}/`);
     let isServerReady = false;
     socket.onopen = function(e) { 
-      socket.send("handshake");
+      socket.send(
+        JSON.stringify({
+          multilingual: option.multilingual,
+          language: option.language,
+          task: option.task
+        })
+      );
     };
 
     socket.onmessage = async (event) => {

Audio-Transcription-Chrome/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-Chrome/popup.js

@@ -4,6 +4,11 @@ document.addEventListener("DOMContentLoaded", function () {
   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;
 
   // Add click event listeners to the buttons
   startButton.addEventListener("click", startCapture);
@@ -25,6 +30,28 @@ document.addEventListener("DOMContentLoaded", function () {
     }
   });
 
+  chrome.storage.local.get("useMultilingualModelState", ({ useMultilingualModelState }) => {
+    if (useMultilingualModelState !== undefined) {
+      useMultilingualCheckbox.checked = useMultilingualModelState;
+      languageDropdown.disabled = !useMultilingualModelState;
+      taskDropdown.disabled = !useMultilingualModelState;
+    }
+  });
+
+  chrome.storage.local.get("selectedLanguage", ({ selectedLanguage: storedLanguage }) => {
+    if (storedLanguage !== undefined) {
+      languageDropdown.value = storedLanguage;
+      selectedLanguage = storedLanguage;
+    }
+  });
+
+  chrome.storage.local.get("selectedTask", ({ selectedTask: storedTask }) => {
+    if (storedTask !== undefined) {
+      taskDropdown.value = storedTask;
+      selectedTask = storedTask;
+    }
+  });
+
   // Function to handle the start capture button click event
   async function startCapture() {
     // Ignore click if the button is disabled
@@ -49,12 +76,17 @@ document.addEventListener("DOMContentLoaded", function () {
         action: "startCapture", 
         tabId: currentTab.id,
         host: host,
-        port: port }, () => {
+        port: port,
-      // Update capturing state in storage and toggle the buttons
+        useMultilingual: useMultilingualCheckbox.checked,
-      chrome.storage.local.set({ capturingState: { isCapturing: true } }, () => {
+        language: selectedLanguage,
-        toggleCaptureButtons(true);
+        task: selectedTask
-      });
+      }, () => {
-    });
+        // Update capturing state in storage and toggle the buttons
+        chrome.storage.local.set({ capturingState: { isCapturing: true } }, () => {
+          toggleCaptureButtons(true);
+        });
+      }
+    );
   }
 
   // Function to handle the stop capture button click event
@@ -96,4 +128,26 @@ document.addEventListener("DOMContentLoaded", function () {
     const useServerState = useServerCheckbox.checked;
     chrome.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;
+    }
+    chrome.storage.local.set({ useMultilingualModelState });
+  });
+
+  languageDropdown.addEventListener('change', function() {
+    selectedLanguage = languageDropdown.value;
+    chrome.storage.local.set({ selectedLanguage });
+  });
+
+  taskDropdown.addEventListener('change', function() {
+    selectedTask = taskDropdown.value;
+    chrome.storage.local.set({ selectedTask });
+  });
 });

Audio-Transcription-Chrome/style.css

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