Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
| <html> | |
| <head> | |
| <style> | |
| .speech-container { | |
| font-family: -apple-system, BlinkMacSystemFont, sans-serif; | |
| padding: 20px; | |
| border-radius: 10px; | |
| background: white; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .controls { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 15px; | |
| } | |
| button { | |
| padding: 8px 16px; | |
| border-radius: 5px; | |
| border: none; | |
| background: #2196F3; | |
| color: white; | |
| cursor: pointer; | |
| transition: background 0.3s; | |
| } | |
| button:disabled { | |
| background: #ccc; | |
| cursor: not-allowed; | |
| } | |
| button:hover:not(:disabled) { | |
| background: #1976D2; | |
| } | |
| #status { | |
| margin: 10px 0; | |
| padding: 10px; | |
| border-radius: 5px; | |
| background: #E3F2FD; | |
| } | |
| #output { | |
| margin-top: 15px; | |
| padding: 15px; | |
| border-radius: 5px; | |
| background: #F5F5F5; | |
| min-height: 100px; | |
| max-height: 300px; | |
| overflow-y: auto; | |
| white-space: pre-wrap; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="speech-container"> | |
| <div class="controls"> | |
| <button id="start">Start Listening</button> | |
| <button id="stop" disabled>Stop</button> | |
| <button id="clear">Clear</button> | |
| </div> | |
| <div id="status">Ready</div> | |
| <div id="output"></div> | |
| </div> | |
| <script> | |
| // Streamlit Component Initialization | |
| function sendMessageToStreamlit(type, data) { | |
| const outData = Object.assign({ | |
| isStreamlitMessage: true, | |
| type: type, | |
| }, data); | |
| window.parent.postMessage(outData, "*"); | |
| } | |
| function init() { | |
| sendMessageToStreamlit("streamlit:componentReady", {apiVersion: 1}); | |
| } | |
| function setFrameHeight(height) { | |
| sendMessageToStreamlit("streamlit:setFrameHeight", {height: height}); | |
| } | |
| function sendDataToStreamlit(data) { | |
| sendMessageToStreamlit("streamlit:setComponentValue", data); | |
| } | |
| // Speech Recognition Setup | |
| if (!('webkitSpeechRecognition' in window)) { | |
| document.getElementById('status').textContent = 'Speech recognition not supported'; | |
| } else { | |
| const recognition = new webkitSpeechRecognition(); | |
| const startButton = document.getElementById('start'); | |
| const stopButton = document.getElementById('stop'); | |
| const clearButton = document.getElementById('clear'); | |
| const status = document.getElementById('status'); | |
| const output = document.getElementById('output'); | |
| let fullTranscript = ''; | |
| let lastUpdate = Date.now(); | |
| recognition.continuous = true; | |
| recognition.interimResults = true; | |
| startButton.onclick = () => { | |
| try { | |
| recognition.start(); | |
| status.textContent = 'Listening...'; | |
| startButton.disabled = true; | |
| stopButton.disabled = false; | |
| } catch (e) { | |
| console.error('Recognition error:', e); | |
| status.textContent = 'Error: ' + e.message; | |
| } | |
| }; | |
| stopButton.onclick = () => { | |
| recognition.stop(); | |
| status.textContent = 'Stopped'; | |
| startButton.disabled = false; | |
| stopButton.disabled = true; | |
| }; | |
| clearButton.onclick = () => { | |
| fullTranscript = ''; | |
| output.textContent = ''; | |
| sendDataToStreamlit({ | |
| value: '', | |
| dataType: "json", | |
| }); | |
| }; | |
| recognition.onresult = (event) => { | |
| let interimTranscript = ''; | |
| let finalTranscript = ''; | |
| for (let i = event.resultIndex; i < event.results.length; i++) { | |
| const transcript = event.results[i][0].transcript; | |
| if (event.results[i].isFinal) { | |
| finalTranscript += transcript + '\n'; | |
| } else { | |
| interimTranscript += transcript; | |
| } | |
| } | |
| if (finalTranscript || (Date.now() - lastUpdate > 3000)) { | |
| if (finalTranscript) { | |
| fullTranscript += finalTranscript; | |
| sendDataToStreamlit({ | |
| value: fullTranscript, | |
| dataType: "json", | |
| }); | |
| } | |
| lastUpdate = Date.now(); | |
| } | |
| output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : ''); | |
| output.scrollTop = output.scrollHeight; | |
| }; | |
| recognition.onend = () => { | |
| if (!stopButton.disabled) { | |
| try { | |
| recognition.start(); | |
| } catch (e) { | |
| console.error('Failed to restart recognition:', e); | |
| status.textContent = 'Error restarting: ' + e.message; | |
| startButton.disabled = false; | |
| stopButton.disabled = true; | |
| } | |
| } | |
| }; | |
| recognition.onerror = (event) => { | |
| console.error('Recognition error:', event.error); | |
| status.textContent = 'Error: ' + event.error; | |
| if (event.error === 'not-allowed') { | |
| startButton.disabled = false; | |
| stopButton.disabled = true; | |
| } | |
| }; | |
| } | |
| // Initialize component | |
| init(); | |
| // Set initial height | |
| window.addEventListener("load", () => { | |
| setFrameHeight(document.documentElement.scrollHeight); | |
| }); | |
| </script> | |
| </body> | |
| </html> |