Google Colab 的網路 AI 模型測試

Jason Mayes
François Beaufort
François Beaufort
GitHub

使用 GPU 設定一致的測試環境可能不如預期。下方步驟說明如何在真正的瀏覽器環境中測試用戶端、瀏覽器式 AI 模型，同時具備擴充性、可自動執行，並在已知的標準化硬體設定中測試。

在這種情況下，瀏覽器是提供硬體支援的真正 Chrome 瀏覽器，而非軟體模擬。

無論您是網路 AI、網路遊戲或圖形開發人員，還是對 Web AI 模型測試感興趣，本指南都能滿足您的需求。

步驟 1：建立新的 Google Colab 筆記本

1. 前往 colab.new 建立新的 Colab 筆記本。看起來應與圖 1 類似。2. 按照系統提示登入 Google 帳戶。
新 Colab 的螢幕截圖
圖 1：新的 Colab 筆記本。

步驟 2：連線至支援 T4 GPU 的伺服器

  1. 按一下筆記本右上角附近的「Connect」。
  2. 選取「Change Runtime type」(變更執行階段類型)：
    顯示變更執行階段步驟的特寫螢幕截圖。
    圖 2. 在 Colab 介面中變更執行階段。
  3. 在互動視窗中，選取「T4 GPU」做為硬體加速器。連線後，Colab 會使用已連接 NVIDIA T4 GPU 的 Linux 執行個體。
    「變更執行階段類型」模組的螢幕截圖。
    圖 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. 按一下儲存格旁邊的 即可執行程式碼。

    新 Colab 的螢幕截圖
    圖 4.

  3. 程式碼執行完畢後，請確認 nvidia-smi 顯示了類似以下螢幕截圖的內容，以確保您確實附加 GPU，且伺服器可在伺服器辨識。您可能需要在記錄中較早捲動，才能查看此輸出內容。

    圖 5：找出開頭為「NVIDIA-SMI」的輸出內容。

步驟 4：使用無頭 Chrome 並自動進行設定

  1. 按一下 「Code」按鈕，新增程式碼儲存格。
  2. 接著，您可以編寫自訂程式碼，使用偏好的參數呼叫 Node.js 專案 (或直接在指令列中呼叫 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 中。如要查看這個檔案，請展開「content」圖示 。接著，按一下 ，將 PDF 檔案下載至本機電腦。

新 Colab 的螢幕截圖
圖 6：透過這個 Colab 介面的螢幕截圖下載 PDF 檔案的步驟。

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 指令碼來建立螢幕截圖。但運作方式請參閱 jPuppet.js 中 Node.js 程式碼的逐步介紹。

jPuppet.js Node 程式碼細目

首先，匯入 Puppeteer。可讓您使用 Node.js 從遠端控制 Chrome：

import puppeteer from 'puppeteer';

接著，檢查哪些指令列引數已傳送至 Node 應用程式。確認已設定第三個引數 — 代表要前往的網址。您需要在這裡查看第三個引數，因為前兩個引數會呼叫 Node 本身，以及我們執行的指令碼。第 3 個元素實際上包含傳送至 Node 程式的第 1 個參數：

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

現在定義名為 runWebpage() 的非同步函式。系統會建立一個使用指令列引數設定的瀏覽器物件，使其按照「啟用 WebGPU 和 WebGL 支援」一文所述的方式，執行 WebGL 和 WebGPU 的方式，才能執行 Chrome 二進位檔。

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();

接著，新增事件監聽器，在網頁執行 JavaScript 時監聽 console.log 事件。這可讓您記錄在 Node 指令列上的訊息，並檢查主控台文字是否包含會觸發螢幕截圖的特殊詞組 (在本例中為 captureAndEnd)，並在 Node 中結束瀏覽器程序。如果網頁需要在擷取螢幕截圖「之前」完成特定操作，且執行時間沒有確定性，這個方法就非常實用。

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 在瀏覽器中進行用戶端處理。

此函式可用於任何用戶端 GPU 工作負載，無論是機器學習模型、圖形與遊戲測試都沒問題。

新 Colab 的螢幕截圖
圖 7：成功擷取 GPU 加速 TensorFlow.js 模型，能夠在瀏覽器中即時辨識衣服用戶端端

資源

在 GitHub 存放區上加上星號，即可接收日後的更新通知。