Hugging Face's logo

Spaces:
awacke1
/
CodeCompetitionClaudeVsGPT
Running

App Files Community
awacke1 commited on
Commit
30a0d44
·
verified ·
1 Parent(s): e72faab

Update mycomponent/index.html

Browse files
Files changed (1) hide show
  1. mycomponent/index.html +118 -97
mycomponent/index.html CHANGED
@@ -1,72 +1,57 @@
1
- <!DOCTYPE html>
2
  <html>
3
  <head>
4
- <title>Speech Recognition Component</title>
5
  <style>
6
  body {
7
- font-family: system-ui, -apple-system, sans-serif;
8
- padding: 1rem;
9
  max-width: 800px;
10
  margin: 0 auto;
11
- background: #f8f9fa;
12
- }
13
- .container {
14
- background: white;
15
- padding: 1.5rem;
16
- border-radius: 8px;
17
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
18
  }
19
  button {
20
- padding: 0.5rem 1rem;
21
- margin: 0.5rem;
22
- font-size: 1rem;
23
- border: none;
24
- border-radius: 4px;
25
- cursor: pointer;
26
- transition: all 0.2s;
27
  }
28
- button:disabled {
29
- opacity: 0.5;
30
- cursor: not-allowed;
31
- }
32
- #start { background: #28a745; color: white; }
33
- #stop { background: #dc3545; color: white; }
34
- #clear { background: #6c757d; color: white; }
35
- #status {
36
- margin: 1rem 0;
37
- padding: 0.75rem;
38
  border-radius: 4px;
39
- background: #e9ecef;
40
  }
41
  #output {
42
  white-space: pre-wrap;
43
- padding: 1rem;
44
- background: #f8f9fa;
45
  border-radius: 4px;
46
- border: 1px solid #dee2e6;
47
- margin: 1rem 0;
48
  min-height: 100px;
49
  max-height: 400px;
50
  overflow-y: auto;
51
  }
 
 
 
52
  </style>
53
  </head>
54
  <body>
55
- <div class="container">
56
- <input id="myinput" type="hidden" value="" />
57
- <div class="controls">
58
- <button id="start">Start Listening</button>
59
- <button id="stop" disabled>Stop Listening</button>
60
- <button id="clear">Clear Text</button>
61
- </div>
62
- <div id="status">Ready to start speech recognition...</div>
63
- <div id="output"></div>
64
- </div>
65
 
 
 
 
 
 
 
 
 
 
 
 
66
  <script>
67
- // Check for speech recognition support
68
  if (!('webkitSpeechRecognition' in window)) {
69
- document.getElementById('status').textContent = 'Speech recognition not supported in this browser';
70
  } else {
71
  const recognition = new webkitSpeechRecognition();
72
  const startButton = document.getElementById('start');
@@ -81,7 +66,7 @@
81
  recognition.continuous = true;
82
  recognition.interimResults = true;
83
 
84
- // Start recognition handler
85
  const startRecognition = () => {
86
  try {
87
  recognition.start();
@@ -90,7 +75,7 @@
90
  stopButton.disabled = false;
91
  } catch (e) {
92
  console.error(e);
93
- status.textContent = 'Error starting recognition: ' + e.message;
94
  }
95
  };
96
 
@@ -99,26 +84,23 @@
99
  setTimeout(startRecognition, 1000);
100
  });
101
 
102
- // Button handlers
103
  startButton.onclick = startRecognition;
104
-
105
  stopButton.onclick = () => {
106
  recognition.stop();
107
- status.textContent = 'Stopped listening';
108
- startButton.disabled = false;
109
  stopButton.disabled = true;
110
  };
111
 
112
  clearButton.onclick = () => {
113
  fullTranscript = '';
114
  output.textContent = '';
115
- sendDataToPython({
116
- value: '',
117
- dataType: 'json'
118
- });
119
  };
120
 
121
- // Recognition result handler
122
  recognition.onresult = (event) => {
123
  let interimTranscript = '';
124
  let finalTranscript = '';
@@ -135,28 +117,29 @@
135
  if (finalTranscript || (Date.now() - lastUpdateTime > 5000)) {
136
  if (finalTranscript) {
137
  fullTranscript += finalTranscript;
 
 
 
 
138
  }
139
  lastUpdateTime = Date.now();
140
- }
141
 
142
  output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
143
  output.scrollTop = output.scrollHeight;
144
 
145
- // Send to Streamlit
146
- sendDataToPython({
147
- value: fullTranscript,
148
- dataType: 'json'
149
- });
150
  };
