このページは Cloud Translation API によって翻訳されました。

Google Colab でのウェブ AI モデルのテスト

Jason Mayes

François Beaufort

GPU を使用して一貫したテスト環境をセットアップすることは、予想以上に難しい場合があります。ここでは、クライアントサイドのブラウザベースの AI モデルを実際のブラウザ環境でテストし、かつスケーラブルで自動化可能で、既知の標準化されたハードウェア設定内でテストする手順を説明します。

この場合、ブラウザはソフトウェアエミュレーションではなく、ハードウェアをサポートする実際の Chrome ブラウザです。

このガイドは、ウェブ AI、ウェブゲーム、グラフィックスデベロッパー、またはウェブ AI モデルのテストに関心がある方を対象としています。

ステップ 1: 新しい Google Colab ノートブックを作成する

1. colab.new にアクセスして、新しい Colab ノートブックを作成します。図 1 のようになります。2. メッセージに沿って Google アカウントにログインします。

新しい Colab のスクリーンショット — **図 1**: 新しい Colab ノートブック

ステップ 2: T4 GPU 対応サーバーに接続する

ノートブックの右上にある [接続] をクリックします。
[ランタイムのタイプを変更] を選択します。

図 2. Colab インターフェースでランタイムを変更します。
モーダルウィンドウで、ハードウェアアクセラレータとして [T4 GPU] を選択します。接続すると、Colab では NVIDIA T4 GPU が接続された Linux インスタンスが使用されます。
より強力な GPU オプションもあります（V100 GPU も動作することが確認されています）が、これらのオプションを購入する必要があります。

図 3: [ハードウェアアクセラレータ] で [T4 GPU] を選択します。
[保存] をクリックします。
[接続] ボタンをクリックしてランタイムに接続します。しばらくすると、RAM とディスクの使用状況グラフとともに緑色のチェックマークが表示されます。これは、必要なハードウェアでサーバーが正常に作成されたことを示します。

これで、GPU をアタッチしたサーバーが作成されました。

ステップ 3: 正しいドライバと依存関係をインストールする

次の 2 行のコードをコピーして、ノートブックの最初のコードセルに貼り付けます。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-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 ファイルをローカルマシンにダウンロードします。

パート 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 アプリケーションに渡されたコマンドライン引数を確認します。移動先の URL を表す 3 番目の引数が設定されていることを確認します。ここでは、最初の 2 つの引数が Node 自体と実行中のスクリプトを呼び出すため、3 番目の引数を検査する必要があります。3 番目の要素には、実際に Node プログラムに渡される最初のパラメータが含まれています。

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'
      ]
  });

後で任意の URL へのアクセスに使用できる新しいブラウザページオブジェクトを作成します。

const page = await browser.newPage();

次に、ウェブページが JavaScript の実行時に console.log イベントをリッスンするイベントリスナーを追加します。これにより、ノードのコマンドラインでメッセージをログに記録できます。また、スクリーンショットをトリガーして Node のブラウザプロセスを終了する特殊なフレーズ（この場合は 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();
  }
});

最後に、指定された URL にアクセスするようページに対してコマンドを発行し、ページが読み込まれたときに最初のスクリーンショットを取得します。

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 ファイルの先頭で import ステートメントを使用していることにお気づきでしょうか。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 を使用してブラウザでクライアントサイドの処理を行い、画像内のズボンを正しく認識できることを確認しました。

これは、ML モデルからグラフィックスやゲームのテストまで、クライアントサイドの GPU ベースのワークロードに使用できます。

リソース

今後のアップデートを受け取るには、GitHub リポジトリにスターを付ける必要があります。