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

Jason Mayes

François Beaufort

GPU を使用した一貫したテスト環境のセットアップは、 あります。クライアントサイドのブラウザベースの AI モデルを 真のブラウザ環境を実現しながら、スケーラブルかつ自動化可能で、 ハードウェアのセットアップを単純化します。

この例では、ブラウザはハードウェアをサポートする実際の Chrome ブラウザです。 パフォーマンスが最適化されます

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

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

</ph>

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

1. ノートブックの右上にある [接続] arrow_drop_down をクリックします。
2. [ランタイムのタイプを変更] を選択します。 <ph type="x-smartling-placeholder">

   </ph>

3. モーダル ウィンドウで、ハードウェア アクセラレータとして [T4 GPU] を選択します。接続すると、Colab は NVIDIA T4 GPU が接続された Linux インスタンスを使用します。 <ph type="x-smartling-placeholder">で確認できます。 <ph type="x-smartling-placeholder">

   </ph>

4. [保存] をクリックします。
5. [接続] ボタンをクリックして、ランタイムに接続します。しばらくすると、 RAM とディスクの使用状況のグラフとともに緑色のチェックマークが表示されます。 これは、必要なリソースを使用してサーバーが正常に作成されたことを示します。 あります。

GPU を接続したサーバーを作成しました。

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

1. 次の 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
   

2. セルの横にある play_circle をクリックして、 コードを実行します。

   <ph type="x-smartling-placeholder">

   </ph>

3. コードの実行が完了したら、nvidia-smi が何かを出力したことを確認します。 GPU が存在することを確認するために、 サーバー上で認識されます前のセクションにスクロール この出力を確認できます。

   <ph type="x-smartling-placeholder">

   </ph>

ステップ 4: ヘッドレス Chrome を使用、自動化する

1. [add コード] ボタンをクリックして新しいコードを追加します。 コードセル。
2. その後、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 に保存しています。宛先 このファイルを表示するには、content folder を開きます。 more_vert をクリックして PDF をダウンロード ローカルマシンにコピーされます。

</ph>

パート 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 スクリプトを呼び出して スクリーンショット。では、これはどんな仕組みですか？こちらの Node.js コードを jPuppet.js。

jPuppet.js の Node コードの内訳

まず、Puppeteer をインポートします。これにより、 Node.js を使用して Chrome をリモートで制御できます。

import puppeteer from 'puppeteer';

次に、Node アプリケーションに渡したコマンドライン引数を確認します。 3 番目の引数を設定します。これは移動先の URL を表します。マイページ 最初の 2 つの引数は Node.js 関数を呼び出すため、ここでは 3 番目の引数を検証する必要があります。 実行しているスクリプトです。実際には 3 番目の要素には 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'
      ]
  });

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

const page = await browser.newPage();

次に、ウェブページが呼び出されたときに console.log イベントをリッスンするイベント リスナーを追加します。 JavaScript を実行します。これにより、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 を変更する

お気づきかもしれませんが、冒頭で import ステートメントを使用していることに 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 を使用すると 説明します。

成功

新しい P-MAX キャンペーンを TensorFlow.js ファッション MNIST 分類器 認識できるようにクライアントサイドで画像内のズボンを正しく認識できる ブラウザ内でのデータ処理を実際に体験できます。

これは、ML から、 グラフィックやゲームのテストまで多岐にわたります。

</ph>

リソース

GitHub リポジトリにスターを付ける に登録して、今後の更新情報を受け取ることもできます。