前端仔的焦虑

年了前端圈子卷成麻花。按理说，

你刚学会 Webpack。Vite 已经出到第 版了。你刚搞懂 Vue，React 已经到 了。话说回来，你好不容易能写全栈，老板说“我们要做 AI 产品”。

你一搜教程——好家伙，Python、PyTorch、CUDA、显卡、服务器…，全是要现学的。

使用者痛点：学习成本高、硬件投入大、后端资源紧缺。按理说，

等等。 如果我告诉你：只用 JavaScript，在浏览器里就能跑大模型你不用学 Python、不用买显卡、不用搭服务器——你信不信？

一开始我也不信。直到我把 DeepSeek‑R1 跑在了 Chrome 浏览器里。话说回来，

这篇文章带你走一遍全过程。不过，零 Python、零后端、纯前端。

再看第一章，浏览器什么时候偷偷变强了？

WebGPU 是个什么东西？

以前浏览器想用 GPU 只有一个通道：WebGL。那是 年的老古董，本来是给网页 3D 游戏用的。性能和功能都跟不上 AI 推理的需求。

年，Chrome 发布。带来了 WebGPU——一套全新的浏览器 GPU API，直接对标 Vulkan、Metal、DX12 这些原生图形接口。

说到打个比方，

WebGL = 一辆 年的五菱宏光，拉点货还行，跑赛道就算了
WebGPU = 一台 年的电动跑车。油门一踩直接起飞

WebGPU 给了浏览器真正的 GPU 计算能力而 AI 模型推理恰好就是 GPU 的拿手好戏。其实，

怎么知道使用者的浏览器支不支持？

至于一行代码，

const IS_WEBGPU_AILABLE =!，.gpu;

来拆开嚼碎了讲：

• 第一步先：navigator.gpu 是啥？它是浏览器全局对象里暴露出的 WebGPU 能力。其实，如果支持返回对象，不支持返回 undefined.
• 接下来：!， 把任意值干净利落地转成布尔值 true/false.
• 然后： 绕过 TypeScript 类型检查。让编译通过.

说到第二章，React + Vite，先把架子搭起来

为什么选 React？

多状态流转时特别顺手——每种状态一个 useState ,清晰明了。按理说，

从入口文件看 React 怎么启动