GPU を使用して一貫したテスト環境をセットアップすることは、予想以上に難しい場合があります。ここでは、クライアントサイドのブラウザベースの AI モデルを実際のブラウザ環境でテストし、かつスケーラブルで自動化可能で、既知の標準化されたハードウェア設定内でテストする手順を説明します。
この場合、ブラウザはソフトウェア エミュレーションではなく、ハードウェアをサポートする実際の Chrome ブラウザです。
このガイドは、ウェブ AI、ウェブゲーム、グラフィックス デベロッパー、またはウェブ AI モデルのテストに関心がある方を対象としています。
ステップ 1: 新しい Google Colab ノートブックを作成する
1. colab.new にアクセスして、新しい Colab ノートブックを作成します。図 1 のようになります。2. メッセージに沿って Google アカウントにログインします。ステップ 2: T4 GPU 対応サーバーに接続する
- ノートブックの右上にある [接続] をクリックします。
- [ランタイムのタイプを変更] を選択します。
- モーダル ウィンドウで、ハードウェア アクセラレータとして [T4 GPU] を選択します。接続すると、Colab では NVIDIA T4 GPU が接続された Linux インスタンスが使用されます。
- [保存] をクリックします。
- [接続] ボタンをクリックしてランタイムに接続します。しばらくすると、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
セルの横にある
をクリックしてコードを実行します。コードの実行が完了したら、
nvidia-smi
が次のスクリーンショットのようなものを出力し、実際に GPU が接続され、サーバーで認識されていることを確認します。この出力を表示するには、ログの前方までスクロールが必要になる場合があります。
ステップ 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 リポジトリにスターを付ける必要があります。