如何使用TensorFlow.js和WebGPU在浏览器中开发AI应用程序

大多数开发者对人工智能的理解都是一样的：你将数据发送到服务器，服务器进行处理后会给出反馈。这种认知模式在很长一段时间里都是合理的，在很多应用场景中依然适用。

然而，在浏览器环境中正在发生一些悄然的变化，而许多工程师却完全忽视了这些变化。

现代浏览器已经不再仅仅是用于渲染HTML和CSS的简单工具了，它正在逐渐发展成为一种具备本地智能功能的运行环境。如今我们已经能够将原始的机器学习模型直接发送到用户的设备上，并在客户端完成所有的推理计算过程。无需依赖服务器，也无需保护API密钥；一旦这些初始资源被加载完毕，就完全不需要互联网连接了。

这就是Web人工智能的现实。如果你今天正在为网页应用进行开发，那么理解这种技术范式的转变，无疑是你应该掌握的最有价值的技能之一。

在这份指南中，我们将揭示Web人工智能在底层是如何运行的，分析使这一切成为可能的技术架构，并利用Teachable Machine和TensorFlow.js构建一个能够正常工作的图像分类器。同时，我们还会设置一个实时测试环境，让你能够亲眼看到WebGL与WebGPU在执行速度上的实际表现。

## 先决条件
要想跟随本教程进行学习，你需要具备以下条件：
– 具备JavaScript的相关知识；
– 对HTML以及浏览器的工作原理有基本的了解；
– 安装了Google Chrome浏览器（这是使用WebGPU功能以及Chrome内置的人工智能API所必需的）；
– 使用像VS Code这样的代码编辑器，并安装了Live Server扩展插件（推荐用于在本地运行演示内容）。
需要注意的是，学习本教程并不需要任何先前的机器学习经验。

## 目录
– 什么是Web人工智能？
– 浏览器人工智能与云人工智能的区别
– 技术架构详解
– 如何在浏览器中构建人工智能应用
– Chrome内置的人工智能API
– Web人工智能的发展趋势
– 你学到了什么
– 资源推荐

## 什么是Web人工智能？
与传统的人工智能模型不同，Web人工智能允许你在用户的设备上、直接在他们的浏览器中运行机器学习模型。它利用JavaScript、WebAssembly和WebGPU等标准网页技术，在本地完成所有的计算工作。

最简单的定义就是：**在浏览器中运行的智能系统，而且不需要将任何数据发送到外部服务器。**

我们中的大多数人在日常生活中都在不知不觉地与设备上的人工智能进行交互。以解锁iPhone为例：当你拿起手机的一瞬间，Face ID会检测到大约30,000个红外点，将这些数据通过苹果芯片上的神经网络进行处理，然后与加密后的信息进行比对，从而完成解锁操作。整个过程仅需几毫秒，且完全在设备本地完成。

基于浏览器的人工智能也是基于同样的核心架构运行的。唯一的区别在于，它采用的是通用的Web标准，而非设备的原生硬件接口。当你在Chrome浏览器中使用TensorFlow.js或MediaPipe来运行面部识别模型时，其实也是在使用相同的处理流程：

摄像头输入 → 本地机器学习模型 → 本地决策

整个过程不需要与服务器进行交互，浏览器本身就充当了“神经引擎”的角色。

浏览器AI与云AI的区别

在这里，并没有绝对的对错之分，选择哪种技术完全取决于你的具体需求。这两种方法各有优缺点，因此关键在于挑选最适合自己应用场景的工具。

	浏览器AI（客户端侧）	云AI（服务器端）
需要互联网连接	不需要	需要
延迟	接近于零	取决于网络状况
隐私保护	数据保留在设备上	数据会传输到服务器
模型规模	较小到中等规模	可根据需求进行扩展
推理成本	免费	按令牌或请求次数计费

在以下情况下应使用浏览器AI：

• 当你需要极快的响应速度，例如实时追踪手势或检测网络摄像头中的物体时

• 应用程序需要在离线环境下运行（无论是PWA应用，还是那些在网络不稳定的情况下仍需正常工作的应用）

