好消息!您已经构建了一个很酷的 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 表单。
验证环境
检查 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: | 已停用 |
检测到问题。 |
开局并不好。很明显,硬件检测失败了。 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 出现问题。
驱动程序信息 | |
---|---|
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 环境中复制他们的成功, 关键问题:
- 某些标志组合支持检测 GPU,但不允许 实际使用 GPU
- 使用旧版 Chrome 无头的第三方解决方案示例 版本,该版本在将来会被弃用,取而代之的是 新版本。我们需要一个解决方案 与新版无头 Chrome 配合使用,从而更好地满足未来需求。
我们运行了 用于图像识别的 TensorFlow.js 网页示例, 我们训练了一个模型来识别服装样品(有点像“你好” 世界”机器学习的概念)。
在常规机器上,50 个训练周期(称为周期)应该在更短的时间内运行 都超过了 1 秒。调用处于默认状态的无头 Chrome 时,我们可以记录 将 JavaScript 控制台输出到 Node.js 服务器端命令行,了解如何 这些训练周期的实际用时较快。
不出所料,每个训练周期花费的时间远远超出预期(几个 秒),这表明 Chrome 已回退到普通的旧 JS CPU 执行方式 而不是使用 GPU:
<ph type="x-smartling-placeholder">![训练周期的移动节奏较慢。](https://developer.chrome.google.cn/blog/supercharge-web-ai-testing/image/initial_epoch_timing.gif?authuser=0000&hl=sk)
修复驱动程序并对无头设备使用正确的标志组合后 重新运行 TensorFlow.js 训练示例后, 训练周期。
<ph type="x-smartling-placeholder">![周期的速度变快了...](https://developer.chrome.google.cn/blog/supercharge-web-ai-testing/image/epoch_timing_with_headless.gif?authuser=0000&hl=sk)
摘要
Web AI 的发展速度呈指数级增长 自 2017 年创建以来借助 WebGPU、WebGL 和 WebAssembly,它是机器学习模型的 在客户端可以进一步加速数学运算。
截至 2023 年,TensorFlow.js 和 MediaPipe Web 的下载量超过 10 亿次。 模型和库——这是一个历史性里程碑,也是网络如何 开发者和工程师纷纷转向将 AI 融入下一代 Web 应用提供了一些非常出色的解决方案。
使用得当,责任越大。目前使用量水平 在生产系统中,需要测试基于浏览器的客户端 AI 在真实的浏览器环境中构建机器学习模型,同时还具有可扩缩、可自动化、 以及已知的标准化硬件设置中
通过结合全新的无头 Chrome 和 Puppeteer 的强大功能, 可以放心地在 以确保获得一致且可靠的结果。
小结
如需查看分步指南,请访问 我们的文档,因此您可以自行尝试完整的设置过程。
如果您觉得这些内容有用,请到 LinkedIn, X(以前称为 Twitter)或任何其他名称 您使用的社交网络,并使用 # 标签 #WebAI。期待收到您的回复 提供反馈,以便我们了解以后撰写更多此类内容。
在 GitHub 代码库中添加星标 以接收日后的任何更新。
致谢
非常感谢 Chrome 团队中帮助调试驱动程序的每一位员工, 我们在此解决方案中遇到了 WebGPU 问题,特别感谢 Jecelyn Yeen 和 Alexandra White:帮助文字大师 这篇博文。感谢 Yuly Noviov、Andrey Kosyaov 和 Alex Rudenko,在音乐世界中 制定出有效的最终解决方案