配了三年前端，今天才发现本地 LLM 根本不用发到云端——浏览器自己会跑模型，这件事把前端 AI 的账彻底变了

前端页面里调 API 跑 AI 模型，这个习惯可能很快要变了。

2026 年 2 月，HuggingFace 发布 Transformers.js v4——把 WebGPU runtime 直接嵌进 JavaScript，Llama 3.2 3B 在浏览器里跑出了 60 tokens/sec，这个数字意味着什么？意味着一次 2K token 以内的总结任务，客户端推理已经比往返云端 API 更快。

这不是实验室数据。60 tokens/sec 相当于 M4 MacBook Air 本地 Python 执行的性能。而达到这个速度的设备，是用户手里那块浏览器里的 GPU。

把 LLM 直接跑进浏览器，分几步？

目前前端能用的方案有三层：

第一层：纯浏览器执行，不用装任何东西。WebLLM（MLC AI 开发）和 Transformers.js v4 是这个层次的代表，npm install 之后直接在页面里调模型权重，WebGPU 加速，IndexedDB 缓存，首次加载后后续秒开。

第二层：本地服务，需要装一个桌面程序但前端代码几乎不动。Ollama 是这个层次的代表，npm install ollama-ai-provider，API 格式和 OpenAI 完全兼容，Vercel AI SDK 的 useChat 直接迁移，改一行 baseURL 就切换到本地模型。

第三层：浏览器内置 API。Chrome 正在推进 window.ai 实验性接口，允许网页直接调用设备上的语言模型，不需要显式加载权重，属于浏览器原生能力，2026 年还在推进中。

为什么 2026 年突然能跑了？

根本变化在 WebGPU runtime 的成熟。

之前 Transformers.js 用的是 WASM 方案，矩阵运算跑在 CPU 上，GPU 只做渲染辅助。v4 版本用 C++ 重写了 WebGPU backend，计算着色器（WGSL）直接操作 GPU 显存，矩阵乘法并行化，内存带宽利用率是 WASM 方案的数倍。

配套成熟的是量化技术。4-bit 量化把模型体积压缩 70%，Llama 3.2 3B 在 4GB VRAM 的笔记本上就能流畅运行，不需要专业级显卡。Mistral 7B 量化后约 4GB，iPhone 15 Pro 的 GPU 勉强能跑，前端能支持的用户面已经大幅扩展。

浏览器兼容现状（2026 年 8 月）

Chrome 113+ 和 Edge 113+ 已全面支持 WebGPU，是目前最可靠的部署环境。Safari 18+ 在 macOS 15 上支持部分模型，Firefox 还在 behind flag 阶段。如果你的产品面向开发者用户群体，Chrome/Edge 的覆盖率已经足够。

实际落地怎么选？

面向普通用户的隐私敏感场景——比如医疗记录总结或者客服对话脱敏——选 WebLLM，数据物理上不离开用户设备，不存在传输层泄露风险。面向内部工具或者有技术背景的用户群，选 Ollama，可以跑更大参数的模型，前端改动最小。面向需要兼容所有浏览器用户的场景，渐进增强：WebGPU 不可用时 fallback 到云端 API，用户无感知。

一个具体例子：表单 PII 实时脱敏

用户在聊天窗口输入了手机号和地址，提交之前，本地模型在浏览器内完成检测，直接把敏感字段替换成 [REDACTED]，干净数据才发往服务器。全程没有 token 费用，没有数据出境，响应延迟几乎为零。

这个场景之前实现不了，因为浏览器内跑不了足够快的 LLM。2026 年可以了。

现在动手要多少行代码？

WebLLM，最小可运行示例：

import { CreateMLCEngine } from “@mlc-ai/web-llm”;

const engine = await CreateMLCEngine(“Llama-3.2-3B-Instruct-q4f32_1-MLC”);
const reply = await engine.chat.completions.create({
messages: [{ role: “user”, content: “Summarize this…” }]
});

或者配合 Ollama，前端代码和调用 OpenAI API 完全一样：

import { streamText } from ai;
import { createOllama } from ollama-ai-provider;

const ollama = createOllama({ baseURL: http://127.0.0.1:11434/api });
// 之后所有调用方式和 OpenAI 完全相同

值得迁移的场景有哪些？

单次总结（2K token 以内）、文本分类、FAQ 问答、表单自动填充、内容审核——这些高频低延迟场景，客户端推理不仅更快，还免去了 API 费用和隐私合规成本。

下一步可以做的：

打开 Chrome DevTools，console 里跑一下 navigator.gpu 看看是否可用。然后 npm install @mlc-ai/web-llm，跑一下官方 Demo，感受一下实际速度。如果你的用户主要用 Chrome/Edge，这个方案现在已经可以进生产了。

2026 年的前端页面不一定要「调用 AI」，也可以「内置 AI」。这个转变刚刚开始。