if websocket connection fails, frontend does not allow recording

src/live_transcription.html

@@ -101,11 +101,11 @@
   <div id="transcriptions"></div>
 
   <script>
-    let isRecording = false,
+    let isRecording = false;
-      websocket,
+    let websocket = null;
-      recorder,
+    let recorder = null;
-      chunkDuration = 1000,
+    let chunkDuration = 1000;
-      websocketUrl = "ws://localhost:8000/asr";
+    let websocketUrl = "ws://localhost:8000/asr";
 
     // Tracks whether the user voluntarily closed the WebSocket
     let userClosing = false;
@@ -137,31 +137,40 @@
       statusText.textContent = "WebSocket URL updated. Ready to connect.";
     });
 
+    /**
+     * Opens webSocket connection. 
+     * returns a Promise that resolves when the connection is open.
+     * rejects if there was an error.
+     */
     function setupWebSocket() {
+      return new Promise((resolve, reject) => {
         try {
           websocket = new WebSocket(websocketUrl);
         } catch (error) {
           statusText.textContent =
             "Invalid WebSocket URL. Please check the URL and try again.";
-        throw error;
+          reject(error);
+          return;
         }
 
         websocket.onopen = () => {
           statusText.textContent = "Connected to server";
+          resolve();
         };
 
         websocket.onclose = (event) => {
+          // If we manually closed it, we say so
           if (userClosing) {
             statusText.textContent = "WebSocket closed by user.";
           } else {
-          statusText.textContent = "Disconnected from server (unexpected).";
+            statusText.textContent = "Disconnected from the websocket server. If this is the first launch, the model may be downloading in the backend. Check the API logs for more information.";
           }
           userClosing = false;
         };
 
         websocket.onerror = () => {
           statusText.textContent = "Error connecting to WebSocket";
-        stopRecording();
+          reject(new Error("Error connecting to WebSocket"));
         };
 
         websocket.onmessage = (event) => {
@@ -177,6 +186,7 @@
             <span class="buffer">${buffer}</span>
           `;
         };
+      });
     }
 
     async function startRecording() {
@@ -200,12 +210,18 @@
     function stopRecording() {
       userClosing = true;
 
-      recorder?.stop();
+      // Stop the recorder if it exists
+      if (recorder) {
+        recorder.stop();
         recorder = null;
+      }
       isRecording = false;
 
-      websocket?.close();
+      // Close the websocket if it exists
+      if (websocket) {
+        websocket.close();
         websocket = null;
+      }
 
       updateUI();
     }
@@ -216,12 +232,12 @@
         transcriptionsDiv.innerHTML = "";
 
         try {
-          setupWebSocket();
+          await setupWebSocket();
-        } catch (err) {
-          return;
-        }
-
           await startRecording();
+        } catch (err) {
+          statusText.textContent =
+            "Could not connect to WebSocket or access mic. Recording aborted.";
+        }
       } else {
         stopRecording();
       }