Spaces:

Subbu1304
/

voice_recognize

Runtime error

App Files Files Community

Subbu1304 commited on Feb 5, 2025

Commit

f714d76

verified ·

1 Parent(s): f7bd5a3

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +60 -12

templates/index.html CHANGED Viewed

@@ -17,7 +17,7 @@
             text-align: center;
         }
         .container {
-            background: lightblue;
             padding: 40px 50px;
             border-radius: 10px;
             width: 400px;
@@ -29,18 +29,24 @@
             color: #ff6a00;
         }
         label {
-            font-size: 18px;
             margin-top: 20px;
             display: block;
             text-align: left;
         }
         input[type="text"] {
             width: 100%;
-            padding: 10px;
             font-size: 16px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
             margin-top: 8px;
         }
         .info {
             margin-top: 20px;
@@ -53,11 +59,16 @@
             color: gray;
             margin-top: 20px;
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>Welcome to Biryani Hub</h1>
         <label for="name">Your Name</label>
         <input type="text" id="name" placeholder="Your name will appear here..." readonly>
@@ -65,14 +76,18 @@
         <label for="email">Your Email</label>
         <input type="text" id="email" placeholder="Your email will appear here..." readonly>
-        <p class="info" id="infoMessage">Listening will start automatically...</p>
-        <p class="status" id="status">Initializing...</p>
     </div>
     <script>
         let recognition;
         let nameCaptured = "";
         let emailCaptured = "";
         if ('webkitSpeechRecognition' in window) {
             recognition = new webkitSpeechRecognition();
             recognition.continuous = false;
@@ -115,13 +130,46 @@
                 emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
                 document.getElementById('email').value = emailCaptured;
                 recognition.stop();
-                speak("Your registration is complete. Thank you for registering.");
-                setTimeout(() => location.reload(), 20000);
             };
         }
         function startProcess() {
             speak("Welcome to Biryani Hub", function() {
-                speak("Tell me your name, and I will confirm it with you.", startListeningForName);
             });
         }
         window.onload = function () {
@@ -129,4 +177,4 @@
         };
     </script>
 </body>
-</html>

             text-align: center;
         }
         .container {
+            background-color: #87ceeb; /* Light blue */
             padding: 40px 50px;
             border-radius: 10px;
             width: 400px;
             color: #ff6a00;
         }
         label {
+            font-size: 16px;
             margin-top: 20px;
             display: block;
             text-align: left;
+            font-weight: bold;
         }
         input[type="text"] {
             width: 100%;
+            padding: 12px;
             font-size: 16px;
+            border: 2px solid #ccc;
+            border-radius: 8px;
             margin-top: 8px;
+            box-sizing: border-box;
+        }
+        input[type="text"]:focus {
+            border-color: #ff6a00;
+            outline: none;
         }
         .info {
             margin-top: 20px;
             color: gray;
             margin-top: 20px;
         }
+        .image-logo {
+            width: 80px;
+            margin-bottom: 20px;
+        }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1>Welcome to Biryani Hub 🍽 🍗</h1>
         <label for="name">Your Name</label>
         <input type="text" id="name" placeholder="Your name will appear here..." readonly>
         <label for="email">Your Email</label>
         <input type="text" id="email" placeholder="Your email will appear here..." readonly>
+        <label for="mobile">Your Mobile Number</label>
+        <input type="text" id="mobile" placeholder="Your mobile number will appear here..." readonly>
+        <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
+        <p class="status" id="status">🔊...</p>
     </div>
     <script>
         let recognition;
         let nameCaptured = "";
         let emailCaptured = "";
+        let mobileCaptured = "";
         if ('webkitSpeechRecognition' in window) {
             recognition = new webkitSpeechRecognition();
             recognition.continuous = false;
                 emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
                 document.getElementById('email').value = emailCaptured;
                 recognition.stop();
+                speak("You said " + emailCaptured + ". Is it correct?", function() {
+                    recognition.start();
+                    recognition.onresult = function(event) {
+                        let confirmation = event.results[0][0].transcript.trim().toLowerCase();
+                        recognition.stop();
+                        if (confirmation.includes("ok") || confirmation.includes("yes")) {
+                            setTimeout(() => speak("Great! Now, tell me your mobile number.", startListeningForMobile), 500);
+                        } else {
+                            speak("Let's try again. Tell me your email.", startListeningForEmail);
+                        }
+                    };
+                });
+            };
+        }
+        function startListeningForMobile() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
+                document.getElementById('mobile').value = mobileCaptured;
+                recognition.stop();
+                speak("You said " + mobileCaptured + ". Is it correct?", function() {
+                    recognition.start();
+                    recognition.onresult = function(event) {
+                        let confirmation = event.results[0][0].transcript.trim().toLowerCase();
+                        recognition.stop();
+                        if (confirmation.includes("ok") || confirmation.includes("yes")) {
+                            speak("Your registration is complete. Thank you for registering.");
+                            setTimeout(() => location.reload(), 20000);
+                        } else {
+                            speak("Let's try again. Tell me your mobile number.", startListeningForMobile);
+                        }
+                    };
+                });
             };
         }
         function startProcess() {
             speak("Welcome to Biryani Hub", function() {
+                speak("Tell me your name, and I will confirm it with you.", function() {
+                    setTimeout(startListeningForName, 500);
+                });
             });
         }
         window.onload = function () {
         };
     </script>
 </body>
+</html>