ブラウザで AI を動かす時代が、本格的に到来しました
こんにちは、開発者の皆さん。今回は Google が公開した LiteRT.js について解説します。
一言でまとめるとこうです。
「TensorFlow.js は役目を終えつつあります。.tflite モデルをブラウザでネイティブ性能で動かしましょう。」
従来の Web AI は、正直に言ってパフォーマンス面で物足りない部分がありました。TensorFlow.js は JavaScript カーネルベースのため、重いモデルを動かすとファンが唸り始めます。しかし LiteRT.js は、Android / iOS / デスクトップで既に実績のある LiteRT ランタイムを WebAssembly としてそのまま持ち込んでいます。
これが重要な理由は次のとおりです。
- 🔒 プライバシー: 推論は 100% クライアント側で完結。画像や音声がサーバーに送信されません。
- 💰 サーバーコストゼロ: GPU サーバーを維持する必要がありません。
- ⚡ 超低レイテンシ: ネットワーク往復がなく、リアルタイム UX が実現できます。
- 🔁 クロスプラットフォーム統一: モバイル・エッジ・Web が同一モデル・同一スタックを共有します。
特に日本のスタートアップや受託開発では、推論サーバーの維持コストが課題になりがちですが、この点は大きな魅力です。詳細な背景は根拠資料をご参照ください。
主要機能の詳細: なぜ 3 倍、60 倍の性能が出るのか
1. ハードウェアアクセラレーションスタックが異なります
LiteRT.js の性能の鍵は、WebAssembly にコンパイルされたネイティブランタイムです。バックエンドは以下の 3 層に分かれます。
| バックエンド | 対象ハードウェア | 用途 |
|---|---|---|
| XNNPACK | CPU | デフォルトフォールバック、安定性重視 |
| ML Drift (WebGPU) | GPU | ビジョン / 音声のリアルタイム処理 |
| WebNN (CoreML 経由など) | NPU | オンデバイス生成 AI (ロードマップ) |
ベンチマーク結果は印象的です。物体追跡・音声文字起こし・画像操作といったリアルタイムワークロードで、CPU 比で GPU / NPU は 5〜60 倍高速です。また、既存の Web ランタイムと比較しても最大 3 倍の優位性があります。
2. PyTorch → .tflite のワンステップ変換
LiteRT Torch を使えば、PyTorch モデルを 1 ステップで変換できます。さらに AI Edge Quantizer でレイヤーごとに量子化スキームをカスタマイズすれば、サイズを削減しつつ性能を向上させ、品質を維持できます。
3. コードが非常に簡潔です
実際の使用例を見てみましょう。GPU アクセラレーションで .tflite モデルをロードし推論するコードです。
// LiteRT.js コアモジュールのインポート
import { loadLiteRt, loadAndCompile, Tensor } from '@litertjs/core';
// 1. WebAssembly ランタイムの初期化 (wasm ディレクトリのパスを指定)
await loadLiteRt('path/to/wasm/directory/');
// 2. .tflite モデルのロードと WebGPU バックエンドでのコンパイル
const model = await loadAndCompile('path/to/your/model.tflite', {
accelerator: 'webgpu' // 'wasm' や 'webnn' も指定可能
});
// 3. 入力テンソルの準備 (例: 1x3x244x244 の画像バッチ)
const inputTypedArray = new Float32Array(1 * 3 * 244 * 244);
const inputTensor = new Tensor(inputTypedArray, [1, 3, 244, 244]);
// 4. 推論の実行
const results = await model.run(inputTensor);
// 5. 結果は GPU 上にあるため、CPU に移動して TypedArray に変換
const resultArray = (await results[0].moveTo('wasm')).toTypedArray();
従来 TensorFlow.js で .tflite を動かそうとしていた方なら、このコードの簡潔さがすぐに伝わるはずです。accelerator オプションを変えるだけで CPU / GPU / NPU を切り替えられる点が核心です。
4. 実践デモ: YOLO と Depth Anything
公式デモでは、Ultralytics YOLO モデルが Ultralytics Python パッケージに公式 LiteRT export として統合されています。数行でモバイル・エッジ・ブラウザにデプロイ可能です。また Depth Anything V2 で Web カメラ映像をリアルタイム 3D ポイントクラウドに変換するデモも WebGPU で動作します。Real-ESRGAN で 128x128 パッチを 512x512 にアップスケールする処理もブラウザ内で完結します。
この技術の限界と注意点 (冷静な視点)
良い話ばかりではフェアではないので、実務で問題になりうる点を整理します。
⚠️ 1. 初期ロードコスト
WebAssembly ランタイム + モデルファイルの初回ダウンロードは数 MB〜数十 MBに達します。モバイル回線では UX を損なう可能性があるため、HTTP キャッシュ、Service Worker、IndexedDB を組み合わせた設計が必須です。
⚠️ 2. WebGPU のブラウザ対応格差
2024 年時点で Safari と Chrome は WebGPU をサポートしていますが、Firefox はまだ実験段階であり、古い Android WebView は対応が不安定です。フォールバック戦略 (XNNPACK CPU) を必ず用意してください。
⚠️ 3. NPU (WebNN) はまだロードマップ上
公式発表にもあるとおり WebNN は upcoming です。現時点で NPU アクセラレーションを期待すべきではなく、GPU (WebGPU) ベースで設計し、WebNN が安定化した段階で移行するのが現実的です。
⚠️ 4. 日本の受託開発 / 金融系での注意点
日本の受託開発や金融系プロジェクトでは CSP (Content Security Policy) が厳格なケースが多く見られます。WebAssembly の実行には wasm-unsafe-eval が必要ですが、これがポリシーに抵触すると動作しません。プロジェクト初期段階でセキュリティチームと必ず協議してください。また閉域網環境では、wasm バイナリを社内 CDN に配置する設計が必要です。
⚠️ 5. TensorFlow.js 資産との互換性
既存の TFJS で作成したカスタムレイヤーや JS カーネルはそのまま使えません。.tflite に変換可能なモデルのみ移行対象となります。マイグレーションコストを事前に見積もってください。
結論: 今始めるべき理由
まとめます。
LiteRT.js は「ブラウザ AI の次期標準」になる可能性が高いです。 理由は明確です。
- Android / iOS / デスクトップで既に検証済みのランタイムをそのまま再利用できます。
- PyTorch → .tflite → ブラウザまでのパイプラインが統一されます。
- WebNN ロードマップを考慮すると、NPU までカバーする唯一の Web AI スタックになります。
次のステップ学習の方向性を提案します。
- ステップ 1: 公式 LiteRT.js npm パッケージで簡単な画像分類モデルから動かしてみてください。
- ステップ 2: YOLO モデルを Ultralytics で export し、物体検出デモを作成してください。
- ステップ 3:
AI Edge Quantizerで量子化を適用し、モデルサイズを半分以下に削減してください。 - ステップ 4: WebNN が安定化したタイミングで NPU バックエンドへの移行を検討してください。
あわせて読みたい記事
- Oracle から PostgreSQL へ、AI がマイグレーションを革新する方法 (feat. Azure) — エンタープライズ環境で AI インフラをどう再編するかに興味があれば、こちらの記事を推奨します。
- NVIDIA IGX Thor、産業用エッジ AI のゲームチェンジャー登場 — ブラウザを超えてエッジデバイスまで、AI 推論の地形がどう変わるかを知りたい方は必読です。
ブラウザ AI はもはや「おもちゃ」ではなく「プロダクションの選択肢」です。無駄な試行錯誤を避けるため、まずは公式ドキュメントから確認することをおすすめします。