• 如果你非常重视数据隐私，希望将医疗信息、生物特征数据或财务信息严格保留在设备本地时

• 当你希望降低高频、轻量级预测任务的API使用成本时

在以下情况下应使用云AI：

• 当你需要使用GPT-4、Gemini Pro或Stable Diffusion这类大型模型时

• 当你需要进行集中式的模型更新、A/B测试或用户数据分析时

• 当你需要强大的GPU或TPU计算能力来处理复杂任务时

实际上，大多数生产环境都会结合使用这两种技术。以Google Photos为例：它会在设备本地完成面部识别功能，因此速度很快且隐私保护得很好；而那些更复杂的图像分类工作则由云端来完成。再比如，一些现代Web应用可能会在本地使用TensorFlow.js快速对图片进行分类，但在需要深入的语言处理时，会调用Gemini API。

这种将轻量级的智能处理放在设备端，而将复杂的计算任务交给云端的混合架构，通常才是最适合大多数应用的方案。

技术架构

浏览器人工智能并非单一工具，而是由多层技术构成的体系。了解这些技术层是如何相互配合的，有助于你更轻松地选择适合自己的配置方案，并权衡各种技术之间的优缺点。

张量

在开始使用任何机器学习框架之前，你需要先理解张量的概念。不需要深入研究，只需掌握基础知识即可，这样才能避免因张量格式错误而遇到意外问题，因为这类错误确实会发生，而且调试起来也相当麻烦。

可以把张量想象成一种多维数字网格。无论你的模型是在处理图像、音频还是文本，所有数据首先都会被转换成这种格式。模型只能识别数字，而张量就是用来存储这些数字的容器。

单个数值       → 0D张量（标量）： 42
数字列表         → 1D张量（向量）： [0.2, 0.8, 0.5]
数字表格        → 2D张量（矩阵）： [[1, 2, 3], [4, 5, 6]]
图像             → 3D张量：            形状为[224, 224, 3]
一批图像         → 4D张量：            形状为[32, 224, 224, 3]

模型只能接受特定格式的输入数据。如果你的张量格式与模型要求的输入格式不匹配，代码就会出错。因此，理解张量的维度结构是非常实际且必要的，而不仅仅是一种理论知识。

TensorFlow这个名字实际上就是基于这个概念命名的。“Tensor”表示张量，“Flow”则表示张量在神经网络中的流动过程。

以下是在TensorFlow.js中创建张量的方法：

// 1D张量——一个数值列表
const scores = tf.tensor([0.1, 0.7, 0.2]);

// 3D张量——一张图像（高度×宽度×RGB通道）
const image = tf.tensor([
  [[255, 0, 0], [0, 255, 0]],
  [[0, 0, 255], [255, 255, 0]]
]);

// 4D张量——32张图像组成的批次
const batch = tf.zeros([32, 224, 224, 3]);

TensorFlow.js

TensorFlow.js是谷歌开发的JavaScript版本的TensorFlow。它允许你在浏览器中直接运行预训练好的模型，如果你愿意的话，也可以完全在客户端进行新模型的训练。

在TensorFlow.js中，最重要的概念就是后端——也就是你的模型实际运行的硬件环境。你可以根据用户的设备支持情况来切换后端类型，而不同的后端会对性能产生显著影响。

await tf.setBackend('webgpu');  // 最快——真正的GPU计算
await tf.setBackend('webgl');   // 非常快——通过图形着色器进行GPU计算
await tf.setBackend('wasm');    // 快——接近原生CPU的速度
await tf.setBackend('cpu');     // 最慢——普通的JavaScript在CPU上运行

await tf.ready();
console.log('当前使用的后端：', tf.getBackend());

在实际应用中，你应该优先尝试最快可用的后端；如果用户的浏览器不支持该后端，再优雅地切换到其他后端。

const backends = ['webgpu', 'webgl', 'wasm', 'cpu'];

for (const backend of backends) {
  try {
    await tf.setBackend(backend);
    await tf.ready();
    console.log('当前使用的后端：', backend);
    break;
  } catch {
    continue;
  }
}

