Update templates/index.html

templates/index.html

@@ -189,7 +189,7 @@
     </div>
 
     <div id="audio-recording-container">
-        <button id="audio-record-button" onclick="startRecording()">Start</button>
+        <button id="audio-record-button">Start</button>
     </div>
 
     <script>
@@ -259,58 +259,43 @@
             document.getElementById('menu-content').style.display = 'none';
         }
 
-        let isRecording = false;
         let mediaRecorder;
         let audioChunks = [];
-
-        function startRecording() {
-            const recordButton = document.getElementById('audio-record-button');
-
+        const recordButton = document.getElementById('audio-record-button');
+        let isRecording = false;
+        recordButton.addEventListener('click', () => {
             if (isRecording) {
-                // Stop recording
                 mediaRecorder.stop();
-                recordButton.style.backgroundColor = "#e1fceb";
-                recordButton.textContent = "Start";
-                isRecording = false;
+                recordButton.textContent = 'Start Recording';
+                recordButton.classList.remove('recording');
             } else {
-                // Start recording
                 navigator.mediaDevices.getUserMedia({ audio: true })
                     .then(stream => {
                         mediaRecorder = new MediaRecorder(stream);
                         mediaRecorder.start();
-                        mediaRecorder.ondataavailable = event => {
+                        mediaRecorder.addEventListener('dataavailable', event => {
                             audioChunks.push(event.data);
-                        };
-                        mediaRecorder.onstop = () => {
+                        });
+                        mediaRecorder.addEventListener('stop', () => {
                             const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-                            sendAudioToServer(audioBlob);
-                            audioChunks = []; // Reset for next recording
-                        };
-
-                        recordButton.style.backgroundColor = "#ff6666";
-                        recordButton.textContent = "STOP";
-                        isRecording = true;
+                            const formData = new FormData();
+                            formData.append('file', audioBlob, 'audio.wav');
+                            fetch('/upload', {
+                                method: 'POST',
+                                body: formData
+                            })
+                            .then(response => response.json())
+                            .catch(error => {
+                                console.error('Error:', error);
+                            });
+                            audioChunks = [];
+                        });
+                        recordButton.textContent = 'Stop Recording';
+                        recordButton.classList.add('recording');
                     });
             }
-        }
-
-        function sendAudioToServer(audioBlob) {
-            const formData = new FormData();
-            formData.append('audio', audioBlob);
-
-            fetch('/process_audio', {
-                method: 'POST',
-                body: formData
-            })
-            .then(response => response.text())
-            .then(text => {
-                console.log("Transcribed Text: ", text);
-                // You can display the transcribed text in the chat if needed
-            })
-            .catch(error => {
-                console.error("Error:", error);
-            });
-        }
+            isRecording = !isRecording;
+        });
 
     </script>
 </body>