Spaces:
Sleeping
Sleeping
Update templates/index.html
Browse files- templates/index.html +15 -13
templates/index.html
CHANGED
|
@@ -9,13 +9,17 @@
|
|
| 9 |
<body>
|
| 10 |
<div class="container">
|
| 11 |
<h1>Biryani Hub</h1>
|
|
|
|
| 12 |
<label for="name">Name:</label>
|
| 13 |
<input type="text" id="name" readonly>
|
|
|
|
| 14 |
<label for="email">Email:</label>
|
| 15 |
<input type="text" id="email" readonly>
|
|
|
|
| 16 |
<p id="status">Initializing...</p>
|
| 17 |
<audio id="audio-player" autoplay></audio>
|
| 18 |
</div>
|
|
|
|
| 19 |
<script>
|
| 20 |
async function playAudio(src) {
|
| 21 |
const audioPlayer = document.getElementById('audio-player');
|
|
@@ -29,22 +33,20 @@
|
|
| 29 |
async function recordAudio() {
|
| 30 |
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
| 31 |
const mediaRecorder = new MediaRecorder(stream);
|
| 32 |
-
|
| 33 |
-
|
| 34 |
-
mediaRecorder.ondataavailable = event => {
|
| 35 |
-
audioChunks.push(event.data);
|
| 36 |
-
};
|
| 37 |
-
|
| 38 |
-
mediaRecorder.start();
|
| 39 |
-
|
| 40 |
-
await new Promise(resolve => setTimeout(resolve, 4000)); // Record for 4 seconds
|
| 41 |
-
mediaRecorder.stop();
|
| 42 |
|
| 43 |
return new Promise(resolve => {
|
|
|
|
|
|
|
|
|
|
|
|
|
| 44 |
mediaRecorder.onstop = () => {
|
| 45 |
const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
|
| 46 |
resolve(audioBlob);
|
| 47 |
};
|
|
|
|
|
|
|
|
|
|
| 48 |
});
|
| 49 |
}
|
| 50 |
|
|
@@ -58,7 +60,7 @@
|
|
| 58 |
});
|
| 59 |
|
| 60 |
const result = await response.json();
|
| 61 |
-
return result.text ||
|
| 62 |
}
|
| 63 |
|
| 64 |
async function startInteraction() {
|
|
@@ -72,7 +74,7 @@
|
|
| 72 |
status.textContent = 'Asking for your name...';
|
| 73 |
await playAudio('{{ url_for("static", filename="ask_name.mp3") }}');
|
| 74 |
|
| 75 |
-
status.textContent = '
|
| 76 |
const nameAudio = await recordAudio();
|
| 77 |
const nameText = await transcribeAudio(nameAudio);
|
| 78 |
nameInput.value = nameText;
|
|
@@ -80,7 +82,7 @@
|
|
| 80 |
status.textContent = 'Asking for your email...';
|
| 81 |
await playAudio('{{ url_for("static", filename="ask_email.mp3") }}');
|
| 82 |
|
| 83 |
-
status.textContent = '
|
| 84 |
const emailAudio = await recordAudio();
|
| 85 |
const emailText = await transcribeAudio(emailAudio);
|
| 86 |
emailInput.value = emailText;
|
|
|
|
| 9 |
<body>
|
| 10 |
<div class="container">
|
| 11 |
<h1>Biryani Hub</h1>
|
| 12 |
+
|
| 13 |
<label for="name">Name:</label>
|
| 14 |
<input type="text" id="name" readonly>
|
| 15 |
+
|
| 16 |
<label for="email">Email:</label>
|
| 17 |
<input type="text" id="email" readonly>
|
| 18 |
+
|
| 19 |
<p id="status">Initializing...</p>
|
| 20 |
<audio id="audio-player" autoplay></audio>
|
| 21 |
</div>
|
| 22 |
+
|
| 23 |
<script>
|
| 24 |
async function playAudio(src) {
|
| 25 |
const audioPlayer = document.getElementById('audio-player');
|
|
|
|
| 33 |
async function recordAudio() {
|
| 34 |
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
| 35 |
const mediaRecorder = new MediaRecorder(stream);
|
| 36 |
+
let audioChunks = [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 37 |
|
| 38 |
return new Promise(resolve => {
|
| 39 |
+
mediaRecorder.ondataavailable = event => {
|
| 40 |
+
audioChunks.push(event.data);
|
| 41 |
+
};
|
| 42 |
+
|
| 43 |
mediaRecorder.onstop = () => {
|
| 44 |
const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
|
| 45 |
resolve(audioBlob);
|
| 46 |
};
|
| 47 |
+
|
| 48 |
+
mediaRecorder.start();
|
| 49 |
+
setTimeout(() => mediaRecorder.stop(), 6000); // Wait for user to stop speaking
|
| 50 |
});
|
| 51 |
}
|
| 52 |
|
|
|
|
| 60 |
});
|
| 61 |
|
| 62 |
const result = await response.json();
|
| 63 |
+
return result.text || "Error: Unable to capture speech.";
|
| 64 |
}
|
| 65 |
|
| 66 |
async function startInteraction() {
|
|
|
|
| 74 |
status.textContent = 'Asking for your name...';
|
| 75 |
await playAudio('{{ url_for("static", filename="ask_name.mp3") }}');
|
| 76 |
|
| 77 |
+
status.textContent = 'Listening for your name...';
|
| 78 |
const nameAudio = await recordAudio();
|
| 79 |
const nameText = await transcribeAudio(nameAudio);
|
| 80 |
nameInput.value = nameText;
|
|
|
|
| 82 |
status.textContent = 'Asking for your email...';
|
| 83 |
await playAudio('{{ url_for("static", filename="ask_email.mp3") }}');
|
| 84 |
|
| 85 |
+
status.textContent = 'Listening for your email...';
|
| 86 |
const emailAudio = await recordAudio();
|
| 87 |
const emailText = await transcribeAudio(emailAudio);
|
| 88 |
emailInput.value = emailText;
|