WebAssembly

WebAssembly基本上可以让用C++或Rust编写的代码在浏览器中以接近原生程序的速度运行。对于人工智能领域而言，这一点意义重大，因为诸如张量计算、数据预处理以及运行压缩模型这类复杂的数学运算，在WebAssembly环境下执行速度要比使用普通的JavaScript快得多。

从底层机制来看，TensorFlow.js的WASM后端实际上是用编译后的C++代码实现的。如果你在设备的CPU上运行压缩模型，那么切换到WASM后端会使你的应用程序运行速度提高2到10倍。

await tf.setBackend('wasm');
await tf.ready();

WebGL与WebGPU

在这里，浏览器在人工智能方面的性能表现就变得非常有趣了。

WebGL最初是为3D图形开发而设计的。但开发者们发现，GPU用于渲染的并行计算方式，恰恰也是神经网络所需要的那种并行计算模式。

TensorFlow.js的WebGL后端会将张量运算编码成图形着色器程序，然后在GPU上执行这些程序。这种方案虽然有效，但其实是一种变通方法，因为WebGL本身并不是为这类任务设计的。

WebGPU才是真正为这类任务而设计的技术。在苹果、谷歌、Mozilla、英特尔和微软共同合作了六年之后，WebGPU终于在2023年4月被引入Chrome浏览器中。

与仅用于处理图形任务的WebGL不同，WebGPU是一种专为通用计算设计的现代API。在运行人工智能模型时，它的速度可以是WebGL的2到3倍，这意味着你可以在浏览器中直接运行规模更大的模型。

以下是检测是否支持WebGPU以及如何使用它的方法：

if ('gpu' in navigator) {
  console.log('支持WebGPU');
  await tf.setBackend('webgpu');
} else {
  console.warn('不支持WebGPU，将切换到WebGL');
  await tf.setBackend('webgl');
}

await tf.ready();

如果想在Chrome浏览器中开启WebGPU进行开发，可以按照以下步骤操作：

chrome://flags/#enable-unsafe-webgpu → 启用 → 重启Chrome浏览器

不同后端的性能对比情况如下：

)

后端类型	底层工作原理	相对运行速度
cpu	在CPU上运行的普通JavaScript代码	运行速度较慢
wasm	在CPU上运行的编译后的C++代码	运行速度较快
webgl	通过图形着色器在GPU上执行操作	运行速度非常快
webgpu	通过计算着色器在GPU上执行操作	运行速度最快

MediaPipe

MediaPipe是谷歌开发的一款用于实时感知任务的框架，这些任务包括手部追踪、面部网格检测、姿态估计以及物体识别等。你可以将其视为任何与摄像头相关的应用中都能直接使用的AI工具。

你无需自己构建这些模型——只需将它们导入并使用即可。实际上，Google Meet中的背景模糊效果以及YouTube上的视觉滤镜功能都是依靠MediaPipe来实现的。在底层，MediaPipe利用TensorFlow.js和WebAssembly技术来确保所有操作能够高效运行。

在你编写任何代码之前，你可以在MediaPipe Studio中交互式地测试所有的MediaPipe模型。

如何在浏览器中构建AI

步骤1：使用Teachable Machine训练模型

Teachable Machine是谷歌提供的一款无需编码即可构建模型的工具。它允许你直接使用网络摄像头创建自定义的图像、音频或姿态分类器，而完全不需要任何机器学习经验。完成建模后，你可以将这些模型导出为TensorFlow.js格式，然后直接将其集成到你的应用程序中。

以下是开始使用的步骤：

1. 访问teachablemachine.withgoogle.com

2. 选择“图像项目”并使用标准图像模型进行训练。

3. 创建两个或更多的分类类别。例如“点赞”和“点反对”就是一个简单的起点。

4. 使用网络摄像头为每个分类类别录制示例数据。

5. 点击“训练模型”——整个训练过程都在浏览器中完成。

6. 点击“导出模型”并选择“TensorFlow.js”格式。

导出模型后，你会得到三个文件：

• model.json：模型结构信息，包括各层结构、输入/输出数据的格式以及权重文件的路径。

