Fix: Initial runtime errors with integration

index.html

@@ -22,7 +22,7 @@
     <script>
         const startButton = document.getElementById('startButton');
         const stopButton = document.getElementById('stopButton');
-        const statusDiv = document.getElementById('status'); // Corrected from status to statusDiv
+        const status = document.getElementById('status');
         let socket;
         let mediaRecorder;
         let audioContext;
@@ -32,11 +32,11 @@
         const connectWebSocket = () => {
             const proto = window.location.protocol === "https:" ? "wss:" : "ws:";
             const wsUri = `${proto}//${window.location.host}/ws`;
-            statusDiv.textContent = `Status: Connecting to ${wsUri}...`;
+            status.textContent = `Status: Connecting to ${wsUri}...`;
             socket = new WebSocket(wsUri);
 
             socket.onopen = () => {
-                statusDiv.textContent = 'Status: Connected. Ready to start.';
+                status.textContent = 'Status: Connected. Ready to start.';
                 startButton.disabled = false;
             };
 
@@ -64,14 +64,14 @@
             };
 
             socket.onclose = () => {
-                statusDiv.textContent = 'Status: Disconnected';
+                status.textContent = 'Status: Disconnected. Please refresh the page.';
                 startButton.disabled = false; // Allow user to try starting again
                 stopButton.disabled = true; 
             };
 
             socket.onerror = (error) => {
                 console.error("WebSocket Error:", error);
-                statusDiv.textContent = 'Status: Connection error';
+                status.textContent = 'Status: Connection error. Check console for details.';
             };
         };
 
@@ -91,7 +91,7 @@
         };
 
         startButton.onclick = async () => {
-            // AudioContext must be resumed by a user gesture.
+            // AudioContext must be created or resumed by a user gesture.
             if (!audioContext) {
                 audioContext = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 16000 });
             } else if (audioContext.state === 'suspended') {
@@ -110,11 +110,11 @@
 
                     startButton.disabled = true;
                     stopButton.disabled = false;
-                    statusDiv.textContent = 'Status: Translating...';
+                    status.textContent = 'Status: Translating...';
                 })
                 .catch(err => {
                     console.error('Error getting user media:', err);
-                    statusDiv.textContent = 'Error: Could not access microphone.';
+                    status.textContent = 'Error: Could not access microphone.';
                 });
         };
 
@@ -126,7 +126,7 @@
             // The user might want to start and stop multiple times in one session.
             startButton.disabled = false;
             stopButton.disabled = true;
-            statusDiv.textContent = 'Status: Stopped. Press Start to translate again.';
+            status.textContent = 'Status: Stopped. Press Start to translate again.';
         };
 
         window.onload = () => {