Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Continuous Speech Recognition</title> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| padding: 10px; | |
| background: #ffffff; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| margin: 5px; | |
| font-size: 16px; | |
| } | |
| #output { | |
| background: #f5f5f5; | |
| padding: 15px; | |
| border-radius: 5px; | |
| min-height: 100px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button id="start">🎤 Start Listening</button> | |
| <button id="stop" disabled>🛑 Stop Listening</button> | |
| <button id="clear">🧹 Clear Text</button> | |
| <div id="output">Click "Start Listening" to begin.</div> | |
| <script> | |
| function sendMessageToStreamlitClient(type, data) { | |
| const outData = { isStreamlitMessage: true, type: type, ...data }; | |
| window.parent.postMessage(outData, "*"); | |
| } | |
| function sendDataToPython(data) { | |
| sendMessageToStreamlitClient("streamlit:setComponentValue", data); | |
| } | |
| if (!('webkitSpeechRecognition' in window)) { | |
| document.getElementById('output').textContent = '🚨 Speech recognition not supported.'; | |
| } else { | |
| const recognition = new webkitSpeechRecognition(); | |
| recognition.continuous = true; | |
| recognition.interimResults = false; | |
| recognition.lang = 'en-US'; | |
| const startButton = document.getElementById('start'); | |
| const stopButton = document.getElementById('stop'); | |
| const clearButton = document.getElementById('clear'); | |
| const output = document.getElementById('output'); | |
| let transcript = ''; | |
| startButton.onclick = () => { | |
| recognition.start(); | |
| startButton.disabled = true; | |
| stopButton.disabled = false; | |
| output.textContent = '🎙️ Listening...'; | |
| }; | |
| stopButton.onclick = () => { | |
| recognition.stop(); | |
| startButton.disabled = false; | |
| stopButton.disabled = true; | |
| output.textContent = '🛑 Stopped listening.'; | |
| }; | |
| clearButton.onclick = () => { | |
| transcript = ''; | |
| output.textContent = 'Transcript cleared.'; | |
| sendDataToPython({ value: '', dataType: "json" }); | |
| }; | |
| recognition.onresult = (event) => { | |
| for (let i = event.resultIndex; i < event.results.length; ++i) { | |
| if (event.results[i].isFinal) { | |
| transcript += event.results[i][0].transcript + ' '; | |
| } | |
| } | |
| output.textContent = transcript.trim(); | |
| sendDataToPython({ value: transcript.trim(), dataType: "json" }); | |
| }; | |
| recognition.onerror = (event) => { | |
| output.textContent = `⚠️ Error: ${event.error}`; | |
| startButton.disabled = false; | |
| stopButton.disabled = true; | |
| }; | |
| } | |
| </script> | |
| </body> | |
| </html> | |