Code Monkey home page Code Monkey logo

Comments (19)

dtreskunov avatar dtreskunov commented on August 25, 2024 5

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)
})()

image

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.

nshmyrev avatar nshmyrev commented on August 25, 2024 2

@dtreskunov so will you submit a pull request for this?

from vosk-api.

dtreskunov avatar dtreskunov commented on August 25, 2024 1

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.

Inth avatar Inth commented on August 25, 2024 1

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.

Nathanllee1 avatar Nathanllee1 commented on August 25, 2024 1

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.

nshmyrev avatar nshmyrev commented on August 25, 2024 1

Last update

https://github.com/ccoreilly/vosk-browser

from vosk-api.

nshmyrev avatar nshmyrev commented on August 25, 2024

Really cool.

from vosk-api.

plefebvre91 avatar plefebvre91 commented on August 25, 2024

Hey, that's awesome and work very ! What do you plan next ? is it the intention to build a NPM package ?

from vosk-api.

dtreskunov avatar dtreskunov commented on August 25, 2024

@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.

plefebvre91 avatar plefebvre91 commented on August 25, 2024

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.

daanzu avatar daanzu commented on August 25, 2024

This is really impressive! Have you released the steps for how you produced this WebAssembly version?

from vosk-api.

dtreskunov avatar dtreskunov commented on August 25, 2024

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.

daanzu avatar daanzu commented on August 25, 2024

Thanks for the links! Great work!

from vosk-api.

ammyt avatar ammyt commented on August 25, 2024

I would love to use this with my React project! Any ideas on how to achieve this?

from vosk-api.

nshmyrev avatar nshmyrev commented on August 25, 2024

Some things moving in this direction by @mhu-coder:

https://gitlab.inria.fr/kaldi.web/kaldi-wasm/-/tree/master

kaldi-asr/kaldi#4273

https://kaldi-web.loria.fr/

from vosk-api.

nshmyrev avatar nshmyrev commented on August 25, 2024

Also dtreskunov#1

from vosk-api.

vkpruthi avatar vkpruthi commented on August 25, 2024

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.

lijualivenow avatar lijualivenow commented on August 25, 2024

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)
})()

image

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').

How to do in continuous listening with a custom start button and with no text with button

from vosk-api.

wizVR-zhangjun avatar wizVR-zhangjun commented on August 25, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.