151
 
152
- // Auto-restart recognition
153
  recognition.onend = () => {
154
  if (!stopButton.disabled) {
155
  try {
156
  recognition.start();
157
  console.log('Restarted recognition');
158
  } catch (e) {
159
- console.error('Failed to restart:', e);
160
  status.textContent = 'Error restarting: ' + e.message;
161
  startButton.disabled = false;
162
  stopButton.disabled = true;
@@ -167,49 +150,87 @@
167
  recognition.onerror = (event) => {
168
  console.error('Recognition error:', event.error);
169
  status.textContent = 'Error: ' + event.error;
170
- if (event.error === 'not-allowed') {
 
171
  startButton.disabled = false;
172
  stopButton.disabled = true;
173
  }
174
  };
175
  }
176
 
177
- // Streamlit Component Functions
178
- function sendMessageToStreamlitClient(type, data) {
179
- var outData = Object.assign({
180
- isStreamlitMessage: true,
181
- type: type,
182
- }, data);
183
- window.parent.postMessage(outData, "*");
184
- }
185
 
186
- function init() {
187
- sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1});
188
- }
189
 
190
- function setFrameHeight(height) {
191
- sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height});
192
- }
 
 
 
 
193
 
194
- function sendDataToPython(data) {
195
- sendMessageToStreamlitClient("streamlit:setComponentValue", data);
196
- }
197
 
198
- // Setup event listeners
199
- window.addEventListener("message", (event) => {
200
- if (event.data.type !== "streamlit:render") return;
201
- // Handle any incoming data from Python if needed
202
- });
203
 
204
- // Initialize
205
- init();
206
-
207
- // Set frame height
208
- window.addEventListener("load", () => {
209
- setTimeout(() => {
210
- setFrameHeight(document.documentElement.clientHeight);
211
- }, 0);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
212
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
213
  </script>
214
- </body>
215
- </html>
 
 
 
 
1
  <html>
2
  <head>
3
+ <title>Continuous Speech ASR</title>
4
  <style>
5
  body {
6
+ font-family: sans-serif;
7
+ padding: 20px;
8
  max-width: 800px;
9
  margin: 0 auto;
 
 
 
 
 
 
 
10
  }
11
  button {
12
+ padding: 10px 20px;
13
+ margin: 10px 5px;
14
+ font-size: 16px;
 
 
 
 
15
  }
16
+ #status {
17
+ margin: 10px 0;
18
+ padding: 10px;
19
+ background: #e8f5e9;
 
 
 
 
 
 
20
  border-radius: 4px;
 
21
  }
22
  #output {
23
  white-space: pre-wrap;
24
+ padding: 15px;
25
+ background: #f5f5f5;
26
  border-radius: 4px;
27
+ margin: 10px 0;
 
28
  min-height: 100px;
29
  max-height: 400px;
30
  overflow-y: auto;
31
  }
32
+ .controls {
33
+ margin: 10px 0;
34
+ }
35
  </style>
36
  </head>
37
  <body>
38
+ <!-- Set up your HTML here -->
39
+ <input id="myinput" value="" />
 
 
 
 
 
 
 
 
40
 
41
+ <div class="controls">
42
+ <button id="start">Start Listening</button>
43
+ <button id="stop" disabled>Stop Listening</button>
44
+ <button id="clear">Clear Text</button>
45
+ </div>
46
+ <div id="status">Ready</div>
47
+ <div id="output"></div>
48
+
49
+ <!-- Add the hidden input here -->
50
+ <input type="hidden" id="streamlit-data" value="">
51
+
52
  <script>
 
53
  if (!('webkitSpeechRecognition' in window)) {
54
+ alert('Speech recognition not supported');
55
  } else {
56
  const recognition = new webkitSpeechRecognition();
57
  const startButton = document.getElementById('start');
 
66
  recognition.continuous = true;
67
  recognition.interimResults = true;
68
 
69
+ // Function to start recognition
70
  const startRecognition = () => {
71
  try {
72
  recognition.start();
 
75
  stopButton.disabled = false;
76
  } catch (e) {
77
  console.error(e);
78
+ status.textContent = 'Error: ' + e.message;
79
  }
80
  };
81
 
 
84
  setTimeout(startRecognition, 1000);
85
  });
