ブログ一覧へ
tech 2026-02-05

ONNX Runtime でブラウザ内 AI モデルを実行する

ONNX Runtime でブラウザ内 AI モデルを実行する

長年、「ブラウザ内 AI」はおもちゃのデモのように聞こえました:MNIST 上の小さな分類器、あるいはノート PC を溶かすかもしれないスタイル転送。それが変わったのは、ONNX Runtime Web が成熟し、WebGPU / WebGL パスが本物の画像ワークロードに十分信頼できるようになったときでした。Ai2Done では、ONNX 駆動のモデルを使って強化やセグメンテーションのような機能をデバイス上で動かしています。ユーザーの写真をリモート GPU に送ることは、私たちが大切にするすべてに反するからです。

なぜ特に ONNX なのか

ONNX フォーマットはモデル制作デプロイを切り離します。研究者は PyTorch などで訓練し、ONNX にエクスポートし、私たちは ONNX Runtime が異なる実行プロバイダー向けに最適化できる単一のアーティファクトを消費します。ブラウザでは、利用可能なときは WebGPU をターゲットにし、利用できないときには優雅にフォールバックできます。

概念的には、推論ループはこう見えます:

// 擬似コード:セッションをロード、テンソルを入力、出力テンソルを読む
const session = await ort.InferenceSession.create("/models/segmentation.onnx");
const feeds = { input: inputTensor };
const results = await session.run(feeds);
const mask = results.output; // canvas / WASM グルーで使用

スタック内の Go と WASM レイヤーは薄く保たれます:バイトを移動し、進捗を露出し、ビジネスルールを internal/apps/ai2done/tool に保ちます——モデルランタイム自体の内部ではなく。

メモリ、テンソル、誠実さ

ニューラルネットワークは飢えています。誤った仮定——5 年前のノート PC に「フル解像度すべて」のモデルをロードする——はタブクラッシュと怒ったユーザーを生みます。私たちはそれを以下で緩和します:

  • 品質が許す場所でのモデル量子化
  • UI を反応的に保つ漸進的ロード
  • ユーザーに見える形のメッセージング付き、入力サイズの明確な上限

これは PDF とビデオ WASM に適用するのと同じ哲学です:Web がデータセンターであるふりをするのではなく、ブラウザの制限を尊重する

技術的保証としてのプライバシー

推論がローカルで動くとき、プライバシーストーリーは自分で書かれます。あなたの画像は強化のために私たちのディスクに当たりません——バナーで柔らかく約束するからではなく、その操作のためのアーキテクチャにアップロードパスが存在しないからです。この区別は規制された環境にも、休暇写真を見知らぬ GPU に置きたくないだけの人にも重要です。

Go が収まる場所

オーケストレーション、静的配信、WASM バンドルの埋め込みには依然として Go を愛しています。メンタルモデルはクリーンです:Go がアプリを出荷JS が ONNX をブリッジWASM がサーバーとのコード共有が価値ある決定論的変換を処理。DDD の境界は各レイヤーを誠実に保ちます——ドメインロジックは tool/ に、サービスはリクエストを調整し、「賢い」テンプレートはなし。

現実世界のドリフトをデバッグする

モデルはデバイス間で異なる振る舞いをします:カラープロファイル、WebGPU の可用性、浮動小数点の癖が出力を微妙にシフトさせる可能性があります。代表的な入力に対するゴールデンファイルテストと、テレメトリーなしのユーザーフィードバック(文字通り:ピクセルを抜き出さずに「問題を報告」)に投資して、エッジケースを捉えます。

今後の展望

オンデバイス ML は、ブラウザがより多くのパフォーマンスを露出し、モデルが縮小するにつれて改善し続けます。Ai2Done はあなたのメディアを他人の訓練データに変えることなく、その波に乗り続けます。ブラウザで ONNX を評価しているエンジニアなら、私たちのアドバイスは単純です:メモリとフォールバックをファーストクラスの要件として扱えば、ユーザーは違いを感じるでしょう。