Spaces:
Restarting
Restarting
| <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> | |