Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Biryani Hub</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Biryani Hub</h1> | |
| <label for="name">Name</label> | |
| <input type="text" id="name" placeholder="Your name will appear here..." readonly> | |
| <label for="email">Email</label> | |
| <input type="text" id="email" placeholder="Your email will appear here..." readonly> | |
| <p class="instructions">Voice interaction in progress...</p> | |
| <audio id="audio-player" autoplay></audio> | |
| </div> | |
| <script> | |
| async function startVoiceInteraction() { | |
| let audioPlayer = document.getElementById("audio-player"); | |
| // Step 1: Welcome Message | |
| audioPlayer.src = "/static/welcome.mp3"; | |
| audioPlayer.play(); | |
| await new Promise(resolve => setTimeout(resolve, 2000)); // Wait for welcome message to play | |
| // Step 2: Ask for Name | |
| audioPlayer.src = "/static/ask_name.mp3"; | |
| audioPlayer.play(); | |
| await new Promise(resolve => setTimeout(resolve, 3000)); // Wait before recording | |
| let name = await recordAndProcessAudio(); | |
| document.getElementById("name").value = name; | |
| // Step 3: Ask for Email | |
| audioPlayer.src = "/static/ask_email.mp3"; | |
| audioPlayer.play(); | |
| await new Promise(resolve => setTimeout(resolve, 3000)); // Wait before recording | |
| let email = await recordAndProcessAudio(); | |
| document.getElementById("email").value = email; | |
| // Step 4: Thank You Message | |
| audioPlayer.src = "/static/thank_you.mp3"; | |
| audioPlayer.play(); | |
| } | |
| async function recordAndProcessAudio() { | |
| let stream = await navigator.mediaDevices.getUserMedia({ audio: true }); | |
| let mediaRecorder = new MediaRecorder(stream); | |
| let audioChunks = []; | |
| mediaRecorder.ondataavailable = event => { | |
| audioChunks.push(event.data); | |
| }; | |
| return new Promise(resolve => { | |
| mediaRecorder.onstop = async () => { | |
| let audioBlob = new Blob(audioChunks, { type: 'audio/wav' }); | |
| let formData = new FormData(); | |
| formData.append("audio", audioBlob, "input.wav"); | |
| let response = await fetch("/process_audio", { | |
| method: "POST", | |
| body: formData | |
| }); | |
| let result = await response.json(); | |
| resolve(result.text || "Error capturing speech"); | |
| }; | |
| mediaRecorder.start(); | |
| setTimeout(() => mediaRecorder.stop(), 4000); | |
| }); | |
| } | |
| window.onload = startVoiceInteraction; | |
| </script> | |
| </body> | |
| </html> | |