你有没有想过，有一天打开一个网页就能直接跑通一个 1.5B 参数的大型语言模型？无需购买显卡、不必配置环境、不用注册账号，甚至在没有网络的情况下也能正常使用。
近期，一个名为 DeepSeek-R1 WebGPU 的项目吸引了大量关注。它成功将 DeepSeek-R1 的 1.5B 蒸馏版模型部署在浏览器中，全程借助 WebGPU 进行硬件加速，前端则采用了 React、TypeScript 和 Tailwind CSS 构建。本文将深入剖析该项目的各项技术细节，帮助您全面理解其实现原理。
一、为何要在浏览器中运行大模型？
您可能已经体验过 ChatGPT 或 DeepSeek 的网页版。输入问题，等待数秒，便能得到答案。体验确实不错，但其中存在几个容易被忽视的问题。
首要问题是成本。大模型 API 通常按 token 计费——token 可以理解为模型处理文字的最小单位，一个汉字大约对应 1 到 2 个 token。您提问越多、对话越长，产生的费用也就越高。
其次是隐私问题。每次向 API 发送请求，您的问题和上下文都会被传输到远端服务器。如果您询问的是公司内部代码、客户敏感信息，或任何不希望被第三方看到的内容，这种模式就存在一定的风险。
第三是网络依赖。一旦断网，服务便会完全中断。
那么，有没有办法让模型在本地运行，无需联网，且完全免费？答案是肯定的。这就是端侧模型的思路——将模型直接部署在用户的设备上（如手机、电脑、汽车中控系统），所有推理计算均在本地完成。
浏览器，正是端侧模型最轻量的分发平台。用户只需打开一个网页，模型便会自动下载到本地，推理过程完全在浏览器内进行，数据不离开设备，用完即走。但随之而来的问题是：浏览器的性能足以支撑大模型运算吗？
二、WebGPU：浏览器调用显卡的新途径
大模型推理的本质是大量的矩阵乘法运算——您可以将其想象为无数个数字表格在不断进行乘法和加法。这种运算正是 GPU 最擅长的领域。
过去，浏览器若要利用 GPU 算力，主要依赖 WebGL。然而 WebGL 最初是为 3D 图形渲染而设计，用于通用计算属于“跨界工作”，效率并不理想。
WebGPU 是新一代 Web 标准，专为图形渲染和通用计算打造。它允许网页开发者直接调用系统 GPU 进行高性能计算。简单来说，WebGPU 就像是浏览器中的 GPU 计算接口，类似于 CUDA 的 Web 版本。有了 WebGPU，浏览器便能进行矩阵乘法运算，进而运行 Transformer 模型，最终实现大语言模型的本地推理。
截至 2024 年 10 月，WebGPU 的全球浏览器支持率已达到约 70%。Chrome 113+、Edge 113+ 均已支持，Firefox 和 Safari 则需要通过实验性开关开启。
在代码中检测浏览器是否支持 WebGPU，仅需一行：
typescript
const IS_WEBGPU_AVAILABLE = !!navigator.gpu;
navigator.gpu 是浏览器提供的 API 入口点。如果浏览器支持 WebGPU，该属性会返回一个 GPU 对象；否则返回 undefined。使用 !! 可以将任何值转换为布尔值——undefined 变为 false，有值则变为 true。
三、技术栈为何选择 React + TypeScript？
项目框架搭建完成后，接下来便是技术栈的选择。这里选用了三个核心工具：React、TypeScript 和 Tailwind CSS。
3.1 React：组件化开发思想
在传统网页开发中，HTML 负责结构、CSS 负责样式、JavaScript 负责逻辑，三者相互分离。这种模式在简单页面中运作良好，但页面变得复杂时，修改一个按钮可能需要同时改动三个文件，维护起来颇为棘手。
React 提供了另一种思路：将 HTML、CSS 和 JavaScript 打包成一个独立的功能单元，称为“组件”。一个按钮是一个组件，一个输入框是一个组件，整个聊天界面也是一个组件。组件可以嵌套、可以复用，如同搭积木般拼出完整页面。
在 React 中，组件本质上就是一个 JavaScript 函数。该函数返回一段名为 JSX 的代码——JSX 看起来像 HTML，但实际上是 JavaScript 的语法扩展。
下面是一个最简单的 React 组件示例：
tsx
function Welcome() {return <h1>你好，世界h1>;}
该函数返回一个 标签，在页面上使用
3.2 useState：让界面“活”起来
普通的 JavaScript 变量更改后，页面不会自动更新。您需要手动操作 DOM 来修改页面内容，例如 document.getElementById('xxx').innerText = '新内容'。
React 的 useState 解决了这一问题。它创建了一个“响应式”的数据状态：状态一旦改变，界面便会自动更新。
tsx
import { useState } from 'react';function Counter() {// 声明一个名为 count 的状态，初始值为 0// setCount 是用于修改该状态的函数const [count, setCount] = useState(0);return (<div><p>你点击了 {count} 次p><button onClick={() => setCount(count + 1)}>点我button>div>);}
这段代码做了什么？useState(0) 创建了一个初始值为 0 的状态。点击按钮时调用 setCount(count + 1)，count 变为 1，页面上的 {count} 自动更新为 1。您无需编写任何 DOM 操作代码。
在 DeepSeek-R1 项目中，使用多个状态来管理模型加载的不同阶段：
tsx
const [status, setStatus] = useState(null);// 模型状态：null | 'loading' | 'ready'const [error, setError] = useState(null);// 错误信息const [loadingMessage, setLoadingMessage] = useState("");// 加载进度提示
status 初始为 null，表示模型尚未开始加载。开始加载后变为 'loading'，加载完成则变为 'ready'。界面根据 status 的不同值显示不同内容——这正是“数据驱动界面”的核心思想。
3.3 useEffect：在合适的时机执行操作
useEffect 是 React 的另一个核心 Hook，用于处理“副作用”。什么是副作用？任何不属于“渲染界面”本身的事务——例如发送请求、操作浏览器 API、读写本地存储等。
useEffect 接收两个参数：一个函数（您要执行的操作）和一个依赖数组（用于控制何时执行）。
tsx
import { useEffect } from 'react';function App() {useEffect(() => {// 该函数会在组件首次渲染到屏幕后执行console.log('组件已经挂载完成');// 这里可以执行初始化操作，例如加载模型}, []);// 空数组表示仅在组件挂载时执行一次}
在 DeepSeek-R1 项目中，useEffect 用于在页面加载后自动开始下载和初始化模型。[] 这个空数组确保初始化逻辑仅在组件首次出现时执行一次，不会重复运行。
3.4 TypeScript：为 JavaScript 添加类型约束
JavaScript 是一种动态类型语言——变量可以是数字，也可以是字符串，甚至随时改变类型。灵活性虽高，但在大型项目中，这种灵活性往往成为隐患。
TypeScript 为 JavaScript 引入了类型系统。您可以明确告知编译器：这个变量是数字，那个参数是字符串，这个函数返回布尔值。
typescript
// 变量名后跟 : 类型 即为类型注解let name: string = "张三";// name 只能是字符串let age: number = 25; // age 只能是数字let isReady: boolean = true;// isReady 只能是 true 或 false// 函数参数和返回值也可以添加类型function greet(person: string): string {return "你好，" + person;}
如果您试图将数字赋值给 name，TypeScript 编译器会报错。这听起来有些繁琐，但在大型项目中，类型系统能帮助您提前发现大量低级错误，并使代码意图更加清晰。
3.5 Tailwind CSS：原子类让样式编写更高效
传统 CSS 开发中，您需要为每个元素起一个类名，然后在单独的 CSS 文件中编写样式。类名一多，维护便变得困难。
Tailwind CSS 采用了不同方式：它提供了大量细粒度的工具类（也称为原子类），每个类只负责一项功能。例如，想让元素有内边距，使用 p-4；想居中，使用 text-center；想水平排列，使用 flex。
tsx
// 无需单独编写 CSS 文件，直接在 className 中组合原子类<div className="flex flex-col items-center max-w-[400px] text-center"><h1 className="text-4xl font-bold mb-1">DeepSeek-R1 WebGPUh1>div>
flex flex-col 使子元素纵向排列，items-center 使其在交叉轴方向居中，text-4xl 设置大号字体。您无需离开 JSX 文件即可完成所有样式工作。
3.6 ESLint：代码风格的“守门员”
团队协作时，每位开发者写代码的习惯不尽相同——有人用单引号，有人用双引号；有人加 分号，有人不加。这些小差异累积起来会让代码库变得杂乱无章。
ESLint 是一个代码检查工具，它可以根据您配置的规则自动检查代码风格，甚至自动修复。大型公司的前端项目几乎都会配置 ESLint，以确保代码风格统一。
四、模型如何在浏览器中运行？
聊完前端技术栈，终于到了最核心的问题：模型究竟如何在浏览器中运行？
4.1 Transformers.js：Hugging Face 的浏览器版本
Transformers.js 是 Hugging Face 推出的 JavaScript 库，允许您在浏览器或 Node.js 环境中直接运行预训练的 AI 模型。它在设计上尽可能对标 Python 版的 Transformers 库，但底层实现不同——Transformers.js 使用 ONNX Runtime 来执行模型推理。
4.2 ONNX：模型的“通用语言”
不同 AI 框架（如 PyTorch、TensorFlow）训练出的模型格式各不相同。ONNX 是一种开放标准，旨在让模型能够在不同框架和平台之间迁移。ONNX Runtime 是专门用于执行 ONNX 模型的高性能推理引擎，而 ONNX Runtime Web 则是其浏览器版本。
Transformers.js 仅支持 ONNX 格式的模型。好消息是，Hugging Face 的模型库中已有大量转换好的 ONNX 模型可直接使用。如果您想使用自己的模型，也可以通过 Optimum 工具将 PyTorch 或 TensorFlow 模型转换为 ONNX 格式。
4.3 项目中使用的具体模型
该项目加载的是 DeepSeek-R1-Distill-Qwen-1.5B-ONNX。我们来拆解一下这个名称：
- DeepSeek-R1：DeepSeek 公司推出的推理模型
- Distill：蒸馏版——利用大模型（老师）的知识去训练小模型（学生），使小模型在更小的参数量下达到接近大模型的效果
- Qwen：通义千问的模型架构
- 1.5B：15 亿参数
- ONNX：模型采用 ONNX 格式
15 亿参数听起来很多，但在大模型领域其实属于“轻量级”范畴。经过蒸馏和量化处理后，该模型已能在浏览器中顺利运行。
在代码中加载模型大致如下（简化版）：
typescript
import { pipeline } from '@huggingface/transformers';// 创建文本生成管道// pipeline 函数会下载模型、加载到内存、准备推理const generator = await pipeline('text-generation',// 任务类型：文本生成'onnx-community/DeepSeek-R1-Distill-Qwen-1.5B-ONNX', // 模型名称{ device: 'webgpu' }// 使用 WebGPU 加速);// 执行推理const result = await generator('你好，请介绍一下自己');console.log(result);
pipeline 是 Transformers.js 提供的最简单使用方式——它将预处理、模型推理、后处理全部打包在一起。您只需告诉它“我要做什么任务”和“用哪个模型”，其余部分由它自动处理。
{ device: 'webgpu' } 这个配置告诉 Transformers.js 使用 WebGPU 进行加速计算。如果没有此配置，模型将默认使用 CPU 运行，速度会慢很多。
五、完整示例：从零开始解析 App 组件
现在，我们将所有知识点串联起来，看看 DeepSeek-R1 项目的 App.tsx 组件完整长什么样，并逐行拆解。
tsx
import { useState, useEffect } from 'react';function App() {// 1. 声明三个响应式状态const [status, setStatus] = useState(null);const [error, setError] = useState(null);const [loadingMessage, setLoadingMessage] = useState("");// 2. 检测浏览器是否支持 WebGPUconst IS_WEBGPU_AVAILABLE = !!navigator.gpu;// 3. 组件挂载后执行初始化useEffect(() => {console.log('组件已经挂载完成');// 这里会触发模型的下载和加载}, []);// 4. 根据 WebGPU 支持情况渲染不同内容return IS_WEBGPU_AVAILABLE ? (<div className="flex flex-col h-screen mx-auto items-center justify-end"><div className="flex flex-col items-center"><h1 className="text-4xl font-bold">DeepSeek-R1 WebGPUh1><h2>一个在浏览器本地运行的推理模型h2>div>{/* 状态和错误信息的展示 */}{error && (<div className="text-red-500"><p>加载模型失败：p><p>{error}p>div>)}div>) : (<div>您的浏览器还不支持 WebGPUdiv>);}export default App;
逐行分析：
第 1 行：从 React 库中导入 useState 和 useEffect 两个 Hook。
第 4-9 行：App 组件是一个函数。函数内部使用 useState 声明了三个状态——status 追踪模型加载进度，error 记录错误信息，loadingMessage 显示加载提示。
第 12 行：IS_WEBGPU_AVAILABLE 是一个常量，通过 !!navigator.gpu 检测浏览器是否支持 WebGPU。
第 15-18 行：useEffect 在组件挂载后执行。这里会发起模型加载的请求（实际代码中会更复杂，涉及异步加载和进度更新）。
第 21-39 行：return 语句返回 JSX。三元运算符 ? : 根据 IS_WEBGPU_AVAILABLE 的值决定渲染哪个界面——支持 WebGPU 则显示主界面，否则显示提示信息。
className 中的 flex、flex-col、items-center、text-4xl、font-bold 均为 Tailwind CSS 的原子类，分别控制布局方向、对齐方式、字体大小和粗细。
六、总结
该项目巧妙地将几项关键技术融合在一起：
- 端侧模型的思路——模型在用户本地运行，数据不离开设备，不依赖网络
- WebGPU 提供 GPU 加速能力，使浏览器能够运行大模型
- Transformers.js + ONNX Runtime Web 负责模型的加载和推理
- React 的组件化和响应式状态管理让 UI 开发更高效
- TypeScript 的类型系统保障代码质量
- Tailwind CSS 的原子类让样式管理更轻松
- ESLint 统一代码风格
打开网页就能运行大模型——这已不再是未来的概念。随着 WebGPU 浏览器支持率的提升以及端侧模型性能的持续优化，浏览器正逐渐成为一个日益强大的 AI 计算平台。
