vital-ai / vital-wakeword-js

Apache License 2.0
2 stars 1 forks source link

Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from null/python/vad.py #1

Open jbflow opened 2 months ago

jbflow commented 2 months ago

Hey thanks for your efforts into putting this repo together.

I'm trying to run the static test files locally on my machine and I'm seeing the following output:

blob:null/ea507882-3a5d-475e-b81e-8c4d5c494dba:146 Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'WorkerGlobalScope': Failed to parse URL from null/python/vad.py
    at loadPythonFile (blob:null/ea507882-3a5d-475e-b81e-8c4d5c494dba:146:30)
    at loadPyodideAndRunPython (blob:null/ea507882-3a5d-475e-b81e-8c4d5c494dba:153:11)

Initial search on SO found me this: https://stackoverflow.com/questions/60836401/failed-to-execute-fetch-on-workerglobalscope

Running in latest version of Chrome

I executed the build command to build vitalWakeWord.min.js:

npm run build

The VAD detection is working in chrome but I'm seeing nothing else, screen shot below:

Screenshot 2024-08-29 at 11 17 04

Based on the null in the file path it feels like the baseUrl isn't being set properly from self.location.origin so the loadPythonFile function is unable to find the python to run in pyodide

Screen shot of the section of code that's throwing the error inside src/vitalWakeWord/workers/wakeword.blob.js file and where I think it's coming from:

Screenshot 2024-08-29 at 11 24 45

Any help getting this running locally would be appreciated and then I'm happy to look into restructuring the repo a bit once I can understand a bit more about how it's all pieced together.

Do you have a to do list of what you think would be helpful going forward? :)

jbflow commented 2 months ago

As a side note, it would be helpful to get a small test application server running with Vite, as either a VueJS or React app so that I could set up a dev script and have it watching for file changes rather than rebuilding each time. This will likely be my next step so that I can further debug and make improvements, but thought I'd open this issue to see if you could shed some light on what's going on. Please let me know if you need any further information. :)

hadfield commented 2 months ago

The static demo website code from: https://demo-voice.chat.ai/ is in the repo: https://github.com/chat-ai-app/chat-ai-assistant-demo which includes the wake word and whisper modules. so you should be able to run that locally as-is.

hadfield commented 2 months ago

The whisper STT code is over here: https://github.com/vital-ai/vital-stt-js

hadfield commented 2 months ago

These are meant to be generic javascript/typescript without any dependency on a framework like react, and meant to be installed via npm. however, you could have a react (or other) app that uses the vanilla module with a build script that re-builds on changes to facilitate development. This and the STT one combine javascript, python via pyodide, onnx, web workers, etc. into a library that works but is not (yet) in a cleaned-up and developer friendly state.

hadfield commented 2 months ago

re: self.location.origin, that is defined in a web worker: https://developer.mozilla.org/en-US/docs/Web/API/WorkerGlobalScope/location

jbflow commented 2 months ago

Hey, thanks for this information and thanks again for your work putting this together, I've looked around a lot more this morning and it looks like a lot has gone into making this work - Awesome 💥

I was able to get the tests running locally for simple testing by following these steps:

npm run build

Then I had to copy the python files to the dist directory to get rid of this error.

run a small server

python3 -m http.server 8000

And navigate to it in the browser.

This allowed the wakeword detection to work for me, so the only issue was that when running the test files it couldn't find the python.

I was also then able to install it into my React App with npm (I installed my fork so I could easily modify and rebuild if needed) and created a simple hook that just loads the index.js test file in as vanilla js (trying to import into a modern React App ran into lots of problems due to CommonJS vs ES imports, and also React doesn't like parcel. Providing I included everything (models, python, minified js) in my public folder this worked fine, I am however seeing some performance issues - for now to continue testing my app I am just using VAD and will continue to work on the full implementation of the wake word in my application.

I'm wondering the trade of from using onnx instead of tflite models as I have read these are not as good, but tflite cannot be used in the browser - but this is off topic.

I will close this as there is no real "issue" with the code and as you mention there just needs to be a bit more info to make it developer friendly.