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

Jason Mayes

François Beaufort

うれしい結果です。優れたウェブ 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 でプログラムによってブラウザを制御できる Node.js ライブラリです。Puppeteer では、 ヘッドレス モードで Chrome が自動化されます。つまり、ブラウザは何もしなくても 仮想インターフェースです。Google は、 新しいヘッドレス モードであり、 以前のフォームを使用してもかまいません。

環境を確認する

Chrome でハードウェア アクセラレーションがオンになっているかどうかを確認するには、 アドレスバーに「chrome://gpu」と入力します。console.log を使用して、プログラムで Puppeteer で同等の処理を実行することも、レポート全体を 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 を開くと、次の結果が表示されます。

良いスタートではありません。ハードウェアの検出に失敗したことは明らかです。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 を無効にします。 作成します。画面にレンダリング結果を表示するために、スワップチェーンではなくビット ブライトが使用されます。
• --enable-unsafe-webgpu フラグは、Linux 版 Chrome で試験運用版の WebGPU API を有効にし、アダプタのブロックリストを無効にします。

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

/* 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 の問題は検出されず、値は 無効にすることはできません。

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

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

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

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

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

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

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

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

Chrome の実行時に適切なドライバとフラグを使用すると、新しいヘッドレス モードを使用して WebGPU と WebGL をサポートできるようになりました。

舞台裏: チームの調査

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

1. 一部のフラグの組み合わせでは GPU を検出できますが、 実際に GPU を使用します
2. サードパーティが提供する機能するソリューションの例では、古いバージョンの Chrome ヘッドレスが使用されています。このバージョンは、新しいバージョンに置き換えられて廃止される予定です。解決策が必要だった 新しいヘッドレス Chrome に対応しました。

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

通常のマシンでは、50 のトレーニング サイクル（エポック）をより短時間で 1 秒未満ですHeadless Chrome をデフォルト状態で呼び出して、JavaScript コンソール出力を Node.js サーバーサイドのコマンドラインに出力し、これらのトレーニング サイクルが実際にどれくらいの速さで実行されているかを確認しました。

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

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

概要

2017 年に誕生して以来、ウェブ AI は急速に成長しています。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 最終的な効果的なソリューションの作成に 注力します