Google Colab 的網路 AI 模型測試

Jason Mayes
François Beaufort
François Beaufort
GitHub

設定 GPU 的一致測試環境可能比預期更困難。以下是測試用戶端瀏覽器 AI 模型的步驟，可在真實瀏覽器環境中進行，同時具備可擴充、可自動化，以及在已知的標準化硬體設定中執行的功能。

在這個例子中，瀏覽器是具備硬體支援功能的真實 Chrome 瀏覽器，而非軟體模擬功能。

無論您是網頁 AI、網頁遊戲或圖像開發人員，或是對網頁 AI 模型測試感興趣，這份指南都適合您參考。

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

1. 前往 colab.new 建立新的 Colab 筆記本。畫面應會與圖 1 類似。2. 按照畫面上的提示登入 Google 帳戶。
新版 Colab 的螢幕截圖
圖 1：新的 Colab 筆記本。

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

  1. 按一下筆記本右上方附近的「Connect」圖示 。
  2. 選取「變更執行階段類型」：
    特寫螢幕截圖顯示變更執行階段的步驟。
    圖 2。在 Colab 介面中變更執行階段。
  3. 在互動視窗中，選取「T4 GPU」做為硬體加速器。連線後，Colab 會使用附有 NVIDIA T4 GPU 的 Linux 執行個體。
    「變更執行階段類型」模組的螢幕截圖。
    圖 3：選取「硬體加速器」下方的「T4 GPU」。
  4. 按一下 [儲存]。
  5. 按一下「連線」按鈕，即可連線至執行階段。過一段時間後，按鈕會顯示綠色勾號，以及 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：直接在指令列中使用 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 中。如要查看該檔案，請展開「內容」。然後按一下 ，將 PDF 檔案下載到本機電腦。

新版 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 指令碼來建立螢幕截圖。但這如何運作？查看這份逐步說明，瞭解 jPuppet.js 中的 Node.js 程式碼。

jPuppet.js 節點程式碼細節

首先，請匯入 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() 的非同步函式。這項操作會建立使用指令列引數設定的瀏覽器物件，讓系統執行 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();

接著，請新增事件監聽器，以便在網頁執行 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 Fashion MNIST 分類器是否能正確辨識圖片中的一對褲子，並透過 GPU 的瀏覽器進行用戶端處理作業。

您可以將此功能用於任何以 GPU 為基礎的用戶端工作負載，從機器學習模型到圖像和遊戲測試皆適用。

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

資源

在 GitHub 存放區中為專案加星，即可接收日後的更新。