fix websocket config timing issue

app/static/index.html

@@ -145,7 +145,7 @@
     };
 
     let orig_sample_rate;
-    const ws = new WebSocket("wss://" + location.host + "/ws");
+    let ws;
 
     const vol = document.getElementById("vol");
     const partial = document.getElementById("partial");
@@ -157,7 +157,7 @@
     function updateModelInfo() {
       const meta = MODEL_METADATA[modelSelect.value];
       if (Array.isArray(meta.language)) {
-        modelLangs.textContent = meta.language.join(', ');
+        modelLangs.textContent = meta.language.join(", ");
       } else {
         modelLangs.textContent = meta.language;
       }
@@ -165,21 +165,36 @@
     }
 
     function sendConfig() {
-      ws.send(JSON.stringify({
-        type: "config",
-        sampleRate: orig_sample_rate,
-        model: modelSelect.value,
-        precision: precisionSelect.value
-      }));
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({
+          type: "config",
+          sampleRate: orig_sample_rate,
+          model: modelSelect.value,
+          precision: precisionSelect.value
+        }));
+      } else {
+        console.warn("WebSocket not open yet. Cannot send config.");
+      }
     }
 
     navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
       const context = new AudioContext();
       orig_sample_rate = context.sampleRate;
+      updateModelInfo();
 
-      ws.onopen = () => {
-        updateModelInfo();
-        sendConfig();
+      // Now that we know the sample rate, open the WS
+      ws = new WebSocket(`wss://${location.host}/ws`);
+      ws.onopen = () => sendConfig();
+      ws.onerror = err => console.error("WebSocket error:", err);
+      ws.onclose = () => console.log("WebSocket closed");
+      ws.onmessage = e => {
+        const msg = JSON.parse(e.data);
+        if (msg.volume !== undefined) {
+          vol.value = Math.min(msg.volume * 20.0, 1.0);
+        }
+        if (msg.partial) {
+          partial.textContent = msg.partial;
+        }
       };
 
       modelSelect.addEventListener("change", () => {
@@ -188,28 +203,14 @@
       });
       precisionSelect.addEventListener("change", sendConfig);
 
-      ws.onerror = err => console.error("WebSocket error:", err);
-      ws.onclose = () => console.log("WebSocket closed");
-
       const source = context.createMediaStreamSource(stream);
       const processor = context.createScriptProcessor(4096, 1, 1);
       source.connect(processor);
       processor.connect(context.destination);
-
       processor.onaudioprocess = e => {
         const input = e.inputBuffer.getChannelData(0);
         ws.send(new Float32Array(input).buffer);
       };
-
-      ws.onmessage = e => {
-        const msg = JSON.parse(e.data);
-        if (msg.volume !== undefined) {
-          vol.value = Math.min(msg.volume * 20.0, 1.0);
-        }
-        if (msg.partial) {
-          partial.textContent = msg.partial;
-        }
-      };
     });
   </script>
 </body>