浏览器里跑 AI？零基础上手 TensorFlow.js 和 WebGPU

学会在浏览器中安装 TensorFlow.js、配置 WebGPU 并运行第一个图像分类模型，无需服务器。

准备环境：你需要什么？

在开始之前，请确保你准备好以下工具。这些是免费的，你很可能已经安装了其中一部分。

Google Chrome 浏览器（最新版）：目前只有 Chrome 支持 WebGPU，这是让 AI 跑得更快的技术。
VS Code 编辑器：用来写代码，免费下载。
Live Server 插件：在 VS Code 中安装，方便本地测试网页。
基本的 HTML 知识：知道标签长什么样就行，比如 <div>。

安装步骤：三分钟跑通你的第一个 AI 应用

我们用一个叫 Teachable Machine 的工具，它让你无需写模型代码就能训练图像分类器。然后我们用 TensorFlow.js 在浏览器里加载它。

打开 Teachable Machine 网站，点击“图像模型” → “开始”。
用摄像头拍几组照片：比如“猫”和“狗”各拍 10 张。点击“训练模型”等待几秒。
训练完成后，点击“导出模型” → 选择“TensorFlow.js” → 下载模型文件（一个 model.json 和一个 weights.bin）。
在 VS Code 中新建一个文件夹，把模型文件放进去。

创建一个 index.html 文件，复制以下基础代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgpu@latest"></script>
</head>
<body>
  <h1>我的第一个浏览器 AI</h1>
  <video id="webcam" autoplay></video>
  <div id="result"></div>
  <script>
    async function run() {
      await tf.setBackend('webgpu');
      const model = await tf.loadGraphModel('model.json');
      const webcam = document.getElementById('webcam');
      const stream = await navigator.mediaDevices.getUserMedia({video: true});
      webcam.srcObject = stream;
      // 预测循环（简化）
      setInterval(async () => {
        const img = tf.browser.fromPixels(webcam).resizeNearestNeighbor([224,224]).expandDims();
        const predictions = await model.predict(img).data();
        document.getElementById('result').innerText = predictions[0] > 0.5 ? '狗' : '猫';
      }, 1000);
    }
    run();
  </script>
</body>
</html>

右键点击 index.html，选择“Open with Live Server”。浏览器会自动打开页面。
允许摄像头权限，几秒后你就能看到实时分类结果了！

验证是否成功：检查 WebGPU 是否生效

打开 Chrome 的开发者工具（F12），在 Console 中输入 tf.getBackend()，如果返回 'webgpu'，说明 AI 正在用你的显卡加速。如果返回 'webgl'，说明浏览器不支持 WebGPU，但代码仍然能工作，只是慢一点。

下一步可以做什么

试试用 MediaPipe 做手部追踪：安装 @mediapipe/hands 包。
如果模型太大，先压缩再加载，避免页面卡顿。
把模型放到 CDN 上，让用户更快下载。

内容来源

freeCodeCamp

发布时间

2026-05-28 01:30