Hugging Face's logo

Spaces:
awacke1
/
CodeCompetitionClaudeVsGPT
Running

App Files Community
awacke1 commited on
Commit
afb03f0
·
verified ·
1 Parent(s): 3874223

Update mycomponent/index.html

Browse files
Files changed (1) hide show
  1. mycomponent/index.html +60 -87
mycomponent/index.html CHANGED
@@ -1,6 +1,7 @@
 
1
  <html>
2
  <head>
3
- <title>Continuous Speech ASR</title>
4
  <style>
5
  body {
6
  font-family: sans-serif;
@@ -12,7 +13,14 @@
12
  padding: 10px 20px;
13
  margin: 10px 5px;
14
  font-size: 16px;
 
 
 
 
15
  }
 
 
 
16
  #status {
17
  margin: 10px 0;
18
  padding: 10px;
@@ -31,27 +39,31 @@
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');
@@ -62,11 +74,9 @@
62
  let fullTranscript = '';
63
  let lastUpdateTime = Date.now();
64
 
65
- // Configure recognition
66
  recognition.continuous = true;
67
  recognition.interimResults = true;
68
 
69
- // Function to start recognition
70
  const startRecognition = () => {
71
  try {
72
  recognition.start();
@@ -96,9 +106,11 @@
96
  clearButton.onclick = () => {
97
  fullTranscript = '';
98
  output.textContent = '';
99
- window.parent.postMessage({
100
- type: 'clear_transcript',
101
- }, '*');
 
 
102
  };
103
 
104
  recognition.onresult = (event) => {
@@ -108,7 +120,7 @@
108
  for (let i = event.resultIndex; i < event.results.length; i++) {
109
  const transcript = event.results[i][0].transcript;
110
  if (event.results[i].isFinal) {
111
- finalTranscript += transcript + '\\n';
112
  } else {
113
  interimTranscript += transcript;
114
  }
@@ -117,20 +129,18 @@
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 = () => {
@@ -139,7 +149,7 @@
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;
@@ -158,79 +168,42 @@
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
-
 
1
+ <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <title>Continuous Speech Input</title>
5
  <style>
6
  body {
7
  font-family: sans-serif;
 
13
  padding: 10px 20px;
14
  margin: 10px 5px;
15
  font-size: 16px;
16
+ border: none;
17
+ border-radius: 5px;
18
+ cursor: pointer;
19
+ color: white;
20
  }
21
+ #start { background: #ff4b4b; }
22
+ #stop { background: #4b4bff; }
23
+ #clear { background: #666; }
24
  #status {
25
  margin: 10px 0;
26
  padding: 10px;
 
39
  }
40
  .controls {
41
  margin: 10px 0;
42
+ display: flex;
43
+ gap: 10px;
44
+ }
45
+ button:disabled {
46
+ opacity: 0.6;
47
+ cursor: not-allowed;
48
  }
49
  </style>
50
  </head>
51
  <body>
52
+ <input id="myinput" value="" style="display: none;" />
 
53
 
54
  <div class="controls">
55
  <button id="start">Start Listening</button>
56
  <button id="stop" disabled>Stop Listening</button>
57
  <button id="clear">Clear Text</button>
58
  </div>
59
+ <div id="status">Ready to record...</div>
60
  <div id="output"></div>
61
 
 
62
  <input type="hidden" id="streamlit-data" value="">
63
 
64
  <script>
65
  if (!('webkitSpeechRecognition' in window)) {
66
+ document.getElementById('status').textContent = 'Speech recognition not supported in this browser';
67
  } else {
68
  const recognition = new webkitSpeechRecognition();
69
  const startButton = document.getElementById('start');
 
74
  let fullTranscript = '';
75
  let lastUpdateTime = Date.now();
76
 
 
77
  recognition.continuous = true;
78
  recognition.interimResults = true;
79
 
 
80
  const startRecognition = () => {
81
  try {
82
  recognition.start();
 
106
  clearButton.onclick = () => {
107
  fullTranscript = '';
108
  output.textContent = '';
109
+ document.getElementById('streamlit-data').value = '';
110
+ sendDataToPython({
111
+ value: '',
112
+ dataType: "json",
113
+ });
114
  };
115
 
116
  recognition.onresult = (event) => {
 
120
  for (let i = event.resultIndex; i < event.results.length; i++) {
121
  const transcript = event.results[i][0].transcript;
122
  if (event.results[i].isFinal) {
123
+ finalTranscript += transcript + '\n';
124
  } else {
125
  interimTranscript += transcript;
126
  }
 
129
  if (finalTranscript || (Date.now() - lastUpdateTime > 5000)) {
130
  if (finalTranscript) {
131
  fullTranscript += finalTranscript;
 
 
132
  document.getElementById('streamlit-data').value = fullTranscript;
 
133
  }
134
  lastUpdateTime = Date.now();
135
  }
136
 
137
  output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
138
  output.scrollTop = output.scrollHeight;
139
+
140
+ sendDataToPython({
141
+ value: fullTranscript,
142
+ dataType: "json",
143
+ });
144
  };
145
 
146
  recognition.onend = () => {
 
149
  recognition.start();
150
  console.log('Restarted recognition');
151
  } catch (e) {
152
+ console.error('Failed to restart:', e);
153
  status.textContent = 'Error restarting: ' + e.message;
154
  startButton.disabled = false;
155
  stopButton.disabled = true;
 
168
  };
169
  }
170
 
171
+ // Streamlit communication functions
172
+ function sendMessageToStreamlitClient(type, data) {
173
+ var outData = Object.assign({
174
+ isStreamlitMessage: true,
175
+ type: type,
176
+ }, data);
177
+ window.parent.postMessage(outData, "*");
178
+ }
179
 
180
+ function init() {
181
+ sendMessageToStreamlitClient("streamlit:componentReady", {apiVersion: 1});
182
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
183
 
184
+ function setFrameHeight(height) {
185
+ sendMessageToStreamlitClient("streamlit:setFrameHeight", {height: height});
186
+ }
 
187
 
188
+ function sendDataToPython(data) {
189
+ sendMessageToStreamlitClient("streamlit:setComponentValue", data);
190
+ }
191
 
192
+ function onDataFromPython(event) {
193
+ if (event.data.type !== "streamlit:render") return;
194
+ document.getElementById("myinput").value = event.data.args.my_input_value;
195
+ }
196
 
197
+ window.addEventListener("message", onDataFromPython);
198
+ init();
 
 
 
 
199
 
200
+ window.addEventListener("load", function() {
201
+ window.setTimeout(function() {
202
+ setFrameHeight(document.documentElement.clientHeight)
203
+ }, 0);
 
 
 
 
 
 
 
204
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
205
 
206
+ setFrameHeight(400); // Fixed height for better visibility
207
  </script>
208
+ </body>
209
+ </html>