# 别再囤API Key了，浏览器里藏着免费AI 如果你还在为调用 OpenAI/Claude 的 API Key 发愁——注册要海外手机号、付款要美元信用卡、按 token 计费像开盲盒——那这篇文章可能帮你把这条成本线直接砍到 **0 元**。海外 Web 开发圈这半年悄悄成型了一条技术路线：**把 AI 引擎直接塞进浏览器，本地推理、离线可用、不花一分钱 API 费**。国内几乎没人系统写过这套东西。今天一次讲清楚 4 个真实可用、官网可直接访问的工具，外加一张"什么场景选哪个"的决策图。 ## 一、为什么"浏览器跑AI"突然能打了 两件事在 2024-2025 年交叉，让这件事从玩具变成了生产力： 1. **WebGPU 在主流浏览器全面落地**。Chrome、Edge 已经默认启用，Firefox、Safari 也在跟进。WebGPU 让 JavaScript 拿到了接近原生的 GPU 算力，跑矩阵乘法不再是笑话。 2. **模型小型化突飞猛进**。Gemma、Qwen、Phi 这类 0.5B-4B 级别的小模型，质量已经能覆盖摘要、翻译、分类、抽取这类高频任务。一个 1B 模型量化后不到 1GB，浏览器下载缓存一次就能反复用。 两条曲线一交叉，结论就是：**以前必须服务器干的推理活，现在用户的浏览器自己就能干**。开发者省了 GPU 账单，用户省了隐私顾虑——数据压根不出本机。 下面 4 个工具，就是这个赛道上的四条主力路线。 ## 二、工具一：Chrome Built-in AI（Gemini Nano）——浏览器自带的那台"免费发动机" **很多人用了十年 Chrome，不知道它里面现在出厂自带一个大模型。** - **名称**：Chrome Built-in AI（核心是 Gemini Nano，Google最小的端侧模型） - **官方文档**：`developer.chrome.com/docs/ai`（Prompt API / Summarizer API / Translator API 等系列页面） - **功能**：Google 从 2025 年起把一组"内置 AI API"逐步推入 Chrome 稳定版。对 **Chrome 扩展**开发者来说，Prompt API 已经可以免费调用 Gemini Nano——不用 API Key、不用付费、不用联网（模型文件下载到本地后离线可用）。配套的还有 Summarizer API（网页/文章摘要）、Translator API、Language Detector API 等，全部走本地推理。 - **价格**：**0 元**。没有按量计费，没有配额，用多少都是本地 GPU 在跑。 - **为什么值得关注**：这是目前**门槛最低的"零成本 AI 应用"发布通道**。你写一个 Chrome 扩展，调用 `LanguageModel.create()`（Prompt API 的新接口名）就能拿到一个会话式的本地模型，做划词翻译、页面摘要、邮件润色，一秒钟变成"AI 扩展"，而且你的用户也不用配置任何东西。 - **注意事项**：它对硬件有门槛——官方要求设备有足够的内存/显存和空闲磁盘（核显机器约 16GB 内存、独显约 8GB 显存、22GB 级空闲磁盘，以官方文档为准），首次使用会下载 Gemini Nano 模型文件（GB 级）。普通网页（非扩展）使用 Prompt API 目前还需要通过 Origin Trial 等机制申请，**以官方文档的当前状态为准**。 - **适用人群**：会写一点 JavaScript 的所有人。扩展开发是最低的入门坡道。 **和国内对比**：国内浏览器（360、QQ、Edge 中文版）目前都没有同等的内置模型 API 暴露给开发者。也就是说，这波"浏览器即推理引擎"的红利，现阶段只有 Chrome/Edge 生态能吃到——恰好是信息差所在。 ## 三、工具二：WebLLM——把任意开源模型塞进浏览器标签页 - **名称**：WebLLM - **官网/GitHub**：`github.com/mlc-ai/web-llm` - **背景**：来自 MLC 社区（机器学习编译社区，TQ Chen 团队主导，与陈天奇的 TVM/MLC 生态一脉相承），这个背景保证了它不是玩具项目。 - **功能**：基于 WebGPU，在浏览器里直接跑 Llama 3、Phi、Gemma、Qwen、Mistral 等开源模型的量化版本。模型权重从 HuggingFace 拉取后缓存在浏览器本地，之后完全离线推理。它既能当纯前端库用，也能放进 Web Worker 后台跑，甚至可以起一个本地推理服务供页面调用。 - **价格**：开源免费（Apache 2.0 许可），推理零成本，唯一的"成本"是用户首次下载模型权重的流量。 - **为什么值得关注**：**Chrome 内置 AI 只能让你用 Gemini Nano，WebLLM 让你自选模型**。你的用户里有中文场景重的？选 Qwen 小模型；要英文写作？选 Llama/Phi。模型即插即换，不锁死在一家供应商。 - **适用人群**：想做"纯前端 AI 应用"的独立开发者——不需要后端服务器，静态托管到 Cloudflare Pages/Vercel 就能上线，边际成本为零。 一个典型初始化长这样（细节以官方 README 为准）： ```js import * as webllm from "@mlc-ai/web-llm"; const engine = await webllm.CreateMLCEngine("Qwen2.5-1.5B-Instruct-q4f16_1-MLC"); const reply = await engine.chat.completions.create({ messages: [{ role: "user", content: "把这段话翻译成英文：……” }], }); ``` 没有服务器，没有 Key，`npm install` 完就拥有一个端侧大模型运行时。 ## 四、工具三：Transformers.js——不跑大模型，但"十八般小模型"样样精通 - **名称**：Transformers.js（HuggingFace 官方 JS 版本） - **官方文档**：`huggingface.co/docs/transformers.js`，GitHub 仓库 `github.com/huggingface/transformers.js` - **功能**：把 HuggingFace 生态里海量 Transformer 模型直接跑在浏览器里。它不是拿来跑对话大模型的，而是干"任务级"的活：文本分类、命名实体识别、零样本分类、问答、摘要、语音识别（Whisper 也能跑）、图像分类、嵌入向量……v3 版本加入了 WebGPU 支持，性能上了一个台阶。 - **价格**：开源免费，模型直接从 HuggingFace Hub 加载。 - **为什么值得关注**：**90% 的"AI 功能"其实不需要大模型**。你要做的可能只是"判断用户评论是正面的还是负面的"——这种活一个几亿参数的小模型本地跑又快又准，何必付 API 费？海外很多独立开发者的产品里，"AI 功能"其实全是 Transformers.js 的小模型在撑。 - **适用人群**：前端工程师、想给现有 Web 产品加"轻 AI 功能"的团队。配合 ONNX 社区导出的量化模型，很多任务在笔记本上延迟低于 100 毫秒。 ## 五、工具四：MediaPipe LLM Inference API——Google 给的第二条端侧路 - **名称**：MediaPipe LLM Inference API（Google AI Edge 体系） - **官方地址**：`developers.google.com/ai-edge/mediapipe` - **功能**：Google 官方的端侧推理方案，Web 平台可以加载 Gemma、Phi 等模型的 `.task` 格式包进行本地推理。和 Chrome 内置 AI 的区别是：**它不依赖浏览器"出厂自带"模型**，你自己打包模型、自己控制版本，适合要交付确定性体验的产品（比如教育、企业内网工具）。 - **价格**：框架开源免费，模型方面 Gemma 系列权重可免费下载使用（遵守 Google 的使用条款）。 - **为什么值得关注**：如果你觉得 Gemini Nano 太小、WebLLM 太"社区"，MediaPipe 是 Google 官方维护、文档齐全的中间路线，移动端（Android/iOS）和 Web 用同一套思路，代码可以平移。 ## 六、和国内生态放在一起看 公平地说，国内端侧推理并不弱——阿里的 **MNN/MNN-LLM** 是非常成熟的端侧推理框架，各大手机厂商的端侧大模型也多是自研栈。但注意区别： - MNN 面向的是 **App/嵌入式**（Android/iOS/嵌入式 Linux），面向 **Web/浏览器** 的开箱即用生态和文档，海外这套（Chrome AI + WebLLM + Transformers.js）明显更成熟； - 对中国个人开发者来说，这套浏览器方案还有一层独特价值：**绕开了支付和注册门槛**。不用海外信用卡、不用囤 API Key、不用按 token 焦虑，模型文件从 HuggingFace 或国内镜像拉一次就行。 这就是典型的"价格差 + 认知差"叠加：东西是开源的、文档是公开的，但国内中文社区几乎没有成体系的实战内容。 ## 七、一张决策图：你的场景该选哪个 ```mermaid flowchart TD A[想给产品加 AI 能力，预算为零] --> B{AI 在什么形态的产品里?} B -->|Chrome 扩展| C[Prompt API
Gemini Nano 免费原生调用] B -->|普通网页 App| D{需要什么级别的任务?} B -->|跨端 App| E[MediaPipe LLM Inference
Web/Android/iOS 一套思路] D -->|对话/生成类| F{模型有没有硬性偏好?} F -->|要用特定开源模型| G[WebLLM
WebGPU 跑 Qwen/Llama/Phi] F -->|小模型就够| H[Transformers.js
分类/抽取/嵌入/Whisper] C --> I[用户首次需下载模型
之后离线运行] G --> I H --> I E --> I ``` ## 八、信息差总结 | 你以为的 | 实际情况 | |---------|---------| | 做 AI 产品必须买 API，按 token 付费 | 浏览器端推理可以 0 成本，且离线可用 | | 端侧模型 = 玩具，干不了正经活 | 摘要/翻译/分类/抽取这类高频任务，1-4B 模型已够用 | | 浏览器跑模型是极客玩具 | Chrome 已把内置 AI API 推入稳定版，扩展开发者可直接商用 | | 端侧方案只有手机 App 才玩得起 | WebLLM 一个 npm 包，静态网页托管就能上线 | ## 九、行动指南：这个周末就能做的事 1. **今天（10 分钟）**：打开 `developer.chrome.com/docs/ai`，按文档确认你的 Chrome 版本和硬件是否满足内置 AI 要求，跑通官方示例扩展； 2. **周六（2 小时）**：clone `github.com/mlc-ai/web-llm`，跑通官方 demo，选一个 Qwen 小模型做一个"划词摘要"网页； 3. **周日（3 小时）**：把上面两个能力组合成一个真实小工具——比如"本地文章摘要器"，发布到 Chrome Web Store 或静态托管平台，作品集里就多了一个"零成本 AI 应用"。 ## 十、参考来源 1. Chrome Built-in AI 官方文档（Prompt API / Summarizer API）：`https://developer.chrome.com/docs/ai/prompt-api` 2. WebLLM GitHub 仓库：`https://github.com/mlc-ai/web-llm` 3. Transformers.js 官方文档：`https://huggingface.co/docs/transformers.js` 4. MediaPipe / Google AI Edge 官网：`https://developers.google.com/ai-edge/mediapipe` 5. WebLLM 官方在线 Demo：`https://huggingface.co/spaces/mlc-ai/WebLLM-Chat` > 说明：文中硬件门槛、API 可用状态等细节以官方文档最新版本为准；本次未对具体版本号做实时核验。 --- > 本文由「51学通信」技术团队出品。51学通信由通信行业18年老兵**爱卫生**（微信ID: gprshome201101）维护。 > 聚焦5G/6G核心网、3GPP标准、AI工具实战。知识星球「51学通信」提供深度技术答疑和行业洞察。 > [!tip] 51学通信知识星球 > **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 > **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 > **当前规模**：5200 篇主题 / 990 个回答，198 元/年。 > **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 > **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。