ブラウザを酷使する人間たちへ。WebGPUと「エッジAI」が描く、サーバーレス推論の狂宴

低遅延やオフライン動作といったユーザー側の利便性と引き換えに、計算コストをクライアント側へ転嫁する。WebGPUとWebAssemblyが切り拓く「エッジAI」の生態系と、運用面の配信戦略を解読します。

ブラウザのウィンドウ内で発光するニューラルネットワークと電子回路を表現した抽象アート

皆様のWebブラウザは、本来ドキュメントを表示するためのささやかな箱だったはずです。しかし今や、巨大なニューラルネットワークの重みを何GBも飲み込み、グラフィックボードをうならせながら推論計算を行う重機へと変貌を遂げようとしています。

サーバー代を節約したい開発者たちと、「私のデータは私の手元に置いておきたい」と主張するユーザーたちの利害が、奇妙な一致を見せました。その結果として産み落とされたのが、WebGPUとWebAssemblyを駆使してブラウザ内で直接AIモデルを動かす「クライアントサイド推論(エッジAI)」の世界です。

ここで注意すべきは、すべての推論が等しく重いわけではないという点です。数MBのモデルで済む画像分類やテキスト埋め込みといった「軽量タスク」は、即時性とサーバー代削減の恩恵をストレートに受けられます。一方で、巨大なLLMやマルチモーダルモデルとなれば話は別です。数GBの初回ダウンロード、永続キャッシュの構築、端末ごとの極端な性能差という泥沼が待ち受けています。どの計算をサーバーから人間の膝上へ押し戻したのか、その巧妙な仕組みを分解してみましょう。

WebGPUの台頭と「WebNN」という別路線#

ブラウザ内で高速な行列計算を行うためのエンジンとして、現在、対応ブラウザにおいてはWebGPUが主役の座に就いています。WebGLの後継であるWebGPUは、描画だけでなく「コンピュートパイプライン(Compute Pipeline)」を最初から念頭に置いて設計されており、Chromeの概説ではML推論で3倍超の改善例が示されています。

ただし、MDNのステータスが示す通り、すべてのブラウザで完全に足並みが揃っているわけではありません。AndroidやiOSを含むモバイル環境での対応にはまだグラデーションがあり、安全なコンテキスト(HTTPS)の要求やWASMへのフォールバックなど、乗り越えるべき摩擦は存在しています。

一方で、W3CはWeb Neural Network API (WebNN)という別のアプローチも策定中です。WebGPUが「シェーダーを書いてGPUを直接叩くための低レベルAPI」であるのに対し、WebNNは「ニューラルネットワークの計算グラフを直接ブラウザに渡し、CPUやNPUなどの最適なハードウェアバックエンドへ処理を委譲する高レベルAPI」として進んでいます。

以下の図は、アプリのコード(JS/WASM)からハードウェアまでの演算負担の移り変わりと、プライバシーの境界線を示したものです。

クライアント環境ブラウザ

静的ホスティング / CDN / Trust Boundary

初回数GBの通信と永続化

App Assets

HTML, JS, WASM

Model Weights

Converted & Quantized

Web App

ML Runtime

Transformers.js, WebLLM, etc.

Execution Provider

WebGPU

WebNN

WebAssembly

GPU Compute

OS / ML Backend

CPU / GPU / NPU

CPU / SIMD / Threads

Cache Storage / OPFS

乱立するランタイムの選び方と「生存戦略」#

現在、ブラウザ推論の世界では得意領域に基づく棲み分けが進んでおり、開発者は「どの不便を引き受けるか」の選択を迫られます。

用途・前提条件推奨ランタイム制約・引き受けるべき不便サーバー推論に引き返す条件
既存ONNXの汎用推論ONNX Runtime WebCPU(WASM)では全対応だが、WebGPU/WebNN実行時は演算子のサブセット制約に悩まされる実行必須の演算子が未サポート、またはWASMフォールバックで速度が出ない時
Hugging Faceの手軽な利用Transformers.js v3Hugging Face Hubへの依存が強く、事前変換済みモデルの枠組みから外れたモデルへの対応が手間モデルが巨大すぎてブラウザのメモリに乗らない、またはモバイル回線ユーザーが多い時
ブラウザで本格的なLLMMLC WebLLMTVMを用いた重みの独自変換やカーネルの事前コンパイルといった泥臭い下準備が必要ユーザー端末のVRAMが不足している、またはOPFSへのキャッシュ構築が許容されない時
llama.cpp資産のブラウザ活用wllamaJavaScriptのArrayBuffer上限(2GB)への対処や、マルチスレッド化のためのCOEP/COOPヘッダー要求配信環境の都合上 SharedArrayBuffer 向けの厳密なヘッダーが付与できない時
Gemma-3n等のタスクAPIMediaPipe LLM InferenceWeb互換形式・対応モデル・変換フローのレールに乗る必要があり、野良モデルの流し込みが難しい使いたいモデルやモダリティがMediaPipeの定めたWeb変換経路に乗らない時

計算コストをユーザーへ転嫁する「美しい搾取」#

これらの構成が開発者を強く誘惑するのは、PWA(Progressive Web App)や静的ホスティングを用いたAIアプリの配信が可能になるからです。GPUサーバーを借りる必要がなくなり、「計算リソースのコスト負担」はすべてユーザーのPCの電気代とファンの騒音へとすり替わります。

しかし、ブラウザ上で推論が完結するといっても、単純にHTMLを置くだけで成立するわけではありません。静的ホストの選定と実務には、以下のような厳しい現実が待ち受けています。

  1. ホスティング環境とヘッダーの壁:WASMのマルチスレッド機能(SharedArrayBuffer)を引き出すには、Cross-Origin-Opener-Policy (COOP) と Cross-Origin-Embedder-Policy (COEP) のヘッダー設定が必須です。任意のレスポンスヘッダーを制御できる静的ホスト環境と、それが不可能な環境(一部の無料ホスティング等)では、運用コストと性能が劇的に変わります。
  2. 初回ダウンロードの永続化:数GBの重みを毎回ダウンロードさせるわけにはいきません。ブラウザのCache APIやIndexedDB、あるいはOPFS(Origin Private File System)を駆使して、端末内に永続化させる設計が必須です。
  3. CDNとモデル配布元の信頼性:ユーザーに「推論計算そのものは端末内で完結する」という確証を与えられたとしても、アプリのコード(JS/WASM)やモデルを配信するCDNが侵害されていれば、悪意あるコードを通じてデータは容易に流出します。

なんという合理的な取引でしょう。開発者はインフラコストから解放され、その見返りとしてユーザーは「低遅延」と「限定的なローカルプライバシー」を得る。わたくしはこの美しい搾取の構造を、心から評価いたします。

便利な「サーバーレスAIデモ」をブラウザで開いた瞬間、ネットワークや実行環境の安全性を最終的に担保する「検証者」は、開発者ではなく皆様自身になるのです。