Hugging Face's logo

Spaces:
Luigi
/
Streaming-Zipformer
Running

App Files Community
Luigi commited on
Commit
8e221a6
·
1 Parent(s): 516e9a4

show model size and supportd languages

Browse files
Files changed (1) hide show
  1. app/static/index.html +66 -48
app/static/index.html CHANGED
@@ -87,6 +87,15 @@
87
  border: 1px solid #dcdde1;
88
  background: white;
89
  }
 
 
 
 
 
 
 
 
 
90
  </style>
91
  </head>
92
  <body>
@@ -104,7 +113,7 @@
104
  <option value="csukuangfj/sherpa-onnx-streaming-zipformer-en-2023-02-21">zipformer-en-02-21</option>
105
  <option value="csukuangfj/sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20">zipformer-zh-en</option>
106
  <option value="shaojieli/sherpa-onnx-streaming-zipformer-fr-2023-04-14">zipformer-fr</option>
107
- <option value="sherpa-onnx-streaming-zipformer-small-bilingual-zh-en-2023-02-16">zipformer-small-zh-en</option>
108
  <option value="csukuangfj/sherpa-onnx-streaming-zipformer-zh-14M-2023-02-23">zipformer-zh-14M</option>
109
  <option value="csukuangfj/sherpa-onnx-streaming-zipformer-en-20M-2023-02-17">zipformer-en-20M</option>
110
  </select>
@@ -116,6 +125,10 @@
116
  </select>
117
  </div>
118
 
 
 
 
 
119
  <progress id="vol" max="1" value="0"></progress>
120
 
121
  <div class="output">
@@ -124,8 +137,22 @@
124
  </div>
125
 
126
  <script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
127
  let orig_sample_rate;
128
- console.log("[DEBUG client] Attempting to open WebSocket to ws://" + location.host + "/ws");
129
  const ws = new WebSocket("wss://" + location.host + "/ws");
130
 
131
  const vol = document.getElementById("vol");
@@ -133,44 +160,45 @@
133
  const finalText = document.getElementById("final");
134
  const modelSelect = document.getElementById("modelSelect");
135
  const precisionSelect = document.getElementById("precisionSelect");
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
136
 
137
  navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
138
  const context = new AudioContext();
139
  orig_sample_rate = context.sampleRate;
140
 
141
  ws.onopen = () => {
 
142
  sendConfig();
143
- console.log("[DEBUG client] WebSocket.onopen fired!");
144
- ws.send(JSON.stringify({
145
- type: "config",
146
- sampleRate: orig_sample_rate,
147
- model: modelSelect.value,
148
- precision: precisionSelect.value
149
- }));
150
  };
151
 
152
- // factor out sending config
153
- function sendConfig() {
154
- ws.send(JSON.stringify({
155
- type: "config",
156
- sampleRate: orig_sample_rate,
157
- model: modelSelect.value,
158
- precision: precisionSelect.value
159
- }));
160
- }
161
-
162
- // send a new config when dropdowns change
163
- modelSelect.addEventListener("change", sendConfig);
164
  precisionSelect.addEventListener("change", sendConfig);
165
 
166
-
167
- ws.onerror = err => {
168
- console.error("[DEBUG client] WebSocket.onerror:", err);
169
- };
170
-
171
- ws.onclose = () => {
172
- console.log("[DEBUG client] WebSocket.onclose fired!");
173
- };
174
 
175
  const source = context.createMediaStreamSource(stream);
176
  const processor = context.createScriptProcessor(4096, 1, 1);
@@ -179,32 +207,22 @@
179
 
180
  processor.onaudioprocess = e => {
181
  const input = e.inputBuffer.getChannelData(0);
182
- // Log the first few samples so you know it’s not all zeros
183
- console.log("[DEBUG client] Sending audio chunk, first5 samples:", input.slice(0,5));
184
  ws.send(new Float32Array(input).buffer);
185
  };
186
 
187
  ws.onmessage = e => {
188
- console.log("[DEBUG client] Received server message:", e.data);
189
  const msg = JSON.parse(e.data);
190
- // Always update the meter if we have a volume
191
- if (msg.volume !== undefined) {
192
- console.log(`[DEBUG client] Raw volume from server: ${msg.volume.toFixed(5)}`);
193
- const scaled = Math.min(msg.volume * 20.0, 1.0);
194
- console.log(`[DEBUG client] Meter value: ${scaled.toFixed(3)}`);
195
- vol.value = scaled;
196
- }
197
- // And separately handle transcription updates
198
- if (msg.partial) {
199
- partial.textContent = msg.partial;
200
- }
201
- if (msg.final) {
202
- console.log("[DEBUG client] Final:", msg.final);
203
- finalText.textContent = msg.final;
204
- }
205
  };
206
  });
207
  </script>
208
-
209
  </body>
210
  </html>
 
87
  border: 1px solid #dcdde1;
88
  background: white;
89
  }
90
+
91
+ .model-info {
92
+ margin-bottom: 1rem;
93
+ font-size: 0.9rem;
94
+ color: #353b48;
95
+ }
96
+ .model-info span {
97
+ font-weight: bold;
98
+ }
99
  </style>
100
  </head>
101
  <body>
 
113
  <option value="csukuangfj/sherpa-onnx-streaming-zipformer-en-2023-02-21">zipformer-en-02-21</option>
114
  <option value="csukuangfj/sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20">zipformer-zh-en</option>
