Spaces:

yasserrmd
/

ggwave

Sleeping

App Files Files Community

yasserrmd commited on Feb 27

Commit

4fb332f

verified ·

1 Parent(s): 976e0aa

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +173 -150

static/index.html CHANGED Viewed

@@ -1,3 +1,4 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -143,176 +144,198 @@
     <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 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());
-            }
-            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 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",
-                        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();
-                        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.";
                 }
-                if (audioStream) {
-                    audioStream.getTracks().forEach(track => track.stop());
-                }
-            };
-            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...";
-            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();
-    }
-});
-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);
         }
-    });
-}
-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;
-    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);
-    for (let i = 0; i < buffer.numberOfChannels; i++) {
-        channels.push(buffer.getChannelData(i));
-    }
-    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>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         let mediaRecorder;
+        let audioChunks = [];
+        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 {
+                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                    mediaRecorder = new MediaRecorder(stream, { 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.";
+                        }
+                    };
+                    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();
+            }
+        });
+        generateButton.addEventListener("click", async () => {
+            const text = messageInput.value.trim();
+            if (text) {
+                statusMessage.textContent = "Encoding data to sound...";
                 try {
+                    const response = await fetch("/tts/", {
                         method: "POST",
+                        headers: {
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify({ text })
                     });
                     if (response.ok) {
                         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();
                     } else {
+                        statusMessage.textContent = "Error encoding data. Please try again.";
                     }
                 } catch (error) {
                     console.error("Error:", error);
+                    statusMessage.textContent = "Error encoding 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);
                 }
+            });
         }
+        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;
+            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);
+            for (let i = 0; i < buffer.numberOfChannels; i++)
+                channels.push(buffer.getChannelData(i));
+            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>