<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">![新 Colab 的屏幕截图](https://developer.chrome.google.cn/static/docs/web-platform/webgpu/colab-headless/image/colab_new.png?authuser=7&hl=ro)
第 2 步:连接到支持 T4 GPU 的服务器
- 点击笔记本右上角附近的连接 。
- 选择更改运行时类型:
<ph type="x-smartling-placeholder">
</ph> 图 2.在 Colab 界面中更改运行时。 - 在模态窗口中,选择 T4 GPU 作为硬件加速器。连接后,Colab 将使用挂接了 NVIDIA T4 GPU 的 Linux 实例。
<ph type="x-smartling-placeholder">。
<ph type="x-smartling-placeholder">
</ph> 图 3:在“硬件加速器”下,选择 T4 GPU。 - 点击保存。
- 点击 Connect 按钮以连接到您的运行时。一段时间后, 按钮会显示一个绿色选中标记,以及 RAM 和磁盘使用情况图表。 这表示已使用您所需的 硬件。
太棒了,您刚刚创建了一个连接了 GPU 的服务器。
第 3 步:安装正确的驱动程序和依赖项
将以下两行代码复制并粘贴到 笔记本。在 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
- 您可以在 GitHub 上检查该脚本 以查看此脚本执行的原始命令行代码。
# 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
点击单元格旁边的
<ph type="x-smartling-placeholder"> 即可 执行代码</ph> 图 4. 代码执行完毕后,验证
<ph type="x-smartling-placeholder">nvidia-smi
是否输出了内容 类似于下面的屏幕截图,以确认您的确有 GPU 并在您的服务器上进行识别。您可能需要滚动到 查看此输出。</ph> 图 5:查找以“NVIDIA-SMI”开头的输出。
第 4 步:使用无头 Chrome 并使其自动化
- 点击 Code 按钮以添加新的代码 代码单元格。
- 然后,您可以编写自定义代码,使用
(也可以直接在
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 文件
复制到您的本地机器
![新 Colab 的屏幕截图](https://developer.chrome.google.cn/static/docs/web-platform/webgpu/colab-headless/image/download-pdf.gif?authuser=7&hl=ro)
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">![新 Colab 的屏幕截图](https://developer.chrome.google.cn/static/docs/web-platform/webgpu/colab-headless/image/fashion-mnist-classifier.png?authuser=7&hl=ro)
资源
在 GitHub 代码库中添加星标 以接收日后的更新。