Spaces:

yasserrmd
/

ggwave

Sleeping

App Files Files Community

yasserrmd commited on Feb 25

Commit

5398c25

verified ·

1 Parent(s): cac37fa

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +203 -42

static/index.html CHANGED Viewed

@@ -4,65 +4,226 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Voice Chat Interface</title>
 </head>
 <body>
-    <h1>Voice Chat</h1>
-    <button id="recordButton">Start Listening</button>
-    <button id="generateButton">Generate Speech</button>
-    <audio id="audioPlayer" controls></audio>
     <script>
         let mediaRecorder;
         let audioChunks = [];
-        document.getElementById("recordButton").addEventListener("click", async () => {
             if (!mediaRecorder || mediaRecorder.state === "inactive") {
-                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 () => {
-                    const audioBlob = new Blob(audioChunks, { type: "audio/webm" });
-                    const wavBlob = await convertWebMToWav(audioBlob);
-                    const formData = new FormData();
-                    formData.append("file", wavBlob, "recording.wav");
-                    const response = await fetch("/chat/", {
-                        method: "POST",
-                        body: formData
-                    });
-                    const audioData = await response.blob();
-                    document.getElementById("audioPlayer").src = URL.createObjectURL(audioData);
-                };
-                audioChunks = [];
-                mediaRecorder.start();
-                setTimeout(() => mediaRecorder.stop(), 5000);
             }
         });
-        document.getElementById("generateButton").addEventListener("click", async () => {
             const text = prompt("Enter text to convert to speech:");
             if (text) {
-                const response = await fetch("/tts/", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ text })
-                });
-                const audioData = await response.blob();
-                document.getElementById("audioPlayer").src = URL.createObjectURL(audioData);
             }
         });
         async function convertWebMToWav(blob) {
-            return new Promise(resolve => {
-                const reader = new FileReader();
-                reader.onload = function () {
-                    const audioContext = new AudioContext();
-                    audioContext.decodeAudioData(reader.result, buffer => {
-                        const wavBuffer = audioBufferToWav(buffer);
-                        resolve(new Blob([wavBuffer], { type: "audio/wav" }));
-                    });
-                };
-                reader.readAsArrayBuffer(blob);
             });
         }
@@ -116,4 +277,4 @@
         }
     </script>
 </body>
-</html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Voice Chat Interface</title>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+    <style>
+        body {
+            background-color: #f8f9fa;
+            padding-top: 30px;
+        }
+        .chat-container {
+            max-width: 600px;
+            margin: 0 auto;
+            background-color: white;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+            padding: 25px;
+        }
+        .btn-record {
+            background-color: #ff4b4b;
+            border-color: #ff4b4b;
+        }
+        .btn-record:hover {
+            background-color: #e43c3c;
+            border-color: #e43c3c;
+        }
+        .btn-record.recording {
+            animation: pulse 1.5s infinite;
+        }
+        .btn-generate {
+            background-color: #4c6ef5;
+            border-color: #4c6ef5;
+        }
+        .btn-generate:hover {
+            background-color: #3b5bdb;
+            border-color: #3b5bdb;
+        }
+        .icon-spacing {
+            margin-right: 8px;
+        }
+        .control-label {
+            font-size: 0.9rem;
+            color: #6c757d;
+            margin-bottom: 8px;
+        }
+        .audio-container {
+            background-color: #f1f3f5;
+            border-radius: 8px;
+            padding: 15px;
+            margin-top: 20px;
+        }
+        audio {
+            width: 100%;
+        }
+        .status-indicator {
+            font-size: 0.9rem;
+            margin-top: 10px;
+            height: 24px;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
+        }
+    </style>
 </head>
 <body>
+    <div class="container">
+        <div class="chat-container">
+            <h1 class="text-center mb-4">
+                <i class="bi bi-mic-fill text-primary"></i> Voice Chat
+            </h1>
+            <div class="row g-4">
+                <div class="col-md-6">
+                    <div class="d-grid">
+                        <p class="control-label text-center">Voice Recognition</p>
+                        <button id="recordButton" class="btn btn-record btn-lg text-white">
+                            <i class="bi bi-mic-fill icon-spacing"></i> Start Listening
+                        </button>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="d-grid">
+                        <p class="control-label text-center">Text to Speech</p>
+                        <button id="generateButton" class="btn btn-generate btn-lg text-white">
+                            <i class="bi bi-soundwave icon-spacing"></i> Generate Speech
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="audio-container">
+                <p class="control-label mb-2">Audio Playback</p>
+                <audio id="audioPlayer" controls></audio>
+                <div id="statusMessage" class="status-indicator text-center text-secondary"></div>
+            </div>
+        </div>
+    </div>
+    <!-- Bootstrap JS Bundle -->
+    <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");
+        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...";
+                        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);
+                            const formData = new FormData();
+                            formData.append("file", wavBlob, "recording.wav");
+                            const response = await fetch("/chat/", {
+                                method: "POST",
+                                body: formData
+                            });
+                            if (response.ok) {
+                                const audioData = await response.blob();
+                                document.getElementById("audioPlayer").src = URL.createObjectURL(audioData);
+                                statusMessage.textContent = "Response ready!";
+                            } else {
+                                statusMessage.textContent = "Error processing audio. Please try again.";
+                            }
+                        } catch (error) {
+                            console.error("Error:", error);
+                            statusMessage.textContent = "Error processing audio. 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 (5 seconds)...";
+                    // 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 = prompt("Enter text to convert to speech:");
             if (text) {
+                statusMessage.textContent = "Generating speech...";
+                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 = "Speech generated successfully!";
+                    } else {
+                        statusMessage.textContent = "Error generating speech. Please try again.";
+                    }
+                } catch (error) {
+                    console.error("Error:", error);
+                    statusMessage.textContent = "Error generating speech. Please try again.";
+                }
             }
         });
         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);
+                }
             });
         }
         }
     </script>
 </body>
+</html>