Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Dining Assistant</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}"> | |
| </head> | |
| <body> | |
| <h1>🍽️ AI Dining Assistant</h1> | |
| <img src="{{ url_for('static', filename='mic.png') }}" id="mic-button" onclick="recordAudio()" alt="Mic Button"> | |
| <p id="status">Press the mic button to start...</p> | |
| <audio id="audio-player" controls></audio> | |
| <h3>Your Response:</h3> | |
| <p id="transcription"></p> | |
| <script> | |
| async function playWelcomeAudio() { | |
| let response = await fetch("/get_prompt"); | |
| let data = await response.json(); | |
| document.getElementById("audio-player").src = data.audio_url; | |
| document.getElementById("audio-player").play(); | |
| } | |
| async function recordAudio() { | |
| let stream = await navigator.mediaDevices.getUserMedia({ audio: true }); | |
| let mediaRecorder = new MediaRecorder(stream); | |
| let audioChunks = []; | |
| mediaRecorder.ondataavailable = event => { | |
| audioChunks.push(event.data); | |
| }; | |
| 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(); | |
| document.getElementById("transcription").innerText = result.text || result.error; | |
| }; | |
| mediaRecorder.start(); | |
| setTimeout(() => mediaRecorder.stop(), 4000); | |
| } | |
| window.onload = playWelcomeAudio; | |
| </script> | |
| </body> | |
| </html> | |