|
|
<html> |
|
|
<head> |
|
|
<title>Continuous Speech Demo</title> |
|
|
<style> |
|
|
body { |
|
|
font-family: sans-serif; |
|
|
padding: 20px; |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
background: #f9f9f9; |
|
|
} |
|
|
button { |
|
|
padding: 10px 20px; |
|
|
margin: 5px; |
|
|
font-size: 16px; |
|
|
border: none; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
background-color: #4CAF50; |
|
|
color: white; |
|
|
transition: background-color 0.3s; |
|
|
} |
|
|
button:disabled { |
|
|
background-color: #cccccc; |
|
|
cursor: not-allowed; |
|
|
} |
|
|
button:hover:not(:disabled) { |
|
|
background-color: #45a049; |
|
|
} |
|
|
#status { |
|
|
margin: 10px 0; |
|
|
padding: 10px; |
|
|
background: #e8f5e9; |
|
|
border-radius: 4px; |
|
|
font-weight: bold; |
|
|
} |
|
|
#output { |
|
|
white-space: pre-wrap; |
|
|
padding: 15px; |
|
|
background: #f5f5f5; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 4px; |
|
|
margin: 10px 0; |
|
|
min-height: 100px; |
|
|
max-height: 300px; |
|
|
overflow-y: auto; |
|
|
font-family: monospace; |
|
|
} |
|
|
.controls { |
|
|
margin: 10px 0; |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
} |
|
|
#stop { background-color: #f44336; } |
|
|
#stop:hover:not(:disabled) { background-color: #da190b; } |
|
|
#clear { background-color: #ff9800; } |
|
|
#clear:hover:not(:disabled) { background-color: #e68a00; } |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<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</div> |
|
|
<div id="output"></div> |
|
|
<input type="hidden" id="streamlit-data" value=""> |
|
|
|
|
|
<script> |
|
|
if (!('webkitSpeechRecognition' in window)) { |
|
|
alert('Speech recognition not supported. Please use a compatible browser like Chrome.'); |
|
|
} 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('Start error:', e); |
|
|
status.textContent = 'Error: ' + e.message; |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
window.addEventListener('load', () => { |
|
|
setTimeout(startRecognition, 1000); |
|
|
}); |
|
|
|
|
|
startButton.onclick = startRecognition; |
|
|
|
|
|
stopButton.onclick = () => { |
|
|
recognition.stop(); |
|
|
status.textContent = 'Stopped'; |
|
|
startButton.disabled = false; |
|
|
stopButton.disabled = true; |
|
|
}; |
|
|
|
|
|
clearButton.onclick = () => { |
|
|
fullTranscript = ''; |
|
|
output.textContent = ''; |
|
|
sendDataToPython({ value: '', dataType: "json" }); |
|
|
status.textContent = 'Cleared'; |
|
|
}; |
|
|
|
|
|
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) { |
|
|
fullTranscript += finalTranscript; |
|
|
sendDataToPython({ value: fullTranscript, dataType: "json" }); |
|
|
} |
|
|
|
|
|
output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : ''); |
|
|
output.scrollTop = output.scrollHeight; |
|
|
document.getElementById('streamlit-data').value = fullTranscript; |
|
|
}; |
|
|
|
|
|
recognition.onend = () => { |
|
|
if (!stopButton.disabled) { |
|
|
try { |
|
|
recognition.start(); |
|
|
console.log('Restarted recognition'); |
|
|
} catch (e) { |
|
|
console.error('Restart error:', 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' || event.error === 'service-not-allowed') { |
|
|
status.textContent = 'Error: Microphone permission denied'; |
|
|
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); |
|
|
} |
|
|
|
|
|
function onDataFromPython(event) { |
|
|
if (event.data.type !== "streamlit:render") return; |
|
|
const inputValue = event.data.args.my_input_value; |
|
|
if (inputValue !== undefined) { |
|
|
fullTranscript = inputValue; |
|
|
output.textContent = fullTranscript; |
|
|
document.getElementById('streamlit-data').value = fullTranscript; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
window.addEventListener("message", onDataFromPython); |
|
|
init(); |
|
|
|
|
|
|
|
|
window.addEventListener("load", function() { |
|
|
window.setTimeout(function() { |
|
|
setFrameHeight(document.documentElement.scrollHeight); |
|
|
}, 0); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
