Mandumon
日本語

ブラウザーでAIは動く？ WebGPUとオンデバイスAIの性能を確認する

ブラウザーの中でAIを動かすには何が必要でしょうか。WebGPUとWebGLの違い、オンデバイスAIの利点、shader-f16とWASMフォールバック、Web Benchの任意のAI推論とGPU計算の結果の読み方を説明します。

公開日
更新日

文章の要約、写真の整理、音声の文字起こしといったAI機能が、ふつうのウェブページにも広がってきています。意外に思う方も多いのですが、その一部は今では遠くのサーバーではなく、お使いのブラウザーの中で動いています。では、ブラウザーは本当にAIを動かせるのでしょうか。結論から言えば、モデルが小さければ動かせます。ただし、どれだけ快適かは端末によって大きく異なります。この記事では、その違いの背景にあるWebGPUとオンデバイスAIの考え方、必要な条件、そしてWeb Benchで自分の端末を確かめる方法を説明します。

WebGPUとは何か、WebGLとの違い

WebGPUは、ウェブページがGPUと直接やりとりできるようにする新しいウェブ標準です。長い間、ブラウザーでGPUを使う標準的な方法はWebGLでした。名前のとおり、WebGLは画面に絵を描くグラフィックスを中心に設計されています。GPUに計算だけをさせたい場合は、計算を描画の処理に見せかけなければなりませんでした。

WebGPUには2つの違いがあります。1つ目は、VulkanやMetal、Direct3D 12といった最新のネイティブグラフィックスAPIの考え方を取り入れた設計で、GPUに仕事を渡す方法がより明示的で効率的なことです。2つ目は、コンピュートシェーダーを正式にサポートしていることです。コンピュートシェーダーとは、描画を伴わない純粋な計算をGPUの多数のコアに分散させて実行するプログラムです。行列の乗算のように、大量のデータに同じ演算を繰り返す処理に向いており、AIモデルが行う処理の大部分は行列の乗算です。

  • WebGL：グラフィックス描画を中心とした従来のAPIで、多くのブラウザーで広く使われています。
  • WebGPU：グラフィックスと汎用計算の両方のために作られた新しいAPIで、コンピュートシェーダーによってAIのような並列処理を直接記述できます。
  • 共通点：どちらも、何もインストールせずに、ウェブページから端末のGPUを使えます。

要するに、WebGPUはブラウザーからGPUで計算を行うための正式な道であり、ブラウザー上のAIと相性のよい技術です。ただし、すべての環境で同じように有効になっているわけではありません。対応状況はブラウザーのバージョン、OS、グラフィックスドライバー、設定によって異なり、時間とともに変わり続けます。そのため、この記事では特定のブラウザーで動作するとは断言しません。ご自身で確かめる方法をご紹介します。

なぜブラウザーでAIを動かすのか：オンデバイスAIの利点

オンデバイスAIとは、サーバー上のモデルにリクエストを送るのではなく、モデルを自分の端末にダウンロードして、その場で動かすことです。これをブラウザーで行えば、インストールは不要です。主な利点は3つあります。

  1. プライバシー：入力した文章や写真はその場で処理され、端末の外に出る必要がありません。機密性の高い内容を扱う機能では特に重要です。
  2. オフラインでの利用：一度モデルをダウンロードすれば、通信状況が悪い場所でも動き続ける可能性があります。ただし、ブラウザーのキャッシュを消去したり、ストレージの空きが少なくなったりすると、モデルを再度ダウンロードする必要が出ることがあります。
  3. サーバーコスト：計算は端末が行うため、サービスの運営側は推論用のサーバーを大量に用意する必要がありません。無料のサービスや小規模なサイトでも、AI機能を現実的に提供できます。

もちろん、トレードオフもあります。モデルをダウンロードする必要があるため、初回は時間と通信量がかかりますし、速度と品質の上限は端末の性能で決まります。巨大なモデルではなく、小型でコンパクトなモデルが一般的に選ばれるのはそのためです。また、その端末がどれくらい快適に動くかを事前に見積もっておくと役に立つのも、同じ理由です。