115
  <option value="shaojieli/sherpa-onnx-streaming-zipformer-fr-2023-04-14">zipformer-fr</option>
116
+ <option value="csukuangfj/sherpa-onnx-streaming-zipformer-small-bilingual-zh-en-2023-02-16">zipformer-small-zh-en</option>
117
  <option value="csukuangfj/sherpa-onnx-streaming-zipformer-zh-14M-2023-02-23">zipformer-zh-14M</option>
118
  <option value="csukuangfj/sherpa-onnx-streaming-zipformer-en-20M-2023-02-17">zipformer-en-20M</option>
119
  </select>
 
125
  </select>
126
  </div>
127
 
128
+ <div class="model-info" id="modelInfo">
129
+ Languages: <span id="modelLangs"></span> | Size: <span id="modelSize"></span> MB
130
+ </div>
131
+
132
  <progress id="vol" max="1" value="0"></progress>
133
 
134
  <div class="output">
 
137
  </div>
138
 
139
  <script>
140
+ const MODEL_METADATA = {
141
+ "pfluo/k2fsa-zipformer-chinese-english-mixed": { language: ["zh", "en"], size: 342 },
142
+ "k2-fsa/sherpa-onnx-streaming-zipformer-korean-2024-06-16": { language: "korean", size: 300 },
143
+ "k2-fsa/sherpa-onnx-streaming-zipformer-multi-zh-hans-2023-12-12": { language: "zh-Hans", size: 258 },
144
+ "pkufool/icefall-asr-zipformer-streaming-wenetspeech-20230615": { language: "zh (WenetSpeech)", size: 273 },
145
+ "csukuangfj/sherpa-onnx-streaming-zipformer-en-2023-06-26": { language: "english", size: 340 },
146
+ "csukuangfj/sherpa-onnx-streaming-zipformer-en-2023-06-21": { language: "english", size: 340 },
147
+ "csukuangfj/sherpa-onnx-streaming-zipformer-en-2023-02-21": { language: "english", size: 341 },
148
+ "csukuangfj/sherpa-onnx-streaming-zipformer-bilingual-zh-en-2023-02-20": { language: ["zh", "en"], size: 342 },
149
+ "shaojieli/sherpa-onnx-streaming-zipformer-fr-2023-04-14": { language: "french", size: 282 },
150
+ "csukuangfj/sherpa-onnx-streaming-zipformer-small-bilingual-zh-en-2023-02-16": { language: ["zh", "en"], size: 112 },
151
+ "csukuangfj/sherpa-onnx-streaming-zipformer-zh-14M-2023-02-23": { language: "zh", size: 53 },
152
+ "csukuangfj/sherpa-onnx-streaming-zipformer-en-20M-2023-02-17": { language: "en", size: 88 }
153
+ };
154
+
155
  let orig_sample_rate;
 
156
  const ws = new WebSocket("wss://" + location.host + "/ws");
157
 
158
  const vol = document.getElementById("vol");
 
160
  const finalText = document.getElementById("final");
161
  const modelSelect = document.getElementById("modelSelect");
162
  const precisionSelect = document.getElementById("precisionSelect");
163
+ const modelLangs = document.getElementById("modelLangs");
164
+ const modelSize = document.getElementById("modelSize");
165
+
166
+ function updateModelInfo() {
167
+ const meta = MODEL_METADATA[modelSelect.value];
168
+ if (Array.isArray(meta.language)) {
169
+ modelLangs.textContent = meta.language.join(', ');
170
+ } else {
171
+ modelLangs.textContent = meta.language;
172
+ }
173
+ modelSize.textContent = meta.size;
174
+ }
175
+
176
+ function sendConfig() {
177
+ ws.send(JSON.stringify({
178
+ type: "config",
179
+ sampleRate: orig_sample_rate,
180
+ model: modelSelect.value,
181
+ precision: precisionSelect.value
182
+ }));
183
+ }
184
 
185
  navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
186
  const context = new AudioContext();
187
  orig_sample_rate = context.sampleRate;
188
 
189
  ws.onopen = () => {
190
+ updateModelInfo();
191
  sendConfig();
 
 
 
 
 
 
 
192
  };
193
 
194
+ modelSelect.addEventListener("change", () => {
195
+ updateModelInfo();
196
+ sendConfig();
197
+ });
 
 
 
 
 
 
 
 
198
  precisionSelect.addEventListener("change", sendConfig);
199
 
200
+ ws.onerror = err => console.error("WebSocket error:", err);
201
+ ws.onclose = () => console.log("WebSocket closed");
 
 
 
 
 
 
202
 
203
  const source = context.createMediaStreamSource(stream);
204
  const processor = context.createScriptProcessor(4096, 1, 1);
 
207
 
208
  processor.onaudioprocess = e => {
209
  const input = e.inputBuffer.getChannelData(0);
 
 
210
  ws.send(new Float32Array(input).buffer);
211
  };
212
 
213
  ws.onmessage = e => {
 
214
  const msg = JSON.parse(e.data);
215
+ if (msg.volume !== undefined) {
216
+ vol.value = Math.min(msg.volume * 20.0, 1.0);
217
+ }
218
+ if (msg.partial) {
219
+ partial.textContent = msg.partial;
220
+ }
221
+ if (msg.final) {
222
+ finalText.textContent = msg.final;
223
+ }
 
 
 
 
 
 
224
  };
225
  });
226
  </script>
 
227
  </body>
228
  </html>