86
 
 
87
  startButton.onclick = startRecognition;
88
+
89
  stopButton.onclick = () => {
90
  recognition.stop();
91
+ status.textContent = 'Stopped';
92
+ startButton.disabled = false;
93
  stopButton.disabled = true;
94
  };
95
 
96
  clearButton.onclick = () => {
97
  fullTranscript = '';
98
  output.textContent = '';
99
+ window.parent.postMessage({
100
+ type: 'clear_transcript',
101
+ }, '*');
 
102
  };
103
 
 
104
  recognition.onresult = (event) => {
105
  let interimTranscript = '';
106
  let finalTranscript = '';
 
117
  if (finalTranscript || (Date.now() - lastUpdateTime > 5000)) {
118
  if (finalTranscript) {
119
  fullTranscript += finalTranscript;
120
+
121
+ // Update the hidden input value
122
+ document.getElementById('streamlit-data').value = fullTranscript;
123
+
124
  }
125
  lastUpdateTime = Date.now();
126
+ }
127
 
128
  output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
129
  output.scrollTop = output.scrollHeight;
130
 
131
+ document.getElementById('streamlit-data').value = fullTranscript;
132
+ sendDataToPython({value: fullTranscript,dataType: "json",});
133
+
 
 
134
  };
135
 
 
136
  recognition.onend = () => {
137
  if (!stopButton.disabled) {
138
  try {
139
  recognition.start();
140
  console.log('Restarted recognition');
141
  } catch (e) {
142
+ console.error('Failed to restart recognition:', e);
143
  status.textContent = 'Error restarting: ' + e.message;
144
  startButton.disabled = false;
145
  stopButton.disabled = true;
 
150
  recognition.onerror = (event) => {
151
  console.error('Recognition error:', event.error);
152
  status.textContent = 'Error: ' + event.error;
153
+
154
+ if (event.error === 'not-allowed' || event.error === 'service-not-allowed') {
155
  startButton.disabled = false;
156
  stopButton.disabled = true;
157
  }
158
  };
159
  }
160
 
 
 
 
 
 
 
 
 
161
 
162
+ // ----------------------------------------------------
163
+ // Just copy/paste these functions as-is:
 
164
 
165
+ function sendMessageToStreamlitClient(type, data) {
166
+ var outData = Object.assign({
167
+ isStreamlitMessage: true,
168
+ type: type,
169
+ }, data);
170
+ window.parent.postMessage(outData, "*");
171
+ }
172
 
173
+ function init() {
174
+ sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1});
175
+ }
176
 
177
+ function setFrameHeight(height) {
178
+ sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height});
179
+ }
 
 
180
 
181
+ // The `data` argument can be any JSON-serializable value.
182
+ function sendDataToPython(data) {
183
+ sendMessageToStreamlitClient("streamlit:setComponentValue", data);
184
+ }
185
+
186
+ // ----------------------------------------------------
187
+ // Now modify this part of the code to fit your needs:
188
+
189
+ var myInput = document.getElementById("myinput");
190
+ var myOutput = document.getElementById("output");
191
+
192
+ // data is any JSON-serializable value you sent from Python,
193
+ // and it's already deserialized for you.
194
+ function onDataFromPython(event) {
195
+ if (event.data.type !== "streamlit:render") return;
196
+ myInput.value = event.data.args.my_input_value; // Access values sent from Python here!
197
+ }
198
+
199
+ myInput.addEventListener("change", function() {
200
+ sendDataToPython({
201
+ value: myInput.value,
202
+ dataType: "json",
203
  });
204
+ })
205
+
206
+ myOutput.addEventListener("change", function() {
207
+ sendDataToPython({
208
+ value: myOutput.value,
209
+ dataType: "json",
210
+ });
211
+ })
212
+
213
+ // Hook things up!
214
+ window.addEventListener("message", onDataFromPython);
215
+ init();
216
+
217
+ // Hack to autoset the iframe height.
218
+ window.addEventListener("load", function() {
219
+ window.setTimeout(function() {
220
+ setFrameHeight(document.documentElement.clientHeight)
221
+ }, 0);
222
+ });
223
+
224
+ // Optionally, if the automatic height computation fails you, give this component a height manually
225
+ // by commenting out below:
226
+ //setFrameHeight(200);
227
+
228
+
229
+
230
+
231
+
232
  </script>
233
+ </body>
234
+ </html>
235
+
236
+