浏览器直接跑大模型，正在从演示走向可用。借助 WebGPU，网页可以不依赖任何云端接口，在用户本机的 GPU 上完成文本生成、嵌入和视觉推理。数据不出设备、离线可用、没有按量计费，这是端侧推理最打动人的三件事。本文把原理、技术路线和落地取舍一次讲清。
为什么要把大模型放进浏览器
大多数 AI 功能默认走云端 API：前端把数据发到服务器，模型算完再返回。这条路简单，但有三类代价——隐私（数据要离开用户设备）、成本（每次调用都计费）、延迟（往返网络）。端侧推理把模型直接跑在浏览器里，正好补上这三块短板。
- 隐私优先：输入文本、文档、图片全程留在本机，适合合同、病历、代码等敏感场景。
- 离线可用：模型加载一次后，断网也能继续对话，适合内网、车载、弱网环境。
- 零边际成本：没有 token 账单，用户设备的算力就是全部成本。
- 低延迟：省去网络往返，打字即出字，交互更跟手。
WebGPU 是什么：浏览器里的 GPU 通道
端侧推理能跑起来，关键在 本地部署大模型 走的是服务器 GPU，而浏览器侧靠的是 WebGPU 。它是 WebGL 的继任者，最大区别是 WebGL 只擅长把图形画到画布，WebGPU 把通用 GPU 计算（GPGPU）当成一等公民支持，能直接跑矩阵乘法这类计算密集任务。
在代码层面，WebGPU 的入口是 Navigator.gpu，先 requestAdapter() 拿到一块物理 GPU 的抽象，再 requestDevice() 拿到逻辑设备，之后用 compute pipeline 把计算任务提交到 GPU 队列。它只工作在 HTTPS 这样的安全上下文里，主流 Chrome / Edge 早已默认开启，Firefox 和 Safari 也在逐步覆盖。换句话说，今天大部分桌面浏览器已经具备在网页里调用显卡算力的能力。
if(navigator.gpu) 做特性探测，不支持时优雅降级到云端 API 或提示用户换浏览器，别让整页因为拿不到 GPU 直接报错。端侧推理的三条技术路线
transformers.js（Hugging Face）
把 PyTorch 模型导出成 ONNX，再用 ONNX Runtime Web 在 WASM 或 WebGPU 后端执行。它覆盖了文本生成、嵌入、图像分类、语音等任务，调用风格和 Python 版 transformers 接近，适合想把现有模型快速搬到前端的团队。
WebLLM（MLC AI）
基于编译栈把 Llama 、 Phi 、 Qwen 、 Gemma 等开源权重量化后直接跑在 WebGPU 上，并对外暴露一套兼容 OpenAI 的接口。它把「模型权重 + 推理引擎」打包，开发者几行代码就能在页面里 new 一个本地对话模型。
ONNX Runtime Web 兜底
当设备不支持 WebGPU 时，引擎会退到 WASM 后端，保证功能不中断——代价是速度明显变慢。工程上通常用 WebGPU 优先、 WASM 兜底的渐进策略。
能跑哪些模型，跑得动吗
浏览器不是无限算力。判断能不能跑，主要看三点：模型参数量、量化精度、设备显存/内存。
- 小模型（0.5B–3B 量化版）：在笔记本核显上也能流畅对话，是端侧体验的甜点区。
- 7B 量化版：在独显机器上可跑，但首字延迟和吞吐都明显弱于云端，适合对隐私敏感、对速度容忍的场景。
- 量化是关键：权重通常用 INT4 / INT8 压缩，体积和显存占用大幅下降，精度损失在可接受范围。
另外模型文件要从 CDN 下载并缓存到 IndexedDB，首次加载需要等几秒到几十秒，之后刷新就快了。
端侧推理 vs 云端 API 怎么选
| 维度 | 端侧推理（WebGPU） | 云端 API |
|---|---|---|
| 数据隐私 | 不出本机，最佳 | 需上传，依赖服务商合规 |
| 运行成本 | 一次性加载，无按量计费 | 按 token 持续计费 |
| 模型能力 | 受设备算力限制，多为小模型 | 可用最强旗舰模型 |
| 延迟 | 本地低延迟，但弱机慢 | 稳定，但受网络影响 |
| 离线 | 支持 | 不支持 |
实践建议：把云端 API 当主力、端侧当隐私/离线增强，按请求特征动态路由，是很多产品的稳妥做法。和 RAG 检索增强生成 结合时，检索和向量计算也能部分前置到本地，进一步减少外发数据。
- 特性探测：用 navigator.gpu 判断是否支持 WebGPU，不支持则降级到云端接口。
- 选引擎与模型：小场景用 transformers.js，想要 OpenAI 风格接口用 WebLLM，挑一个 1B–3B 的量化权重。
- 加载权重：从 CDN 拉模型并缓存到 IndexedDB，做好加载进度提示。
- 初始化推理：requestDevice 拿到 GPU 设备，用 WebGPU 后端建立生成会话。
- 接界面与降级：把流式输出接到页面，并在出错时切回 WASM 或云端，保证可用。
“常见问题速查”
端侧推理吃内存吗？吃，模型权重常驻显存/内存，低端设备要控制并发。
能多人共用一个端侧模型吗？每个浏览器标签页是独立进程，模型各自加载，无法像服务端那样共享。
首次加载慢怎么办？把模型文件做长效缓存（IndexedDB/Service Worker），并用体积更小的量化版。
常见问题
评论 (0)