Update templates/index.html

templates/index.html

@@ -19,6 +19,7 @@
         <p id="status">Initializing...</p>
         <audio id="audio-player" autoplay></audio>
     </div>
+
     <script>
         async function playAudio(src) {
             const audioPlayer = document.getElementById('audio-player');
@@ -32,22 +33,31 @@
         async function recordAudio() {
             const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
             const mediaRecorder = new MediaRecorder(stream);
-            const audioChunks = [];
-
-            mediaRecorder.ondataavailable = event => {
-                audioChunks.push(event.data);
-            };
-
-            mediaRecorder.start();
-
-            await new Promise(resolve => setTimeout(resolve, 4000)); // Record for 4 seconds
-            mediaRecorder.stop();
+            let audioChunks = [];
 
             return new Promise(resolve => {
+                mediaRecorder.ondataavailable = event => {
+                    audioChunks.push(event.data);
+                };
+
                 mediaRecorder.onstop = () => {
                     const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
                     resolve(audioBlob);
                 };
+
+                mediaRecorder.start();
+
+                // Wait for user to stop speaking (detect silence)
+                let silenceTimeout = setTimeout(() => {
+                    mediaRecorder.stop();
+                }, 5000); // Max 5 seconds recording
+
+                navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
+                    stream.getTracks().forEach(track => {
+                        track.onmute = () => clearTimeout(silenceTimeout);
+                        track.onunmute = () => silenceTimeout = setTimeout(() => mediaRecorder.stop(), 2000);
+                    });
+                });
             });
         }
 
@@ -61,7 +71,7 @@
             });
 
             const result = await response.json();
-            return result.text || 'Unable to transcribe audio.';
+            return result.text || 'Error capturing speech';
         }
 
         async function startInteraction() {
@@ -75,7 +85,7 @@
             status.textContent = 'Asking for your name...';
             await playAudio('{{ url_for("static", filename="ask_name.mp3") }}');
 
-            status.textContent = 'Recording your name...';
+            status.textContent = 'Listening for your name...';
             const nameAudio = await recordAudio();
             const nameText = await transcribeAudio(nameAudio);
             nameInput.value = nameText;
@@ -83,7 +93,7 @@
             status.textContent = 'Asking for your email...';
             await playAudio('{{ url_for("static", filename="ask_email.mp3") }}');
 
-            status.textContent = 'Recording your email...';
+            status.textContent = 'Listening for your email...';
             const emailAudio = await recordAudio();
             const emailText = await transcribeAudio(emailAudio);
             emailInput.value = emailText;