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

François Beaufort
François Beaufort

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

不过,其中存在一个障碍。您的 TensorFlow.js 模型既可以在 CPU(WebAssembly)上运行,也可以在更强大的 GPU(通过 WebGLWebGPU)上运行。问题是: 如何使用所选硬件持续自动执行浏览器测试?

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

使用 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">

验证环境

检查 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 和 Puppeteer 的强大功能, 可以放心地在 以确保获得一致且可靠的结果。

小结

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

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

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

致谢

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