Rumah >hujung hadapan web >tutorial js >Menjalankan Model Kokoro- ONNX TTS dalam Penyemak Imbas

Menjalankan Model Kokoro- ONNX TTS dalam Penyemak Imbas

Linda Hamilton
Linda Hamiltonasal
2025-01-17 14:31:10927semak imbas

Running Kokoro- ONNX TTS Model in the Browser

Kemajuan dalam kecerdasan buatan dan pembelajaran mesin telah meluaskan sempadan perkara yang mungkin dalam penyemak imbas dengan ketara. Menjalankan model teks ke pertuturan (TTS) terus dalam penyemak imbas membuka peluang baharu untuk privasi, kelajuan dan kemudahan. Dalam catatan blog ini, kami akan meneroka cara menjalankan model Kokoro-82M ONNX TTS dalam penyemak imbas menggunakan pelaksanaan JavaScript. Jika anda ingin tahu, anda boleh mengujinya dalam demo saya: Kitt AI Text-to-Speech .

Mengapa menjalankan model TTS dalam penyemak imbas?

Secara tradisinya, model TTS dilaksanakan pada pelayan dan memerlukan sambungan Internet untuk menghantar input dan menerima ucapan yang disintesis. Walau bagaimanapun, dengan peningkatan pada WebGPU dan ONNX.js, anda kini boleh menjalankan model lanjutan seperti Kokoro-82M ONNX terus dalam penyemak imbas. Ini membawa banyak kelebihan:

  • Privasi: Data teks anda tidak pernah meninggalkan peranti anda.
  • Latensi Rendah: Hapuskan kelewatan komunikasi pelayan.
  • Akses Luar Talian: Berfungsi walaupun tanpa sambungan internet yang aktif.

Ikhtisar Kokoro-82M ONNX

Model Kokoro-82M ONNX ialah model TTS yang ringan namun berkesan yang dioptimumkan untuk inferens pada peranti. Ia menyediakan sintesis pertuturan berkualiti tinggi sambil mengekalkan jejak yang kecil, menjadikannya sesuai untuk persekitaran penyemak imbas.

Tetapan projek

Prasyarat

Untuk menjalankan Kokoro-82M ONNX dalam penyemak imbas anda, anda memerlukan:

  1. Pelayar moden dengan sokongan WebGPU/WebGL.
  2. Pustaka ONNX.js untuk menjalankan model ONNX dalam JavaScript.
  3. Skrip Kokoro.js, yang memudahkan pemuatan dan pemprosesan model Kokoro-82M.

Pemasangan

Anda boleh menyediakan projek anda dengan memasukkan kebergantungan yang diperlukan dalam package.json:

<code>{
  "dependencies": {
    "@huggingface/transformers": "^3.3.1"
  }
}</code>

Seterusnya, pastikan anda mempunyai skrip Kokoro.js, yang tersedia daripada repositori ini.

Pemuatan model

Untuk memuatkan dan menggunakan model Kokoro-82M ONNX dalam penyemak imbas anda, ikut langkah berikut:

<code class="language-javascript">this.model_instance = StyleTextToSpeech2Model.from_pretrained(
    this.modelId,
    {
        device: "wasm",
        progress_callback,
    }
);
this.tokenizer = AutoTokenizer.from_pretrained(this.modelId, {
   progress_callback,
});</code>

Jalankan inferens

Selepas memuatkan model dan memproses teks, anda boleh menjalankan inferens untuk menjana pertuturan:

<code class="language-javascript">const language = speakerId.at(0); // "a" 或 "b"
const phonemes = await phonemize(text, language);
const { input_ids } = await tokenizer(phonemes, { truncation: true });
const num_tokens = Math.max(
   input_ids.dims.at(-1) - 2, // 无填充;
   0
);
const offset = num_tokens * STYLE_DIM;
const data = await getVoiceData(speakerId as keyof typeof VOICES);
const voiceData = data.slice(offset, offset + STYLE_DIM);
const inputs = {
   input_ids,
   style: new Tensor("float32", voiceData, [1, STYLE_DIM]),
   speed: new Tensor("float32", [speed], [1]),
};

const { waveform } = await model(inputs);
const audio = new RawAudio(waveform.data, SAMPLE_RATE).toBlob();</code>

Demo

Anda boleh melihat ini dalam demo langsung saya: Kitt AI Text to Speech. Demo ini mempamerkan sintesis teks ke pertuturan masa nyata yang dikuasakan oleh Kokoro-82M ONNX.

Kesimpulan

Menjalankan model TTS seperti Kokoro-82M ONNX dalam penyemak imbas mewakili lonjakan ke hadapan untuk aplikasi memelihara privasi dan kependaman rendah. Dengan hanya beberapa baris kod JavaScript dan kuasa ONNX.js, anda boleh mencipta aplikasi TTS responsif berkualiti tinggi yang menggembirakan pengguna anda. Sama ada anda sedang membina alatan kebolehaksesan, pembantu suara atau aplikasi interaktif, TTS dalam penyemak imbas boleh menjadi pengubah permainan.

Cuba demo teks-ke-ucapan Kitt AI sekarang dan lihat sendiri!

Rujukan

  1. Dokumentasi Transformers.js Berpeluk Wajah
  2. ModNet Mod
  3. API WebGPU
  4. Dokumentasi React
  5. Kod Rujukan

Atas ialah kandungan terperinci Menjalankan Model Kokoro- ONNX TTS dalam Penyemak Imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn