Update static/index.html

static/index.html

@@ -143,209 +143,176 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         let mediaRecorder;
-        let audioChunks = [];
-        let audioStream;
-        const recordButton = document.getElementById("recordButton");
-        const generateButton = document.getElementById("generateButton");
-        const statusMessage = document.getElementById("statusMessage");
-        const messageInput = document.getElementById("messageInput");
-        const userMessageHeader = document.getElementById("userMessageHeader");
-        const llmResponseHeader = document.getElementById("llmResponseHeader");
-        const receivedData = document.getElementById("receivedData");
-        let recordingTimeout;
-        
-        recordButton.addEventListener("click", async () => {
-            if (!mediaRecorder || mediaRecorder.state === "inactive") {
-                try {
-                    // Stop any existing stream tracks before requesting a new one
-                    if (audioStream) {
-                        audioStream.getTracks().forEach(track => track.stop());
-                    }
-                    
-                    audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                    mediaRecorder = new MediaRecorder(audioStream, { mimeType: "audio/webm" });
-                    
-                    mediaRecorder.ondataavailable = event => audioChunks.push(event.data);
-                    
-                    mediaRecorder.onstop = async () => {
-                        statusMessage.textContent = "Processing audio data...";
-                        recordButton.innerHTML = '<i class="bi bi-mic-fill icon-spacing"></i> Start Listening';
-                        recordButton.classList.remove("recording");
-                        recordButton.classList.remove("btn-danger");
-                        recordButton.classList.add("btn-record");
-                        
-                        try {
-                            const audioBlob = new Blob(audioChunks, { type: "audio/webm" });
-                            const wavBlob = await convertWebMToWav(audioBlob);
-                            
-                            // This is the original code from your first implementation
-                            const formData = new FormData();
-                            formData.append("file", wavBlob, "recording.wav");
-                            
-                            const response = await fetch("/chat/", {
-                                method: "POST",
-                                body: formData
-                            });
-                            
-                            if (response.ok) {
-                                // Display response headers that we know are sent back from the endpoint
-                                const userMessage = response.headers.get("X-User-Message") || "No user message";
-                                const llmResponse = response.headers.get("X-LLM-Response") || "No response";
-                                
-                                // Update the header display
-                                userMessageHeader.innerHTML = `X-User-Message: <span class="text-primary">${userMessage}</span>`;
-                                llmResponseHeader.innerHTML = `X-LLM-Response: <span class="text-success">${llmResponse}</span>`;
-                                
-                                // Update received data
-                                receivedData.textContent = userMessage;
-                                
-                                // Get audio blob from response and play it
-                                const audioData = await response.blob();
-                                document.getElementById("audioPlayer").src = URL.createObjectURL(audioData);
-                                statusMessage.textContent = "Data decoded successfully!";
-                            } else {
-                                statusMessage.textContent = "Error processing audio data. Please try again.";
-                            }
-                        } catch (error) {
-                            console.error("Error:", error);
-                            statusMessage.textContent = "Error processing audio data. Please try again.";
-                        }
-                        
-                        // Clean up the audio tracks after processing is complete
-                        if (audioStream) {
-                            audioStream.getTracks().forEach(track => track.stop());
-                        }
-                    };
-                    
-                    audioChunks = [];
-                    mediaRecorder.start();
-                    
-                    recordButton.innerHTML = '<i class="bi bi-stop-fill icon-spacing"></i> Listening...';
-                    recordButton.classList.add("recording");
-                    recordButton.classList.remove("btn-record");
-                    recordButton.classList.add("btn-danger");
-                    statusMessage.textContent = "Listening for data transmission...";
-                    
-                    // Auto-stop after 5 seconds
-                    recordingTimeout = setTimeout(() => {
-                        if (mediaRecorder && mediaRecorder.state === "recording") {
-                            mediaRecorder.stop();
-                        }
-                    }, 5000);
-                } catch (error) {
-                    console.error("Error accessing microphone:", error);
-                    statusMessage.textContent = "Could not access microphone. Please check permissions.";
-                }
-            } else if (mediaRecorder.state === "recording") {
-                // Stop recording if already recording
-                clearTimeout(recordingTimeout);
-                mediaRecorder.stop();
+let audioChunks = [];
+let audioStream;
+const recordButton = document.getElementById("recordButton");
+const statusMessage = document.getElementById("statusMessage");
+const userMessageHeader = document.getElementById("userMessageHeader");
+const llmResponseHeader = document.getElementById("llmResponseHeader");
+const receivedData = document.getElementById("receivedData");
+const audioPlayer = document.getElementById("audioPlayer");
+let recordingTimeout;
+
+recordButton.addEventListener("click", async () => {
+    if (!mediaRecorder || mediaRecorder.state === "inactive") {
+        try {
+            if (audioStream) {
+                audioStream.getTracks().forEach(track => track.stop());
             }
-        });
-        
-        generateButton.addEventListener("click", async () => {
-            const text = messageInput.value.trim();
-            if (text) {
-                statusMessage.textContent = "Encoding data to sound...";
+
+            audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            mediaRecorder = new MediaRecorder(audioStream, { mimeType: "audio/webm" });
+            audioChunks = []; // Reset chunks
+
+            mediaRecorder.ondataavailable = event => {
+                if (event.data.size > 0) {
+                    audioChunks.push(event.data);
+                }
+            };
+
+            mediaRecorder.onstop = async () => {
+                if (audioChunks.length === 0) {
+                    statusMessage.textContent = "No audio recorded. Try again.";
+                    return;
+                }
+
+                statusMessage.textContent = "Processing audio data...";
+                recordButton.innerHTML = '<i class="bi bi-mic-fill icon-spacing"></i> Start Listening';
+                recordButton.classList.remove("recording", "btn-danger");
+                recordButton.classList.add("btn-record");
+
                 try {
-                    const response = await fetch("/tts/", {
+                    const audioBlob = new Blob(audioChunks, { type: "audio/webm" });
+                    const wavBlob = await convertWebMToWav(audioBlob);
+                    const wavFile = new File([wavBlob], "recording.wav", { type: "audio/wav" });
+
+                    const formData = new FormData();
+                    formData.append("file", wavFile);
+
+                    const response = await fetch("/chat/", {
                         method: "POST",
-                        headers: { 
-                            "Content-Type": "application/json"
-                        },
-                        body: JSON.stringify({ text })
+                        body: formData
                     });
-                    
+
                     if (response.ok) {
+                        const userMessage = response.headers.get("X-User-Message") || "No user message";
+                        const llmResponse = response.headers.get("X-LLM-Response") || "No response";
+
+                        userMessageHeader.innerHTML = `X-User-Message: <span class="text-primary">${userMessage}</span>`;
+                        llmResponseHeader.innerHTML = `X-LLM-Response: <span class="text-success">${llmResponse}</span>`;
+
+                        receivedData.textContent = userMessage;
                         const audioData = await response.blob();
-                        document.getElementById("audioPlayer").src = URL.createObjectURL(audioData);
-                        statusMessage.textContent = "Data encoded as sound. Ready to transmit!";
-                        // Auto-play option
-                        document.getElementById("audioPlayer").play();
+                        audioPlayer.src = URL.createObjectURL(audioData);
+                        statusMessage.textContent = "Data decoded successfully!";
                     } else {
-                        statusMessage.textContent = "Error encoding data. Please try again.";
+                        statusMessage.textContent = "Error processing audio data. Please try again.";
                     }
                 } catch (error) {
                     console.error("Error:", error);
-                    statusMessage.textContent = "Error encoding data. Please try again.";
+                    statusMessage.textContent = "Error processing audio data. Please try again.";
                 }
-            } else {
-                statusMessage.textContent = "Please enter a message to transmit.";
-            }
-        });
 
-        async function convertWebMToWav(blob) {
-            return new Promise((resolve, reject) => {
-                try {
-                    const reader = new FileReader();
-                    reader.onload = function () {
-                        const audioContext = new AudioContext();
-                        audioContext.decodeAudioData(reader.result)
-                            .then(buffer => {
-                                const wavBuffer = audioBufferToWav(buffer);
-                                resolve(new Blob([wavBuffer], { type: "audio/wav" }));
-                            })
-                            .catch(error => {
-                                console.error("Error decoding audio data:", error);
-                                reject(error);
-                            });
-                    };
-                    reader.readAsArrayBuffer(blob);
-                } catch (error) {
-                    console.error("Error in convertWebMToWav:", error);
-                    reject(error);
+                if (audioStream) {
+                    audioStream.getTracks().forEach(track => track.stop());
                 }
-            });
-        }
+            };
 
-        function audioBufferToWav(buffer) {
-            let numOfChan = buffer.numberOfChannels,
-                length = buffer.length * numOfChan * 2 + 44,
-                bufferArray = new ArrayBuffer(length),
-                view = new DataView(bufferArray),
-                channels = [],
-                sampleRate = buffer.sampleRate,
-                offset = 0,
-                pos = 0;
+            mediaRecorder.start();
+            recordButton.innerHTML = '<i class="bi bi-stop-fill icon-spacing"></i> Listening...';
+            recordButton.classList.add("recording", "btn-danger");
+            recordButton.classList.remove("btn-record");
+            statusMessage.textContent = "Listening for data transmission...";
 
-            setUint32(0x46464952); // "RIFF"
-            setUint32(length - 8);
-            setUint32(0x45564157); // "WAVE"
-            setUint32(0x20746d66); // "fmt " chunk
-            setUint32(16); // length = 16
-            setUint16(1); // PCM (uncompressed)
-            setUint16(numOfChan);
-            setUint32(sampleRate);
-            setUint32(sampleRate * 2 * numOfChan);
-            setUint16(numOfChan * 2);
-            setUint16(16); // bits per sample
-            setUint32(0x61746164); // "data" chunk
-            setUint32(length - pos - 4);
+            recordingTimeout = setTimeout(() => {
+                if (mediaRecorder.state === "recording") {
+                    mediaRecorder.stop();
+                }
+            }, 5000);
+        } catch (error) {
+            console.error("Error accessing microphone:", error);
+            statusMessage.textContent = "Could not access microphone. Please check permissions.";
+        }
+    } else if (mediaRecorder.state === "recording") {
+        clearTimeout(recordingTimeout);
+        mediaRecorder.stop();
+    }
+});
 
-            for (let i = 0; i < buffer.numberOfChannels; i++)
-                channels.push(buffer.getChannelData(i));
+async function convertWebMToWav(blob) {
+    return new Promise((resolve, reject) => {
+        try {
+            const reader = new FileReader();
+            reader.onload = function () {
+                const audioContext = new AudioContext();
+                audioContext.decodeAudioData(reader.result)
+                    .then(buffer => {
+                        const wavBuffer = audioBufferToWav(buffer);
+                        resolve(new Blob([wavBuffer], { type: "audio/wav" }));
+                    })
+                    .catch(error => {
+                        console.error("Error decoding audio data:", error);
+                        reject(error);
+                    });
+            };
+            reader.readAsArrayBuffer(blob);
+        } catch (error) {
+            console.error("Error in convertWebMToWav:", error);
+            reject(error);
+        }
+    });
+}
 
-            while (pos < length) {
-                for (let i = 0; i < numOfChan; i++) {
-                    let sample = Math.max(-1, Math.min(1, channels[i][offset]));
-                    sample = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
-                    setUint16(sample);
-                }
-                offset++;
-            }
+function audioBufferToWav(buffer) {
+    let numOfChan = buffer.numberOfChannels,
+        length = buffer.length * numOfChan * 2 + 44,
+        bufferArray = new ArrayBuffer(length),
+        view = new DataView(bufferArray),
+        channels = [],
+        sampleRate = buffer.sampleRate,
+        offset = 0,
+        pos = 0;
 
-            function setUint16(data) {
-                view.setUint16(pos, data, true);
-                pos += 2;
-            }
+    setUint32(0x46464952); // "RIFF"
+    setUint32(length - 8);
+    setUint32(0x45564157); // "WAVE"
+    setUint32(0x20746d66); // "fmt " chunk
+    setUint32(16);
+    setUint16(1);
+    setUint16(numOfChan);
+    setUint32(sampleRate);
+    setUint32(sampleRate * 2 * numOfChan);
+    setUint16(numOfChan * 2);
+    setUint16(16);
+    setUint32(0x61746164);
+    setUint32(length - pos - 4);
 
-            function setUint32(data) {
-                view.setUint32(pos, data, true);
-                pos += 4;
-            }
+    for (let i = 0; i < buffer.numberOfChannels; i++) {
+        channels.push(buffer.getChannelData(i));
+    }
 
-            return bufferArray;
+    while (pos < length) {
+        for (let i = 0; i < numOfChan; i++) {
+            let sample = Math.max(-1, Math.min(1, channels[i][offset]));
+            sample = sample < 0 ? sample * 0x8000 : sample * 0x7FFF;
+            setUint16(sample);
         }
+        offset++;
+    }
+
+    function setUint16(data) {
+        view.setUint16(pos, data, true);
+        pos += 2;
+    }
+
+    function setUint32(data) {
+        view.setUint32(pos, data, true);
+        pos += 4;
+    }
+
+    return bufferArray;
+}
+
     </script>
 </body>
 </html>