Hugging Face's logo

Spaces:
awacke1
/
SectorMultiplayerChatServer
Running

App Files Community
awacke1 commited on
Commit
a275acd
·
verified ·
1 Parent(s): 22099f6

Update mycomponent/index.html

Browse files
Files changed (1) hide show
  1. mycomponent/index.html +74 -98
mycomponent/index.html CHANGED
@@ -7,37 +7,57 @@
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,13 +65,11 @@
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,7 +84,7 @@
66
  recognition.continuous = true;
67
  recognition.interimResults = true;
68
 
69
- // Function to start recognition
70
  const startRecognition = () => {
71
  try {
72
  recognition.start();
@@ -74,7 +92,7 @@
74
  startButton.disabled = true;
75
  stopButton.disabled = false;
76
  } catch (e) {
77
- console.error(e);
78
  status.textContent = 'Error: ' + e.message;
79
  }
80
  };
@@ -96,9 +114,8 @@
96
  clearButton.onclick = () => {
97
  fullTranscript = '';
98
  output.textContent = '';
99
- window.parent.postMessage({
100
- type: 'clear_transcript',
101
- }, '*');
102
  };
103
 
104
  recognition.onresult = (event) => {
@@ -108,29 +125,20 @@
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,7 +147,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;
@@ -150,87 +158,55 @@
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
-
 
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
  </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
  recognition.continuous = true;
85
  recognition.interimResults = true;
86
 
87
+ // Start recognition function
88
  const startRecognition = () => {
89
  try {
90
  recognition.start();
 
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
  clearButton.onclick = () => {
115
  fullTranscript = '';
116
  output.textContent = '';
117
+ sendDataToPython({ value: '', dataType: "json" });
118
+ status.textContent = 'Cleared';
 
119
  };
120
 
121
  recognition.onresult = (event) => {
 
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
  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
  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>