Can't run

[CygnusBell]

I keep getting "invalid base URL" when I try to load any of the example scripts.

[ccoreilly]

Hello CygnusBell!

How are you "loading" the example scripts? You need to locally run a webserver for any example to work.

[CygnusBell]

Hi, thanks for the quick response.

I am trying to load it on my bluehost shared server, netlify, localhost server, and with NPM run start (the react one).

The first 3 all load but when I press "start recognition" I get various errors. The netlify one give sthis... Failed to load resource: the server responded with a status of 404 () f613e225-f858-4423-8795-9b7b0dae6cb3:121 Error: HTTP error! status: 404 at f613e225-f858-4423-8795-9b7b0dae6cb3:39:4309182 at Generator.next (<anonymous>) at loop (f613e225-f858-4423-8795-9b7b0dae6cb3:39:4308273) at f613e225-f858-4423-8795-9b7b0dae6cb3:39:4308454 error @ f613e225-f858-4423-8795-9b7b0dae6cb3:121 f613e225-f858-4423-8795-9b7b0dae6cb3:39 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'done') at loop (f613e225-f858-4423-8795-9b7b0dae6cb3:39:4308320) at f613e225-f858-4423-8795-9b7b0dae6cb3:39:4308454

the React one just says it can't find 'start'

[CygnusBell]

The local apache web server one says blob:null/5fcbe8e1-c4c5-47cc-b731-53bfd09fc3ee:121 TypeError: Failed to construct 'URL': Invalid base URL at blob:null/5fcbe8e1-c4c5-47cc-b731-53bfd09fc3ee:240:42

[erikh2000]

@CygnusBell , "npm run start" is going to run a lightweight server intended only for local development. I can explain that further if you want, but the TL;DR is... this approach is very unlikely to work for public hosting!

The better way is to run "npm run build" and then upload the built files from your /public directory to a web-served directory. On BlueHost, I accomplish this with FTP. Another way of thinking about it is that nothing needs to "run" on the server. You are uploading static files that a web server will serve for you. And once those are loaded into a user's browser, the magical Vosk-browser code will run inside the browser.

[CygnusBell]

Thank you @erikh2000 for your help, I'm quite desperate to figure this out haha.

I'm very familiar with React, but I'm saying npm run start or npm run build don't work, it just says "sh: react-scripts: command not found"

I realized the problem is I forgot to run npm install first.

Now it loads up but I get this error...

`Compiled with problems:X

ERROR in ./src/recognizer.tsx 7:0-43

Module not found: Error: Can't resolve 'vosk-browser' in`

Also I thought the other exapmles were just flat JS so didn't need to be built, because they load just fine, it's not until I click load recognition does it say cannot connect to server

[CygnusBell]

Ok, I solved that problem, I needed to remove the location of vosk-browser in the package file and then npm i vosk-browser and npm i buffer and now it starts.

Now I'm having an error when I run it in the browser and click "load" for english. I'm thinking maybe I need to download the language files?

In browser console in Firefox I'm getting the error "process is not defined"

[erikh2000]

@CygnusBell, glad you got past some problems.

I was surprised that you got "process is not defined" in the browser console. It would make more sense to me if you had that at build time, because Webpack dropped many of the NodeJS APIs including "process". When you run npm run build it builds with no displayed errors?

Re "download the language files?"

The language files should be served from a "models" folder under the folder that index.html is in. (Follows same folder/file structure as https://github.com/ccoreilly/vosk-browser/tree/master/examples/react/public )

[CygnusBell]

@erikh2000 I am able to build with no errors. When I upload to Netlify it shows a blank page with this error: Failed to load resource: the server responded with a status of 404 ()

When I run it locally it loads, and I can click "load" "English" and it seems to work but then when I click "speak" it goes blank and gives the process not defined error :(

I'm at my wits end with this, really really want to get it working so I can move on to the meat of the project. Appreciate all your help so far

[CygnusBell]

Just tried a few more times and the error occurs when clicking "Load". I tried unzipping the model file, putting it in multiple locations etc, can't seem to make it load.

Seems to be something with the microphone? I get the same error in Firefox and Chrome, I approved use of the mic so not sure why it's saying this

_stream_readable.js:561 Uncaught ReferenceError: process is not defined at maybeReadMore (_stream_readable.js:561:1) at addChunk (_stream_readable.js:306:1) at readableAddChunk (_stream_readable.js:280:1) at Readable.push (_stream_readable.js:241:1) at ScriptProcessorNode.recorderProcess (microphone-stream.js:108:1)

[CygnusBell]

Is there maybe just a simple instruction on how to get the words-vanilla or modern-vanilla scripts to run? or even the React one. I cannot for the life of me figure out what step I'm missing :(

I uploaded the words-vanilla folder and am now the error "Unrecognized Archive Format". What file should I use? I feel like I'm so close and just missing 1 thing

[ccoreilly]

@CygnusBell can you share the public URL where you deployed the react demo? Maybe I can understand your problem better if I can have a look at it.

As for how to deploy the words-vanilla, you simply serve the files with a webserver. Any wav file should work.

[CygnusBell]

@ccoreilly here is the netlify https://dazzling-starburst-6b7f38.netlify.app/ For some reason it just shows up as blank there. When I run it locally with "yarn start", it shows up until I click "load". I feel like I'm just missing one step or file somewhere. Thanks so much for your response!

I don't understand what that means "any wav" file, I've been using the model file, the tar.gz, so I guess I'm just doing it completely wrong lol

[ccoreilly]

In your netlify app you haven't uploaded the JS and CSS for example, try to solve that first.

As to a simple instruction to run modern-vanilla:

• Navigate in your terminal to the modern-vanilla folder.
• Copy the english model to that folder with cp ../react/public/models/vosk-model-small-en-us-0.15.tar.gz model.tar.gz
• Run a webserver with python3 -m http.server
• Open http://localhost:8000 in your browser

[CygnusBell]

@ccoreilly Thank you thank you thank you. The local python server works perfectly.

I gave up on the react version, I don't know why it wasn't uploading the JS or CSS, I'd prefer to use vanilla anyways so I moved on.

It also works perfectly on Netlify! Thank you!

It still gives "unrecognized archive format" error on Bluehost. I'm thinking it has to do with permissions unpacking it maybe? I'm able to unpack it in the file manager so I don't think the file was corrupted during upload. Oh well, I'll just stick to local and Netlify for now.

Thanks again so much, your simple start guide did the trick. I was overcomplicating the process, and not copying the right file either. I hope they incorporate what you wrote onto the main page or at least a readme in the examples folder.