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. 選取「變更執行階段類型」：
    特寫螢幕截圖顯示變更執行階段的步驟。
    圖 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 存放區上加上星號 以接收日後的最新消息