在浏览器中运行 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中文网其他相关文章！