Transformers.js + NuxtJS

Here's a basic demo using these two tools. Transformers.js is typically used within a web worker for several important performance reasons:

• Main thread protection
• Computation isolation
• Memory management
• Parallelization

This is a barebones demo showing Transformers.js working with Whisper in the browser for realtime audio to text transcription. It uses whisper-base, a 290mb model, and is able to transcribe audio in all of the languages listed here. It can be ran entirely offline once the model is loaded in.

This code is deployed here - https://nuxt-transformersjs-realtime-transcription.vercel.app/

Run locally

• Install dependencies.

npm install

• Run local server.

npm run dev

• Navigate to local server. The default is localhost:3000.

Not working?

You may be running into the a webgpu error. Check your browser's console to see if "Uncaught (in promise) Error: no available backend found. ERR: [webgpu] Error: Failed to get GPU adapter. You may need to enable flag "--enable-unsafe-webgpu" if you are using Chrome." is showing, do the following:

Enable the WebGPU Flag:

1. Open Chrome and navigate to chrome://flags in the address bar.
2. Search for #enable-unsafe-webgpu.
3. Set the flag to Enabled.
4. Relaunch Chrome when prompted.