# Introducing @huggingface/kernels: 200\+ WebGPU Kernels for Local AI

- 发布方：Hugging Face；作者：Nico Martin、Joshua Xenova
- 形式：文章 · en
- 原始资源：[https://huggingface.co/blog/webgpu-kernels](<https://huggingface.co/blog/webgpu-kernels>)
- 本站页面：[https://oplearnx.com/resources/res\_n6jqggzqpzbd](<https://oplearnx.com/resources/res_n6jqggzqpzbd>)
- 学习主题：人工智能 / AI 系统与效率；人工智能 / AI 系统与效率 / 加速器与算子优化；人工智能 / AI 系统与效率 / 推理服务与加速
- 内容状态：状态待核验
- 原始发布时间：2026-09-01 08:00
- 本站首次收录：2026-10-29 01:02

## 能学到什么

了解浏览器端 WebGPU kernel 的作用与仓库结构，能安装 @huggingface/kernels 并从 Hub 加载、调用一个 kernel。

- 说明 WebGPU 与 WGSL 在浏览器端推理中的作用，以及为什么 kernel 是性能基础层
- 检查当前浏览器是否支持 WebGPU（"gpu" in navigator）
- 用 npm 安装 @huggingface/kernels@preview 并导入 getKernel
- 调用 getKernel 从 Hub 加载 ai.onnx.Add 并按契约版本执行广播加法
- 读懂一个 kernel 仓库中的 manifest.json、test.json、bench.json 与 \*.wgsl.jinja 各自的作用
- 用 Fleet 在本地硬件上运行并查看 kernel 的正确性与性能结果

## 适合我吗

- 适合：适合想在浏览器端做 AI 推理、了解 WebGPU kernel 加载与使用时机的开发者，文章给出可直接照做的安装与调用示例。
- 需要留意：不适合想系统学习 GPU 编程或 WGSL 语法的人，文章只介绍 kernel 库与仓库结构，不展开 shader 编写教学。

## 前置条件与费用

- 知识前置：需要会写基本 JavaScript/ES 模块，并了解张量形状与广播等神经网络基本运算概念。
- 软件、账号与硬件：支持 WebGPU 的浏览器与 Node/npm 环境；无需额外账号或付费服务。
- 内容费用：免费：博客正文可直接阅读，安装与代码示例完整，无需登录或付费；页面导航中的 Pricing、PRO 等入口不影响本资源费用。
- 实践费用：实践无额外费用：练习只需本地支持 WebGPU 的浏览器和 npm 包，网页未提及需要付费云服务或 API。
- 转载与修改：按材料分别核对，见本页“来源核验与开课实跑”；仓库许可不自动适用于教材或视频。

## 准备工具

- [支持 WebGPU 的浏览器](<https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API>)：运行 WebGPU kernel 示例
- [Node.js / npm](<https://www.npmjs.com/package/@huggingface/kernels>)：安装 @huggingface/kernels 包并搭建本地开发环境
- [Fleet 浏览器基准工具](<https://webgpu-kernels-fleet.hf.space/>)：在本地硬件上运行 kernel 的正确性与性能测试

## 学习指南

开课检查：提示词由本站整理，尚未按提示词实际完成开课检查。

### 开课提示词（Windows）

```text
请帮我把「Introducing @huggingface/kernels: 200+ WebGPU Kernels for Local AI」的学习环境一次准备好，让我之后只需要按顺序学习和做练习。
开始前先问我：课程放在哪个目录（等我给出完整路径），确认我的操作系统和已有工具。确认前不要创建文件或安装软件。

课程入口：https://huggingface.co/blog/webgpu-kernels
我的系统：Windows。如果实际不符，先调整方案。
本次路线：Windows：本机动手。只准备这条路线需要的工具；只读路线不安装运行环境、不配置模型密钥。
练习：按博客的 getKernel 调用模式，尝试把 ai.onnx.Add 换成 ai.onnx.MatMul 并传入相应形状的输入，观察 loader 如何从 manifest 推导输出形状与数据类型。
课节（官方顺序）：
1. Introducing @huggingface/kernels: 200+ WebGPU Kernels for Local AI：https://huggingface.co/blog/webgpu-kernels

1. 环境
- Node.js 与 npm
- 支持 WebGPU 的现代浏览器
- 本地前端项目（用于运行 ES 模块示例）
- 安装前先列出要装的软件和命令，等我同意；已装好的直接复用。
2. 材料
- 官方课程页面：只记录链接 https://huggingface.co/blog/webgpu-kernels
3. 目录（最外层放在我确认的位置）
hf-webgpu-kernels-intro/
├── README.md        # 课程入口、课节清单、每次怎么开始
├── progress.md      # 每课：读讲义 / 做练习 / 记笔记
├── questions.md     # 待解决的问题
├── check-env.ps1     # 环境自检，按 README 操作
├── data/            # 练习用到的样例数据
└── lessons/         # 每课一个文件夹：notes.md + exercises/
    └── 01-01-introducing-huggingface-kernels-200-webgpu/
- 每课文件夹里建 notes.md（顶部写本课官方链接）和 exercises/；课节文件夹名称与上面一致。
- 已有课程目录先检查并复用；不覆盖笔记、作业或 progress.md，不重置已有进度。尚未发布的课节保留入口并注明未发布，不能代写讲义或虚构练习。
4. 自检
- 创建 check-env.ps1，逐项检查并记录“通过/未通过”：
- 在课程根目录运行；每项检查独立执行，进入子目录不能影响下一项。将下面检查转换为 PowerShell 命令，不使用 Bash 语法。
  - 在浏览器控制台执行 "gpu" in navigator  → 返回 true
  - 检查 package.json 中的 dependencies 是否含 @huggingface/kernels  → 包含 @huggingface/kernels（preview 版本）
  - 打开 https://huggingface.co/webgpu-kernels/ai.onnx.Add  → 能看到该 kernel 的 card、manifest、测试与基准用例说明
- 标注为人工检查、浏览器操作或 notebook 单元的项目，按相应方式操作，不直接粘贴进 shell；脚本只包含当前系统可执行的命令。
- 仅在当前路线需要、对应材料已获准保存、工具已安装时运行该项；需要登录、付费或尚未开放的材料记为“需要我操作/未验证”，不能伪报通过。不执行会调用付费 API、提交作业或修改云服务的检查。
- 运行一次，把结果给我看；未通过的项目说明原因和修复办法。
5. 学习计划
- README.md：课程入口、课节清单（带链接）、每次学习怎么开始（使用“每课提示词”）。
- progress.md：每课三项勾选——读讲义、做练习、记笔记。
6. 最后分三部分汇报：已完成、需要我自己操作的、尚未验证的。

边界：
- 需要管理员权限、会产生费用或需要填写密钥的操作，先告诉我原因，等我同意。密钥由我在本机配置，不发到聊天，不写进笔记或版本库；原项目需要 .env 时确认已被 Git 忽略。
- 不替我写练习或作业答案，也不替我提交。我卡住时只给提示；我明确要求时才给解答。
- 只下载许可允许个人保存的材料；其余只放链接。不把未运行的命令说成成功。
如果你不能直接操作我的文件系统，请在确认目录后给出适用于我的系统、可直接执行的命令和需要保存的文件内容。
```

### 开课提示词（macOS）

```text
请帮我把「Introducing @huggingface/kernels: 200+ WebGPU Kernels for Local AI」的学习环境一次准备好，让我之后只需要按顺序学习和做练习。
开始前先问我：课程放在哪个目录（等我给出完整路径），确认我的操作系统和已有工具。确认前不要创建文件或安装软件。

课程入口：https://huggingface.co/blog/webgpu-kernels
我的系统：macOS。如果实际不符，先调整方案。
本次路线：macOS：本机动手。只准备这条路线需要的工具；只读路线不安装运行环境、不配置模型密钥。
练习：按博客的 getKernel 调用模式，尝试把 ai.onnx.Add 换成 ai.onnx.MatMul 并传入相应形状的输入，观察 loader 如何从 manifest 推导输出形状与数据类型。
课节（官方顺序）：
1. Introducing @huggingface/kernels: 200+ WebGPU Kernels for Local AI：https://huggingface.co/blog/webgpu-kernels

1. 环境
- Node.js 与 npm
- 支持 WebGPU 的现代浏览器
- 本地前端项目（用于运行 ES 模块示例）
- 安装前先列出要装的软件和命令，等我同意；已装好的直接复用。
2. 材料
- 官方课程页面：只记录链接 https://huggingface.co/blog/webgpu-kernels
3. 目录（最外层放在我确认的位置）
hf-webgpu-kernels-intro/
├── README.md        # 课程入口、课节清单、每次怎么开始
├── progress.md      # 每课：读讲义 / 做练习 / 记笔记
├── questions.md     # 待解决的问题
├── check-env.sh     # 环境自检，按 README 操作
├── data/            # 练习用到的样例数据
└── lessons/         # 每课一个文件夹：notes.md + exercises/
    └── 01-01-introducing-huggingface-kernels-200-webgpu/
- 每课文件夹里建 notes.md（顶部写本课官方链接）和 exercises/；课节文件夹名称与上面一致。
- 已有课程目录先检查并复用；不覆盖笔记、作业或 progress.md，不重置已有进度。尚未发布的课节保留入口并注明未发布，不能代写讲义或虚构练习。
4. 自检
- 创建 check-env.sh，逐项检查并记录“通过/未通过”：
- 在课程根目录运行；每项检查独立执行，进入子目录不能影响下一项。使用当前系统的终端运行。
  - 在浏览器控制台执行 "gpu" in navigator  → 返回 true
  - 检查 package.json 中的 dependencies 是否含 @huggingface/kernels  → 包含 @huggingface/kernels（preview 版本）
  - 打开 https://huggingface.co/webgpu-kernels/ai.onnx.Add  → 能看到该 kernel 的 card、manifest、测试与基准用例说明
- 标注为人工检查、浏览器操作或 notebook 单元的项目，按相应方式操作，不直接粘贴进 shell；脚本只包含当前系统可执行的命令。
- 仅在当前路线需要、对应材料已获准保存、工具已安装时运行该项；需要登录、付费或尚未开放的材料记为“需要我操作/未验证”，不能伪报通过。不执行会调用付费 API、提交作业或修改云服务的检查。
- 运行一次，把结果给我看；未通过的项目说明原因和修复办法。
5. 学习计划
- README.md：课程入口、课节清单（带链接）、每次学习怎么开始（使用“每课提示词”）。
- progress.md：每课三项勾选——读讲义、做练习、记笔记。
6. 最后分三部分汇报：已完成、需要我自己操作的、尚未验证的。

边界：
- 需要管理员权限、会产生费用或需要填写密钥的操作，先告诉我原因，等我同意。密钥由我在本机配置，不发到聊天，不写进笔记或版本库；原项目需要 .env 时确认已被 Git 忽略。
- 不替我写练习或作业答案，也不替我提交。我卡住时只给提示；我明确要求时才给解答。
- 只下载许可允许个人保存的材料；其余只放链接。不把未运行的命令说成成功。
如果你不能直接操作我的文件系统，请在确认目录后给出适用于我的系统、可直接执行的命令和需要保存的文件内容。
```

### 开课提示词（Linux）

```text
请帮我把「Introducing @huggingface/kernels: 200+ WebGPU Kernels for Local AI」的学习环境一次准备好，让我之后只需要按顺序学习和做练习。
开始前先问我：课程放在哪个目录（等我给出完整路径），确认我的操作系统和已有工具。确认前不要创建文件或安装软件。

课程入口：https://huggingface.co/blog/webgpu-kernels
我的系统：Linux。如果实际不符，先调整方案。
本次路线：Linux：本机动手。只准备这条路线需要的工具；只读路线不安装运行环境、不配置模型密钥。
练习：按博客的 getKernel 调用模式，尝试把 ai.onnx.Add 换成 ai.onnx.MatMul 并传入相应形状的输入，观察 loader 如何从 manifest 推导输出形状与数据类型。
课节（官方顺序）：
1. Introducing @huggingface/kernels: 200+ WebGPU Kernels for Local AI：https://huggingface.co/blog/webgpu-kernels

1. 环境
- Node.js 与 npm
- 支持 WebGPU 的现代浏览器
- 本地前端项目（用于运行 ES 模块示例）
- 安装前先列出要装的软件和命令，等我同意；已装好的直接复用。
2. 材料
- 官方课程页面：只记录链接 https://huggingface.co/blog/webgpu-kernels
3. 目录（最外层放在我确认的位置）
hf-webgpu-kernels-intro/
├── README.md        # 课程入口、课节清单、每次怎么开始
├── progress.md      # 每课：读讲义 / 做练习 / 记笔记
├── questions.md     # 待解决的问题
├── check-env.sh     # 环境自检，按 README 操作
├── data/            # 练习用到的样例数据
└── lessons/         # 每课一个文件夹：notes.md + exercises/
    └── 01-01-introducing-huggingface-kernels-200-webgpu/
- 每课文件夹里建 notes.md（顶部写本课官方链接）和 exercises/；课节文件夹名称与上面一致。
- 已有课程目录先检查并复用；不覆盖笔记、作业或 progress.md，不重置已有进度。尚未发布的课节保留入口并注明未发布，不能代写讲义或虚构练习。
4. 自检
- 创建 check-env.sh，逐项检查并记录“通过/未通过”：
- 在课程根目录运行；每项检查独立执行，进入子目录不能影响下一项。使用当前系统的终端运行。
  - 在浏览器控制台执行 "gpu" in navigator  → 返回 true
  - 检查 package.json 中的 dependencies 是否含 @huggingface/kernels  → 包含 @huggingface/kernels（preview 版本）
  - 打开 https://huggingface.co/webgpu-kernels/ai.onnx.Add  → 能看到该 kernel 的 card、manifest、测试与基准用例说明
- 标注为人工检查、浏览器操作或 notebook 单元的项目，按相应方式操作，不直接粘贴进 shell；脚本只包含当前系统可执行的命令。
- 仅在当前路线需要、对应材料已获准保存、工具已安装时运行该项；需要登录、付费或尚未开放的材料记为“需要我操作/未验证”，不能伪报通过。不执行会调用付费 API、提交作业或修改云服务的检查。
- 运行一次，把结果给我看；未通过的项目说明原因和修复办法。
5. 学习计划
- README.md：课程入口、课节清单（带链接）、每次学习怎么开始（使用“每课提示词”）。
- progress.md：每课三项勾选——读讲义、做练习、记笔记。
6. 最后分三部分汇报：已完成、需要我自己操作的、尚未验证的。

边界：
- 需要管理员权限、会产生费用或需要填写密钥的操作，先告诉我原因，等我同意。密钥由我在本机配置，不发到聊天，不写进笔记或版本库；原项目需要 .env 时确认已被 Git 忽略。
- 不替我写练习或作业答案，也不替我提交。我卡住时只给提示；我明确要求时才给解答。
- 只下载许可允许个人保存的材料；其余只放链接。不把未运行的命令说成成功。
如果你不能直接操作我的文件系统，请在确认目录后给出适用于我的系统、可直接执行的命令和需要保存的文件内容。
```

### 每课提示词

```text
继续学习「Introducing @huggingface/kernels: 200+ WebGPU Kernels for Local AI」。课程目录是 hf-webgpu-kernels-intro/（不知道完整路径就先问我）。
1. 读 progress.md，找到下一课；如果我指定了第几课，就准备那一课。
2. 打开这一课的官方页面和本地讲义，列出本课练习要用的工具、文件和样例数据。缺少的先告诉我，等我同意再安装或下载。
3. 在 lessons/ 对应的课节文件夹里准备好练习：exercises/ 里给每道题建一个文件，写上题号和题目原文链接，不写答案；已有文件保留，样例数据放到 data/。拿不到官方题目或起始代码时记录限制，不编造替代品。
4. 按 README 运行开课时生成的自检脚本或在线检查清单，并检查本课新增工具能否正常使用。
5. 告诉我：本课先读哪几节、从哪道练习开始、大约需要多久。我学完后，帮我在 progress.md 勾选并把问题整理到 questions.md。

边界：
- 需要管理员权限、会产生费用或需要填写密钥的操作，先告诉我原因，等我同意。密钥由我在本机配置，不发到聊天，不写进笔记或版本库；原项目需要 .env 时确认已被 Git 忽略。
- 不替我写练习或作业答案，也不替我提交。我卡住时只给提示；我明确要求时才给解答。
- 只下载许可允许个人保存的材料；其余只放链接。不把未运行的命令说成成功。
```

### 课节（官方顺序）

1. [Introducing @huggingface/kernels: 200\+ WebGPU Kernels for Local AI](<https://huggingface.co/blog/webgpu-kernels>)

## 指南参考

- [课程主页](<https://huggingface.co/blog/webgpu-kernels>)

## 来源、许可与验证记录

- **开课提示词未完整验证，需要自备账号或资源**：开课提示词尚未实际运行验证
- 转载与修改 · 课程页面与材料：Apache-2.0。网页写明 207 个 kernel 以 Apache-2.0 许可发布，针对 kernel 集合本身；博客文章与示例代码的许可原站未说明 [依据](<https://huggingface.co/blog/webgpu-kernels>)
- 链接检查：1/1 个可以访问

## 来源与推荐

- 编辑整理收录

---
来源：LearnMap · 学径（https://oplearnx.com）