Comments (19)
I've now packaged it as WebComponent that allows you to easily use it on your own site.
Try it out by pasting the following into Developer Console on a site that doesn't have a restrictive Content Security Policy (such as https://developer.mozilla.org):
(function() {
const scriptElement = document.createElement('script')
scriptElement.type = 'text/javascript'
scriptElement.src = 'https://dtreskunov.github.io/tiny-kaldi/VoskJS.js'
document.querySelector('head').appendChild(scriptElement)
const recognizerElement = document.createElement('vosk-recognizer')
recognizerElement.addEventListener('vosk-recognizer-result', ({detail}) => {
if (!detail.text) return
console.log(detail)
})
recognizerElement.setAttribute('model-url', 'model-en.tar.gz')
recognizerElement.setAttribute('oneshot', true)
recognizerElement.style['background-color'] = '#fff'
recognizerElement.style['border-radius'] = '5px'
recognizerElement.style['border'] = '1px solid #aaa'
recognizerElement.style['top'] = '50%'
recognizerElement.style['font-family'] = ' sans-serif'
recognizerElement.style['left'] = '50%'
recognizerElement.style['padding'] = '.5rem'
recognizerElement.style['position'] = 'fixed'
recognizerElement.style['transform'] = 'translate(-50%, -50%)'
document.querySelector('body').appendChild(recognizerElement)
})()
Or include in your HTML:
<!doctype html>
<html>
<style>
vosk-recognizer {
--font-size: 2rem;
background-color: #fff;
border-radius: 5px;
border: 1px solid #aaa;
font-family: sans-serif;
left: 50%;
padding: .5rem;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<vosk-recognizer model-url="model-en.tar.gz" oneshot></vosk-recognizer>
<script src="https://dtreskunov.github.io/tiny-kaldi/VoskJS.js"></script>
</html>
You can even specify your own model by changing the model-url
attribute. Download one of the models listed on this page and serve it using a web server that sends Access-Control-Allow-Origin: *
response header. For example, 'http-server --cors -p 8000' (install using 'npm install -g http-server').
from vosk-api.
@dtreskunov so will you submit a pull request for this?
from vosk-api.
I am planning to automate WebAssembly builds and start publishing them to NPM if I can figure out how to do that :)
from vosk-api.
Hi Denis
I have sent you a message on FB also :)
I would like to use your script in my html5 educational game but could you please suggest where I should put a custom word list in your script ?
On vosk git they have a python script:
https://github.com/alphacep/vosk-api/blob/master/python/example/test_words.py
in line 19 they define these words
I managed to do the same in their real time microphone python script
https://github.com/alphacep/vosk-api/blob/master/python/example/test_microphone.py
but these are python scripts and I really need JS one
could you please advice ?
Mat
from vosk-api.
Is there any way to feed a .wav file in just within the browser? I know it's possible with the original vosk model, but I'm curious if there's an easy way to do it with this modified module
from vosk-api.
Last update
https://github.com/ccoreilly/vosk-browser
from vosk-api.
Really cool.
from vosk-api.
Hey, that's awesome and work very ! What do you plan next ? is it the intention to build a NPM package ?
from vosk-api.
@plefebvre91 thanks for testing it! I actually don't have a clear plan what to do next. What would be most useful to you?
from vosk-api.
I don't know yet ^^ I tell you everything I think, maybe a lot of these things are not directly related to what you've done (and moreover I don't know WebComponent and its possibilities):
- the possibility to (easily) get the JSON formatted result (with start time, end time, confidence) and merge these results when it's not a "oneshot"
- the possibility to use our own template for the html button
- the possibility to call a custom callback when button is clicked (it's still not clear in my head :) )
- maybe some people could be interested in a NPM/React/Angular/VueJS package/plugin
from vosk-api.
This is really impressive! Have you released the steps for how you produced this WebAssembly version?
from vosk-api.
There's travis/js/Dockerfile
that contains the steps to build Kaldi to WebAssembly (a bunch of hacks I cobbled together from https://github.com/adrianbg/kaldi.js), js/Makefile
with instructions how to build Vosk, and some extra code (e.g. for extracting .tar.gz
models using libarchive).
You can see all the additions here: dtreskunov/tiny-kaldi@master...dtreskunov:js
from vosk-api.
Thanks for the links! Great work!
from vosk-api.
I would love to use this with my React project! Any ideas on how to achieve this?
from vosk-api.
Some things moving in this direction by @mhu-coder:
https://gitlab.inria.fr/kaldi.web/kaldi-wasm/-/tree/master
from vosk-api.
Also dtreskunov#1
from vosk-api.
Hi Denis
I have sent you a message on FB also :)
I would like to use your script in my html5 educational game but could you please suggest where I should put a custom word list in your script ?
On vosk git they have a python script:
https://github.com/alphacep/vosk-api/blob/master/python/example/test_words.py
in line 19 they define these words
I managed to do the same in their real time microphone python script
https://github.com/alphacep/vosk-api/blob/master/python/example/test_microphone.py
but these are python scripts and I really need JS one
could you please advice ?
Mat
@Inth Did you find any way to use words in javascript?
I am also looking for a way to add words to JS.
from vosk-api.
I've now packaged it as WebComponent that allows you to easily use it on your own site.
Try it out by pasting the following into Developer Console on a site that doesn't have a restrictive Content Security Policy (such as https://developer.mozilla.org):
(function() { const scriptElement = document.createElement('script') scriptElement.type = 'text/javascript' scriptElement.src = 'https://dtreskunov.github.io/tiny-kaldi/VoskJS.js' document.querySelector('head').appendChild(scriptElement) const recognizerElement = document.createElement('vosk-recognizer') recognizerElement.addEventListener('vosk-recognizer-result', ({detail}) => { if (!detail.text) return console.log(detail) }) recognizerElement.setAttribute('model-url', 'model-en.tar.gz') recognizerElement.setAttribute('oneshot', true) recognizerElement.style['background-color'] = '#fff' recognizerElement.style['border-radius'] = '5px' recognizerElement.style['border'] = '1px solid #aaa' recognizerElement.style['top'] = '50%' recognizerElement.style['font-family'] = ' sans-serif' recognizerElement.style['left'] = '50%' recognizerElement.style['padding'] = '.5rem' recognizerElement.style['position'] = 'fixed' recognizerElement.style['transform'] = 'translate(-50%, -50%)' document.querySelector('body').appendChild(recognizerElement) })()Or include in your HTML:
<!doctype html> <html> <style> vosk-recognizer { --font-size: 2rem; background-color: #fff; border-radius: 5px; border: 1px solid #aaa; font-family: sans-serif; left: 50%; padding: .5rem; position: fixed; top: 50%; transform: translate(-50%, -50%); } </style> <vosk-recognizer model-url="model-en.tar.gz" oneshot></vosk-recognizer> <script src="https://dtreskunov.github.io/tiny-kaldi/VoskJS.js"></script> </html>
You can even specify your own model by changing the
model-url
attribute. Download one of the models listed on this page and serve it using a web server that sendsAccess-Control-Allow-Origin: *
response header. For example, 'http-server --cors -p 8000' (install using 'npm install -g http-server').
How to do in continuous listening with a custom start button and with no text with button
from vosk-api.
I have a demo of the WebAssembly version available here:
https://dtreskunov.github.io/tiny-kaldi/
Works pretty well, actually. Also, check out how small the binary is!
Links have nothing to see https://dtreskunov.github.io/tiny-kaldi/
from vosk-api.
Related Issues (20)
- Incorrect Japanese words recognition HOT 1
- SpeakerModel on Android HOT 3
- Timestamps aren't working for me and I can't tell why HOT 2
- ʌ and ə in IPA map to CMU phone set
- Missing Documentation Reference HOT 1
- vosk-model-de-tuda-0.6-900k ((VoskAPI:ReadInternal():const-arpa-lm.cc:610) ConstArpaLm section reading failed) HOT 5
- How to use vosk-model-spk-0.4.zip in Unity (Android)? I want to implement the speaker recognition feature. HOT 5
- Yiddish language support HOT 1
- CERTIFICATE_VERIFY_FAILED error HOT 2
- Regarding speaker recognition HOT 2
- Demo on Android run perfectly,but when import into my own pro,it broken.Without log,it is so diffcult to solve it. HOT 1
- VOSK not compatible with newer NodeJS Versions because of ffi-napi dependency HOT 8
- Speech Recognition Persian Problem HOT 1
- where is libvosk.so? HOT 8
- Misleading `vosk_set_log_level` documentation HOT 1
- How to use setGrammar() properly HOT 8
- Pip install warns about externally managed environment HOT 4
- vosk works strangely on a windows server wih more then 30 cores HOT 1
- Training Gigispeech problem in Kaldi HOT 4
- Java example is Missing or is not too easy to find HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vosk-api.