Hugging Face's logo

Spaces:
awacke1
/
SectorMultiplayerChatServer
Running

App Files Community
awacke1 commited on
Commit
d2899f8
·
verified ·
1 Parent(s): 970cbf0

Update mycomponent/index.html

Browse files
Files changed (1) hide show
  1. mycomponent/index.html +98 -74
mycomponent/index.html CHANGED
@@ -7,57 +7,37 @@
7
  padding: 20px;
8
  max-width: 800px;
9
  margin: 0 auto;
10
- background: #f9f9f9;
11
  }
12
  button {
13
  padding: 10px 20px;
14
- margin: 5px;
15
  font-size: 16px;
16
- border: none;
17
- border-radius: 5px;
18
- cursor: pointer;
19
- background-color: #4CAF50;
20
- color: white;
21
- transition: background-color 0.3s;
22
- }
23
- button:disabled {
24
- background-color: #cccccc;
25
- cursor: not-allowed;
26
- }
27
- button:hover:not(:disabled) {
28
- background-color: #45a049;
29
  }
30
  #status {
31
  margin: 10px 0;
32
  padding: 10px;
33
  background: #e8f5e9;
34
  border-radius: 4px;
35
- font-weight: bold;
36
  }
37
  #output {
38
  white-space: pre-wrap;
39
  padding: 15px;
40
  background: #f5f5f5;
41
- border: 1px solid #ddd;
42
  border-radius: 4px;
43
  margin: 10px 0;
44
  min-height: 100px;
45
- max-height: 300px;
46
  overflow-y: auto;
47
- font-family: monospace;
48
  }
49
  .controls {
50
  margin: 10px 0;
51
- display: flex;
52
- gap: 10px;
53
  }
54
- #stop { background-color: #f44336; }
55
- #stop:hover:not(:disabled) { background-color: #da190b; }
56
- #clear { background-color: #ff9800; }
57
- #clear:hover:not(:disabled) { background-color: #e68a00; }
58
  </style>
59
  </head>
60
  <body>
 
 
 
61
  <div class="controls">
62
  <button id="start">Start Listening</button>
63
  <button id="stop" disabled>Stop Listening</button>
@@ -65,11 +45,13 @@
65
  </div>
66
  <div id="status">Ready</div>
67
  <div id="output"></div>
 
 
68
  <input type="hidden" id="streamlit-data" value="">
69
-
70
  <script>
71
  if (!('webkitSpeechRecognition' in window)) {
72
- alert('Speech recognition not supported. Please use a compatible browser like Chrome.');
73
  } else {
74
  const recognition = new webkitSpeechRecognition();
75
  const startButton = document.getElementById('start');
@@ -84,7 +66,7 @@
84
  recognition.continuous = true;
85
  recognition.interimResults = true;
86
 
87
- // Start recognition function
88
  const startRecognition = () => {
89
  try {
90
  recognition.start();
@@ -92,7 +74,7 @@
92
  startButton.disabled = true;
93
  stopButton.disabled = false;
94
  } catch (e) {
95
- console.error('Start error:', e);
96
  status.textContent = 'Error: ' + e.message;
97
  }
98
  };
@@ -114,8 +96,9 @@
114
  clearButton.onclick = () => {
115
  fullTranscript = '';
116
  output.textContent = '';
117
- sendDataToPython({ value: '', dataType: "json" });
118
- status.textContent = 'Cleared';
 
119
  };
120
 
121
  recognition.onresult = (event) => {
@@ -125,20 +108,29 @@
125
  for (let i = event.resultIndex; i < event.results.length; i++) {
126
  const transcript = event.results[i][0].transcript;
127
  if (event.results[i].isFinal) {
128
- finalTranscript += transcript + '\n';
129
  } else {
130
  interimTranscript += transcript;
131
  }
132
  }
133
 
134
- if (finalTranscript) {
135
- fullTranscript += finalTranscript;
136
- sendDataToPython({ value: fullTranscript, dataType: "json" });
137
- }
 
 
 
 
 
 
138
 
139
  output.textContent = fullTranscript + (interimTranscript ? '... ' + interimTranscript : '');
140
  output.scrollTop = output.scrollHeight;
 
141
  document.getElementById('streamlit-data').value = fullTranscript;
 
 
142
  };
143
 
144
  recognition.onend = () => {
@@ -147,7 +139,7 @@
147
  recognition.start();
148
  console.log('Restarted recognition');
149
  } catch (e) {
150
- console.error('Restart error:', e);
151
  status.textContent = 'Error restarting: ' + e.message;
152
  startButton.disabled = false;
153
  stopButton.disabled = true;
@@ -158,55 +150,87 @@
158
  recognition.onerror = (event) => {
159
  console.error('Recognition error:', event.error);
160
  status.textContent = 'Error: ' + event.error;
 
161
  if (event.error === 'not-allowed' || event.error === 'service-not-allowed') {
162
- status.textContent = 'Error: Microphone permission denied';
163
  startButton.disabled = false;
164
  stopButton.disabled = true;
165
  }
166
  };
167
  }
168
 
169
- // Streamlit communication functions
170
- function sendMessageToStreamlitClient(type, data) {
171
- var outData = Object.assign({
172
- isStreamlitMessage: true,
173
- type: type,
174
- }, data);
175
- window.parent.postMessage(outData, "*");
176
- }
177
 
178
- function init() {
179
- sendMessageToStreamlitClient("streamlit:componentReady", { apiVersion: 1 });
180
- }
181
 
182
- function setFrameHeight(height) {
183
- sendMessageToStreamlitClient("streamlit:setFrameHeight", { height: height });
184
- }
 
 
 
 
185
 
186
- function sendDataToPython(data) {
187
- sendMessageToStreamlitClient("streamlit:setComponentValue", data);
188
- }
189
 
190
- function onDataFromPython(event) {
191
- if (event.data.type !== "streamlit:render") return;
192
- const inputValue = event.data.args.my_input_value;
193
- if (inputValue !== undefined) {
194
- fullTranscript = inputValue;
195
- output.textContent = fullTranscript;
196
- document.getElementById('streamlit-data').value = fullTranscript;
197
- }
198
- }
 
 
 
 
 
199
 
200
- // Hook up event listeners
201
- window.addEventListener("message", onDataFromPython);
202
- init();
 
 
 
203
 
204
- // Autoset iframe height
205
- window.addEventListener("load", function() {
206
- window.setTimeout(function() {
207
- setFrameHeight(document.documentElement.scrollHeight);
208
- }, 0);
209
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
210
  </script>
211
- </body>
212
- </html>
 
 
 
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>
 
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();
 
74
  startButton.disabled = true;
75
  stopButton.disabled = false;
76
  } catch (e) {
77
+ console.error(e);
78
  status.textContent = 'Error: ' + e.message;
79
  }
80
  };
 
96
  clearButton.onclick = () => {
97
  fullTranscript = '';
98
  output.textContent = '';
99
+ window.parent.postMessage({
100
+ type: 'clear_transcript',
101
+ }, '*');
102
  };
103
 
104
  recognition.onresult = (event) => {
 
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 = () => {
 
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
+