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 Registration</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" 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); | |
| const audioChunks = []; | |
| mediaRecorder.ondataavailable = event => { | |
| audioChunks.push(event.data); | |
| }; | |
| mediaRecorder.start(); | |
| await new Promise(resolve => setTimeout(resolve, 4000)); // Record for 4 seconds | |
| mediaRecorder.stop(); | |
| return new Promise(resolve => { | |
| mediaRecorder.onstop = () => { | |
| const audioBlob = new Blob(audioChunks, { type: 'audio/wav' }); | |
| resolve(audioBlob); | |
| }; | |
| }); | |
| } | |
| 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 || 'Unable to transcribe audio.'; | |
| } | |
| 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 name...'; | |
| await playAudio('{{ url_for("static", filename="ask_name.mp3") }}'); | |
| status.textContent = 'Recording 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 = 'Recording 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> | |