Spaces:

geethareddy
/

boltvoice

Runtime error

App Files Files Community

geethareddy commited on Feb 3, 2025

Commit

f738704

verified ·

1 Parent(s): caba180

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +114 -62

templates/index.html CHANGED Viewed

@@ -4,96 +4,148 @@
     <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">Full 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, { mimeType: 'audio/webm' });
-            let audioChunks = [];
-            return new Promise(resolve => {
-                mediaRecorder.ondataavailable = event => {
-                    audioChunks.push(event.data);
-                };
-                mediaRecorder.onstop = () => {
-                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-                    resolve(audioBlob);
-                };
-                mediaRecorder.start();
-                setTimeout(() => mediaRecorder.stop(), 5000);  // ✅ Record for 5 seconds
-            });
         }
-        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 || 'Error capturing speech';
         }
-        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 full name...';
-            await playAudio('{{ url_for("static", filename="ask_name.mp3") }}');
-            status.textContent = 'Listening for 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 = 'Listening for 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>

     <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); /* Light gradient background */
+            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; /* Bright orange for title */
+        }
+        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;
+            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>
+        <!-- Name Input Field -->
+        <label for="name">Your Name</label>
+        <input type="text" id="name" placeholder="Your name will appear here..." readonly>
+        <!-- Email Input Field -->
+        <label for="email">Your Email</label>
+        <input type="text" id="email" placeholder="Your email will appear here..." readonly>
+        <!-- Info Message for Listening -->
+        <p class="info" id="infoMessage">Listening will start automatically...</p>
+        <!-- Status Message -->
+        <p class="status" id="status">Initializing...</p>
     </div>
     <script>
+        let recognition;
+        let isListening = false;
+        let isNameCaptured = false;
+        if ('webkitSpeechRecognition' in window) {
+            recognition = new webkitSpeechRecognition();
+            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 speak(text, callback) {
+            const speech = new SpeechSynthesisUtterance(text);
+            speech.onend = callback;  // Once the speech ends, call the next function
+            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) {
+                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');
+            status.textContent = "Listening for your email...";
+            recognition.start();
+            recognition.onresult = function(event) {
+                let transcript = event.results[0][0].transcript.trim();
+                // Replace spoken variations of "at" with "@" for emails
+                transcript = transcript.replace(/\bat\b/g, '@').trim();
+                // Remove unwanted spaces from the email input
+                emailInput.value = transcript;
+                recognition.stop();
+                status.textContent = "Registration complete .";
+                speak("Registration complete Go To The Next step and take the order what you want.");
+                // Refresh after 20 seconds
+                setTimeout(() => location.reload(), 20000);
+            };
+        }
+        function startProcess() {
+            speak("Welcome to Biryani Hub", function() {
+                speak("Tell me your name", startListeningForName);
+            });
         }
+        window.onload = function () {
+            setTimeout(startProcess, 4000);  // Start process after 4 second
+        };
     </script>
 </body>
 </html>