Spaces:
Running
Running
File size: 3,159 Bytes
ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e ec303be e83786e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
<!DOCTYPE html>
<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>
|