Rumah >hujung hadapan web >tutorial js >Menjalankan Model Kokoro- ONNX TTS dalam Penyemak Imbas
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 .
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:
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.
Untuk menjalankan Kokoro-82M ONNX dalam penyemak imbas anda, anda memerlukan:
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.
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>
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>
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.
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!
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!