Mandumon
简体中文

浏览器能运行 AI 吗？检查 WebGPU 与端侧 AI 性能

在浏览器里运行 AI 需要哪些条件？本文介绍 WebGPU 与 WebGL 的区别、端侧 AI 的好处、shader-f16 和 WASM 备用方案，以及如何解读 Web Bench 可选的 AI 推理和 GPU 计算结果。

发布日期
更新日期

总结文字、整理照片、转写语音，这类 AI 功能正越来越多地进入普通网页。许多人仍会感到意外的是，其中一部分现在已经直接在你自己的浏览器里运行，而不是在远程服务器上。那么，你的浏览器真的能运行 AI 吗？简单来说，只要模型够小，答案是可以。但流畅程度因设备而异，差别很大。本文将介绍造成这种差异的背后概念，也就是 WebGPU 和端侧 AI，说明所需的条件，以及如何用 Web Bench 检查你自己的设备。

WebGPU 是什么，与 WebGL 有何不同

WebGPU 是一项现代的网页标准，让网页可以直接与 GPU 通信。多年来，在浏览器中使用 GPU 的常规方式是 WebGL。顾名思义，WebGL 是围绕图形设计的，也就是在屏幕上绘制内容。如果你只想让 GPU 做计算，就得把计算伪装成绘图任务。

WebGPU 有两点不同。第一，它的设计借鉴了 Vulkan、Metal 和 Direct3D 12 等现代原生图形接口，向 GPU 分派工作的方式更加明确、高效。第二，它正式支持计算着色器。计算着色器是一种程序，不涉及绘制，而是把纯粹的计算分散到 GPU 的众多核心上执行。它非常适合对海量数据反复执行相同运算的场景，例如矩阵乘法，而矩阵乘法正是 AI 模型运算的主体。

  • WebGL：较早的 API，以图形渲染为中心，在各浏览器中应用广泛。
  • WebGPU：较新的 API，同时面向图形和通用计算，借助计算着色器可以直接表达 AI 这类并行工作。
  • 共同点：两者都让网页无需安装任何东西，就能使用你设备上的 GPU。

简而言之，WebGPU 是从浏览器中让 GPU 执行计算的正规途径，因此与浏览器内的 AI 十分契合。不过，它并不是在所有环境中都以同样的方式启用。支持情况取决于浏览器版本、操作系统、显卡驱动和设置，而且会随时间不断变化。因此，本文不会断言某个特定浏览器一定可用，而是告诉你如何自己检查。

为什么在浏览器里运行 AI：端侧 AI 的好处

端侧 AI 指的是，不再向服务器上托管的模型发送请求，而是把模型下载到你自己的设备上，在本地运行。在浏览器中做到这一点，意味着无需安装任何东西。它主要有三方面的好处。

  1. 隐私：你输入的文字或照片当场就被处理，不必离开你的设备。对于处理敏感内容的功能来说，这一点最为重要。
  2. 离线使用：模型下载完成后，在网络不佳的地方也有可能继续工作。请注意，如果浏览器缓存被清除或存储空间不足，可能需要重新下载模型。
  3. 服务器成本：由于计算由你的设备完成，服务运营方无需配备大批推理服务器，这让免费服务和小型网站也能实际提供 AI 功能。

当然也有取舍。模型需要下载，首次使用会花费时间和流量，而设备的性能决定了速度和质量的上限。这就是通常选用小巧紧凑的模型而不是庞大模型的原因，也是为什么事先估算某台设备用起来是否舒适会很有帮助。

在浏览器中运行 AI 需要什么

要让浏览器内的 AI 顺利运行，需要几个条件同时满足。请逐项检查。

  • WebGPU 支持：浏览器必须提供 WebGPU，并且能够实际获取图形适配器。即使是最新的浏览器，也可能因为驱动或设置而被关闭。
  • 内存：模型需要存放的空间。即使是小模型，下载的文件和计算过程中的中间值也要占用内存。可用内存很少的手机，或打开了很多标签页的台式机，会更早感到吃紧。
  • shader-f16：这是 WebGPU 的一项可选功能，允许着色器使用 16 位浮点数（f16）。数值只占一半空间，因此同样的工作所需的内存和带宽更少，对 AI 有帮助。并非所有 GPU 和驱动都提供这一功能，有的设备有，有的没有。
  • 存储与网络：需要有空间保存模型文件，也要为首次下载所消耗的流量留出余量。在按流量计费的移动网络下，最好改用 Wi-Fi 来试。
  • 电源与发热：处于节能模式或使用电池的笔记本电脑可能运行得更慢，手机在发热时也会自行降速。

