Update templates/index.html

templates/index.html

@@ -16,24 +16,44 @@
         <label for="email">Email</label>
         <input type="text" id="email" placeholder="Your email will appear here..." readonly>
 
-        <button id="mic-button" onclick="recordAudio()">
-            🎙️ Click to Speak
-        </button>
+        <p class="instructions">Voice interaction in progress...</p>
 
-        <p class="instructions">Please say your name when ready</p>
-
-        <audio id="audio-player" controls></audio>
+        <audio id="audio-player" autoplay></audio>
     </div>
 
     <script>
-        async function playWelcomeAudio() {
-            let response = await fetch("/get_prompt");
-            let data = await response.json();
-            document.getElementById("audio-player").src = data.audio_url;
-            document.getElementById("audio-player").play();
+        async function startVoiceInteraction() {
+            await fetch("/start_interaction"); 
+
+            let audioPlayer = document.getElementById("audio-player");
+
+            // Step 1: Welcome Message
+            audioPlayer.src = "/static/welcome.mp3";
+            audioPlayer.play();
+            await new Promise(resolve => setTimeout(resolve, 3000)); 
+
+            // Step 2: Ask for Name
+            audioPlayer.src = "/static/ask_name.mp3";
+            audioPlayer.play();
+            await new Promise(resolve => setTimeout(resolve, 3000)); 
+
+            let name = await recordAndProcessAudio();
+            document.getElementById("name").value = name;
+
+            // Step 3: Ask for Email
+            audioPlayer.src = "/static/ask_email.mp3";
+            audioPlayer.play();
+            await new Promise(resolve => setTimeout(resolve, 3000)); 
+
+            let email = await recordAndProcessAudio();
+            document.getElementById("email").value = email;
+
+            // Step 4: Thank You Message
+            audioPlayer.src = "/static/thank_you.mp3";
+            audioPlayer.play();
         }
 
-        async function recordAudio() {
+        async function recordAndProcessAudio() {
             let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
             let mediaRecorder = new MediaRecorder(stream);
             let audioChunks = [];
@@ -42,31 +62,27 @@
                 audioChunks.push(event.data);
             };
 
-            mediaRecorder.onstop = async () => {
-                let audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-                let formData = new FormData();
-                formData.append("audio", audioBlob, "input.wav");
+            return new Promise(resolve => {
+                mediaRecorder.onstop = async () => {
+                    let audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                    let formData = new FormData();
+                    formData.append("audio", audioBlob, "input.wav");
 
-                let response = await fetch("/process_audio", {
-                    method: "POST",
-                    body: formData
-                });
+                    let response = await fetch("/process_audio", {
+                        method: "POST",
+                        body: formData
+                    });
 
-                let result = await response.json();
-                document.getElementById("name").value = result.text || result.error;
-
-                // Prompt for Email after Name
-                setTimeout(() => {
-                    let emailPrompt = new Audio("/static/email_prompt.mp3");
-                    emailPrompt.play();
-                }, 2000);
-            };
+                    let result = await response.json();
+                    resolve(result.text || "Error capturing speech");
+                };
 
-            mediaRecorder.start();
-            setTimeout(() => mediaRecorder.stop(), 4000);
+                mediaRecorder.start();
+                setTimeout(() => mediaRecorder.stop(), 4000);
+            });
         }
 
-        window.onload = playWelcomeAudio;
+        window.onload = startVoiceInteraction;
     </script>
 </body>
 </html>