Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Voice Command</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| } | |
| .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); | |
| } | |
| .user-message { | |
| background-color: #f0f0f0; | |
| border-radius: 5px; | |
| padding: 5px 10px; | |
| margin: 5px 0; | |
| text-align: right; | |
| } | |
| .bot-message { | |
| background-color: #d3e9ff; | |
| border-radius: 5px; | |
| padding: 5px 10px; | |
| margin: 5px 0; | |
| } | |
| #languageSelector { | |
| width: 100%; | |
| margin-top: 10px; | |
| padding: 5px; | |
| border-radius: 5px; | |
| border: 1px solid #ccc; | |
| } | |
| #status { | |
| color: grey; | |
| font-weight: 600; | |
| margin-top: 10px; | |
| text-align: center; | |
| } | |
| #testSpeakerButton { | |
| display: block; | |
| margin: 10px auto; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| background: #28a745; | |
| color: white; | |
| cursor: pointer; | |
| font-weight: 600; | |
| } | |
| #uploadButton { | |
| display: block; | |
| margin: 10px auto; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| background: #2196F3; | |
| color: white; | |
| cursor: pointer; | |
| font-weight: 600; | |
| } | |
| .speaker { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| width: 100%; | |
| margin-top: 10px; | |
| padding: 5px; | |
| box-shadow: 0 0 13px #0000003d; | |
| border-radius: 5px; | |
| } | |
| #textInput { | |
| flex: 1; | |
| padding: 8px; | |
| border: none; | |
| border-radius: 5px; | |
| outline: none; | |
| } | |
| #speech, #sendText { | |
| padding: 8px 10px; | |
| border: none; | |
| border-radius: 5px; | |
| margin-left: 5px; | |
| cursor: pointer; | |
| } | |
| #speech { | |
| background-color: #007bff; | |
| color: white; | |
| } | |
| #sendText { | |
| background-color: #28a745; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button id="testSpeakerButton">Speaker Test</button> | |
| <div class="chat-container"> | |
| <div id="chat-box"></div> | |
| <select id="languageSelector"> | |
| <option value="English (US)">English (US)</option> | |
| <option value="Hindi (India)">Hindi (India)</option> | |
| <option value="Spanish (Spain)">Spanish (Spain)</option> | |
| <option value="French (France)">French (France)</option> | |
| <option value="German (Germany)">German (Germany)</option> | |
| <option value="Arabic (Saudi Arabia)">Arabic (Saudi Arabia)</option> | |
| </select> | |
| <input type="file" id="fileUpload" accept=".pdf,.txt,.md,.csv,.xlsx" style="display: none;"> | |
| <button id="uploadButton" onclick="document.getElementById('fileUpload').click()">Upload Document</button> | |
| <div class="speaker"> | |
| <input type="text" id="textInput" placeholder="Type your message..."> | |
| <button id="speech">Tap to Speak</button> | |
| <button id="sendText">Enter</button> | |
| </div> | |
| <p id="status"></p> | |
| </div> | |
| <script> | |
| const statusBar = document.getElementById('status'); | |
| const speechLangMap = { | |
| 'English (US)': 'en-US', | |
| 'Hindi (India)': 'hi-IN', | |
| 'Spanish (Spain)': 'es-ES', | |
| 'French (France)': 'fr-FR', | |
| 'German (Germany)': 'de-DE', | |
| 'Arabic (Saudi Arabia)': 'ar-SA' | |
| }; | |
| const synth = window.speechSynthesis; | |
| let voices = []; | |
| function loadVoices() { | |
| return new Promise((resolve) => { | |
| voices = synth.getVoices(); | |
| if (voices.length > 0) { | |
| resolve(voices); | |
| } else { | |
| synth.onvoiceschanged = () => { | |
| voices = synth.getVoices(); | |
| resolve(voices); | |
| }; | |
| } | |
| }); | |
| } | |
| async function speakResponse(text, language) { | |
| const langCode = speechLangMap[language] || 'en-US'; | |
| await loadVoices(); | |
| const utterance = new SpeechSynthesisUtterance(text); | |
| let selectedVoice = voices.find(voice => voice.lang === langCode); | |
| if (!selectedVoice) selectedVoice = voices[0]; | |
| utterance.voice = selectedVoice; | |
| synth.speak(utterance); | |
| } | |
| function runSpeechRecog() { | |
| const selectedLang = document.getElementById('languageSelector').value; | |
| const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); | |
| recognition.lang = speechLangMap[selectedLang] || 'en-US'; | |
| recognition.onstart = () => statusBar.textContent = 'Listening...'; | |
| recognition.onresult = (event) => { | |
| const transcript = event.results[0][0].transcript; | |
| sendMessage(transcript, selectedLang); | |
| }; | |
| recognition.onerror = (event) => statusBar.textContent = `Error: ${event.error}`; | |
| recognition.onend = () => statusBar.textContent = ''; | |
| recognition.start(); | |
| } | |
| async function sendMessage(message, language) { | |
| showUserMessage(message); | |
| try { | |
| const response = await fetch('/api/process_text', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ text: message, language }) | |
| }); | |
| const data = await response.json(); | |
| showBotMessage(data.response); | |
| speakResponse(data.response, language); | |
| } catch (error) { | |
| console.error('Error:', error); | |
| showBotMessage('Error: Unable to process request.'); | |
| } | |
| } | |
| function showUserMessage(message) { | |
| const chatBox = document.getElementById('chat-box'); | |
| chatBox.innerHTML += `<div class="user-message">${message}</div>`; | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| } | |
| function showBotMessage(message) { | |
| const chatBox = document.getElementById('chat-box'); | |
| chatBox.innerHTML += `<div class="bot-message">${message}</div>`; | |
| chatBox.scrollTop = chatBox.scrollHeight; | |
| } | |
| document.getElementById('speech').addEventListener('click', runSpeechRecog); | |
| document.getElementById('sendText').addEventListener('click', () => { | |
| const text = document.getElementById('textInput').value.trim(); | |
| const language = document.getElementById('languageSelector').value; | |
| if (text !== '') { | |
| sendMessage(text, language); | |
| document.getElementById('textInput').value = ''; | |
| } | |
| }); | |
| document.getElementById('textInput').addEventListener('keydown', (e) => { | |
| if (e.key === 'Enter') { | |
| e.preventDefault(); | |
| document.getElementById('sendText').click(); | |
| } | |
| }); | |
| document.getElementById('testSpeakerButton').addEventListener('click', async () => { | |
| await loadVoices(); | |
| speakResponse("Speaker works fine", "English (US)"); | |
| }); | |
| document.getElementById('fileUpload').addEventListener('change', async (event) => { | |
| const file = event.target.files[0]; | |
| if (!file) return; | |
| statusBar.textContent = 'Uploading document...'; | |
| const formData = new FormData(); | |
| formData.append('file', file); | |
| try { | |
| const response = await fetch('/api/upload_document', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const data = await response.json(); | |
| statusBar.textContent = data.message || data.error; | |
| } catch (err) { | |
| statusBar.textContent = 'Error uploading document: ' + err.message; | |
| console.error('File upload error:', err); | |
| } | |
| }); | |
| window.onload = loadVoices; | |
| </script> | |
| </body> | |
| </html> | |