你无需翻遍各种设置页面，去查明其中哪些条件适用。Web Bench 的结果页面会显示所使用的 GPU 路径，以及 WebGPU 适配器的功能与限制，因不支持而跳过的测试也会附上原因。阅读这些信息，就能找到设备缺少什么的线索。

没有 WebGPU 时：WASM 备用方案

没有 WebGPU 的设备未必就与浏览器 AI 无缘。还有一种叫作 WASM（WebAssembly）的备用方案。WASM 是一种紧凑的二进制代码格式，浏览器可以在 CPU 上快速运行它，许多 AI 运行时在没有 GPU 路径可用时，都把它当作保底手段。

区别在于计算发生的位置。在 WebGPU 路径上，GPU 的众多核心并行工作；在 WASM 路径上，则由 CPU 来完成。同一个模型在 WASM 上运行得慢很多是很常见的。这不是故障，只是执行路径不同，这也是把 WebGPU 的结果和 WASM 的结果放在一起比较容易产生误导的原因。

  • WebGPU 路径：计算在 GPU 上进行。在受支持的设备上，通常可以期待更流畅的体验。
  • WASM 路径：计算在 CPU 上进行。更有可能在任何设备上运行，但速度可能较慢。
  • 当 WebGPU 不可用、Web Bench 改用 WASM 运行时，会将结果标记为 WASM 备用。

如何启用 WebGPU

Web Bench 的 AI 推理测试是如何运作的

Web Bench 中的 AI 推理是可选的。完整测量已经涵盖了 CPU、内存、GPU、浏览器和存储，AI 只在你想要时才需要添加。它的行为如下。

  • 只有在你同意下载模型时才会运行。如果不勾选同意复选框，就不会下载任何内容。
  • 同意后，模型会从 Hugging Face 的公共 CDN 获取。如有浏览器缓存会复用，但视存储空间和浏览器设置而定，文件可能会被重新下载。
  • 输入是一段固定的文字和一张固定的图片。绝不会使用你自己的文件和个人数据，并且所有设备都使用相同的输入进行测量，因此结果可以公平比较。
  • 文本模型是 SmolLM2-135M-Instruct，图像模型是 MobileNetV4。两者均以允许商用的 Apache-2.0 许可证发布，你可以在许可证页面查看它们的来源。
  • 下载大小取决于格式。文本模型的 q4f16 格式约为 117MB，q4 格式约为 181MB，而图像模型约为 15.1MB。分词器和运行时文件另计，如果两种文本格式都被尝试，总下载量可达约 350MB。
  • 开始前，页面上会显示约 130MB 的下载量。实际数量取决于你的设备支持哪种格式，因此也请留意进度页面上各个文件的大小。
  • 如果测量 AI，你可以选择是否将其计入综合分数；如果你没有同意，或者测试被中止或失败，它会被自动排除在总分之外。排名表同样分为含 AI 和不含 AI 两类。
  • 如果 WebGPU 可用，就在 GPU 上运行，否则在 WASM 上运行，结果中会注明使用了哪条路径。

文本模型的格式会根据你的设备来选择。如果 WebGPU 适配器支持 shader-f16，就使用 q4f16 格式；否则，或在 WASM 路径下，就使用 q4 格式。如果加载 q4f16 失败，Web Bench 会回退到 q4，并在进度页面上告知你。因此，每条结果都会同时记录路径（WebGPU 或 WASM 备用）和文本格式（q4f16 或 q4）。请只比较两者都一致的结果。

每个项目先预热，再进行三轮测量。如果中途隐藏标签页，该轮会被丢弃，你返回后，测试会复用缓存，从预热开始重新进行。运行期间让标签页保持在最前面，可以得到最可靠的数值。

解读 AI 结果和 GPU 计算测试

AI 推理测试会报告四个数值。

  • 首个词元时间（ms）：从开始生成到出现第一段文字（词元）所花的时间，越低越好。它接近于在聊天机器人中点下按钮后等待反应的感受。
  • 提示词处理（词元/秒）：模型读取你所给文字的速度。它等于输入词元数除以第一次计算所用的时间，越高越好。对于以长文档作为输入的功能，这一项很重要。
  • 文本生成（词元/秒）：在生成 128 个词元的过程中，首个词元之后的 127 个词元的吞吐量，越高越好，直接对应文字出现在屏幕上的快慢。
  • 图像分类，单张（ms）：对一张固定的 224x224 图像进行分类所需的时间，不含预处理，越低越好。

