不要再给 API 充钱了——把大模型装进浏览器，断网也能用。
写在前面
当你还在往 DeepSeek 账户里充钱的时候，有人已经把 R1 模型直接跑在了浏览器里——不需要后端、不需要服务器、甚至不需要联网。
这篇文章带你从零到一，将 DeepSeek-R1 蒸馏版塞进浏览器，用 WebGPU 加速推理，全程 API Key 都不用掏。
为什么要做端侧推理？
调 API 的三座大山
调用 DeepSeek / OpenAI API 看似方便，但背后藏着三个问题：
| 痛点 | 说明 |
|---|---|
| 贵 | 频繁调用累积费用不算小，尤其流式长对话 |
| 不安全 | 聊天上下文（Context）随着每次请求发送到远程服务器，数据隐私没法保证 |
| 依赖网络 | 服务器宕机、网络波动，用户体验直接崩 |
端侧模型的思路
既然问题和答案都知道，为什么不能把模型直接搬到用户本地？
这个项目就是在探索这条路：
传统模式：浏览器 ──网络──→ DeepSeek 服务器 ──返回答案──→ 浏览器
本项目： 浏览器 内 GPU 直接跑模型 → 返回答案
不用发网络请求、不用等排队、对话记录永远留在本地。
技术全景
先来看这个项目涉及的几项关键技术，它们的关系一句话概括：
用 React 搭页面，TailwindCSS 写样式，Transformers.js 调度模型，WebGPU 负责推理计算。
React + TypeScript + TailwindCSS：前端底座
// App.tsx 核心骨架
function App() {
const [status, setStatus] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const [loadingMessage, setLoadingMessage] = useState("");
const [progressItems, setProgressItems] = useState([...]);
const IS_WEBGPU_AVAILABLE = !!navigator.gpu;
// ...
}
为什么选 React 而不是 Vue？
- AI 生态里大型项目以 React 居多，社区资源丰富
- Hooks 的函数式思想和数据驱动视图的理念特别适合处理模型加载/推理中的状态流转
- TypeScript 的类型系统能在模型加载这种高复杂度场景下帮你提前拦截大量 bug
TailwindCSS：不用再写 CSS 了
TailwindCSS 的核心——原子类。以前写 CSS 是：
/* 传统写法：起类名 → 写选择器 → 声明属性 */
.my-card {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 1rem;
}
现在只需要：
<div className="flex flex-col items-center mb-1 max-w-[400px] text-center">
TailwindCSS 提供了一堆语义化到极致的类名，flex 就是 flex、text-center 就是文本居中——所见即所得，几乎不用在手写 CSS 和切编辑器窗口之间反复横跳。这在 AI 驱动的 Vibe Coding 场景里特别受用——LLM 极擅长这种"告诉你类名，你自己拼"的模式。
WebGPU：浏览器里的 GPU
这是整个项目最硬核的部分。
网页前端以前只能用 WebGL（2011 年的标准），性能有限。WebGPU 是新一代浏览器 GPU API，直接对标 Vulkan/Metal/DX12，让浏览器也能吃到现代 GPU 的红利。
// 一行代码检测浏览器是否支持 WebGPU
const IS_WEBGPU_AVAILABLE = !!navigator.gpu;
// ↑ 不支持时返回 undefined
// ↑ 双重否定转成明确的 true/false
目前 Chrome/Edge 113+ 支持，Firefox 也在 Nightly 版本中跟进。
Transformers.js：把 HuggingFace 搬进浏览器
这是 HuggingFace 官方推出的 JS 库，让你在浏览器里：
- 加载 HuggingFace 上的预训练模型（包括 LLM）
- 和 Python 版 Transformers API 保持一致的接口
- 支持 ONNX 格式，能直接在 WebGPU 上跑
// Transformers.js 加载模型的典型流程（伪代码）
const pipeline = await pipeline('text-generation', modelName, {
device: 'webgpu', // 关键：指定在 GPU 上跑
});
加载完毕后就完全本地运行，数据不出浏览器。
模型选型
本项目选用的是 DeepSeek-R1-Distill-Qwen-1.5B-ONNX，两个关键信息：
| 属性 | 含义 |
|---|---|
| Distill（蒸馏） | 用原始 DeepSeek-R1 教一个小模型，让它在保留推理能力的同时大幅降低参数量 |
| 1.5B（15 亿参数） | 参数量是云端大模型的零头，但足够在本地完成许多推理任务 |
小参数模型不是"残血版"——在特定任务上，蒸馏后的小模型往往能用 1/10 算力实现 90% 的效果。
项目的组件分层
App.tsx（主组件）
├── WebGPU 检测 → 不支持就提示用户
├── 状态管理 → null → loading → ready
├── 模型加载区 → 进度条、文件信息
├── 对话区 → 输入框 + 推理结果
└── 错误处理区 → 加载失败时的友好提示
整个应用就是一个 React 函数组件——返回 JSX 之前是 JavaScript 逻辑，return 之后是 UI。这就是 React 组件化的精髓。
前端直接调 API vs BFF vs 端侧推理
回顾三种架构模式：
① 前端直调 API（纯前端）
浏览器 ──fetch──→ DeepSeek API
问题：API Key 暴露在前端代码里，右键就能看
② BFF 模式（加中间层）
浏览器 ──fetch──→ BFF（你的后端）──→ DeepSeek API
问题：多了一套后端要维护，API 费用照样花
③ 端侧推理（本项目）
浏览器内 GPU 直接跑模型
优点：0 费用、0 延迟（推理部分）、数据不出浏览器
总结
这个项目的核心价值在于证明了浏览器不是一个"展示层"，它已经是完整的计算平台。
技术栈回顾：
| 层 | 技术 | 职责 |
|---|---|---|
| 界面 | React + TypeScript | 组件化 UI，状态管理 |
| 样式 | TailwindCSS | 原子 CSS，零手写 |
| 模型调度 | Transformers.js | 加载 / 调用 HuggingFace 模型 |
| 推理加速 | WebGPU + ONNX Runtime | 浏览器内 GPU 计算 |
如果你是前端工程师，这个项目能帮你理解 AI 时代前端技术栈的全貌。如果你想写入简历，这个项目覆盖了 React、TypeScript、TailwindCSS、WebGPU、Transformers.js——全是当下最热的关键词。
项目地址：ai_doubao_dcx: 走向AGI，走向豆包
运行方式：
pnpm install && pnpm dev浏览器要求：Chrome/Edge 113+
