2024-02-23 17:39:11 +08:00
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width" / >
2024-08-24 13:24:52 +08:00
< title > Next-gen Kaldi WebAssembly with sherpa-onnx for ASR< / title >
2024-02-23 17:39:11 +08:00
< style >
h1,div {
text-align: center;
}
textarea {
width:100%;
}
2025-03-13 18:35:03 +08:00
.loading {
display: none !important;
}
2024-02-23 17:39:11 +08:00
< / style >
< / head >
2025-03-13 18:35:03 +08:00
< body style = "font-family: 'Source Sans Pro', sans-serif; background-color: #f9fafb; color: #333; display: flex; flex-direction: column; align-items: center; height: 100vh; margin: 0;" >
2024-02-23 17:39:11 +08:00
< h1 >
Next-gen Kaldi + WebAssembly< br / >
ASR Demo with < a href = "https://github.com/k2-fsa/sherpa-onnx" > sherpa-onnx< / a > < br / >
(with Zipformer)
< / h1 >
2025-03-13 18:35:03 +08:00
< div style = "width: 100%; max-width: 900px; background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex: 1;" >
< div id = "status" > Loading...< / div >
< div id = "singleAudioContent" class = "tab-content loading" >
< div style = "display: flex; gap: 1.5rem;" >
< div style = "flex: 1; display: flex; flex-direction: row; align-items: center; gap: 1rem;" >
< button id = "startBtn" disabled > Start< / button >
< button id = "stopBtn" disabled > Stop< / button >
< button id = "clearBtn" > Clear< / button >
< / div >
< / div >
< div style = "flex: 1; display: flex; flex-direction: column; gap: 1rem;" >
< div style = "font-size: 1rem; font-weight: bold; padding: 0.5rem 1rem; background-color: #f8f9fa; border-radius: 8px; color: #6c757d;" > Transcript< / div >
< textarea id = "results" rows = "10" placeholder = "Output will appear here..." readonly style = "flex: 1; padding: 0.75rem; font-size: 1rem; border: 1px solid #ced4da; border-radius: 8px; resize: none; background-color: #f8f9fa;" > < / textarea >
< / div >
< / div >
< section flex = "1" overflow = "auto" id = "sound-clips" >
< / section >
2024-02-23 17:39:11 +08:00
< / div >
2025-03-13 18:35:03 +08:00
<!-- Footer Section -->
< div style = "width: 100%; max-width: 900px; margin-top: 1.5rem; background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); text-align: left; font-size: 0.9rem; color: #6c757d;" >
< h3 > Description< / h3 >
< ul >
< li > Everything is < strong > open-sourced.< / strong > < a href = "https://github.com/k2-fsa/sherpa-onnx" > code< / a > < / li >
< li > If you have any issues, please either < a href = "https://github.com/k2-fsa/sherpa-onnx/issues" > file a ticket< / a > or contact us via< / li >
< ul >
< li > < a href = "https://k2-fsa.github.io/sherpa/social-groups.html#wechat" > WeChat group< / a > < / li >
< li > < a href = "https://k2-fsa.github.io/sherpa/social-groups.html#qq" > QQ group< / a > < / li >
< li > < a href = "https://k2-fsa.github.io/sherpa/social-groups.html#bilibili-b" > Bilibili< / a > < / li >
< / ul >
< / ul >
< h3 > About This Demo< / h3 >
< ul >
< li > < strong > Private and Secure:< / strong > All processing is done locally on your device (CPU) within your browser with a single thread. No server is involved, ensuring privacy and security. You can disconnect from the Internet once this page is loaded.< / li >
< li > < strong > Efficient Resource Usage:< / strong > No GPU is required, leaving system resources available for webLLM analysis.< / li >
< / ul >
< h3 > Latest Update< / h3 >
< ul >
< li > Update UI.< / li >
< li > First working version.< / li >
< / ul >
< h3 > Acknowledgement< / h3 >
< ul >
< li > We refer to < a href = "https://huggingface.co/spaces/Banafo/Kroko-Streaming-ASR-Wasm" > https://huggingface.co/spaces/Banafo/Kroko-Streaming-ASR-Wasm< / a > for the UI part.< / li >
< / ul >
< / div >
2024-02-23 17:39:11 +08:00
2024-03-02 12:31:36 +08:00
< script src = "sherpa-onnx-asr.js" > < / script >
< script src = "app-asr.js" > < / script >
< script src = "sherpa-onnx-wasm-main-asr.js" > < / script >
2024-02-23 17:39:11 +08:00
< / body >
