Webpage is not loading

[Nata0801]

I have little coding experience, but I followed all guidelines to launch the demo app from examples/react folder. I ran npm install, npm build and a few other commands to resolve errors for webpack 5. However, finally when I ran npm run start, the vosk-browser fails to launch, even though no errors are detected. The page is empty.

C:\Users\CNata\Downloads\vosk-browser-master\examples\react>npm run start

> vosk-browser-react-demo@0.1.0 start
> react-scripts start

(node:17120) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:17120) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!

You can now view vosk-browser-react-demo in the browser.

  Local:            http://localhost:3000/vosk-browser
  On Your Network:  http://192.168.56.1:3000/vosk-browser

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
No issues found.

[Nata0801]

Hello @ccoreilly , So I've started it all again from scratch, and when I run npm install, I get the warning that many of the packages are now deprecated. Here's the message:

C:\Users\CNata\vosk-browser-master\examples\react>npm install
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated flatten@1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated @hapi/address@2.1.4: Moved to 'npm install @sideway/address'
npm WARN deprecated rollup-plugin-babel@4.4.0: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated babel-eslint@10.1.0: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
[##################] | reify:@ant-design/icons: timing reifyNode:node_modules/@ant-de[##################] | reify:@ant-design/icons: timing reifyNode:node_modules/@an[##################] | reify:@ant-design/icons: timing reifyNode:node_modules/@a[##################] | reify:@ant-design/icons: timing reifyNode:node_[##################] | reify:@ant-design/icons: timing reifyNode:node_modu[##################] | reify:@ant-design/icons: timing reifyNode:node_mo[##################] | reify:@ant-design/icons: timing reifyNode:node_[######[######[######[######[######[##################] | reify:@ant-design/icons: timing reifyNode:node_mod[##################] | reify:@ant-design/ico[##################] | reify:@ant-design/icons: timing reifyNode:n[##################] | reify:@ant-design/icons: timing reifyNode[##################] | reify:@ant-desi[###########
added 2033 packages, and audited 2035 packages in 2m

what should I do? I would be very grateful for help or advice. Thank you.

[ccoreilly]

Hi @Nata0801 !

being it just an example, I haven't really kept the dependencies up to date. I am surprised that it does not work even if there are warnings but I will not be able to try it out in about at least a week.

It should be safe to upgrade the dependencies to their latest versions. Maybe you can try that and if you succeed with it contribute the changes in a PR? :)

[Nata0801]

Hi @ccoreilly !

So, I have checked some dependencies with the following command npm la <package-name> to see the dependency depth and if the packages are crucial for the app or the warning can be discarded. After some analysis I decided to move on. It all worked out at the end, I managed to launch vosk-browser and webpage loaded all right.

However, I had one question for you left. Earlier I was testing AWS Transcribe and it seems to work faster. My colleagues advised to run Vosk models on GPU. So my question is if it is possible to change where the models run - on CPU/GPU. I would greatly appreciate your advice.

P.S. My initial mistake was I ran npm install command before I changed the version of vosk-browser to 0.5.0 instead of '.../.../lib' as you advised.

[ccoreilly]

Sure, you should check vosk, the engine that powers this library. You can run it on GPU using node in the server as well. Running vosk-browser using the GPU is not possible and I guess it wouldn't be easy to implement.

[Nata0801]

Thank you very much for your help!