VoiceMenu2sathish

Sleeping

App Files Files Community

geethareddy commited on Feb 1, 2025

Commit

ff7b68c

verified ·

1 Parent(s): 7467739

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +67 -56

templates/index.html CHANGED Viewed

@@ -3,84 +3,95 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Biryani Hub</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 </head>
 <body>
     <div class="container">
         <h1>Biryani Hub</h1>
-        <label for="name">Name</label>
-        <input type="text" id="name" placeholder="Your name will appear here..." readonly>
-        <label for="email">Email</label>
-        <input type="text" id="email" placeholder="Your email will appear here..." readonly>
-        <p class="instructions">Voice interaction in progress...</p>
-        <audio id="audio-player" autoplay></audio>
-    </div>
-    <script>
-        async function startVoiceInteraction() {
-            let audioPlayer = document.getElementById("audio-player");
-            // Step 1: Welcome Message
-            audioPlayer.src = "/static/welcome.mp3";
-            audioPlayer.play();
-            await new Promise(resolve => setTimeout(resolve, 2000));
-            // 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 recordAndProcessAudio() {
-            let stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            let mediaRecorder = new MediaRecorder(stream);
-            let audioChunks = [];
-            mediaRecorder.ondataavailable = event => {
-                audioChunks.push(event.data);
-            };
-            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 result = await response.json();
-                    resolve(result.text || "Error capturing speech");
-                };
-                mediaRecorder.start();
-                setTimeout(() => mediaRecorder.stop(), 4000);
-            });
         }
-        window.onload = startVoiceInteraction;
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Biryani Hub Registration</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 </head>
 <body>
     <div class="container">
         <h1>Biryani Hub</h1>
+        <label for="name">Name:</label>
+        <input type="text" id="name" readonly>
+        <label for="email">Email:</label>
+        <input type="text" id="email" readonly>
+        <p id="status">Initializing...</p>
+        <audio id="audio-player" autoplay></audio>
+    </div>
+    <script>
+        async function playAudio(src) {
+            const audioPlayer = document.getElementById('audio-player');
+            audioPlayer.src = src;
+            await audioPlayer.play();
+            return new Promise(resolve => {
+                audioPlayer.onended = resolve;
+            });
+        }
+        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();
+            return new Promise(resolve => {
+                mediaRecorder.onstop = () => {
+                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                    resolve(audioBlob);
+                };
+            });
+        }
+        async function transcribeAudio(audioBlob) {
+            const formData = new FormData();
+            formData.append('audio', audioBlob, 'input.wav');
+            const response = await fetch('/transcribe', {
+                method: 'POST',
+                body: formData
+            });
+            const result = await response.json();
+            return result.text || 'Unable to transcribe audio.';
+        }
+        async function startInteraction() {
+            const status = document.getElementById('status');
+            const nameInput = document.getElementById('name');
+            const emailInput = document.getElementById('email');
+            status.textContent = 'Playing welcome message...';
+            await playAudio('{{ url_for("static", filename="welcome.mp3") }}');
+            status.textContent = 'Asking for your name...';
+            await playAudio('{{ url_for("static", filename="ask_name.mp3") }}');
+            status.textContent = 'Recording your name...';
+            const nameAudio = await recordAudio();
+            const nameText = await transcribeAudio(nameAudio);
+            nameInput.value = nameText;
+            status.textContent = 'Asking for your email...';
+            await playAudio('{{ url_for("static", filename="ask_email.mp3") }}');
+            status.textContent = 'Recording your email...';
+            const emailAudio = await recordAudio();
+            const emailText = await transcribeAudio(emailAudio);
+            emailInput.value = emailText;
+            status.textContent = 'Playing thank you message...';
+            await playAudio('{{ url_for("static", filename="thank_you.mp3") }}');
+            status.textContent = 'Registration complete.';
         }
+        window.onload = startInteraction;
     </script>
 </body>
 </html>