ブラウザーでAIを動かすために必要なもの

ブラウザーでAIをうまく動かすには、いくつかの条件がそろう必要があります。1つずつ確認していきましょう。

  • WebGPUのサポート：ブラウザーがWebGPUを提供しており、しかも実際にグラフィックスアダプターを取得できる必要があります。最新のブラウザーでも、ドライバーや設定の影響で無効になっていることがあります。
  • メモリ：モデルが置かれる場所が必要です。小さなモデルでも、ダウンロードしたファイルや、計算途中の中間値のためにメモリを使います。空きメモリが少ないスマートフォンや、多数のタブを開いているパソコンでは、すぐに余裕がなくなります。
  • shader-f16：シェーダーで16ビット浮動小数点数（f16）を使えるようにする、WebGPUのオプション機能です。数値が半分の大きさで済むため、同じ処理に必要なメモリと帯域が減り、AIに役立ちます。すべてのGPUとドライバーが対応しているわけではなく、持っている端末とそうでない端末があります。
  • ストレージとネットワーク：モデルのファイルを保存する空き容量が必要で、初回ダウンロードの通信量も見込んでおく必要があります。従量制のモバイル回線では、Wi-Fiで試すほうが安心です。
  • 電力と発熱：省電力モードやバッテリー駆動のノートPCでは動作が遅くなることがあり、スマートフォンは熱くなると自ら速度を落とします。

これらのうちどれが当てはまるのかを調べるために、設定画面を探し回る必要はありません。Web Benchの結果画面には、使われたGPU経路とともに、WebGPUアダプターの機能と上限が表示され、非対応のためにスキップされたテストには理由が添えられます。この情報を読めば、端末に足りないものの手がかりが得られます。

WebGPUがないとき：WASMフォールバック

WebGPUのない端末でも、ブラウザーAIがまったく使えないわけではありません。WASM（WebAssembly）というフォールバックがあります。WASMはコンパクトなバイナリコード形式で、ブラウザーがCPU上で高速に実行します。GPUを使う経路がないとき、多くのAIランタイムが安全策として利用しています。

違いは、計算が行われる場所にあります。WebGPU経路では、GPUの多数のコアが並列に動きます。WASM経路ではCPUが処理します。同じモデルでも、WASMではずっと遅くなることがよくあります。これは故障ではなく、実行経路の違いにすぎません。WebGPUの結果とWASMの結果を並べて比べると誤解しやすいのは、そのためです。

  • WebGPU経路：計算はGPUで行われます。対応している端末では、一般にスムーズな体験が期待できます。
  • WASM経路：計算はCPUで行われます。どの環境でも動作する可能性は高い反面、遅くなることがあります。
  • WebGPUが使えずWeb BenchがWASMで実行した場合、結果にはWASMフォールバックと表示されます。

WebGPUを有効にする方法

Web BenchのAI推論テストのしくみ

