Hugging Face's logo

Spaces:
awacke1
/
SectorMultiplayerChatServer
Running

App Files Community
awacke1 commited on
Commit
1b21136
·
verified ·
1 Parent(s): 797a2a5

Update mycomponent/index.html

Browse files
Files changed (1) hide show
  1. mycomponent/index.html +43 -132
mycomponent/index.html CHANGED
@@ -29,15 +29,9 @@
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>
@@ -45,10 +39,8 @@
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');
@@ -60,29 +52,18 @@
60
  const status = document.getElementById('status');
61
  const output = document.getElementById('output');
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();
73
- status.textContent = 'Listening...';
74
- startButton.disabled = true;
75
- stopButton.disabled = false;
76
- } catch (e) {
77
- console.error(e);
78
- status.textContent = 'Error: ' + e.message;
79
- }
80
  };
81
 
82
- // Auto-start on load
83
- window.addEventListener('load', () => {
84
- setTimeout(startRecognition, 1000);
85
- });
86
 
87
  startButton.onclick = startRecognition;
88
 
@@ -96,9 +77,7 @@
96
  clearButton.onclick = () => {
97
  fullTranscript = '';
98
  output.textContent = '';
99
- window.parent.postMessage({
100
- type: 'clear_transcript',
101
- }, '*');
102
  };
103
 
104
  recognition.onresult = (event) => {
@@ -108,129 +87,61 @@
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
  }
115
  }
116
 
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;
146
- }
147
  }
148
  };
149
 
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
 
 
 
 
 
 
 
29
  max-height: 400px;
30
  overflow-y: auto;
31
  }
 
 
 
32
  </style>
33
  </head>
34
  <body>
 
 
 
35
  <div class="controls">
36
  <button id="start">Start Listening</button>
37
  <button id="stop" disabled>Stop Listening</button>
 
39
  </div>
40
  <div id="status">Ready</div>
41
  <div id="output"></div>
 
 
42
  <input type="hidden" id="streamlit-data" value="">
43
+
44
  <script>
45
  if (!('webkitSpeechRecognition' in window)) {
46
  alert('Speech recognition not supported');
 
52
  const status = document.getElementById('status');
53
  const output = document.getElementById('output');
54
  let fullTranscript = '';
 
55
 
 
56
  recognition.continuous = true;
57
  recognition.interimResults = true;
58
 
 
59
  const startRecognition = () => {
60
+ recognition.start();
61
+ status.textContent = 'Listening...';
62
+ startButton.disabled = true;
63
+ stopButton.disabled = false;
 
 
 
 
 
64
  };
65
 
66
+ window.addEventListener('load', () => setTimeout(startRecognition, 1000));
 
 
 
67
 
68
  startButton.onclick = startRecognition;
69
 
 
77
  clearButton.onclick = () => {
78
  fullTranscript = '';
79
  output.textContent = '';
80
+ sendDataToPython({ value: '', dataType: "json" });
 
 
81
  };
82
 
83
  recognition.onresult = (event) => {
 
87
  for (let i = event.resultIndex; i < event.results.length; i++) {
88
  const transcript = event.results[i][0].transcript;
89
  if (event.results[i].isFinal) {
90
+ finalTranscript += transcript + '\n';
91
  } else {
92
  interimTranscript += transcript;
93
  }
94
  }
95
 
96
+ if (finalTranscript) {
97
+ fullTranscript += finalTranscript;
98
+ output.textContent = fullTranscript;
99
+ output.scrollTop = output.scrollHeight;
100
+ document.getElementById('streamlit-data').value = fullTranscript;
101
+ sendDataToPython({ value: fullTranscript, dataType: "json" });
102
+ } else {
103
+ output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
104
+ }
 
 
 
 
 
 
 
 
105
  };
106
 
107
  recognition.onend = () => {
108
  if (!stopButton.disabled) {
109
+ recognition.start();
 
 
 
 
 
 
 
 
110
  }
111
  };
112
 
113
  recognition.onerror = (event) => {
114
  console.error('Recognition error:', event.error);
115
  status.textContent = 'Error: ' + event.error;
116
+ startButton.disabled = false;
117
+ stopButton.disabled = true;
 
 
 
118
  };
 
119
 
120
+ function sendMessageToStreamlitClient(type, data) {
121
+ var outData = Object.assign({ isStreamlitMessage: true, type: type }, data);
122
+ window.parent.postMessage(outData, "*");
123
+ }
124
 
125
+ function init() {
126
+ sendMessageToStreamlitClient("streamlit:componentReady", { apiVersion: 1 });
127
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128
 
129
+ function setFrameHeight(height) {
130
+ sendMessageToStreamlitClient("streamlit:setFrameHeight", { height: height });
131
+ }
132
 
133
+ function sendDataToPython(data) {
134
+ sendMessageToStreamlitClient("streamlit:setComponentValue", data);
135
+ }
136
 
137
+ window.addEventListener("load", function() {
138
+ window.setTimeout(function() {
139
+ setFrameHeight(document.documentElement.clientHeight);
140
+ }, 0);
141
+ });
142
 
143
+ init();
144
+ }
145
+ </script>
146
+ </body>
147
+ </html>