Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Voice Command | Chatbot</title> | |
| <style> | |
| .chat-container { | |
| max-width: 400px; | |
| margin: 20px auto; | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| font-family: Arial, sans-serif; | |
| } | |
| .user-message, .bot-message { | |
| border-radius: 5px; | |
| padding: 5px 10px; | |
| margin: 5px 0; | |
| } | |
| .user-message { | |
| background-color: #f0f0f0; | |
| text-align: right; | |
| } | |
| .bot-message { | |
| background-color: #d3e9ff; | |
| } | |
| #languageSelector { | |
| width: 100%; | |
| margin-top: 10px; | |
| padding: 5px; | |
| border-radius: 5px; | |
| border: 1px solid #ccc; | |
| } | |
| .speaker { | |
| display: flex; | |
| justify-content: space-between; | |
| width: 100%; | |
| box-shadow: 0 0 13px #0000003d; | |
| border-radius: 5px; | |
| margin-top: 10px; | |
| } | |
| #speech { | |
| border: transparent; | |
| padding: 0 0.5rem; | |
| cursor: pointer; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="chat-container"> | |
| <div id="chat-box"></div> | |
| <select id="languageSelector"> | |
| <option value="en-US">English (US)</option> | |
| <option value="hi-IN">Hindi (India)</option> | |
| <option value="es-ES">Spanish (Spain)</option> | |
| <option value="fr-FR">French (France)</option> | |
| <option value="de-DE">German (Germany)</option> | |
| <option value="ar-SA">Arabic (Saudi Arabia)</option> | |
| </select> | |
| <div class="speaker"> | |
| <p id="action" style="color: grey; font-weight: 800; padding-left: 2rem;"></p> | |
| <button id="speech">Tap to Speak</button> | |
| </div> | |
| </div> | |
| <script> | |
| const synth = window.speechSynthesis; | |
| let recognition; | |
| // Event listener for the button | |
| document.getElementById("speech").addEventListener("click", () => { | |
| runSpeechRecog(); | |
| }); | |
| function runSpeechRecog() { | |
| const action = document.getElementById("action"); | |
| // Prevent multiple instances | |
| if (recognition) recognition.abort(); | |
| // Ensure Chrome compatibility | |
| const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; | |
| if (!SpeechRecognition) { | |
| alert("Speech Recognition not supported in this browser. Use Google Chrome."); | |
| return; | |
| } | |
| recognition = new SpeechRecognition(); | |
| recognition.lang = "en-US"; // Always English for input | |
| recognition.interimResults = false; | |
| recognition.continuous = false; | |
| recognition.onstart = () => { | |
| action.innerHTML = "Listening..."; | |
| }; | |
| recognition.onresult = (event) => { | |
| const transcript = event.results[0][0].transcript; | |
| action.innerHTML = ""; | |
| sendMessage(transcript); | |
| }; | |
| recognition.onerror = (event) => { | |
| action.innerHTML = "Error: " + event.error; | |
| }; | |
| recognition.onend = () => { | |
| action.innerHTML = ""; | |
| }; | |
| recognition.start(); | |
| } | |
| function sendMessage(message) { | |
| showUserMessage(message); | |
| // Simulating response (replace with your backend call) | |
| setTimeout(() => handleResponse("You said: " + message), 500); | |
| } | |
| function showUserMessage(message) { | |
| const chatBox = document.getElementById("chat-box"); | |
| chatBox.innerHTML += <div class="user-message">${message}</div>; | |
| } | |
| function handleResponse(message) { | |
| showBotMessage(message); | |
| speakResponse(message); | |
| } | |
| function showBotMessage(message) { | |
| const chatBox = document.getElementById("chat-box"); | |
| chatBox.innerHTML += <div class="bot-message">${message}</div>; | |
| } | |
| function speakResponse(responseText) { | |
| const selectedLang = document.getElementById("languageSelector").value; | |
| const utterance = new SpeechSynthesisUtterance(responseText); | |
| utterance.lang = selectedLang; | |
| const voices = synth.getVoices(); | |
| const match = voices.find(v => v.lang === selectedLang); | |
| if (match) utterance.voice = match; | |
| synth.speak(utterance); | |
| } | |
| // Ensure voices are loaded | |
| window.speechSynthesis.onvoiceschanged = () => synth.getVoices(); | |
| </script> | |
| </body> | |
| </html> |