Update templates/index.html

templates/index.html

@@ -8,7 +8,7 @@
     <style>
         body {
             font-family: 'Roboto', sans-serif;
-            background: linear-gradient(135deg, #f4c542, #ff8f6a); /* Light gradient background */
+            background: linear-gradient(135deg, #f4c542, #ff8f6a);
             margin: 0;
             display: flex;
             justify-content: center;
@@ -26,7 +26,7 @@
         h1 {
             font-size: 30px;
             font-weight: bold;
-            color: #ff6a00; /* Bright orange for title */
+            color: #ff6a00;
         }
         label {
             font-size: 18px;
@@ -79,65 +79,65 @@
         let isListening = false;
         let isNameCaptured = false;
 
-        // Initialize speech recognition
         if ('webkitSpeechRecognition' in window) {
             recognition = new webkitSpeechRecognition();
-            recognition.continuous = true;
-            recognition.interimResults = true;
+            recognition.continuous = false;  // Stop after capturing each input
+            recognition.interimResults = false;
             recognition.lang = 'en-US';
         } else {
             alert("Speech Recognition API is not supported in this browser.");
         }
 
-        // Function to speak the welcome message automatically when the page loads
-        function welcomeMessage() {
-            const welcomeMsg = "Welcome to Biryani Hub. Please say your name after the beep.";
-            const speech = new SpeechSynthesisUtterance(welcomeMsg);
+        function speak(text, callback) {
+            const speech = new SpeechSynthesisUtterance(text);
+            speech.onend = callback;  // Once the speech ends, call the next function
             window.speechSynthesis.speak(speech);
         }
 
-        // Function to start listening after the welcome message
-        function startListening() {
+        function startListeningForName() {
             const status = document.getElementById('status');
             const nameInput = document.getElementById('name');
-            const emailInput = document.getElementById('email');
 
-            status.textContent = 'Listening for your name...';
-            recognition.start();  // Start voice recognition
+            status.textContent = "Listening for your name...";
+            recognition.start();
 
-            // Handle recognition results
             recognition.onresult = function(event) {
-                const transcript = event.results[event.resultIndex][0].transcript.trim();
-                console.log('Recognized Text:', transcript); // Debugging line
-                if (event.results[event.resultIndex].isFinal) {
-                    if (!isNameCaptured) {
-                        // If name is empty, fill it with the recognized text
-                        nameInput.value = transcript;
-                        status.textContent = 'Tell me your email...';
-                        isNameCaptured = true; // Mark name as captured
-                        recognition.stop(); // Stop listening for name
-                        recognition.start(); // Start listening for email
-                    } else if (isNameCaptured && !emailInput.value) {
-                        // If email is empty, fill it with the recognized text
-                        emailInput.value = transcript;
-                        status.textContent = 'Registration complete.';
-
-                        // After registration is complete, refresh page automatically after 15 seconds
-                        setTimeout(() => location.reload(), 15000); // Refresh after 15 seconds
-                    }
-                }
+                const transcript = event.results[0][0].transcript.trim();
+                nameInput.value = transcript;
+                recognition.stop();
+
+                // Now, prompt for email
+                speak("Tell me your email", startListeningForEmail);
             };
+        }
+
+        function startListeningForEmail() {
+            const status = document.getElementById('status');
+            const emailInput = document.getElementById('email');
 
-            recognition.onerror = function(event) {
-                console.error('Speech recognition error:', event.error);
-                status.textContent = 'Error recognizing speech. Please try again.';
+            status.textContent = "Listening for your email...";
+            recognition.start();
+
+            recognition.onresult = function(event) {
+                const transcript = event.results[0][0].transcript.trim();
+                emailInput.value = transcript;
+                recognition.stop();
+
+                status.textContent = "Registration complete.";
+
+                // Refresh after 15 seconds
+                setTimeout(() => location.reload(), 15000);
             };
         }
 
-        // Start the process when the page is loaded
+        function startProcess() {
+            speak("Welcome to Biryani Hub", function() {
+                speak("Tell me your name", startListeningForName);
+            });
+        }
+
         window.onload = function () {
-            welcomeMessage();  // Automatically say the welcome message
-            setTimeout(startListening, 5000);  // Start listening after the welcome message
+            setTimeout(startProcess, 1000);  // Start process after 1 second
         };
     </script>
 </body>