Spaces:
Running
Running
File size: 2,314 Bytes
12e7854 5df859e e5e8693 f4a40f2 838f829 e5e8693 10131e6 e5e8693 838f829 e5e8693 838f829 10131e6 195e167 2eb1d86 e5e8693 2eb1d86 e5e8693 838f829 e5e8693 12e7854 7c4f24d e5e8693 ff7fffe e5e8693 ff7fffe e5e8693 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Voice Assistant Interface</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen">
<div class="w-full max-w-md bg-white p-6 rounded-xl shadow-lg">
<h1 class="text-xl font-bold mb-4">Voice Assistant</h1>
<div id="chat-box" class="h-64 overflow-y-auto border p-3 mb-4 rounded bg-gray-50 text-sm"></div>
<button id="voice-btn" class="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">
Start Listening
</button>
</div>
<script>
const chatBox = document.getElementById('chat-box');
const voiceBtn = document.getElementById('voice-btn');
// Speech Recognition Setup
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (SpeechRecognition) {
const recognition = new SpeechRecognition();
recognition.lang = 'en-US'; // Forced English
recognition.continuous = false; // Capture full sentence, not just first word
recognition.interimResults = false;
voiceBtn.onclick = () => {
recognition.start();
voiceBtn.innerText = "Listening...";
};
recognition.onresult = (event) => {
const transcript = event.results[0][0].transcript;
addMessage("User: " + transcript);
processInput(transcript);
voiceBtn.innerText = "Start Listening";
};
recognition.onerror = () => {
voiceBtn.innerText = "Start Listening";
};
}
function addMessage(msg) {
const p = document.createElement('p');
p.textContent = msg;
chatBox.appendChild(p);
chatBox.scrollTop = chatBox.scrollHeight;
}
function processInput(text) {
// Simulated Model Response - Concise
const response = "Understood. Proceeding with: " + text;
addMessage("Model: " + response);
}
</script>
</body>
</html>
|