强化 Web AI 模型测试：WebGPU、WebGL 和 Headless Chrome

Jason Mayes

François Beaufort

好消息！您已经构建了一个很酷的 Web AI 应用 直接在用户设备上运行机器学习模型。它完全在客户端网络浏览器上运行，而无需依赖云端。此设备上的 设计可增强用户隐私保护、提升性能并降低成本 显著增加。

不过，其中存在一个障碍。您的 TensorFlow.js 模型既可以在 CPU（WebAssembly）上运行，也可以在更强大的 GPU（通过 WebGL 和 WebGPU）上运行。问题是： 如何使用所选硬件持续自动执行浏览器测试？

在迭代和改进机器学习模型后，您需要先确保一致性，然后再将其部署供真实用户在其设备上使用，这样才能比较机器学习模型在一段时间内的性能。

使用 GPU 设置一致的测试环境可能比预期更难。在这篇博文中，我们将分享我们面临的问题以及 以便您提高应用的性能。

这不仅适用于 Web AI 开发者！如果您从事网络游戏或 这个帖子对你来说也很有价值

自动化工具箱中包含哪些内容

我们使用的是以下工具：

• 环境：基于 Linux 的 Google Colab 连接到 NVIDIA 的笔记本 T4 或 V100 GPU。您可以使用其他云平台，例如 Google Cloud (GCP)（如果需要）。
• 浏览器：Chrome 支持 WebGPU，这是一种强大的 WebGL 后继者，可将现代 GPU API 的进步引入到 Web 中。
• 自动化：Puppeteer 是一个 Node.js 库，可让你 您可以利用 JavaScript 以编程方式控制浏览器。借助 Puppeteer，我们可以在无头模式下自动执行 Chrome，这意味着浏览器在服务器上运行时没有可见界面。我们使用的是经过改进的新无头模式，而不是旧版表单。

。 <ph type="x-smartling-placeholder">

</ph> 提示：分步指南 指南，您可以尝试 自行设置。

验证环境

检查 Chrome 中是否已启用硬件加速功能的最佳方法是 在地址栏中输入 chrome://gpu。您可以 以编程方式使用 Puppeteer 执行等效操作 下载 console.log，或将完整报告另存为 PDF 文件进行手动检查：

