Kokoro Text-to-Speech (WebGPU)

Kokoro Text-to-Speech (WebGPU)

用 WebGPU 在浏览器里运行 Kokoro 文本转语音模型，把输入的文字读出来。适合想听听这个模型，或想学习浏览器语音演示的人。

由 webml-community 在 Hugging Face 上制作。这些说明是 Mindket 根据它的 Space 页面和 README 写的，应用自己的文件和许可证在 Hugging Face 上。

简介

它是什么：这个 Space 用 WebGPU 和 Transformers.js 在你的浏览器里运行 Kokoro 文本转语音模型。你输入文字，模型就把它读出来。这个 Space 是一个静态页面，它列出的模型是 Kokoro 的 82M ONNX 版本。

适合谁：想听听小型语音模型是什么声音的人，以及想找一个纯浏览器文本转语音示例来学习的网页开发者。

Industry | Who uses it | How they use it | Example
网页开发 | 前端开发者 | 研究语音模型如何在网页里运行 | 阅读 React 和 Vite 演示的代码
教育 | 老师和学生 | 听一段文字被朗读出来 | 粘贴一小段文字并听它朗读
无障碍 | 内容创作者 | 检查文字读出来是什么感觉 | 发布前先听一遍草稿

如果你的浏览器不支持 WebGPU，可以跳过它，因为模型需要它才能运行。

用在哪里：

• 网页浏览器，在 Hugging Face 上这个 Space 自己的页面里
• 支持 WebGPU 的浏览器，用于页面的本地副本
• 把文件放到你自己的电脑上，在 Windows、macOS 或 Linux 上用 Python 下载

Use case | Who | What they get back
听文字被朗读 | 有浏览器的任何人 | Kokoro 模型根据你输入的文字生成的语音
学习代码 | 网页开发者 | 一个通过 Transformers.js 运行 Kokoro 的小型 React 和 Vite 应用

如何设置：

• 浏览器，如果你只在线使用这个 Space
• Python 和 pip，用来下载这个 Space 的文件
• npm，只有按 README 的开发服务器方式运行时才需要

1. 打开 Hugging Face 上这个 Space 的页面即可在线使用，不用安装任何东西。
2. 想保留文件，先安装 huggingface_hub 包，再下载这个 Space 的文件。
3. 进入新文件夹，在网页浏览器里打开 index.html。

pip install -U huggingface_hub
hf download webml-community/kokoro-webgpu --repo-type space --local-dir kokoro-webgpu
cd kokoro-webgpu

按 README 的方式，先从 GitHub 克隆 Kokoro 仓库，再在它的文件夹里运行下面的命令。

cd kokoro/kokoro.js/demo
npm i
npm run dev

之后 README 说要在浏览器里打开它提到的本地地址，端口是 5173。

如何使用：打开页面，输入你想让它读的文字，然后用页面上的控件开始朗读。模型在你的浏览器里运行，所以你直接在那里听到结果。第一次运行时，加载模型文件可能要等一会儿。

Tool | What it does
npm run dev | 启动演示的开发服务器
index.html | 下载 Space 的文件后，在浏览器里打开的页面

示例：你打开页面，输入一句短话并开始朗读。模型加载完成后，你会在浏览器里听到这句话被读出来。

新手与专家：如果你是新手，先打开这个 Space，让它读一句短话。除了支持 WebGPU 的浏览器，你什么都不需要。

对专家来说，这个应用是一个简单的 React 和 Vite 项目，通过 Transformers.js 和名为 onnx-community/Kokoro-82M-ONNX 的 ONNX 版本加载 Kokoro。推理在客户端进行，用的是浏览器提供的 GPU。代价是浏览器支持，因为 WebGPU 并非处处可用。

打开页面
输入要朗读的文字
Transformers.js 加载 Kokoro 模型
模型在你的浏览器里运行
你听到语音

注意事项：

• 作为静态页面构建，入口是 index.html
• License: apache-2
• Cost to run: 未提及
• Data it reaches: 从 Hugging Face 加载的模型文件，以及你输入的文字

Hugging Face 上的数据（2026年11月13日）

• 点赞：369
• 构建方式：static
• 许可证：apache-2.0

链接

• Space：https://huggingface.co/spaces/webml-community/kokoro-webgpu
• 文件：https://huggingface.co/spaces/webml-community/kokoro-webgpu/tree/main

试用

在浏览器里打开这个 Space，或在它的页面上把它复制到你自己的 Hugging Face 账号。这个工具包里没有会自己运行的东西。