Spaces:

Subbu1304
/

voice_recognize

Runtime error

App Files Files Community

Subbu1304 commited on Feb 5, 2025

Commit

082f1a3

verified ·

1 Parent(s): aed45d4

Create templets/index.html

Browse files

Files changed (1) hide show

templets/index.html +180 -0

templets/index.html ADDED Viewed

	@@ -0,0 +1,180 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Biryani Hub Registration</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Roboto', sans-serif;
+            background: linear-gradient(135deg, #f4c542, #ff8f6a);
+            margin: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            text-align: center;
+        }
+        .container {
+            background-color: #87ceeb; /* Light blue */
+            padding: 40px 50px;
+            border-radius: 10px;
+            width: 400px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            font-size: 30px;
+            font-weight: bold;
+            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;
+            font-size: 16px;
+            color: #ff6a00;
+            font-weight: bold;
+        }
+        .status {
+            font-size: 14px;
+            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;
+            recognition.interimResults = false;
+            recognition.lang = 'en-US';
+        } else {
+            alert("Speech Recognition API is not supported in this browser.");
+        }
+        function speak(text, callback) {
+            const speech = new SpeechSynthesisUtterance(text);
+            speech.onend = callback;
+            window.speechSynthesis.speak(speech);
+        }
+        function startListeningForName() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                nameCaptured = event.results[0][0].transcript.trim();
+                document.getElementById('name').value = nameCaptured;
+                recognition.stop();
+                setTimeout(confirmName, 500);
+            };
+        }
+        function confirmName() {
+            speak("You said " + nameCaptured + ". Is it okay, or do you want to change it?", 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 email.", startListeningForEmail), 500);
+                    } else {
+                        setTimeout(() => speak("Let's try again. Tell me your name.", startListeningForName), 500);
+                    }
+                };
+            });
+        }
+        function startListeningForEmail() {
+            recognition.start();
+            recognition.onresult = function(event) {
+                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 () {
+            setTimeout(startProcess, 4000);
+        };
+    </script>
+</body>
+</html>