前端也能搞模型?在浏览器里跑 Qwen2.5,我给公司省了 5 万 API 费用

月初,财务把上个月的 OpenAI 账单甩在了 咱们 CTO 的桌子上。

数字很惊人:9000 刀

我们那个所谓AI 赋能 的内部知识库助手,每个月光 Token 费就要烧掉一辆比亚迪秦PLUS😃。

老板在会上拍桌子:不就是个查文档的机器人吗?为什么要用 GPT-5?能不能换便宜的?能不能限流?GPT-4o 或者 GPT-4o mini 就行?

后端架构师面露难色:精度要求高啊,换 GPT-4o 就变智障。自部署?那得买 H100 显卡,更贵。😖

会议室里充满了贫穷且焦虑的空气。

这时候,我默默合上了笔记本,说了一句:要不,把模型跑在前端吧?让用户的显卡帮我们算。

全场安静了三秒。

后端组长没忍住笑了:浏览器跑大模型?你当 Chrome 是 4090 呢?跑个 Three.js 都能卡,还要跑 Llama 3?😥

我不响。

如果你不知道 WebGPU,那我们确实没法聊。


你的浏览器就是显卡

兄弟,时代变了🤷‍♂️。

在大多数人的认知里,前端就是切图、调 API、写 React 组件。

计算?那是服务器的事。

但你有没有想过,现在的用户手里拿的是什么设备?

M3 芯片的 MacBook,RTX 4060 的游戏本,甚至 iPhone 15 Pro。

这些设备的算力,如果不利用起来,简直就是暴殄天物

我们现在做的,叫 Edge AI(边缘 AI)

核心技术就三个词:WebGPU + WebAssembly + 量化模型

以前浏览器只能用 CPU 跑 JS,慢得像蜗牛。

现在有了 WebGPU,JavaScript 可以直接调用底层的显卡算力。

再加上 WebLLM 🤖 这种大杀器,我们完全可以把 Llama-3-8B-Instruct 这种级别的模型,经过 4bit 量化 后,压缩到 3-4GB,直接塞进浏览器里。

这意味着什么?

意味着每一次对话,不再消耗公司的 Token,而是消耗用户自己的电费

听起来是不是有点资本家?

不,这叫分布式计算,哈哈哈哈哈。😎


先让 Chrome 跑起来

说干就干。

我没用后端的一行代码。

直接 npm install @mlc-ai/web-llm

核心逻辑就这么几行(伪代码),大家可以自己去试一下:

JavaScript 复制代码
import { CreateMLCEngine } from "@mlc-ai/web-llm";

// 选最小且稳定的Qwen2.5,先保证能跑起来
const modelId = "Qwen2.5-0.5B-Instruct-q4f32_1-MLC";

// 初始化引擎(WebGPU)
const engine = await CreateMLCEngine(modelId, {
  initProgressCallback: (p) => {
    console.log("[MLC]", p.text);
  },
});

// 控制台对话
async function ask(text: string) {
  const res = await engine.chat.completions.create({
    messages: [{ role: "user", content: text }],
  });
  console.log("🤖", res.choices[0].message.content);
}

// 测试
await ask("写一个 React Button")
await ask("用CSS实现三角形")
await ask("用Python写一个冒泡排序")

运行的那一刻,模型会自动加载(设备配置低的同学尽量用小模型🙂‍↔️) 👉 可用模型

ASK: 写一个 React Button

ASK: 用CSS实现三角形

ASK: 用Python写一个冒泡排序

上周一,我把 Demo 发到了公司群里了。

那个嘲笑我的后端组长,拿着他的 M1 MacBook Air 点开了链接。

初次加载用了 40 秒(下载模型权重),然后...

Token 生成速度:15 tokens/s。

甚至比 GPT-4 的 API 响应还要快!

因为这是本地生成,没有网络延迟。

他抬头看我:这...真的没调 API?😖

我指了指 Network 面板:0 请求,纯本地。


算一笔账:这 5 万多是怎么省出来的

我们内部有 50 个员工,每个人每天平均问 50 次。

如果是 GPT-5,一年就是30多万了(排除假期和周末)。

现在呢?

成本 = CDN 流量费(下载那是 0.5GB 模型文件,默认最低成本去算)。

而且模型有了缓存(Cache Storage)后,第二次打开就是零成本

更重要的是数据隐私

财务部那个姐姐之前死活不敢用 AI 搜发票政策,怕数据传给 OpenAI 泄密。

现在我告诉她:这东西跑在你自己的电脑上,断网都能用,数据出不了这个房间。

她看我的眼神都变了。🤩😃


也别神话,也有坑的!

当然,为了保持技术人的客观(虽然我已经在爽文里了),我得说实话,这方案不是完美的。

  1. 首屏加载是噩梦 :如果让用户下载 4GB 的文件,如果是移动端 5G,用户会顺着网线来打你。所以这只适合桌面端 Web 或者 Electron 应用,尤其是开发测或者内部。
  2. 显卡门槛:没有独立显卡或者 Apple Silicon 的老电脑,跑起来会卡成 PPT。
  3. 发热:跑模型时,用户的电脑确实会变成暖手宝。

但在我们的场景------企业内部工具、文档助手、代码生成器------这些缺点完全可以接受。

毕竟,公司省下来的钱,哪怕分我 1% 当奖金,也够我换个新键盘了😂😂😂。


前端的边界在哪里?

2026 年了,别再把自己定义为画页面的。

WebGPU 的出现,给了前端直接挑战原生性能的入场券。

从今天起,试着把计算压力从云端搬到到终端来吧。

当后端还在为扩容发愁时,你已经利用用户闲置的 GPU 算力,构建了一个庞大的分布式计算网络。

这,才是属于前端的降本增效。🚀

你们说是不是呢?😃

相关推荐
mCell8 小时前
如何零成本搭建个人站点
前端·程序员·github
mCell9 小时前
为什么 Memo Code 先做 CLI:以及终端输入框到底有多难搞
前端·设计模式·agent
恋猫de小郭9 小时前
AI 在提高你工作效率的同时,也一直在增加你的疲惫和焦虑
前端·人工智能·ai编程
少云清9 小时前
【安全测试】2_客户端脚本安全测试 _XSS和CSRF
前端·xss·csrf
萧曵 丶9 小时前
Vue 中父子组件之间最常用的业务交互场景
javascript·vue.js·交互
银烛木10 小时前
黑马程序员前端h5+css3
前端·css·css3
m0_6070766010 小时前
CSS3 转换,快手前端面试经验,隔壁都馋哭了
前端·面试·css3
听海边涛声10 小时前
CSS3 图片模糊处理
前端·css·css3
IT、木易10 小时前
css3 backdrop-filter 在移动端 Safari 上导致渲染性能急剧下降的优化方案有哪些?
前端·css3·safari
0思必得010 小时前
[Web自动化] Selenium无头模式
前端·爬虫·selenium·自动化·web自动化