|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Speech Recognition Component</title> |
|
<style> |
|
body { |
|
font-family: system-ui, -apple-system, sans-serif; |
|
padding: 1rem; |
|
max-width: 800px; |
|
margin: 0 auto; |
|
background: #f8f9fa; |
|
} |
|
.container { |
|
background: white; |
|
padding: 1.5rem; |
|
border-radius: 8px; |
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|
} |
|
button { |
|
padding: 0.5rem 1rem; |
|
margin: 0.5rem; |
|
font-size: 1rem; |
|
border: none; |
|
border-radius: 4px; |
|
cursor: pointer; |
|
transition: all 0.2s; |
|
} |
|
button:disabled { |
|
opacity: 0.5; |
|
cursor: not-allowed; |
|
} |
|
#start { background: #28a745; color: white; } |
|
#stop { background: #dc3545; color: white; } |
|
#clear { background: #6c757d; color: white; } |
|
#status { |
|
margin: 1rem 0; |
|
padding: 0.75rem; |
|
border-radius: 4px; |
|
background: #e9ecef; |
|
} |
|
#output { |
|
white-space: pre-wrap; |
|
padding: 1rem; |
|
background: #f8f9fa; |
|
border-radius: 4px; |
|
border: 1px solid #dee2e6; |
|
margin: 1rem 0; |
|
min-height: 100px; |
|
max-height: 400px; |
|
overflow-y: auto; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
<input id="myinput" type="hidden" value="" /> |
|
<div class="controls"> |
|
<button id="start">Start Listening</button> |
|
<button id="stop" disabled>Stop Listening</button> |
|
<button id="clear">Clear Text</button> |
|
</div> |
|
<div id="status">Ready to start speech recognition...</div> |
|
<div id="output"></div> |
|
</div> |
|
|
|
<script> |
|
|
|
if (!('webkitSpeechRecognition' in window)) { |
|
document.getElementById('status').textContent = 'Speech recognition not supported in this browser'; |
|
} 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 lastUpdateTime = Date.now(); |
|
|
|
|
|
recognition.continuous = true; |
|
recognition.interimResults = true; |
|
|
|
|
|
const startRecognition = () => { |
|
try { |
|
recognition.start(); |
|
status.textContent = 'Listening...'; |
|
startButton.disabled = true; |
|
stopButton.disabled = false; |
|
} catch (e) { |
|
console.error(e); |
|
status.textContent = 'Error starting recognition: ' + e.message; |
|
} |
|
}; |
|
|
|
|
|
window.addEventListener('load', () => { |
|
setTimeout(startRecognition, 1000); |
|
}); |
|
|
|
|
|
startButton.onclick = startRecognition; |
|
|
|
stopButton.onclick = () => { |
|
recognition.stop(); |
|
status.textContent = 'Stopped listening'; |
|
startButton.disabled = false; |
|
stopButton.disabled = true; |
|
}; |
|
|
|
clearButton.onclick = () => { |
|
fullTranscript = ''; |
|
output.textContent = ''; |
|
sendDataToPython({ |
|
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() - lastUpdateTime > 5000)) { |
|
if (finalTranscript) { |
|
fullTranscript += finalTranscript; |
|
} |
|
lastUpdateTime = Date.now(); |
|
} |
|
|
|
output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : ''); |
|
output.scrollTop = output.scrollHeight; |
|
|
|
|
|
sendDataToPython({ |
|
value: fullTranscript, |
|
dataType: 'json' |
|
}); |
|
}; |
|
|
|
|
|
recognition.onend = () => { |
|
if (!stopButton.disabled) { |
|
try { |
|
recognition.start(); |
|
console.log('Restarted recognition'); |
|
} catch (e) { |
|
console.error('Failed to restart:', 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; |
|
} |
|
}; |
|
} |
|
|
|
|
|
function sendMessageToStreamlitClient(type, data) { |
|
var outData = Object.assign({ |
|
isStreamlitMessage: true, |
|
type: type, |
|
}, data); |
|
window.parent.postMessage(outData, "*"); |
|
} |
|
|
|
function init() { |
|
sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1}); |
|
} |
|
|
|
function setFrameHeight(height) { |
|
sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height}); |
|
} |
|
|
|
function sendDataToPython(data) { |
|
sendMessageToStreamlitClient("streamlit:setComponentValue", data); |
|
} |
|
|
|
|
|
window.addEventListener("message", (event) => { |
|
if (event.data.type !== "streamlit:render") return; |
|
|
|
}); |
|
|
|
|
|
init(); |
|
|
|
|
|
window.addEventListener("load", () => { |
|
setTimeout(() => { |
|
setFrameHeight(document.documentElement.clientHeight); |
|
}, 0); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