/* Incomplete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters: Expands later
const browser = await puppeteer.launch({
  headless: 'new',
  args:  ['--no-sandbox']
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({ path: './gpu.pdf' });

await browser.close();

打开 chrome://gpu，您应该会看到以下结果：

显卡功能状态
OpenGL：	已停用
Vulkan：	已停用
WebGL:	仅限软件，无法进行硬件加速。
WebGL2：	仅限软件，无法进行硬件加速。
WebGPU：	已停用
检测到问题。 已通过屏蔽名单或命令行停用 WebGPU。

开局并不好。很明显，硬件检测失败了。 WebGL、WebGL2 和 WebGPU 本质上已停用或仅用于软件。周三 解决这个问题的不只是一个人，网络上有很多人 （包括通过 Chrome 官方支持渠道） (1)、 (2)。

启用 WebGPU 和 WebGL 支持

默认情况下，无头 Chrome 停用 GPU。 如需在 Linux 上启用 Headless，请在启动 Headless 时应用以下所有标志 Chrome：

• --no-sandbox 标记可停用 Chrome 的安全沙盒，该机制会将 浏览器进程。在不使用的情况下，以 root 身份运行 Chrome 此沙盒不受支持。
• --headless=new 标志：运行经过改进的新版 Chrome 无头模式，没有任何可见界面。
• --use-angle=vulkan 标记会告知 Chrome 使用 Vulkan 后端 ANGLE 表示 将 OpenGL ES 2/3 调用转换为 Vulkan API 调用。
• --enable-features=Vulkan 标志用于为以下各项启用 Vulkan 图形后端： 合成和光栅化
• --disable-vulkan-surface 标志用于停用 VK_KHR_surface vulkan 实例扩展。我们不使用交换链， Bit blit 用于 在屏幕上呈现渲染结果。
• --enable-unsafe-webgpu 标志用于在 Linux 上的 Chrome 并停用了适配器屏蔽名单。

现在，我们将到目前为止所做的所有更改合并起来。以下是完整脚本。

/* Complete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters
const browser = await puppeteer.launch({
  headless: 'new',
  args: [
    '--no-sandbox',
    '--headless=new',
    '--use-angle=vulkan',
    '--enable-features=Vulkan',
    '--disable-vulkan-surface',
    '--enable-unsafe-webgpu',
  ]
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({path: './gpu.pdf'});

await browser.close();

再次运行该脚本。未检测到任何 WebGPU 问题，值从 只能启用软件

显卡功能状态
OpenGL：	已停用
Vulkan：	已停用
WebGL:	仅限软件，无法进行硬件加速。
WebGL2：	仅限软件，无法进行硬件加速。
WebGPU：	仅限软件，无法使用硬件加速。

不过，硬件加速仍不可用，NVIDIA T4 GPU 也不可用 。

安装正确的 GPU 驱动程序

我们与一些 GPU 专家合作，更深入地研究了 chrome://gpu 的输出 是 Chrome 团队的一员。我们发现上 Linux Colab 实例，从而导致 Vulkan 出现问题，进而导致 Chrome 无法检测到 GL_RENDERER 级别的 NVIDIA T4 GPU，如以下输出所示。这个 会导致无头 Chrome 出现问题。

。

默认输出未检测 NVIDIA T4 GPU

驱动程序信息
GL_RENDERER	ANGLE（Google、Vulkan 1.3.0 (SwiftShader Device (Subzero) (0x0000C0DE))、SwiftShader 驱动程序-5.0.0）

因此，安装兼容的正确驱动程序即可解决此问题。

。

安装驱动程序后更新了输出

驱动程序信息
GL_RENDERER	ANGLE（NVIDIA 公司、Tesla T4/PCIe/SSE2、OpenGL ES 3.2 NVIDIA 525.105.17）

如需安装正确的驱动程序，请在设置期间运行以下命令。通过 后两行用于记录 NVIDIA 驱动程序检测到相关事件的输出 尽在 vulkaninfo。

apt-get install -y vulkan-tools libnvidia-gl-525

// Verify the NVIDIA drivers detects along with vulkaninfo
nvidia-smi
vulkaninfo --summary

现在再次运行该脚本，我们得到以下结果。🎉

图形功能状态
OpenGL：	已启用
Vulkan：	已启用
WebGL:	已硬件加速，但性能降低。
WebGL2：	硬件加速，但性能有所降低。
WebGPU：	已硬件加速，但性能降低。

通过在运行 Chrome 时使用正确的驱动程序和标志，我们现在拥有了 WebGPU 和 WebGL 支持使用全新的无头模式

幕后：我们的团队的调查

经过大量研究，我们没有找到 需要在 Google Colab 中执行 充满希望的帖子 在其他环境中也能正常运行，这很有前景。最终，我们没有 能够在 Colab NVIDIA T4 环境中复制他们的成功， 关键问题：

1. 某些标志组合支持检测 GPU，但不允许 实际使用 GPU
2. 使用旧版 Chrome 无头的第三方解决方案示例 版本，有时会被弃用，取而代之的是 新版本。我们需要一个解决方案 与新版无头 Chrome 配合使用，从而更好地满足未来需求。

我们通过运行用于图片识别的示例 TensorFlow.js 网页来确认 GPU 利用率偏低，其中我们训练了一个模型来识别服装样本（有点像机器学习的“Hello World”）。

在常规机器上，50 个训练周期（称为周期）应该在更短的时间内运行 都超过了 1 秒。调用处于默认状态的无头 Chrome 时，我们可以记录 将 JavaScript 控制台输出到 Node.js 服务器端命令行，了解如何 这些训练周期的实际用时较快。

不出所料，每个训练周期花费的时间远远超出预期（几个 秒），这表明 Chrome 已回退到普通的旧 JS CPU 执行方式 而不是使用 GPU：

图 1：显示每个训练周期的执行时长（秒）的实时捕获。

修复驱动程序并对无头设备使用正确的标志组合后 重新运行 TensorFlow.js 训练示例后， 训练周期。

图 2：实时捕获，显示了 epoch 的加速情况。

摘要

Web AI 的发展速度呈指数级增长 自 2017 年创建以来借助 WebGPU、WebGL 和 WebAssembly，它是机器学习模型的 在客户端可以进一步加速数学运算。

截至 2023 年，TensorFlow.js 和 MediaPipe Web 的下载量超过 10 亿次。 模型和库——这是一个历史性里程碑，也是网络如何 开发者和工程师纷纷转向将 AI 融入下一代 Web 应用提供了一些非常出色的解决方案。

使用得当，责任越大。在生产系统中达到这种使用水平后，就需要在真实的浏览器环境中测试基于浏览器的客户端 AI 模型，同时还需要可扩缩、可自动化，并且在已知的标准化硬件设置中进行测试。

所谓“真实的浏览器环境”，是指这是一个具有硬件支持的真实 Chrome 浏览器，而不是软件模拟。

通过结合全新的无头 Chrome 和 Puppeteer 的强大功能， 可以放心地在 以确保获得一致且可靠的结果。

小结

如需查看分步指南，请访问 我们的文档，因此您可以自行尝试完整的设置过程。

如果您觉得本指南有用，请在 LinkedIn、X（以前称为 Twitter） 或您使用的任何社交网络上，使用 #WebAI 标签进行宣传。期待收到您的回复 提供反馈，以便我们了解以后撰写更多此类内容。

在 GitHub 代码库中添加星标 以接收日后的任何更新。

致谢

非常感谢 Chrome 团队中帮助调试驱动程序的每一位员工， 我们在此解决方案中遇到了 WebGPU 问题，特别感谢 Jecelyn Yeen 和 Alexandra White：帮助文字大师 这篇博文。感谢 Yuly Noviov、Andrey Kosya 之后 和 Alex Rudenko，在音乐世界中 制定出有效的最终解决方案