Join the conversation

Join the community of Machine Learners and AI enthusiasts.

Sign Up
XenovaΒ 
posted an update 13 days ago
Post
3624
Introducing Kokoro.js, a new JavaScript library for running Kokoro TTS, an 82 million parameter text-to-speech model, 100% locally in the browser w/ WASM. Powered by πŸ€— Transformers.js. WebGPU support coming soon!
πŸ‘‰ npm i kokoro-js πŸ‘ˆ

Try it out yourself: webml-community/kokoro-web
Link to models/samples: onnx-community/Kokoro-82M-ONNX

You can get started in just a few lines of code!
import { KokoroTTS } from "kokoro-js";

const tts = await KokoroTTS.from_pretrained(
  "onnx-community/Kokoro-82M-ONNX",
  { dtype: "q8" }, // fp32, fp16, q8, q4, q4f16
);

const text = "Life is like a box of chocolates. You never know what you're gonna get.";
const audio = await tts.generate(text,
  { voice: "af_sky" }, // See `tts.list_voices()`
);
audio.save("audio.wav");

Huge kudos to the Kokoro TTS community, especially taylorchu for the ONNX exports and Hexgrad for the amazing project! None of this would be possible without you all! πŸ€—

The model is also extremely resilient to quantization. The smallest variant is only 86 MB in size (down from the original 326 MB), with no noticeable difference in audio quality! 🀯

Hi Xenova, I have a project with essentially the same goal but without using transformers.js or npm: https://github.com/Shubin123/kokorojs

The work done with transformers.js would have saved me a ton of work and headache and I will be using it in the future.

My phenomizer is still broken is it ok if i take some of your code/logic from https://github.com/hexgrad/kokoro/blob/main/kokoro.js/src/phonemize.js

I will probably just leave my project where it's at currently with any minor bug fixes and model updates if available.
If no reply I will respect that and just leave my phenomizer broken cause I dont want to pretend like I didnt look at your version. (my tokenizer is probably not up to par either).

Β·

Hey! Oh that's awesome - great work! Feel free to adapt any code/logic of mine as you'd like!

I am currently developing a library aimed at enabling llms inside the browser. It's essentially a wrapper for MLC and transformer.js right now but plan to add more agentic stuff like RAG etc.

To integrate transformer.js with Next.js, I had to convert it to TypeScript. I want to ensure that I properly credit you and your work, and you can check it out here: https://github.com/sauravpanda/BrowserAI.

Additionally, I noticed that the license in transformer.js appears to be incomplete and contains default values. I wanted to bring this to your attention.

I hope this is okay with you, and I truly admire all of your work!

Hey, trying to use this with a web worker and webpack...

worker.ts

import { KokoroTTS } from 'kokoro-js';

export default () =>
  self.addEventListener('message', async (event) => {
    const { text } = event.data;
    const tts = await KokoroTTS.from_pretrained(
      'onnx-community/Kokoro-82M-ONNX',
      { dtype: 'fp16' } // fp32, fp16, q8, q4, q4f16
    );
    const audio = await tts.generate(text, { voice: 'af_nicole' });

    self.postMessage({
      audioBuffer: audio.toWav()
    });
  });

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "module": "esnext", <-- changed to get webpack to start
    "jsx": "react-jsx",
    "outDir": "./dist",
    "target": "esnext",
    "moduleResolution": "bundler" <-- changed to get webpack to start
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}
WARNING in ./node_modules/kokoro-js/dist/kokoro.web.js 1:127084-127093
Critical dependency: the request of a dependency is an expression
 @ ./src/utils/worker.ts 10:0-38 13:22-47
 @ ./src/pages/index.tsx 16:0-40 22:60-69
 @ ./src/index.tsx 9:29-52

WARNING in ./node_modules/kokoro-js/dist/kokoro.web.js 1:465593-465604
Critical dependency: Accessing import.meta directly is unsupported (only property access or destructuring is supported)
 @ ./src/utils/worker.ts 10:0-38 13:22-47
 @ ./src/pages/index.tsx 16:0-40 22:60-69
 @ ./src/index.tsx 9:29-52

2 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ./node_modules/kokoro-js/dist/kokoro.web.js 1:742156-742185
Module not found: Error: Can't resolve './' in 'C:\code\speechlab\node_modules\kokoro-js\dist'
resolve './' in 'C:\code\speechlab\node_modules\kokoro-js\dist'
  Parsed request is a directory
  using description file: C:\code\speechlab\node_modules\kokoro-js\package.json (relative path: ./dist)
    using description file: C:\code\speechlab\node_modules\kokoro-js\package.json (relative path: ./dist)
      as directory
        existing directory C:\code\speechlab\node_modules\kokoro-js\dist
          using description file: C:\code\speechlab\node_modules\kokoro-js\package.json (relative path: ./dist)
            using path: C:\code\speechlab\node_modules\kokoro-js\dist\index
              using description file: C:\code\speechlab\node_modules\kokoro-js\package.json (relative path: ./dist/index)
                no extension
                  C:\code\speechlab\node_modules\kokoro-js\dist\index doesn't exist
                .js
                  C:\code\speechlab\node_modules\kokoro-js\dist\index.js doesn't exist
                .ts
                  C:\code\speechlab\node_modules\kokoro-js\dist\index.ts doesn't exist
                .tsx
                  C:\code\speechlab\node_modules\kokoro-js\dist\index.tsx doesn't exist
                .json
                  C:\code\speechlab\node_modules\kokoro-js\dist\index.json doesn't exist
 @ ./src/utils/worker.ts 10:0-38 13:22-47
 @ ./src/pages/index.tsx 16:0-40 22:60-69
 @ ./src/index.tsx 9:29-52

Sorry, I couldn't find a better place to report this. Any ideas?

Β·

Hi there - we recently fixed this issue and will release a new version for it soon!