Hugging Face's logo

Spaces:
awacke1
/
ColoradoMadLibs
Running

App Files Community
awacke1 commited on
Commit
ec303be
·
verified ·
1 Parent(s): 93d79a5

Create index.html

Browse files
Files changed (1) hide show
  1. speech_component/index.html +148 -0
speech_component/index.html ADDED
@@ -0,0 +1,148 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Continuous Speech Demo</title>
5
+ <style>
6
+ body {
7
+ font-family: sans-serif;
8
+ padding: 20px;
9
+ max-width: 800px;
10
+ margin: 0 auto;
11
+ }
12
+ button {
13
+ padding: 10px 20px;
14
+ margin: 10px 5px;
15
+ font-size: 16px;
16
+ }
17
+ #status {
18
+ margin: 10px 0;
19
+ padding: 10px;
20
+ background: #e8f5e9;
21
+ border-radius: 4px;
22
+ }
23
+ #output {
24
+ white-space: pre-wrap;
25
+ padding: 15px;
26
+ background: #f5f5f5;
27
+ border-radius: 4px;
28
+ margin: 10px 0;
29
+ min-height: 100px;
30
+ max-height: 400px;
31
+ overflow-y: auto;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body>
36
+ <div class="controls">
37
+ <button id="start">Start Listening</button>
38
+ <button id="stop" disabled>Stop Listening</button>
39
+ <button id="clear">Clear Text</button>
40
+ </div>
41
+ <div id="status">Ready</div>
42
+ <div id="output"></div>
43
+ <input type="hidden" id="streamlit-data" value="">
44
+
45
+ <script>
46
+ if (!('webkitSpeechRecognition' in window)) {
47
+ alert('Speech recognition not supported');
48
+ } else {
49
+ const recognition = new webkitSpeechRecognition();
50
+ const startButton = document.getElementById('start');
51
+ const stopButton = document.getElementById('stop');
52
+ const clearButton = document.getElementById('clear');
53
+ const status = document.getElementById('status');
54
+ const output = document.getElementById('output');
55
+ let fullTranscript = '';
56
+
57
+ recognition.continuous = true;
58
+ recognition.interimResults = true;
59
+
60
+ const startRecognition = () => {
61
+ recognition.start();
62
+ status.textContent = 'Listening...';
63
+ startButton.disabled = true;
64
+ stopButton.disabled = false;
65
+ };
66
+
67
+ window.addEventListener('load', () => setTimeout(startRecognition, 1000));
68
+
69
+ startButton.onclick = startRecognition;
70
+
71
+ stopButton.onclick = () => {
72
+ recognition.stop();
73
+ status.textContent = 'Stopped';
74
+ startButton.disabled = false;
75
+ stopButton.disabled = true;
76
+ };
77
+
78
+ clearButton.onclick = () => {
79
+ fullTranscript = '';
80
+ output.textContent = '';
81
+ sendDataToPython({ value: '', dataType: "json" });
82
+ };
83
+
84
+ recognition.onresult = (event) => {
85
+ let interimTranscript = '';
86
+ let finalTranscript = '';
87
+
88
+ for (let i = event.resultIndex; i < event.results.length; i++) {
89
+ const transcript = event.results[i][0].transcript;
90
+ if (event.results[i].isFinal) {
91
+ finalTranscript += transcript + '\n';
92
+ } else {
93
+ interimTranscript += transcript;
94
+ }
95
+ }
96
+
97
+ if (finalTranscript) {
98
+ fullTranscript += finalTranscript;
99
+ output.textContent = fullTranscript;
100
+ output.scrollTop = output.scrollHeight;
101
+ document.getElementById('streamlit-data').value = fullTranscript;
102
+ sendDataToPython({ value: fullTranscript, dataType: "json" });
103
+ } else {
104
+ output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
105
+ }
106
+ };
107
+
108
+ recognition.onend = () => {
109
+ if (!stopButton.disabled) {
110
+ recognition.start();
111
+ }
112
+ };
113
+
114
+ recognition.onerror = (event) => {
115
+ console.error('Recognition error:', event.error);
116
+ status.textContent = 'Error: ' + event.error;
117
+ startButton.disabled = false;
118
+ stopButton.disabled = true;
119
+ };
120
+
121
+ function sendMessageToStreamlitClient(type, data) {
122
+ var outData = Object.assign({ isStreamlitMessage: true, type: type }, data);
123
+ window.parent.postMessage(outData, "*");
124
+ }
125
+
126
+ function init() {
127
+ sendMessageToStreamlitClient("streamlit:componentReady", { apiVersion: 1 });
128
+ }
129
+
130
+ function setFrameHeight(height) {
131
+ sendMessageToStreamlitClient("streamlit:setFrameHeight", { height: height });
132
+ }
133
+
134
+ function sendDataToPython(data) {
135
+ sendMessageToStreamlitClient("streamlit:setComponentValue", data);
136
+ }
137
+
138
+ window.addEventListener("load", function() {
139
+ window.setTimeout(function() {
140
+ setFrameHeight(document.documentElement.clientHeight);
141
+ }, 0);
142
+ });
143
+
144
+ init();
145
+ }
146
+ </script>
147
+ </body>
148
+ </html>