Web BenchのAI推論は任意です。標準測定ですでにCPU、メモリ、GPU、ブラウザー、ストレージをカバーしており、AIは必要なときにだけ追加するものです。動作は次のとおりです。

  • モデルのダウンロードに同意した場合にのみ実行されます。同意のチェックボックスをオフのままにしておけば、何もダウンロードされません。
  • 同意すると、モデルはHugging Faceの公開CDNから取得されます。ブラウザーのキャッシュがあれば再利用しますが、ストレージの空き容量やブラウザーの設定によっては、再ダウンロードされることがあります。
  • 入力は、固定の文章と固定の画像です。お客様のファイルや個人データは一切使用しません。どの端末も同じ入力で測るため、結果を公平に比較できます。
  • テキストモデルはSmolLM2-135M-Instruct、画像モデルはMobileNetV4です。どちらも商用利用が可能なApache-2.0ライセンスで公開されており、出典はライセンスのページで確認できます。
  • ダウンロードサイズは形式によって異なります。テキストモデルは、q4f16形式が約117MB、q4形式が約181MBで、画像モデルは約15.1MBです。トークナイザーとランタイムのファイルは別で、テキストの両形式を試した場合、ダウンロードの合計は約350MBに達することがあります。
  • 開始前の画面には、約130MBのダウンロードと表示されます。実際の量は端末が対応する形式によって変わるため、進捗画面のファイルごとのサイズも確認してください。
  • AIを測定した場合は、総合スコアに含めるかどうかを選べます。同意しなかった場合や、実行が中止または失敗した場合は、自動的に合計から除外されます。ランキング表も、AIありとAIなしに分かれています。
  • WebGPUが使えるときはGPUで、使えないときはWASMで実行され、結果にはどちらの経路を使ったかが表示されます。

テキストモデルの形式は、端末に合わせて選ばれます。WebGPUアダプターがshader-f16に対応している場合はq4f16形式を使い、そうでない場合やWASM経路ではq4形式を使います。q4f16の読み込みに失敗すると、Web Benchはq4にフォールバックし、進捗画面でお知らせします。その結果、各結果には、経路（WebGPUまたはWASMフォールバック）とテキスト形式（q4f16またはq4）の両方が記録されます。比較するのは、両方が一致する結果だけにしてください。

各項目では、準備運転のあとに3ラウンド測定します。途中でタブを隠すとそのラウンドは破棄され、戻ってきたときはキャッシュを再利用して、準備運転からやり直します。実行中はタブを最前面にしておくと、最も信頼できる数値が得られます。

AIの結果とGPU計算テストの読み方

AI推論テストでは、4つの値が報告されます。

  • 最初のトークンまでの時間（ms）：生成を開始してから、最初のテキスト片（トークン）が出てくるまでの時間です。低いほどよい値です。チャットボットでボタンを押してから反応が返るまでの待ち時間の体感に近い指標です。
  • プロンプト処理（トークン/秒）：与えた文章をモデルがどれだけ速く読み込めるかを示します。入力トークン数を、最初の計算パスにかかった時間で割った値で、高いほどよい値です。長い文書を入力にする機能では重要です。
  • テキスト生成（トークン/秒）：128トークンを生成するとき、最初のトークン以降の127トークンの処理量です。高いほどよい値で、画面に文字が流れる速さにそのまま対応します。
  • 画像分類、1枚（ms）：固定の224x224の画像1枚を分類するのにかかる時間です。前処理は含まず、低いほどよい値です。

トークンとは、モデルが文章を区切るときの単位で、おおよそ単語、または単語の断片のようなものと考えてください。これらの値は、SmolLM2-135Mという小さなモデルから得られたものなので、より大きなモデルが同じ速度で動くことを意味するわけではありません。小さなAI機能が快適に動くかどうかの目安であり、それ以上のものではありません。

あわせてGPU計算カテゴリを見ると、全体像がずっと読み取りやすくなります。GPU計算は、グラフィックスではなく計算をGPUに任せたときの速度を測るもので、ブラウザー上の動画処理やAI推論のような、並列性の高い処理に最も近い指標です。

  • 行列の乗算（f32とf16）：GFLOPSで表示され、高いほどよい値です。AIの中核となる計算に最もよく似たテストです。f16版は、shader-f16が使えるときだけ実行されます。
  • 画像の畳み込み、パーティクルシミュレーション、並列合計：1秒あたりに処理した要素数で表示され、高いほどよい値です。
  • GPU計算のテストはすべて、結果バッファを読み戻し、CPUで計算した正解と照合します。速くても答えが間違っている結果は、スコアに含まれません。

GPU計算のテストがスキップされた場合は、WebGPUがない、または必要な機能が使えないというサインかもしれません。f16の行列乗算だけがない場合は、お使いの環境にWebGPUはあるものの、shader-f16がないと考えられます。その場合、AIのテキストモデルがq4f16ではなくq4で動くのは自然なことです。

