在浏览器里跑大模型！用 WebGPU 零成本部署 DeepSeek-R1

不要再给 API 充钱了------把大模型装进浏览器，断网也能用。

写在前面

当你还在往 DeepSeek 账户里充钱的时候，有人已经把 R1 模型直接跑在了浏览器里------不需要后端、不需要服务器、甚至不需要联网。

这篇文章带你从零到一，将 DeepSeek-R1 蒸馏版塞进浏览器，用 WebGPU 加速推理，全程 API Key 都不用掏。

为什么要做端侧推理？

调 API 的三座大山

调用 DeepSeek / OpenAI API 看似方便，但背后藏着三个问题：

痛点	说明
贵	频繁调用累积费用不算小，尤其流式长对话
不安全	聊天上下文（Context）随着每次请求发送到远程服务器，数据隐私没法保证
依赖网络	服务器宕机、网络波动，用户体验直接崩

端侧模型的思路

既然问题和答案都知道，为什么不能把模型直接搬到用户本地？

这个项目就是在探索这条路：

复制代码

传统模式：浏览器 ──网络──→ DeepSeek 服务器 ──返回答案──→ 浏览器

本项目：  浏览器 内  GPU 直接跑模型 → 返回答案

不用发网络请求、不用等排队、对话记录永远留在本地。

技术全景

先来看这个项目涉及的几项关键技术，它们的关系一句话概括：

用 React 搭页面，TailwindCSS 写样式，Transformers.js 调度模型，WebGPU 负责推理计算。

React + TypeScript + TailwindCSS：前端底座

tsx 复制代码

// 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 是：

css 复制代码

/* 传统写法：起类名 → 写选择器 → 声明属性 */
.my-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
}

现在只需要：

html 复制代码

<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 的红利。

ts 复制代码

// 一行代码检测浏览器是否支持 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 上跑

ts 复制代码

// 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% 的效果。

项目的组件分层

arduino 复制代码

App.tsx（主组件）
├── WebGPU 检测    → 不支持就提示用户
├── 状态管理       → null → loading → ready
├── 模型加载区     → 进度条、文件信息
├── 对话区         → 输入框 + 推理结果
└── 错误处理区     → 加载失败时的友好提示

整个应用就是一个 React 函数组件------返回 JSX 之前是 JavaScript 逻辑，return 之后是 UI。这就是 React 组件化的精髓。

前端直接调 API vs BFF vs 端侧推理

回顾三种架构模式：

sql 复制代码

① 前端直调 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+