Hugging Face's logo

Spaces:
Luigi
/
Streaming-Zipformer
Running

App Files Community
Luigi commited on
Commit
1f389c8
·
1 Parent(s): 764e1ea

show mic status

Browse files
Files changed (1) hide show
  1. app/static/index.html +28 -20
app/static/index.html CHANGED
@@ -76,11 +76,6 @@
76
  color: #718093;
77
  }
78
 
79
- #partial {
80
- font-size: 1.25rem;
81
- color: #353b48;
82
- }
83
-
84
  .controls {
85
  display: flex;
86
  gap: 1rem;
@@ -106,6 +101,15 @@
106
  .model-info span {
107
  font-weight: bold;
108
  }
 
 
 
 
 
 
 
 
 
109
  </style>
110
  </head>
111
  <body>
@@ -139,6 +143,11 @@
139
  Languages: <span id="modelLangs"></span> | Size: <span id="modelSize"></span> MB
140
  </div>
141
 
 
 
 
 
 
142
  <progress id="vol" max="1" value="0"></progress>
143
 
144
  <div class="output">
@@ -166,11 +175,13 @@
166
  let ws;
167
 
168
  const vol = document.getElementById("vol");
169
- const partial = document.getElementById("partial");
170
  const modelSelect = document.getElementById("modelSelect");
171
  const precisionSelect = document.getElementById("precisionSelect");
172
  const modelLangs = document.getElementById("modelLangs");
173
  const modelSize = document.getElementById("modelSize");
 
 
174
 
175
  function updateModelInfo() {
176
  const meta = MODEL_METADATA[modelSelect.value];
@@ -190,38 +201,35 @@
190
  model: modelSelect.value,
191
  precision: precisionSelect.value
192
  }));
193
- } else {
194
- console.warn("WebSocket not open yet. Cannot send config.");
195
  }
196
  }
197
 
198
  navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
199
  const context = new AudioContext();
200
  orig_sample_rate = context.sampleRate;
201
- updateModelInfo();
202
 
203
- // Now that we know the sample rate, open the WS
204
- ws = new WebSocket(`wss://${location.host}/ws`);
 
 
 
 
 
 
 
205
  ws.onopen = () => sendConfig();
206
  ws.onerror = err => console.error("WebSocket error:", err);
207
  ws.onclose = () => console.log("WebSocket closed");
208
  ws.onmessage = e => {
209
  const msg = JSON.parse(e.data);
210
- if (msg.volume !== undefined) {
211
- vol.value = Math.min(msg.volume * 20.0, 1.0);
212
- }
213
  if (msg.partial) {
214
- // replace content…
215
  transcript.textContent = msg.partial;
216
- // …then scroll to bottom
217
  transcript.scrollTop = transcript.scrollHeight;
218
  }
219
  };
220
 
221
- modelSelect.addEventListener("change", () => {
222
- updateModelInfo();
223
- sendConfig();
224
- });
225
  precisionSelect.addEventListener("change", sendConfig);
226
 
227
  const source = context.createMediaStreamSource(stream);
 
76
  color: #718093;
77
  }
78
 
 
 
 
 
 
79
  .controls {
80
  display: flex;
81
  gap: 1rem;
 
101
  .model-info span {
102
  font-weight: bold;
103
  }
104
+
105
+ .mic-info {
106
+ margin-bottom: 1rem;
107
+ font-size: 0.9rem;
108
+ color: #353b48;
109
+ }
110
+ .mic-info .label {
111
+ margin-right: 0.25rem;
112
+ }
113
  </style>
114
  </head>
115
  <body>
 
143
  Languages: <span id="modelLangs"></span> | Size: <span id="modelSize"></span> MB
144
  </div>
145
 
146
+ <div class="mic-info">
147
+ <span class="label">Microphone:</span> <span id="micName">Detecting...</span><br>
148
+ <span class="label">Sample Rate:</span> <span id="sampleRate">-</span> Hz
149
+ </div>
150
+
151
  <progress id="vol" max="1" value="0"></progress>
152
 
153
  <div class="output">
 
175
  let ws;
176
 
177
  const vol = document.getElementById("vol");
178
+ const transcript = document.getElementById("transcript");
179
  const modelSelect = document.getElementById("modelSelect");
180
  const precisionSelect = document.getElementById("precisionSelect");
181
  const modelLangs = document.getElementById("modelLangs");
182
  const modelSize = document.getElementById("modelSize");
183
+ const micNameElem = document.getElementById("micName");
184
+ const sampleRateElem = document.getElementById("sampleRate");
185
 
186
  function updateModelInfo() {
187
  const meta = MODEL_METADATA[modelSelect.value];
 
201
  model: modelSelect.value,
202
  precision: precisionSelect.value
203
  }));
 
 
204
  }
205
  }
206
 
207
  navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
208
  const context = new AudioContext();
209
  orig_sample_rate = context.sampleRate;
 
210
 
211
+ // Update mic info in UI
212
+ const track = stream.getAudioTracks()[0];
213
+ micNameElem.textContent = track.label || 'Unknown';
214
+ sampleRateElem.textContent = orig_sample_rate;
215
+
216
+ updateModelInfo();
217
+
218
+ // Open WebSocket after mic ready
219
+ ws = new WebSocket(`ws://${location.host}/ws`);
220
  ws.onopen = () => sendConfig();
221
  ws.onerror = err => console.error("WebSocket error:", err);
222
  ws.onclose = () => console.log("WebSocket closed");
223
  ws.onmessage = e => {
224
  const msg = JSON.parse(e.data);
225
+ if (msg.volume !== undefined) vol.value = Math.min(msg.volume * 20.0, 1.0);
 
 
226
  if (msg.partial) {
 
227
  transcript.textContent = msg.partial;
 
228
  transcript.scrollTop = transcript.scrollHeight;
229
  }
230
  };
231
 
232
+ modelSelect.addEventListener("change", () => { updateModelInfo(); sendConfig(); });
 
 
 
233
  precisionSelect.addEventListener("change", sendConfig);
234
 
235
  const source = context.createMediaStreamSource(stream);