在 Google Colab 中进行 Web AI 模型测试

Jason Mayes
François Beaufort
François Beaufort
GitHub

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

使用 GPU 设置一致的测试环境可能比 符合预期。以下是在 Google Cloud 上测试基于浏览器的客户端 AI 模型的步骤 具备真正的浏览器环境，同时还具备扩缩能力、自动化能力， 以及已知的标准化硬件设置

在本示例中，浏览器是真实的 Chrome 浏览器，具有硬件支持， 而不是软件模拟

无论您是 Web AI、网络游戏或图形开发者，还是发现 如果您对 Web AI 模型测试感兴趣，那么本指南正适合您。

第 1 步：创建新的 Google Colab 笔记本

1.前往 colab.new 创建新的 Colab 笔记本。它应类似于图 1。 2. 按照提示登录您的 Google 账号。 <ph type="x-smartling-placeholder">
</ph> 新 Colab 的屏幕截图
图 1：新的 Colab 笔记本。

第 2 步：连接到支持 T4 GPU 的服务器

  1. 点击笔记本右上角附近的连接 。
  2. 选择更改运行时类型： <ph type="x-smartling-placeholder">
    </ph> 特写屏幕截图，显示了更改运行时的步骤。
    图 2.在 Colab 界面中更改运行时。
  3. 在模态窗口中，选择 T4 GPU 作为硬件加速器。连接后，Colab 将使用挂接了 NVIDIA T4 GPU 的 Linux 实例。 <ph type="x-smartling-placeholder">。 <ph type="x-smartling-placeholder">
    </ph> “更改运行时类型”模块的屏幕截图。
    图 3：在“硬件加速器”下，选择 T4 GPU。
  4. 点击保存。
  5. 点击 Connect 按钮以连接到您的运行时。一段时间后， 按钮会显示一个绿色选中标记，以及 RAM 和磁盘使用情况图表。 这表示已使用您所需的 硬件。

太棒了，您刚刚创建了一个连接了 GPU 的服务器。

第 3 步：安装正确的驱动程序和依赖项

  1. 将以下两行代码复制并粘贴到 笔记本。在 Colab 环境中，命令行执行会以 一个感叹号。

    !git clone https://github.com/jasonmayes/headless-chrome-nvidia-t4-gpu-support.git
!cd headless-chrome-nvidia-t4-gpu-support && chmod +x scriptyMcScriptFace.sh && ./scriptyMcScriptFace.sh

    # Update, install correct drivers, and remove the old ones.
apt-get install -y vulkan-tools libnvidia-gl-525

# Verify NVIDIA drivers can see the T4 GPU and that vulkan is working correctly.
nvidia-smi
vulkaninfo --summary

# Now install latest version of Node.js
npm install -g n
n lts
node --version
npm --version

# Next install Chrome stable
curl -fsSL https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/googlechrom-keyring.gpg
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrom-keyring.gpg] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee /etc/apt/sources.list.d/google-chrome.list
sudo apt update
sudo apt install -y google-chrome-stable

# Start dbus to avoid warnings by Chrome later.
export DBUS_SESSION_BUS_ADDRESS="unix:path=/var/run/dbus/system_bus_socket"
/etc/init.d/dbus start

  2. 点击单元格旁边的 即可 执行代码

    <ph type="x-smartling-placeholder">
    </ph> 新 Colab 的屏幕截图
    图 4.

  3. 代码执行完毕后，验证 nvidia-smi 是否输出了内容 类似于下面的屏幕截图，以确认您的确有 GPU 并在您的服务器上进行识别。您可能需要滚动到 查看此输出。

    <ph type="x-smartling-placeholder">
    </ph>
    图 5：查找以“NVIDIA-SMI”开头的输出。

第 4 步：使用无头 Chrome 并使其自动化

  1. 点击 Code 按钮以添加新的代码 代码单元格。
  2. 然后，您可以编写自定义代码，使用 （也可以直接在google-chrome-stable 命令行）。我们提供了针对以下两种情况的示例。

A 部分：直接在命令行中使用 Headless Chrome

# Directly call Chrome to dump a PDF of WebGPU testing page
# and store it in /content/gpu.pdf
!google-chrome-stable \
--no-sandbox \
--headless=new \
--use-angle=vulkan \
--enable-features=Vulkan \
--disable-vulkan-surface \
--enable-unsafe-webgpu \
--print-to-pdf=/content/gpu.pdf https://webgpureport.org

