强化 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 的有力继承者， 为 Web 应用带来了现代 GPU API 的先进技术。
• 自动化：Puppeteer 是一个 Node.js 库，可让你 您可以利用 JavaScript 以编程方式控制浏览器。借助 Puppeteer，我们可以 以无头模式自动执行 Chrome 浏览器，这意味着浏览器无需 创建可见界面我们使用的是经过改进的 新的无头模式，而非 legacy 表单。

。 <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 网页示例， 我们训练了一个模型来识别服装样品（有点像“你好” 世界”机器学习的概念）。

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

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

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

</ph>

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

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

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

</ph>

图 2：显示周期速度的实时捕获。

摘要

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 Kosyaov 和 Alex Rudenko，在音乐世界中 制定出有效的最终解决方案