ブラウザにおけるオンデバイスAIの現状

ブラウザで直接AIを実行することは、実際に実装しようとするまでは簡単に聞こえます。APIは断片化されており、ハードウェア要件は大きく異なり、あるデバイスで動作するものが別のデバイスでは静かに失敗します。最初の推論呼び出しを接続する前に、実際に何が利用可能か、レイヤーがどのように組み合わさっているか、そして2026年初頭における実際のギャップがどこにあるかを理解することが役立ちます。

1つのものではなく、3つの異なるレイヤー

ブラウザのオンデバイスAIにおける最大の混乱の原因は、すべてのアプローチを互換性があるものとして扱うことです。それらは互換性がありません。3つの異なるレイヤーがあり、ユースケースに対して間違ったレイヤーを選択すると実際の問題が発生します。

レイヤー1:ブラウザ提供のAI API

Chromeは、Gemini Nanoを含む、ブラウザ内で直接提供・管理するモデルに支えられた組み込みAI APIを提供しています。Chrome built-in AI docsで説明されているように、これらのモデルはChrome自体によってダウンロードおよび処理されます。ChromeはSummarizer、Translator、Language DetectorなどのAPIを安定版で利用可能にしていますが、他のAPIはより制限されたままです。Prompt APIはChrome拡張機能では安定していますが、Webページでの使用はまだ実験的またはOrigin Trialベースです。WriterとRewriterも、普遍的に本番環境対応として扱うべきではありません。

Microsoft EdgeはPhi-4-miniを使用した同様のアプローチを取り、独自のAPIサーフェスを公開しています。モデルはブラウザに直接組み込まれており、Prompt APIなどのAPIを通じてアクセスできます。これは現在、Edge CanaryおよびDevビルドで開発者プレビューとして利用可能です。ただし、これらのAPIはまだ実験的であり、本番環境では広く利用できません。Firefoxには、チャットボット統合やSmart Window実験などのAI機能がありますが、現在、Web開発者向けのChrome スタイルの組み込みAI APIサーフェスを公開していません。

魅力は明白です:モデルのホスティング不要、バンドルサイズのコストなし、最小限のセットアップ。欠点も同様に明白です:特定のブラウザ実装に縛られ、モデルは固定されており、実行されているバージョンを制御できません。これらのAPIは、モデルを最初にダウンロードする必要があり、それは大きく、非同期で発生する可能性があります。これを適切に処理する必要があります。

// 組み込みブラウザAI APIを使用する前に機能検出を行う
if ('Summarizer' in self) {
  const availability = await Summarizer.availability();

  if (availability !== 'unavailable') {
    const summarizer = await Summarizer.create();
    const summary = await summarizer.summarize(articleText);
  }
} else {
  // クラウドにフォールバックするか、機能をスキップする
}

レイヤー2:Transformers.jsとONNX Runtime WebによるJavaScriptベースの推論

より広範なブラウザサポートが必要な場合、または独自のモデルを選択したい場合、Transformers.jsは現在最も実用的な選択肢の1つです。ONNX形式を使用してHugging Faceモデルをブラウザでそのまま実行し、利用可能な場合はWebGPUアクセラレーションを使用し、サポートされている場合はWebAssemblyにフォールバックできます。

ONNX Runtime Webは、実行プロバイダーをより細かく制御しながら、同様のリーチを提供します。どちらも、分類、翻訳、感情分析、埋め込み、軽量テキスト生成タスクに対して合理的な選択肢です。

Transformers.js v3は@huggingface/transformersパッケージに移行したことに注意してください。以下に示す@xenova/transformersインポートはv2に適用され、既存のプロジェクトでは一般的です:

// Transformers.js v2
import { pipeline } from '@xenova/transformers';

// Transformers.js v3+
// import { pipeline } from '@huggingface/transformers';

const classifier = await pipeline('sentiment-analysis');
const result = await classifier('This article is genuinely useful.');

モデルサイズが主な制約です。ブラウザ推論に適した量子化モデルは、タスクに応じて数十から数百メガバイトの範囲になる可能性があります。IndexedDBまたはCache APIを使用した慎重なキャッシングなしでは、より大きなモデルは実用的ではなくなります。

レイヤー3:アクセラレーションプリミティブとしてのWebGPUとWebAssembly

WebGPUとWebAssemblyはAI APIではありません。これらは、Transformers.js、ONNX Runtime Web、TensorFlow.jsなどのフレームワークが内部的に使用して推論を高速化できる低レベルプリミティブです。フレームワークを構築している場合やカスタム計算作業を行っている場合を除き、直接やり取りすることはほとんどありません。

特にWebGPUは、行列演算に対して意味のあるGPUアクセラレーションを解放します。これは、小さなモデル以外のすべてに重要です。サポートは以前よりもはるかに広範ですが、ブラウザ、オペレーティングシステム、デバイス、ドライバー、モバイルサポートが異なるため、機能検出が依然として必要です。

WebNNが全体像に追加するもの

WebNN(Web Neural Network API)は、サポートされているデバイスでのNPUアクセスを含む、ハードウェアアクセラレーションされたニューラルネットワーク操作を一貫したブラウザインターフェースを通じて公開するように設計されたW3C APIです。WebGPUと同様に、フレームワークとハードウェアの間に位置しますが、MLワークロード専用に設計されています。

2026年初頭のブラウザサポートは限定的です。Chromeには部分的な実装があり、他のブラウザ全体でのより広範なサポートはまだ進行中です。ONNX Runtime Webなどのフレームワークは、すでにWebNNを実行バックエンドとして追加しているため、直接使用する前に間接的にその恩恵を受ける可能性が高いでしょう。

正直なトレードオフ

プライバシーの利点は実在しますが、条件付きです。ローカル推論は、処理中に入力データがデバイスを離れないことを意味しますが、Webサイトはモデルに到達する前にユーザーが入力した内容をログに記録できます。「ローカル」は自動的にエンドツーエンドでプライベートであることを意味しません。

オフライン機能も同様に条件付きです。モデルがキャッシュされると、推論は接続なしで機能します。ただし、最初のダウンロードには接続が必要であり、モデルの更新には再接続が必要です。

ハイブリッドが現実的なデフォルト

ほとんどの本番アプリケーションは完全にオンデバイスにはなりません。実用的なパターンは、ローカル推論を試み、APIの可用性とハードウェア機能を確認してから、どちらかが欠けている場合にクラウドエンドポイントにフォールバックすることです。これにより、対応デバイスにはより高速でプライベートなエクスペリエンスを提供し、他のすべてのユーザーに対して機能を壊すことはありません。

結論

ブラウザのオンデバイスAIは、特定の限定されたタスクに対して今日本当に有用です:ドキュメントの要約、言語の検出、短いテキストの分類、埋め込みの生成、または軽量アシスタントの実行。ブラウザでのフルLLMスケールのエクスペリエンスは、一貫性がなく、ハードウェアに依存したままです。現実的な中間地点を構築すれば、実際に機能するものを提供できます。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.