一、云端 AI 的"阿喀琉斯之踵"
2025 年，我们习惯了这样使用 AI：
┌──────────┐ 网络请求 ┌──────────────────┐
│ 你的电脑 │ ──────────────────► │ OpenAI 服务器 │
│ │ ◄────────────────── │ 几千张 H100 GPU │
│ 只发文字 │ 返回结果 │ 671B 参数超大模型 │
└──────────┘ └──────────────────┘
优势：模型能力强，不占本地资源
代价：
❌ 数据离开你的设备 → 隐私风险
❌ 依赖网络 → 延迟 200ms+
❌ API 按 token 计费 → 持续烧钱
❌ 对方宕机 → 服务不可用
❌ 你的每一次提问都被记录
端侧 AI 试图回答一个问题：能不能不依赖云端，在用户自己的设备上完成 AI 推理？
答案是：可以，但有取舍。
二、端侧模型：把 AI 装进你的设备
什么是端侧模型？
端侧模型（On-Device AI）= 模型文件存在用户设备上，推理计算全在本地完成，数据不出设备。
云端模型 端侧模型
──────── ────────
┌────────────┐ ☁️ 网络 ┌─────┐ ┌─────────────────────┐
│ 用户设备 │ ──────► │ 云 │ │ 用户设备 │
│ 打字+显示 │ ◄────── │ GPU │ │ ┌─────────────────┐ │
└────────────┘ └─────┘ │ │ 模型文件 (~3GB) │ │
│ │ 本地推理引擎 │ │
│ │ GPU 加速 │ │
│ │ 全程不联网 ✅ │ │
│ └─────────────────┘ │
└─────────────────────┘
实时推理数据流
以 DeepSeek-R1 蒸馏版（1.5B 参数）为例，它在浏览器中的完整运行路径：
用户提问："什么是量子力学？"
│
▼
┌─────────────────────────────────────────┐
│ ① Transformers.js │
│ 分词（Tokenization） │
│ "什么是量子力学？" │
│ ↓ │
│ [1045, 2287, 112, 9847, ...] │ ← 数字张量
│ HuggingFace 推出的浏览器端 JS 库 │
└─────────────────┬───────────────────────┘
│ 输入张量
▼
┌─────────────────────────────────────────┐
│ ② ONNX Runtime Web │
│ 加载 model.onnx 模型文件 │
│ 执行神经网络计算图 │
│ 调度 GPU 计算 │
│ 跨平台机器学习推理引擎 │
└─────────────────┬───────────────────────┘
│ Shader 计算程序
▼
┌─────────────────────────────────────────┐
│ ③ WebGPU │
│ 浏览器原生 GPU API │
│ 在显卡上并行执行矩阵运算 │
│ 几千个核心同时计算 │
│ 接近 C++ Native 性能 │
└─────────────────┬───────────────────────┘
│ 输出张量（概率分布）
▼
┌─────────────────────────────────────────┐
│ ④ Transformers.js (解码) │
│ 张量 → Token → 文字 │
│ [345, 789, 2104, ...] │
│ ↓ │
│ "量子力学是研究微观粒子运动的物理..." │
└─────────────────────────────────────────┘
三、WebGPU：浏览器的"超能力"
为什么 GPU 对 AI 推理如此重要？
CPU 做矩阵乘法 GPU 做矩阵乘法
───────────────── ─────────────────
┌──┐ 一次算一个元素 ┌───────────────────┐
│核│ 1+1 → 2+3 → 5+7 → ... │ 几千个小核心 │
└──┘ 串行，逐个推进 │ 全部同时算 │
└───────────────────┘
一个 1000×1000 矩阵乘法 同一个矩阵乘法
可能需要几百毫秒 只需要几毫秒
AI 推理的本质是海量矩阵乘法 + 大量并行计算。一个 token 的生成涉及数十亿次运算——GPU 天生就是为这种场景设计的。
WebGPU 的浏览器 API 位置
浏览器能用的 GPU API：
WebGL (2011) WebGPU (2023+)
─────────── ──────────────
为 3D 图形设计 为通用计算设计（图形也行）
基于 OpenGL ES 2.0 基于 Vulkan/Metal/DX12
只能画三角形和纹理 可以跑任意的 GPU 计算程序（Shader）
AI 推理需要迂回实现 AI 推理是原生支持
驱动模型老旧 接近 Native 性能
navigator.gpu 是 WebGPU 的入口对象：
// 检测浏览器是否支持 WebGPU
const IS_WEBGPU_AVAILABLE = !!navigator.gpu
if (!IS_WEBGPU_AVAILABLE) {
// 告诉用户换个浏览器
// Chrome 113+、Edge 113+、Safari 17+ 都支持
}
WebGPU 为什么是里程碑式的 API
开发者在浏览器中能用的计算能力：
2010 年：纯 JavaScript，单线程，只能用 CPU
2015 年：Web Worker，多线程 CPU
2017 年：WebAssembly，编译型代码速度
2023 年：WebGPU，浏览器直接调用 GPU
↑
第一次让浏览器里的代码
用上显卡的几千个核心并行计算
这意味着浏览器不再只是"展示文档的窗口"，而是一个完整的计算平台。WebGPU 是浏览器成为操作系统级应用平台的最后一块拼图。
四、端侧 AI 三要素：模型 + 引擎 + 硬件
4.1 轻量化模型
DeepSeek-R1 完整版 DeepSeek-R1 蒸馏版
───────────────── ─────────────────
671B 参数 1.5B 参数
需要 ~400GB 显存 需要 ~3GB 显存
只能在云端集群跑 浏览器里就能跑
最强推理能力 能力有损但仍可实用
模型蒸馏：用大模型当"老师"，教小模型。小模型学习大模型在大量输入上的输出，逐步逼近大模型的能力。本质是知识压缩——用参数量的代价换取部署的自由。
4.2 推理引擎（Runtime）
ONNX Runtime Web 的角色：
model.onnx（模型文件）＋ 输入数据
│
▼
ONNX Runtime
├─ 解析计算图（神经网络连接关系）
├─ 分配内存（管理 GPU 显存）
├─ 调度执行（决定每个算子在哪运行）
└─ 调用 WebGPU → GPU 执行
│
▼
输出结果
ONNX（Open Neural Network Exchange）是一个开放标准，让不同的 AI 框架（PyTorch、TensorFlow）训练的模型能互相转换和部署。
4.3 硬件加速
| 硬件 | 适用场景 | 算力级别 |
|---|---|---|
| CPU | 极小模型（<100M 参数）、低延迟要求不高 | 慢——适合演示验证 |
| 集成 GPU | 1-3B 参数模型，浏览器中跑 | 5-20x CPU |
| 独立 GPU（RTX 3060+） | 7B+ 参数模型 | 50-100x CPU |
| NPU（Apple M4 Ultra 等） | 专用 AI 芯片，移动端 | 能效比最佳 |
你的 1.5B 模型在集成 GPU 上，通过 WebGPU 加速，可以做到每秒生成 10-30 个 token——虽然比不上 ChatGPT 的秒回速度，但已经可以流畅阅读了。
五、端侧 AI 的现实局限
| 局限 | 说明 |
|---|---|
| 模型尺寸受限 | 浏览器内存通常 2-4GB，最快支持到 3B 参数左右 |
| 推理速度 | 即使是 WebGPU，也比不上云端 H100，1.5B 模型大约 10-30 token/s |
| 首次加载慢 | 需下载 2-4GB 模型文件（但只需下载一次，之后缓存） |
| 设备兼容性 | WebGPU 仍需较新浏览器；低端设备可能不支持或不流畅 |
| 功能受限 | 无联网搜索、无法实时获取最新信息、无工具调用 |
六、端侧 AI 的真实应用场景
| 场景 | 为什么需要端侧 |
|---|---|
| IDE 代码补全（GitHub Copilot） | 你写的代码不能上传到云端 |
| 个人笔记/文档搜索 | 私人数据不能离开设备 |
| 密码管理器智能填充 | 密码 = 绝对不能上云的数据 |
| 输入法智能联想 | 你打的每个字都是隐私 |
| 本地相册搜索 | 几千张照片不需要上传也能 AI 搜索 |
| 离线翻译 | 飞机上、地铁里、没信号的地方 |
| IoT 设备 | 摄像头、门锁、传感器——可能都没联网 |
| 医疗数据辅助分析 | 患者数据受法律保护，不能传到第三方服务器 |
核心原则：凡是"数据不能离开设备"的场景，端侧 AI 就是唯一选择。
七、未来展望
端侧 AI 的发展趋势：
2024：WebGPU 发布，1-3B 模型在浏览器运行成为可能
2025：模型压缩技术进步（量化、剪枝、蒸馏），端侧模型质量逼近云端小模型
2026：NPU 和 AI PC 普及（Apple M4、Snapdragon X Elite、Intel Lunar Lake）
端侧可以跑 7B+ 参数模型，速度达到实时对话水平
2027：边缘 AI + 云 AI 混合架构成为主流
简单问题端侧解决，复杂查询自动升级到云端
浏览器正在从一个"内容展示窗口"，变成世界最大的通用计算平台。WebGPU 是这个转变的催化剂——它赋予了每个网页原生级别的 GPU 算力。
React + Tailwind + WebGPU + ONNX Runtime = 你正在做的是一个全栈浏览器应用——UI、样式、AI 推理全部跑在用户浏览器里，不需要一台服务器，不需要一个 API key。
这就是端侧 AI 的终极形态：把 AI 的最前沿能力，装进每个普通用户的设备里。
八、概念速查
| 概念 | 一句话解释 |
|---|---|
| 端侧模型 | AI 模型直接在用户设备上运行，数据不出设备，离线可用 |
| WebGPU | 浏览器调用 GPU 进行高性能计算的新一代 API，替代 WebGL |
| ONNX Runtime | 跨平台机器学习模型推理引擎，加载 .onnx 模型文件执行计算 |
| Transformers.js | HuggingFace 推出的 JS 库，在浏览器中加载和运行 Transformers 模型 |
| 模型蒸馏 | 用大模型教小模型，把能力压缩到端侧可运行的尺寸 |
navigator.gpu | 检测当前浏览器是否支持 WebGPU 的 API 入口 |
| Tokenization | 把自然语言文本转换成 AI 模型能理解的数字序列 |
| Shader | 在 GPU 上运行的并行计算程序，WebGPU 通过 Shader 调度计算 |