• weights.bin：经过训练后的权重数据，以二进制格式保存。

• metadata.json：分类标签、输入数据的规格以及模型推理所需的配置信息。

关于训练数据质量的一些注意事项

Teachable Machine依赖的是监督学习机制。你需要为模型提供带有标签的示例数据，然后模型会从中找出其中的规律。在收集数据时，有两点比拍摄图片的数量更为重要：

• 平衡性：如果某个分类类别的样本数量远远多于其他类别，那么模型就会偏向于这个类别。因此，请确保各类别的数据量大致相等。

  多样性：从不同角度、不同距离和不同光照条件下拍摄的50张照片，其效果往往优于从同一位置拍摄的200张几乎一模一样的照片。模型需要理解“点赞”的概念，而不是记住某一张具体的照片。

请记住，实际的机器学习模型通常只占你整个代码库的一小部分。你所编写的大部分代码都是普通的JavaScript代码。归根结底，它只不过是你技术栈中的另一个组成部分而已。

步骤2：设置环境并编写代码

现在你已经准备好了模型文件，按照以下方式设置项目结构，并创建一个`index.html`文件：

your-project/
├── index.html
├── model.json
├── weights.bin
└── metadata.json

`model.json`、`weights.bin`和`metadata.json`这三个文件都应该放在与`index.html`相同的文件夹中。在这个演示示例中，程序会通过`const URL = “./”`从同一个目录中加载这些文件。

要想在本地运行这个程序，可以在VS Code或你喜欢的IDE中打开该文件夹，然后使用Live Server扩展功能。只需右键点击`index.html`文件，然后选择用Live Server打开即可。如果直接在浏览器中打开文件而不使用服务器，那么在加载模型文件时就会出现CORS错误。

步骤3：加载模型并运行预测

将以下代码粘贴到`index.html`文件中。这个演示示例会加载你的Teachable Machine模型，启动网络摄像头，并持续进行预测运算：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    
</head>

<body>
    
Web上的AI演示

    

        CPU
        WebGL
        WebGPU
    

    
点击后端开始运行

    

        

            

                
后端
                
加载时间（秒）
                
推理时间（毫秒）
                
状态
            
        
        

    

    

    


    
    
    

    
</body>>

</html>>

关于这段代码的功能，有几点需要了解：
switchBackend函数的作用并不仅仅是切换后端。每次你点击某个后端按钮时，它都会记录该后端加载模型所需的时间以及单次推理运算所花费的时间。这些数据会直接被录入对比表格中，因此你可以直接看到它们之间的差异，而无需查看控制台日志。
loop函数会通过requestAnimationFrame持续运行。在每一帧中，它都会获取当前的网页摄像头图像，将其传递给模型，并更新屏幕上的预测结果。正是这一机制使得检测过程看起来像是在实时进行。
需要注意的是，initWebcam函数只会被执行一次。在开始设置之前，它会先检查webcam是否已经存在。即使切换后端，模型也会被重新加载，但网页摄像头的视频流会继续正常播放。
在演示运行期间，打开Chrome开发者工具，进入网络选项卡。等到模型文件全部加载完成后，你会看到没有 outbound 请求发生——所有的预测运算都是完全在浏览器内部完成的。

步骤4：切换后端并比较性能

当演示开始运行后，依次点击每个后端按钮：首先是CPU后端，然后是WebGL后端，最后是WebGPU后端。每次切换后，表格都会更新，会同时显示每种后端的加载时间（以秒为单位）和推理时间（以毫秒为单位）。
你应该会看到以下结果：

• CPU后端的速度最慢，因为所有运算都是用纯JavaScript来完成的。

• WebGL后端的速度明显更快，因为GPU负责处理张量运算。

• WebGPU后端的速度最快，因为它能够利用真正的GPU计算能力进行运算，而且开销也比WebGL小。具体的性能数值会因你的硬件配置而有所不同，但通常CPU与WebGPU之间的速度差距是相当明显的，因此在表格中就能立刻看出来。

