ウェブ AI モデルのテストを強化: WebGPU、WebGL、ヘッドレス Chrome

Jason Mayes
François Beaufort
François Beaufort
GitHub

うれしい結果です。優れたウェブ AI アプリケーションが構築されました ユーザーのデバイス上で ML モデルを直接実行できますKubernetes は、 クライアントサイドのウェブブラウザでアクセスできます。このオンデバイス ユーザーのプライバシーの強化、パフォーマンスの向上、費用の削減を実現する設計 大幅に低下しました

ただし、ここにはハードルがあります。お客様の TensorFlow.js モデルは、 GPU（WebAssembly）や、より強力な GPU（ WebGL と WebGPU）。問題は、 選択したハードウェアでブラウザテストを一貫して自動化するにはどうすればよいでしょうか？

整合性の維持は ML モデルの比較に不可欠 反復と改善を繰り返すことで 継続的にパフォーマンスを評価できます 使用することもできます

GPU を使用した一貫したテスト環境のセットアップは、 あります。このブログ投稿では、当社が直面した問題と、その解決方法についてご紹介します。 アプリケーションのパフォーマンスを改善できます。

これは、ウェブ AI デベロッパー向けのものではありません。ウェブゲームや この投稿はあなたにとっても有益です。

自動化ツールボックスの内容

使用するものは次のとおりです。

  • 環境: Linux ベースの Google Colab ノートブック - NVIDIA T4 または V100 GPU。Google Cloud などのクラウド プラットフォームや 使用することもできます。
  • ブラウザ: Chrome は WebGPU をサポートしています。 強力な WebGL の後継であり、 は、最新の GPU API の進化をウェブにもたらします。
  • 自動化: Puppeteer は、 JavaScript を使用してプログラムでブラウザを制御します。Puppeteer では、 ヘッドレス モードで Chrome が自動化されます。つまり、ブラウザは何もしなくても 仮想インターフェースです。Google は、 新しいヘッドレス モードであり、 以前のフォームを使用してもかまいません。
で確認できます。 <ph type="x-smartling-placeholder">

環境を確認する

Chrome でハードウェア アクセラレーションがオンになっているかどうかを確認するには、 アドレスバーに「chrome://gpu」と入力します。Google Chat では プログラマティックに Puppeteer を使用して同等の処理を実行する console.log を使用するか、レポート全体を PDF として保存して手動で確認する場合:

/* Incomplete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters: Expands later
const browser = await puppeteer.launch({
  headless: 'new',
  args:  ['--no-sandbox']
});

const page = await browser.newPage();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({ path: './gpu.pdf' });

await browser.close();

chrome://gpu を開くと、次の結果が表示されます。

グラフィック機能のステータス
OpenGL: 無効
Vulkan: 無効
WebGL: ソフトウェアのみ、ハードウェア アクセラレーションは利用できません。
WebGL2: ソフトウェアのみ、ハードウェア アクセラレーションは利用できません。
WebGPU: 無効

問題が検出されました。
WebGPU が、ブロックリストまたはコマンドラインで無効になっています。

良いスタートではありません。ハードウェアの検出が失敗していることは明らかです。 WebGL、WebGL2、WebGPU は基本的に無効になっているか、ソフトウェアのみです。水 この問題は Google だけではありません。オンラインで多くの人々が議論しています。 同様の状況（Chrome の公式サポート チャネルなど）で発生している場合 （1）、 （2）。

WebGPU と WebGL のサポートを有効にする

デフォルトではヘッドレス Chrome GPU を無効にします。 Linux で有効にするには、Headless の起動時に次のフラグをすべて適用します。 Chrome:

  • --no-sandbox フラグは、Chrome のセキュリティ サンドボックスを無効にします。これにより、 システムの他の部分から切り離します。Chrome を root として実行 このサンドボックスはサポートされていません。
  • --headless=new フラグ: 改善された新しいバージョンで Chrome を実行します。 ヘッドレス モードで、UI は表示されません。
  • --use-angle=vulkan フラグを指定すると、Chrome では Vulkan バックエンド ANGLE の OpenGL ES 2/3 呼び出しを Vulkan API 呼び出しに変換します。
  • --enable-features=Vulkan フラグにより、Vulkan グラフィック バックエンドが次の場合に コンポジットとラスタライズを 簡単に行えます
  • --disable-vulkan-surface フラグは VK_KHR_surface vulkan を無効にします。 作成します。スワップチェーンを使用する代わりに Bit blit は、 レンダリング結果を画面に表示します
  • --enable-unsafe-webgpu フラグ: 試験運用版の WebGPU API を Linux 版 Chrome を使用し、アダプタのブロックリストを無効にします。

ここまでに行ったすべての変更をまとめます。完全なスクリプトは次のとおりです。

/* Complete example.js */
import puppeteer from 'puppeteer';

// Configure launch parameters
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();
await page.goto('chrome://gpu');

// Verify: log the WebGPU status or save the GPU report as PDF
const txt = await page.waitForSelector('text/WebGPU');
const status = await txt.evaluate(g => g.parentElement.textContent);
console.log(status);
await page.pdf({path: './gpu.pdf'});

await browser.close();

スクリプトを再度実行します。WebGPU の問題は検出されず、値は 無効にすることはできません。

グラフィック機能のステータス
OpenGL: 無効
Vulkan: 無効
WebGL: ソフトウェアのみ、ハードウェア アクセラレーションは利用できません。
WebGL2: ソフトウェアのみ、ハードウェア アクセラレーションは利用できません。
WebGPU: ソフトウェアのみ、ハードウェア アクセラレーションは利用できません。

