在瀏覽器中執行 Kokoro-ONNX TTS 模型

人工智慧和機器學習的進步顯著拓展了瀏覽器內可實現功能的邊界。直接在瀏覽器中運行文字轉語音 (TTS) 模型為隱私、速度和便利性帶來了新的機會。在本部落格文章中，我們將探討如何使用 JavaScript 實作來在瀏覽器中執行 Kokoro-82M ONNX TTS 模型。如果您好奇，可以在我的演示中進行測試：Kitt AI 文字轉語音。

為什麼在瀏覽器中運行 TTS 模型？

傳統上，TTS 模型在伺服器上執行，需要網路連線才能發送輸入並接收合成的語音。但是，隨著 WebGPU 和 ONNX.js 功能的增強，您現在可以直接在瀏覽器中執行 Kokoro-82M ONNX 等進階模型。這帶來了許多優勢：

• 隱私權: 您的文字資料不會離開您的裝置。
• 低延遲: 消除伺服器通訊延遲。
• 離線存取: 即使沒有活動的網路連線也能運作。

Kokoro-82M ONNX 概述

Kokoro-82M ONNX 模型是一個輕量級但有效的 TTS 模型，針對設備上推理進行了最佳化。它在保持較小佔用空間的同時提供高品質的語音合成，使其適合瀏覽器環境。

項目設定

先決條件

要在瀏覽器中執行 Kokoro-82M ONNX，您需要：

1. 支援 WebGPU/WebGL 的現代瀏覽器。
2. 用於在 JavaScript 中運行 ONNX 模型的ONNX.js 函式庫。
3. Kokoro.js 腳本，它簡化了 Kokoro-82M 模型的載入和處理。

安裝

您可以透過在 package.json 中包含必要的依賴項來設定項目：

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

接下來，請確保您擁有 Kokoro.js 腳本，該腳本可以從此儲存庫取得。

模型載入

要在瀏覽器中載入並使用 Kokoro-82M ONNX 模型，請按照以下步驟操作：

<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>

運行推理

載入模型並處理文字後，您可以運行推理以產生語音：

<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>

示範

您可以在我的即時簡報中看到這一點：Kitt AI 文字轉語音。此演示展示了由 Kokoro-82M ONNX 提供支援的即時文字轉語音合成。

結論

在瀏覽器中執行 Kokoro-82M ONNX 等 TTS 模型代表著隱私保護和低延遲應用程式的飛躍。只需幾行 JavaScript 程式碼和 ONNX.js 的強大功能，您就可以創建高品質、響應迅速的 TTS 應用程序，讓用戶感到滿意。無論您是建立輔助工具、語音助理還是互動式應用程序，瀏覽器內 TTS 都可能改變遊戲規則。

立即嘗試 Kitt AI 文字轉語音演示，親身體驗！

參考文獻

1. Hugging Face Transformers.js 文件
2. ModNet 模型
3. WebGPU API
4. React 文件
5. 參考碼

以上是在瀏覽器中執行 Kokoro-ONNX TTS 模型的詳細內容。更多資訊請關注PHP中文網其他相關文章！