Browser LLM Lab：纯浏览器端运行大模型的技术实践

Browser LLM Lab 是一个技术项目，展示了如何利用 Transformers.js 和 WebGPU 在浏览器中直接运行 Gemma、Qwen、SmolLM 等开源大模型，实现零后端、完全本地的 LLM 推理。该项目为隐私优先的 AI 应用开辟了新路径，解决了云端推理的隐私风险、网络依赖等痛点。本帖将从背景、技术栈、性能、功能、部署、优化及未来展望等方面展开介绍。

传统云端 LLM 推理依赖 GPU 集群，但存在隐私风险（数据上传）、网络依赖、延迟高、运营成本高等问题。端侧 AI 成为解决这些痛点的方向，Browser LLM Lab 验证了现代浏览器具备本地运行数十亿参数模型的能力。

核心技术

• Transformers.js: Hugging Face Transformers 的 JS 移植版，支持浏览器/Node.js 运行预训练模型，使用 ONNX Runtime Web 作为后端，可转换 PyTorch 模型为 ONNX 格式。
• WebGPU: 新一代浏览器图形计算 API，提供接近原生 GPU 的通用计算能力，是浏览器端 LLM 推理的关键。 执行路径:
• WebGPU 模式：利用 GPU 并行计算，提供可用推理速度；
• WASM 回退：WebGPU 不可用时使用，但对 >1B 参数模型几乎无法使用。

支持的模型

模型	量化后大小	多模态	推荐场景
Qwen2.5 0.5B	~400MB	否	速度最快
Qwen2.5 1.5B	~1GB	否	速度质量平衡
SmolLM3 3B	~2GB	否	多语言推理
Phi-3.5 mini	~2.5GB	否	结构化推理
Gemma4 E2B	~3.4GB	是	高质量多模态

性能表现: 不同硬件的 token 生成速度差异显著：

硬件	tok/s
Intel iGPU Gen-11	~1
Apple M1/M2	8-15
RTX3060/4060	25-40
RTX4090	60-80

现代独立显卡和 Apple Silicon 已能提供可用的端侧推理体验。

核心功能

1. 能力检测: 加载模型前检测 WebGPU 支持、GPU 型号/显存、RAM、存储等，确保兼容性。
2. 模型加载与缓存: 从 Hugging Face Hub 下载 ONNX 权重，支持进度追踪、本地缓存（Cache API+OPFS）和缓存清理。
3. 基准测试: 内置 32 token 测试，测量 tok/s、首 token 时间、预热时间。
4. 流式推理: 支持 token-by-token 生成，提供实时打字机效果。

部署:

• 本地: 零依赖，用 python -m http.server 或 npx serve 托管，访问 localhost:8000。
• 云端: 优化 Cloudflare Pages 部署，需配置 COOP/COEP 头以启用多线程，避免推理速度下降 2-4 倍。

优化技巧

• Chrome 标志: 启用 #enable-unsafe-webgpu、#enable-webgpu-developer-features 等可提升 1.5-2 倍性能。
• 模型镜像: 将模型镜像到 Cloudflare R2（无出站流量费，存储成本低）。

局限:

• 首次加载时间长（慢速连接需 30-60 分钟）；
• 存储占用大（每个模型占完整大小）；
• 移动设备体验差（易过热）；
• WebGPU 依赖（无 WebGPU 时性能骤降）。

技术意义

• 去中心化 AI: 推理转移到用户设备，推动 AI 民主化，减少对巨头 API 的依赖。
• 隐私优先: "零数据离开浏览器" 符合 GDPR 等监管要求。
• 边缘计算: 浏览器成为边缘节点，未来可能出现更小专用模型、浏览器内置 AI、混合架构（端侧+云端）。

适用场景: 隐私敏感应用（医疗/法律）、离线环境、低延迟交互（打字辅助）、成本敏感应用。

总结：Browser LLM Lab 展示了端侧 LLM 推理的可行性，虽有局限，但为隐私优先的 AI 应用开辟了新路径，值得开发者关注。