ただし、ハードウェア アクセラレーションや NVIDIA T4 GPU はまだ 検出されます。

正しい GPU ドライバをインストールする

chrome://gpu の出力について GPU の専門家と共同でより詳しく調査しました Chrome チームの一員です Linux Colab これにより Vulkan で問題が発生し、Chrome で 次の出力に示すように、GL_RENDERER レベルの NVIDIA T4 GPU。この ヘッドレス Chrome で問題が発生することがあります。

デフォルトの出力では NVIDIA T4 GPU が検出されません。
ドライバ情報
GL_RENDERER ANGLE（Google、Vulkan 1.3.0（SwiftShader デバイス（Subzero）（0x0000C0DE））、SwiftShader drive-5.0.0）

互換性のある正しいドライバをインストールすると、問題が解決します。

ドライバインストール後の出力を更新。
ドライバ情報
GL_RENDERER ANGLE（NVIDIA Corporation、Tesla T4/PCIe/SSE2、OpenGL ES 3.2 NVIDIA 525.105.17）

正しいドライバをインストールするには、セットアップ中に次のコマンドを実行します。「 最後の 2 行は、NVIDIA ドライバが検出した出力をログに vulkaninfo で。

apt-get install -y vulkan-tools libnvidia-gl-525

// Verify the NVIDIA drivers detects along with vulkaninfo
nvidia-smi
vulkaninfo --summary

ここでスクリプトを再度実行すると、次の結果が得られます。🎉

グラフィック機能のステータス
OpenGL: 有効
Vulkan: 有効
WebGL: ハードウェア アクセラレーションされているがパフォーマンスは低下。
WebGL2: ハードウェア アクセラレーションされているがパフォーマンスは低下。
WebGPU: ハードウェア アクセラレーションされているがパフォーマンスは低下。

Chrome の実行時に正しいドライバとフラグを使用することで、WebGPU が実現しました WebGL 対応の新しいヘッドレスモードです

舞台裏: チームの調査

徹底的な調査の結果、私たちが使っている環境に適した作業方法は見つからなかった Google Colab で実行する必要がありますが、 投稿をお待ちしています 他の環境でうまくいきましたが、これは有望でした。結局のところ、 Colab NVIDIA T4 環境で成功を再現することができました。 主な問題：

  1. 一部のフラグの組み合わせでは GPU を検出できますが、 実際に GPU を使用します
  2. 古い Chrome ヘッドレスを使用したサードパーティによる実用的なソリューションの例 将来的にはサポート終了となります。 新しいバージョンです。解決策が必要だった 新しいヘッドレス Chrome に対応しました。

次のコマンドを実行し、GPU の使用率が低いことを確認しました。 画像認識に関する TensorFlow.js ウェブページの例 これにより、衣類のサンプル（「こんにちは」など）を認識するよう です。

通常のマシンでは、50 のトレーニング サイクル（エポック）はより短い時間で実行する必要がある 1 秒未満ですデフォルトの状態でヘッドレス Chrome を呼び出すと、 JavaScript コンソールの出力を Node.js サーバー側コマンドラインに出力して、 迅速に実行できたことになります

予想どおり、各トレーニング エポックに想定よりもかなり時間がかかっていました（ 秒）は、Chrome が従来の JS CPU 実行にフォールバックしたことを示唆しています。 次のような処理を行います。

<ph type="x-smartling-placeholder">
</ph> トレーニング エポックはゆっくりとしたペースで進行します。
図 1: 各トレーニング エポックの実行にかかった時間（秒）を示すリアルタイム キャプチャ

ドライバを修正し、Headless のフラグの適切な組み合わせを使用した後 Chrome で TensorFlow.js トレーニング サンプルを再実行すると、 繰り返します

<ph type="x-smartling-placeholder">
</ph> エポックでは速度が上がっている..
図 2: エポックのスピードアップを示すリアルタイム キャプチャ

概要

急成長するウェブ AI 2017 年の設立以来WebGPU、WebGL、 WebAssembly: 機械学習モデルの クライアントサイドで数学演算をさらに高速化できます。

2023 年の時点で、TensorFlow.js と MediaPipe Web のダウンロード数は 10 億を超えました。 という歴史的なマイルストーンであり、 次世代のデベロッパーやエンジニアはAI の採用にシフトしている ウェブアプリで優れたソリューションを構築できます。

活用の成功には大きな責任が伴います。この使用量レベル クライアントサイドのブラウザベースの AI をテストする必要性が生じる 真のブラウザ環境で利用できるようにすると同時に、拡張性、自動化、 既知の標準化されたハードウェア セットアップの範囲内にあります。

新しいヘッドレス Chrome と Puppeteer の機能を組み合わせることで、 標準化された複製可能な方法でこのようなワークロードを自信を持ってテストできる 一貫性と信頼性の高い結果が得られます

まとめ

手順ガイド: ドキュメントをご覧ください。セットアップ全体を試すことができます。

この機能が役に立った場合は、 LinkedIn, X（旧 Twitter）など ハッシュタグ #WebAI を使ってソーシャル ネットワーク内で活動します。ご意見などありましたら お寄せいただいたフィードバックは、今後同様の記事を書く予定です。

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

謝辞

ドライバのデバッグにご協力いただいた Chrome チームの皆さん、 このソリューションで直面した WebGPU の問題について、 Jecelyn Yeen、 Alexandra White（文章作成を手伝ってくれた） このブログ投稿をご覧ください。Yuly Novikov、Andrey Kosyakov、 インストゥルメンタルの Alex Rudenko 最終的な効果的なソリューションの作成に 注力します