你有没有想过有一天打开一个网页就能直接跑通一个 .5B 参数的大语言模型？不用买显卡、不用配环境、不用注册账号，甚至断网了都能用。按理说，

最近我在做一个叫 DeepSeek-R1 WebGPU 的项目。把 DeepSeek-R1 的 .5B 蒸馏版模型搬到了浏览器里全程用 WebGPU 加速，前端用 React + TypeScript + Tailwind CSS。这篇文章我会把整个项目的技术细节掰开揉碎讲清楚。

一、为什么要在大模型这件事上折腾浏览器？

你可能已经用过 ChatGPT 或者 DeepSeek 的网页版。怎么说呢，输入问题，等待几秒，答案就出来了。体验不错对吧，但这里面有几个不太容易被注意到的问题。

第一个问题是成本。 大模型 API 是按 token 计费的——token 可以理解成模型处理文字时的最小单位，一个汉字大概对应 到 个 token。你问得越多、聊得越长，费用就越高。

第二个问题是隐私。 每一次你向 API 发送请求，你的问题和上下文都会被传送到远端的服务器。如果你问的是公司内部的代码、客户的敏感信息、或者任何不方便被第三方看到的内容，这个模式就有点令人担忧了。

第三个问题是网络依赖。 没网就彻底歇菜。

那有没有办法让模型跑在本地、不联网、还不用花钱？有的，这就是端侧模型的思路——把模型直接部署在使用者的设备上，推理计算全部在本地完成。

浏览器是端侧模型最轻量的分发网站。使用者点开一个网页，模型自动下载到本地。推理全程在浏览器里跑，数据不出设备，用完即走。

但问题来了的观点是，浏览器的性能够跑大模型吗？

二、WebGPU：浏览器调用显卡的新方式

大模型推理的本质就是很多矩阵乘法运算——你可以把它想象成无数个数字表格在不停地做乘法和加法。 这种运算恰恰是 GPU最擅长的事情。

过去浏览器想用 GPU 算力，主要靠 WebGL。但 WebGL 本来是为画 3D 图形设计的。 用来做通用计算属于“跨界打工”，效率并不高。

WebGPU 是新一代的 Web 标准，专门为图形渲染和通用计算设计。它让网页开发者能直接调用程序 GPU 进行高性能计算。简单说WebGPU 就是浏览器里的 GPU 计算接口，类似 CUDA 的 Web 版。

有了 WebGPU،浏览器里也能做矩阵乘法 → 也就能跑 Transformer 模型 → 也就能跑大语言模型。截至 年 月，WebGPU 的全球浏览器支持率大约在 % 左右。Chrome + 、Edge + 已经支持，Firefox 和 Safari 需要通过实验性开关开启。

如何检查是否支持WebGPU？

const IS_WEBGPU_AILABLE =!，navigator.gpu;按理说，

三、技术栈为什么选 React + TypeScript？按理说，

再看React。组件化思想

• useState

import { useState } from 'react';function Counter {
const = useState;return (

 setCount} className='hover:bg-green-500'>点我加1
{count}

)
}

• useEffect

import { useEffect } from 'react';function App{
useEffect=>{
console.log
// 初始化逻辑
},)
}

let name: string = "张三";老实说，let age: number =;let isReady: boolean = true;function greet: string {
return "你好,"+person;}

Tailwind CSS：原子类让样式更高效

// flex flex-col 垂直布局
// items-center 水平居中
// max-w- 最宽度为400px
// text-center 对齐方式居中

// text-red- 段落变红色
// font-bold 加粗字体

// hover:hover:bg-green 鼠标悬停背景变绿色
// p- 内边距16px

// opacity 按钮禁用后透明度降低

// border 边框线条粗细及颜色控制 focus:border-blue 聚焦状态改变边框颜色 rounded-md 边框圆角半径

// max-h-screen 高度最大为视口高度 overflow-auto 内容溢出时出现滚动条

// text-blue 超链接文字颜色为蓝色 hover:hover:underline 鼠标悬停时下划线效果

// 响应式布局 md: 中等屏幕以上水平排列 sm: 小屏幕垂直排列
// sticky top固定顶部位置 shadow-md 阴影效果 z-index优先级最高

// grid 布局 grid-cols 自定义列数 gap-y 垂直间隔 px/py 内边距 bg-gray-light 背景灰色 rounded-lg 边框圆角半径 shadow-sm 阴影效果较小