在此示例中，我们将生成的 PDF 文件存储在 /content/gpu.pdf 中。接收者 查看该文件，展开 content 。 然后点击 即可下载 PDF 文件 复制到您的本地机器

<ph type="x-smartling-placeholder">
</ph> 新 Colab 的屏幕截图
图 6：在 Colab 界面的这张屏幕截图中，观看下载 PDF 文件的步骤。

B 部分：使用 Puppeteer 命令 Chrome 浏览器

我们提供了极简的示例来使用 Puppeteer 控制无头 Chrome 可按如下方式运行：

# Call example node.js project to perform any task you want by passing
# a URL as a parameter
!node headless-chrome-nvidia-t4-gpu-support/examples/puppeteer/jPuppet.js chrome://gpu

在 jPuppet 示例中，我们可以调用 Node.js 脚本来创建 屏幕截图。但这背后的工作原理是怎样的呢？观看这个 Node.js 演示 代码 jPuppet.js。

jPuppet.js Node 代码细分

首先，导入 Puppeteer。这样， 您可以使用 Node.js 来远程控制 Chrome：

import puppeteer from 'puppeteer';

接下来，检查哪些命令行参数传递给了 Node 应用。 确保已设置第三个参数，该参数表示要导航到的网址。您 这里的第三个参数需要检查，因为前两个参数会调用 Node 以及我们运行的脚本第 3 个元素其实包含了第 1 个 参数传递给 Node 程序：

const url = process.argv[2];
if (!url) {
  throw "Please provide a URL as the first argument";
}

现在，定义一个名为 runWebpage() 的异步函数。这会创建一个浏览器 （以运行 Chrome 浏览器）的命令行参数 使 WebGL 和 WebGPU 正常运行所需的方式（如 启用 WebGPU 和 WebGL 支持。

async function runWebpage() {
  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();

然后，添加事件监听器，以便在网页加载时监听 console.log 事件 执行 JavaScript。这样，您就可以在 Node 命令行上记录消息 并检查控制台文本中是否存在特殊短语（在本例中为 captureAndEnd）触发屏幕截图，然后在以下时间后结束浏览器进程： 节点。这对需要在处理之前执行一些工作的网页非常有用 可以截取屏幕截图，并且时长是不确定的 执行。

page.on('console', async function(msg) {
  console.log(msg.text());
  if (msg.text() === 'captureAndEnd') {
    await page.screenshot({ path: '/content/screenshotEnd.png' });
    await browser.close();
  }
});

最后，命令网页访问指定的网址，并获取 网页加载后的初始屏幕截图。

如果您选择抓取chrome://gpu的屏幕截图，可以关闭浏览器 而不是等待控制台输出结果 不受您自己的代码控制

  await page.goto(url,  { waitUntil: 'networkidle2' });
  await page.screenshot({path: '/content/screenshot.png'});
  if (url === 'chrome://gpu') {
    await browser.close();
  }
}
runWebpage();

修改 package.json

您可能已经注意到，在 jPuppet.js 文件。您的 package.json 必须将类型值设置为 module，或者 您会收到一条说明模块无效的错误消息。

 {
    "dependencies":  {
      "puppeteer": "*"
    },
    "name": "content",
    "version": "1.0.0",
    "main": "jPuppet.js",
    "devDependencies": {},
    "keywords": [],
    "type": "module",
    "description": "Node.js Puppeteer application to interface with headless Chrome with GPU support to capture screenshots and get console output from target webpage"
}

这就是全部内容！使用 Puppeteer 更轻松地进行界面交互 与 Chrome 以编程方式同步

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

成功

现在我们可以验证 TensorFlow.js Fashion MNIST 分类器 使用客户端数据模型， 使用 GPU 在浏览器中进行处理。

您可以将其用于机器学习等任何基于 GPU 的客户端工作负载 以及图形和游戏测试。

<ph type="x-smartling-placeholder">
</ph> 新 Colab 的屏幕截图
图 7：成功捕获 GPU 加速 TensorFlow.js 模型，该模型能够在浏览器中实时识别服装客户

资源

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