Google Colab 的網路 AI 模型測試

François Beaufort
François Beaufort

透過 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. 選取「變更執行階段類型」
    特寫螢幕截圖顯示變更執行階段的步驟。
    圖 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 代碼管理工具中直接呼叫 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 的螢幕截圖
圖 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 指令碼 螢幕截圖。但這怎麼運作呢?參閱這份 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 的螢幕截圖
圖 7:成功擷取 GPU 加速 TensorFlow.js 模型,可在瀏覽器中即時識別服飾用戶端

資源

在 GitHub 存放區上加上星號 以接收日後的最新消息