在浏览器中运行 AI：TensorFlow.js / WebGPU 实战

你可能已经习惯在前端调用 OpenAI、Replicate 等远程 AI 服务。但你是否想过，前端其实也可以本地运行模型、直接在浏览器中做 AI 推理？

得益于 WebAssembly、WebGL 甚至最新的 WebGPU 技术，我们可以在客户端完成轻量级图像识别、人脸检测、手势分析等任务，而无需访问云端。这意味着更快响应、更好隐私、更强控制力。

一、为什么要在前端本地跑模型？

价值	说明
🚀 无需网络	离线模式下仍可使用基本识别/分类能力
🔒 数据不出端	避免上传隐私图像/音频至云端
⚡ 延迟更低	实时性要求高的交互更流畅
🧩 可与 DOM/UI 实时绑定	如手势控制、表情反馈等交互场景

二、技术选型：TensorFlow.js vs ONNX.js vs WebGPU

 

技术	支持模型格式	加速方式	适合场景
TensorFlow.js	TensorFlow SavedModel / TFJS 格式	WebGL / WASM / WebGPU	主流，生态好
ONNX.js	ONNX 格式	WASM + SIMD	通用性强、轻量
WebGPU（experimental）	与 TF.js 或 ONNX 结合	GPU 原生	高性能、未来趋势

三、实战：用 TensorFlow.js 实现手势识别

1. 安装依赖

npm install @tensorflow/tfjs @tensorflow-models/handpose

2. 基础代码结构（Vue 示例）

import * as handpose from '@tensorflow-models/handpose';
import '@tensorflow/tfjs-backend-webgl';

const video = document.getElementById('video');

async function init() {
  await tf.setBackend('webgl');
  const model = await handpose.load();
  const prediction = await model.estimateHands(video);
  console.log(prediction);
}

3. 与 UI 联动

<template>
  <video ref="video" autoplay></video>
  <div v-if="handDetected">✋ 检测到手势！</div>
</template>

四、可运行的前端 AI 模型推荐（开箱即用）

模型名	作用	包名
handpose	手势识别	@tensorflow-models/handpose
mobilenet	图像分类	@tensorflow-models/mobilenet
face-landmarks-detection	人脸特征点检测	@tensorflow-models/face-landmarks-detection
pose-detection	姿态估计	@tensorflow-models/pose-detection

五、性能调优建议

• 使用 requestAnimationFrame 控制预测帧率；

• 图片输入统一 resize 为 224x224 或 256x256；

• 使用 tf.dispose() 释放张量，避免内存泄露；

• WebGPU 支持正在落地，未来可极大提升速度。

六、实际应用场景

场景	示例
手势控制 UI	用户挥手切换幻灯片或切换摄像头视角
图像实时识别	上传图片即分类，电商类产品识别
本地人脸识别	校园刷脸签到、会议入场检测
可视化互动	用面部表情驱动 SVG 表情动画
游戏互动	“剪刀石头布”Web 游戏识别玩家手势

七、小结

AI 不再只属于云端和 API，浏览器中的模型推理能力正在崛起。借助 TensorFlow.js 等工具，我们可以让 Web 应用拥有真正的“感知能力”。

它不仅是炫技，而是在创造全新的交互模式。