voicemenuloginn

Sleeping

App Files Files Community

lokesh341 commited on about 1 month ago

Commit

6b18c62

verified ·

1 Parent(s): c179edd

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +90 -151

templates/index.html CHANGED Viewed

@@ -3,187 +3,126 @@
 <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: lightblue;
-            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: 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;
-            text-transform: uppercase;
         }
-        .info {
-            margin-top: 20px;
-            font-size: 16px;
-            color: #ff6a00;
-            font-weight: bold;
         }
         .status {
-            font-size: 14px;
-            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>
-        <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 currentName = "";
-        let currentEmail = "";
-        let isCapturingName = true;
-        let isCapturingEmail = false;
-        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() {
-            const status = document.getElementById('status');
-            const nameInput = document.getElementById('name');
-            status.textContent = "Listening for your name...";
-            recognition.start();
-            recognition.onresult = function(event) {
-                let transcript = event.results[0][0].transcript.trim().toUpperCase().replace(/\s+/g, "");
-                if (transcript === "NEXT") {
-                    recognition.stop();
-                    isCapturingName = false;
-                    isCapturingEmail = true;
-                    status.textContent = "Your name is: " + currentName;
-                    speak("Your name is " + currentName + ". If correct, say 'confirm'. If wrong, say 'edit'.", function() {
-                        recognition.start();
-                        recognition.onresult = function(event) {
-                            let confirmTranscript = event.results[0][0].transcript.trim().toLowerCase();
-                            if (confirmTranscript === "confirm") {
-                                speak("Now, please tell me your email, letter by letter", startListeningForEmail);
-                            } else if (confirmTranscript === "edit") {
-                                currentName = "";
-                                nameInput.value = "";
-                                speak("Tell your name again.", startListeningForName);
-                            }
-                        };
-                    });
-                    return;
-                }
-                currentName += transcript;
-                nameInput.value = currentName;
-            };
-        }
-        function startListeningForEmail() {
-            const status = document.getElementById('status');
-            const emailInput = document.getElementById('email');
-            recognition = new webkitSpeechRecognition();
-            recognition.continuous = false;
-            recognition.interimResults = false;
-            recognition.lang = 'en-US';
-            status.textContent = "Listening for your email...";
-            recognition.start();
-            recognition.onresult = function(event) {
-                let transcript = event.results[0][0].transcript.trim().toUpperCase().replace(/\s+/g, "");
-                transcript = transcript.replace(/\bAT\b/g, "@").replace(/\bDOT\b/g, ".");
-                if (transcript === "NEXT") {
-                    recognition.stop();
-                    isCapturingEmail = false;
-                    status.textContent = "Your email is: " + currentEmail;
-                    speak("Your email is " + currentEmail + ". If correct, say 'confirm'. If wrong, say 'edit'.", function() {
-                        recognition.start();
-                        recognition.onresult = function(event) {
-                            let confirmTranscript = event.results[0][0].transcript.trim().toLowerCase();
-                            if (confirmTranscript === "confirm") {
-                                speak("Registration complete. Thank you!", function() {
-                                    setTimeout(() => location.reload(), 10000);
-                                });
-                            } else if (confirmTranscript === "edit") {
-                                currentEmail = "";
-                                emailInput.value = "";
-                                speak("Tell your email again.", startListeningForEmail);
-                            }
-                        };
-                    });
-                    return;
-                }
-                currentEmail += transcript;
-                emailInput.value = currentEmail;
-            };
-        }
-        function startProcess() {
-            speak("Welcome to Biryani Hub", function() {
-                speak("Tell me your name, letter by letter, and say 'next' when you're done", startListeningForName);
             });
         }
-        window.onload = function () {
-            setTimeout(startProcess, 4000);
-        };
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🍛 Biryani Hub - Voice Registration</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
     <style>
         body {
+            font-family: 'Poppins', sans-serif;
+            background: linear-gradient(135deg, #ff6f61, #ffcc00);
             margin: 0;
+            padding: 0;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
+            color: #333;
         }
         .container {
+            background: rgba(255, 255, 255, 0.9);
+            padding: 2rem;
+            border-radius: 15px;
             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            text-align: center;
+            max-width: 500px;
+            width: 100%;
         }
         h1 {
+            font-size: 2.5rem;
+            color: #ff6f61;
+            margin-bottom: 1rem;
         }
+        p {
+            font-size: 1.1rem;
+            margin-bottom: 2rem;
         }
+        .btn {
+            background: #ff6f61;
+            color: white;
+            border: none;
+            padding: 0.8rem 2rem;
+            font-size: 1rem;
+            border-radius: 25px;
+            cursor: pointer;
+            transition: background 0.3s ease;
         }
+        .btn:hover {
+            background: #ff4a3d;
         }
         .status {
+            margin-top: 1.5rem;
+            font-size: 0.9rem;
+            color: #666;
+        }
+        .input-field {
+            margin: 1rem 0;
+            padding: 0.8rem;
+            width: 100%;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-size: 1rem;
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <h1>Welcome to Biryani Hub 🍛</h1>
+        <p>Register using your voice! Click below to start.</p>
+        <!-- Input Fields -->
+        <input type="text" id="name" class="input-field" placeholder="Your Name" readonly>
+        <input type="text" id="email" class="input-field" placeholder="Your Email" readonly>
+        <!-- Action Button -->
+        <button class="btn" id="startBtn">Start Voice Registration</button>
+        <!-- Status Message -->
+        <p class="status" id="status">Press the button and speak clearly.</p>
     </div>
     <script>
+        // Hugging Face ASR Integration
+        async function transcribeSpeech(audioBlob) {
+            const response = await fetch("https://api-inference.huggingface.co/models/openai/whisper-small", {
+                headers: { Authorization: "Bearer YOUR_HF_TOKEN" },
+                method: "POST",
+                body: audioBlob,
             });
+            return await response.json();
         }
+        // Voice Registration Logic
+        let isProcessing = false;
+        const startBtn = document.getElementById('startBtn');
+        const status = document.getElementById('status');
+        const nameInput = document.getElementById('name');
+        const emailInput = document.getElementById('email');
+        startBtn.addEventListener('click', async () => {
+            if (isProcessing) return;
+            isProcessing = true;
+            status.textContent = "Listening... Speak your name letter by letter.";
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                const mediaRecorder = new MediaRecorder(stream);
+                let audioChunks = [];
+                mediaRecorder.ondataavailable = (e) => audioChunks.push(e.data);
+                mediaRecorder.onstop = async () => {
+                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                    const transcription = await transcribeSpeech(audioBlob);
+                    nameInput.value = transcription.text.toUpperCase();
+                    status.textContent = "Name captured! Now speak your email.";
+                };
+                mediaRecorder.start();
+                setTimeout(() => mediaRecorder.stop(), 5000); // Record for 5 seconds
+            } catch (error) {
+                status.textContent = "Error: Microphone access denied.";
+            } finally {
+                isProcessing = false;
+            }
+        });
     </script>
 </body>
+</html>