Update static/index.html

static/index.html

@@ -43,75 +43,65 @@
         let socket;
         let audioChunks = [];
         
-        async function initializeAudio() {
+function initializeAudio() {
+    function connect() {
+        socket = new WebSocket(`wss://${window.location.host}/ws`);
+        
+        socket.onopen = () => {
+            document.getElementById('status').textContent = 'Connected. Listening... (Say "Computer" to activate)';
+        };
+        
+        socket.onmessage = (event) => {
             try {
-                const stream = await navigator.mediaDevices.getUserMedia({ 
-                    audio: {
-                        sampleRate: 16000,
-                        channelCount: 1,
-                        echoCancellation: true,
-                        noiseSuppression: true
-                    }
-                });
-                
-                // Initialize WebSocket connection
-                socket = new WebSocket(`wss://${window.location.host}/ws`);
-
-
-                socket.onclose = () => {
-                    document.getElementById('status').textContent = 'Reconnecting...';
-                    setTimeout(initializeAudio, 1000); // Attempt reconnection
-                };
-              
-                socket.onmessage = (event) => {
-                    const data = JSON.parse(event.data);
-                    
-                    if (data.user_text) {
-                        addMessage('user', data.user_text);
-                        addMessage('assistant', `German: ${data.response_de}\nEnglish: ${data.response_en}`);
-                    }
-                    
-                    if (data.audio) {
-                        // Convert base64 audio to ArrayBuffer and play it
-                        const audio = new Audio(URL.createObjectURL(
-                            new Blob([new Uint8Array(atob(data.audio).split('').map(c => c.charCodeAt(0)))], 
-                            { type: 'audio/wav' })
-                        ));
-                        audio.play();
-                    }
-                };
-                
-                // Initialize MediaRecorder
-                mediaRecorder = new MediaRecorder(stream);
+                const data = JSON.parse(event.data);
                 
-                mediaRecorder.ondataavailable = (event) => {
-                    if (event.data.size > 0) {
-                        audioChunks.push(event.data);
-                    }
-                    
-                    // Send chunks to server
-                    if (audioChunks.length > 0) {
-                        const audioBlob = new Blob(audioChunks);
-                        audioBlob.arrayBuffer().then(buffer => {
-                            if (socket.readyState === WebSocket.OPEN) {
-                                socket.send(buffer);
-                            }
-                        });
-                        audioChunks = [];
-                    }
-                };
-                
-                // Start recording in chunks
-                mediaRecorder.start(2000); // Send 2 seconds of audio at a time
-                
-                document.getElementById('status').textContent = 'Listening... (Say "Computer" to activate)';
+                if (data.user_text) {
+                    addMessage('user', data.user_text);
+                    addMessage('assistant', `German: ${data.response_de}\nEnglish: ${data.response_en}`);
+                }
                 
+                if (data.audio) {
+                    // Convert base64 audio to ArrayBuffer and play it
+                    const audio = new Audio(URL.createObjectURL(
+                        new Blob([new Uint8Array(atob(data.audio).split('').map(c => c.charCodeAt(0)))], 
+                        { type: 'audio/wav' })
+                    ));
+                    audio.play();
+                }
             } catch (error) {
-                console.error('Error initializing audio:', error);
-                document.getElementById('status').textContent = 'Error initializing audio';
+                console.error('Error parsing WebSocket message:', error);
             }
-        }
+        };
         
+        socket.onclose = (event) => {
+            document.getElementById('status').textContent = 'Disconnected. Reconnecting...';
+            setTimeout(connect, 1000);  // Reconnect after 1 second
+        };
+        
+        socket.onerror = (error) => {
+            console.error('WebSocket error:', error);
+            document.getElementById('status').textContent = 'Connection error';
+        };
+    }
+    
+    connect();
+    
+    // Your existing audio initialization code
+    mediaRecorder.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                // Ensure we're sending 16-bit PCM audio
+                if (socket.readyState === WebSocket.OPEN) {
+                    socket.send(reader.result);
+                }
+            };
+            reader.readAsArrayBuffer(event.data);
+        }
+    };
+    
+    mediaRecorder.start(480);  // 30ms chunks for VAD
+}       
         function addMessage(sender, text) {
             const conversation = document.getElementById('conversation');
             const message = document.createElement('div');