注意：要使用WebGPU功能，必须确保Chrome浏览器启用了相关选项。如果看到“不支持WebGPU”的提示，请前往chrome://flags/#enable-unsafe-webgpu进行设置，然后重新启动Chrome。

Chrome内置的AI接口

除了可以加载自己开发的模型之外，Chrome还提供了许多原生AI功能，你可以通过浏览器API直接使用这些功能。这意味着你无需管理庞大的模型文件，也无需导入TensorFlow.js，更不需要进行任何手动配置。
其中最值得关注的是Gemini Nano——这是谷歌Gemini模型的轻量级版本，专为在Chrome浏览器内部运行而设计。它能够在浏览器中完成智能回复、页面摘要生成等任务，而完全不需要访问云端服务。
如果你想利用这些功能进行开发，就可以使用Chrome为开发者提供的这些实验性API。

chrome://flags → 搜索“Prompt API for Gemini Nano” → 启用该功能 → 重新启动Chrome浏览器

这些功能目前仍处于试验阶段，需要通过特定的设置选项才能使用。但它们清楚地表明了该平台的发展方向。

如需了解关于Chrome内置AI功能的完整前提条件及安装指南，请参阅Chrome官方AI入门文档。

Web AI的发展趋势

浏览器正在演变成一种目前还无法用一个明确的名称来定义的工具。它不再仅仅是文件查看器，也不完全属于原生应用程序运行环境。相反，它正逐渐成为一种智能边缘节点——这种基础设施能够自主感知、处理信息并采取行动，而无需不断向服务器请求许可。

目前已经有一些重大的变革正在发生：

• 直接内置在平台中的原生AI技术： AI功能正在被转化为标准的浏览器API。由于这些API会被缓存并在整个生态系统中共享，因此你不必为访问的每一个网站都重新下载庞大的模型文件。

  以AI为核心技术的浏览器已经开始出现。OpenAI开发的Atlas浏览器就是这一趋势的典型代表。如今，人们越来越认为浏览器应该成为一个智能代理平台，而不仅仅是一个简单的内容显示工具。

• 开发者的变化： 对于开发者来说，未来的发展方向非常明确：目前那些需要运行在昂贵服务器上的AI功能，将会大部分转移到客户端上。虽然不会所有功能都迁移过来，但那些体积小、执行频率高且对隐私保护要求严格的任务，肯定会被首先移植到客户端。

WebGPU不仅仅是一种炫目的演示技术，浏览器中的推理功能也绝非简单的玩具。这些都是非常实用的工具，而且随着AI模型规模的缩小以及用户硬件性能的提升，它们的能力还会进一步增强。

如果你目前正在开发某个需要利用AI技术的交互式应用，那么不妨停下来问问自己：这个应用真的需要服务器来运行吗？

有时候答案仍然是“需要”，但越来越多的情况下，答案会是“不需要”。

你学到了什么

在本教程中，我们学习了以下内容：

• 什么是Web AI，它与基于云的AI有何不同

• 在什么情况下应该使用浏览器内置的AI功能，而在什么情况下应该使用云端的AI服务，以及混合使用这两种方式的具体方法

• 浏览器AI技术所依赖的技术栈：张量、TensorFlow.js、WebAssembly、WebGL、WebGPU和MediaPipe

• 如何使用Teachable Machine训练自定义模型，并将其导出以便在浏览器中使用

• 如何加载这些模型，让它们处理实时摄像头输入的数据，以及如何正确管理GPU内存

• 如何通过对比WebGL和WebGPU的推理时间来衡量它们的实际性能差异

• 如何访问Chrome内置的AI API，包括Gemini Nano

如果您觉得这些内容有用，或者想要与我联系，您可以通过Twitter/X或LinkedIn》找到我。

资源

• TensorFlow.js文档

• Teachable Machine

• MediaPipe Studio

• Chrome中的WebGPU

• Chrome内置AI功能——入门指南

• Chrome AI翻译API

• GitHub上的Google Web AI演示项目

• Hugging Face Transformers.js

• WebLLM——在浏览器中运行大语言模型

• Chrome的AI功能——谷歌官方博客