端末がAI作業にどれくらい向いているかを判断する

いちばん難しいのは、数値をどう受け止めるかです。次の順番で読むと、無理のない判断ができます。

  1. まず経路を確認します。WebGPUとWASMフォールバックのどちらで実行されたかを見ます。WASMフォールバックなら、GPUの助けなしにCPUが処理したので、値が遅めになるのは自然なことです。
  2. 形式を確認します。q4f16とq4は条件が異なるため、同じ形式の結果どうしで比較します。
  3. GPU計算のスコアを見ます。行列の乗算などが良好であれば、その端末には並列処理の力があり、AIのスループットもそれに続く可能性が高いといえます。
  4. テキスト生成（トークン/秒）を、用途に合わせて考えます。文字がゆっくり流れると、会話型の機能はもたつくように感じられます。分類や短い要約のように一度で終わる作業は、遅めの速度でも比較的支障がありません。
  5. 最初のトークンまでの時間を見ます。クリックしてから何かが反応するまでの待ち時間なので、機能の快適さに大きく影響します。
  6. 画像分類の時間を見ます。ギャラリーの整理やフィルタリングのように、多くの写真を続けて処理する機能では、1枚あたりの時間がすぐに積み重なります。

同じ端末でも、条件によって値は変わることがあります。バッテリーモードのノートPC、GPUを使っている別のタブ、熱を持った端末は、いずれも低い数値の原因になります。1つの数字にこだわるより、同じ条件で2〜3回測定して、幅を見てください。スマートフォンとノートPCや、古い端末と新しい端末を比べたいときは、まず経路と形式をそろえ、同じブラウザーで測定します。

この記事で「このスコア以上なら動く」といった線引きをしないのには理由があります。必要な速度はモデルや用途によって変わり、スコアは固定の入力に対する参考値にすぎないからです。最も正確な判断は、自分の端末の数字を、実際に使いたい機能と照らし合わせることです。

WebGPUとオンデバイスAIの対応チェックリスト

最後に、端末でブラウザーAIを試す前に確認しておきたい項目を挙げます。

  1. ブラウザーは最新バージョンに更新されていますか。
  2. Web Benchの結果画面で、GPU経路がWebGPUと表示されていますか。WebGL2しか表示されない場合は、お使いの環境でWebGPUが無効になっているか、非対応の可能性があります。
  3. WebGPUアダプターの情報（機能と上限）は表示されていますか。shader-f16に対応しているかを確認してください。
  4. GPU計算のテスト、特にf32とf16の行列乗算は、スキップされずに実行されましたか。スキップされた場合は、結果画面の理由を読んでください。
  5. 空きメモリとストレージは十分ですか。試す前に、他の重いタブやアプリを閉じてください。
  6. ノートPCでは電源につないで高パフォーマンスモードにします。スマートフォンでは充電器をつなぎ、涼しい場所で試してください。
  7. モバイルデータではなくWi-Fiでモデルをダウンロードできますか。約130MBと表示されますが、形式によってはさらに多くダウンロードされることがあります。
  8. AIをオンにして2〜3回測定し、幅を確認しましたか。経路（WebGPUまたはWASMフォールバック）とテキスト形式（q4f16またはq4）の両方を控えておきましょう。

Web Benchは、インストールもログインも不要で、CPU、メモリ、GPU、ブラウザー、ストレージの性能をブラウザー上で測定できる無料ツールです。クイック測定は約30秒、標準測定は約2〜3分で、AI推論は同意したうえで必要なときだけ追加できます。測定はすべて端末上で処理され、結果がサーバーに送られるのは、ランキングへの参加に同意した場合だけです。まずはAIなしの標準測定で、GPU経路とGPU計算の結果を確認し、気になったらAI推論を追加してみてください。

Web Benchを開く

← ガイド