透過 GPU 建立一致的測試環境並不容易 。如要測試用戶端瀏覽器式 AI 模型,請按照下列步驟操作: 同時具備擴充性、自動化功能,且在 已知標準化硬體設定
在此情況下,瀏覽器是提供硬體支援的實際 Chrome 瀏覽器。 而不是軟體模擬
無論是網頁 AI、網路遊戲或圖像開發人員, 本指南適合您在 Web AI 模型測試中。
步驟 1:建立新的 Google Colab 筆記本
1.前往 colab.new 建立新的 Colab 筆記本。看起來應與圖 1 類似。 2. 按照畫面上的提示登入 Google 帳戶。![新 Colab 的螢幕截圖](https://developer.chrome.google.cn/static/docs/web-platform/webgpu/colab-headless/image/colab_new.png?authuser=19&hl=zh-tw)
步驟 2:連線至支援 T4 GPU 的伺服器
- 按一下筆記本右上方附近的「Connect」圖示 。
- 選取「變更執行階段類型」:
圖 2.在 Colab 介面中變更執行階段。 - 在互動視窗中,選取「T4 GPU」做為硬體加速器。連線後,Colab 會使用連接 NVIDIA T4 GPU 的 Linux 執行個體。
,瞭解如何調查及移除這項存取權。
圖 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
按一下儲存格旁邊的
即可: 執行程式碼圖 4. 程式碼執行完畢後,驗證
nvidia-smi
輸出的內容 類似以下螢幕截圖,確認您已安裝 GPU 且可在伺服器上辨識。因此您可能需要捲動頁面。 來查看輸出的內容圖 5:找出開頭為「NVIDIA-SMI」的輸出內容。
步驟 4:使用無頭 Chrome 及自動執行程序
- 按一下「Code」 按鈕新增程式碼 程式碼儲存格
- 接著,您可以撰寫自訂程式碼,以呼叫 Node.js 專案
或直接在 Google 代碼管理工具中直接呼叫
google-chrome-stable
指令列)。以下是兩者的範例。
A 部分:直接在指令列中使用無頭 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
中。目的地:
檢視該檔案,展開內容 。
接著,按一下 即可下載 PDF
檔案複製到本機電腦
![新 Colab 的螢幕截圖](https://developer.chrome.google.cn/static/docs/web-platform/webgpu/colab-headless/image/download-pdf.gif?authuser=19&hl=zh-tw)
B:使用 Puppeteer 的指令 Chrome
提供極簡風範例:使用 Puppeteer 控制 Headless 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 節點程式碼細目
首先,匯入 Puppeteer。這樣一來, 讓您從遠端使用 Node.js 控制 Chrome:
import puppeteer from 'puppeteer';
接下來,檢查傳遞給節點應用程式的指令列引數。 請確認已設定第三個引數,代表要前往的網址。個人中心 需要檢查第三個引數,因為前兩個引數呼叫 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。這可讓您在節點指令列上記錄訊息
並查看控制台中是否有特殊詞組 (本例中為
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
成功
現在我們可以驗證 TensorFlow.js 時尚 MNIST 分類器 系統可以透過用戶端 在瀏覽器中處理資料
這適用於任何來自機器學習的用戶端 GPU 工作負載 以及用於圖像和遊戲的測試
![新 Colab 的螢幕截圖](https://developer.chrome.google.cn/static/docs/web-platform/webgpu/colab-headless/image/fashion-mnist-classifier.png?authuser=19&hl=zh-tw)
資源
在 GitHub 存放區上加上星號 以接收日後的最新消息