词元是模型切分文本所用的单位，可以大致理解为一个单词或单词的一部分。这些数值来自小模型 SmolLM2-135M，因此并不代表更大的模型也能以同样的速度运行。它们只是判断小型 AI 功能是否流畅的参考，仅此而已。

同时查看 GPU 计算类别，会让整体情况清晰得多。GPU 计算测量的是把计算（而非图形）交给 GPU 时的速度，最接近浏览器内的视频处理和 AI 推理这类高度并行的工作。

  • 矩阵乘法，f32 和 f16：以 GFLOPS 显示，越高越好。这是与 AI 核心计算最相似的测试。f16 版本仅在 shader-f16 可用时才会运行。
  • 图像卷积、粒子模拟和并行求和：以每秒处理的元素数显示，越高越好。
  • 所有 GPU 计算测试都会读回结果缓冲区，并与在 CPU 上算出的答案对比。速度快但结果错误的，不计入分数。

如果 GPU 计算测试被跳过，可能表明缺少 WebGPU，或者所需功能不可用。如果只缺少 f16 矩阵乘法，则说明你的环境很可能有 WebGPU，但没有 shader-f16。这种情况下，AI 文本模型使用 q4 而不是 q4f16 运行，是很自然的。

判断你的设备有多适合做 AI 工作

最难的是知道如何看待这些数字。按下面的顺序解读，可以让判断比较合理。

  1. 先看路径。确认运行用的是 WebGPU 还是 WASM 备用。如果是 WASM 备用，说明由 CPU 在没有 GPU 帮助的情况下完成了工作，数值偏慢是很自然的。
  2. 再看格式。q4f16 和 q4 是不同的条件，所以请比较格式相同的结果。
  3. 看 GPU 计算得分。如果矩阵乘法等项目表现良好，说明设备具备并行计算的实力，AI 吞吐量很可能也不差。
  4. 结合你的用途看文本生成（词元/秒）。如果文字出现得很慢，对话类功能会让人觉得迟钝；而分类或简短总结这类一次完成的任务，即使速度较低也更容易接受。
  5. 看首个词元时间。这是点击之后到出现任何反应之前的等待时间，对功能是否用着舒服影响很大。
  6. 看图像分类时间。对于连续处理大量照片的功能，例如整理或筛选相册，每张图的耗时很快就会累积起来。

同一设备在不同条件下数值可能会变化。笔记本电脑处于电池模式、其他标签页正在占用 GPU，或者设备已经发热，都可能导致数值偏低。与其纠结于某一个数字，不如在相同条件下重复测试两到三次，查看数值的范围。如果想比较手机与笔记本电脑，或者旧设备与新设备，请先对齐路径和格式，并在同一个浏览器中测量。

本文不划定“高于这个分数就能运行”之类的界线，是有原因的。所需的速度取决于模型和用途，而且分数只是针对固定输入的参考值。最准确的判断方法，是把你设备的数字与你真正想使用的功能对照起来。

WebGPU 与端侧 AI 支持情况检查清单

最后，这是在你的设备上尝试浏览器 AI 之前需要检查的事项清单。

  1. 你的浏览器是否已更新到最新版本？
  2. Web Bench 结果页面中，GPU 路径是否显示为 WebGPU？如果只显示 WebGL2，说明在你的环境中 WebGPU 可能被关闭或不受支持。
  3. 是否显示了 WebGPU 适配器信息（功能与限制）？请查看是否支持 shader-f16。
  4. GPU 计算测试，特别是 f32 和 f16 的矩阵乘法，是否已运行而不是被跳过？如果被跳过，请阅读结果页面上的原因。
  5. 可用内存和存储空间是否充足？尝试之前，请关闭其他占用资源较多的标签页和应用。
  6. 使用笔记本电脑时，请接上电源并使用高性能模式；使用手机时，请接上充电器，并在凉爽的地方尝试。
  7. 能否通过 Wi-Fi 而不是移动数据下载模型？页面提示约 130MB，视格式而定，实际下载量可能更多。
  8. 是否开启 AI 测量了两到三次，查看了数值范围？请同时记下路径（WebGPU 或 WASM 备用）和文本格式（q4f16 或 q4）。

Web Bench 是一款免费工具，无需安装、无需登录，即可在浏览器中测量 CPU、内存、GPU、浏览器和存储的性能。快速测量约需 30 秒，完整测量约需 2 到 3 分钟，AI 推理则需你同意后，在想要时再添加。所有测量都在你的设备上处理，只有在你同意参加排名时，结果才会发送到服务器。建议先用不含 AI 的完整测量查看你的 GPU 路径和 GPU 计算结果，感兴趣时再加入 AI 推理。

打开 Web Bench

← 指南