WebNN API Demo

概要

Web Neural Network (WebNN) API は、ブラウザ上でニューラルネットワークの推論をハードウェアアクセラレーション付きで実行するための W3C 標準仕様です。CPU・GPU・NPU（Neural Processing Unit）といったデバイスのネイティブ ML API に直接アクセスし、高速なオンデバイス推論を実現します。

現在の仕様ステータスは Candidate Recommendation Draft（2026年1月22日更新）で、2024年4月〜2026年1月の間に100以上の変更が加えられています。

主要インターフェース

WebNN API は以下のインターフェースで構成されます（W3C 仕様）。

navigator.ml — WebNN API のエントリーポイント（参照）
MLContext — 計算グラフの構築・実行を管理するコンテキスト
MLGraphBuilder — 計算グラフを構築するビルダー
MLGraph — コンパイル済みの不変な計算グラフ
MLOperand — グラフ内を流れるデータ（入力・定数・中間結果・出力）
MLTensor — デバイス固有のストレージ型（GPU/NPU メモリとの効率的なデータ共有）

サポートされるオペレーション

仕様には幅広いニューラルネットワーク演算が定義されています（MLGraphBuilder 仕様）。

畳み込み — conv2d, convTranspose2d
行列演算 — matmul, gemm
活性化関数 — relu, sigmoid, softmax, gelu, tanh 等
正規化 — batchNormalization, layerNormalization, instanceNormalization
プーリング — averagePool2d, maxPool2d, l2Pool2d
RNN — lstm, gru とそのセルバリアント
テンソル操作 — concat, reshape, slice, transpose, gather, scatter
量子化 — quantizeLinear, dequantizeLinear

バックエンド構成

WebNN はプラットフォームごとにネイティブ ML API へルーティングします（Microsoft Learn、Tarek Ziade）。

Windows — ONNX Runtime / Windows ML（GPU・NPU）、TFLite/XNNPACK（CPU フォールバック）
macOS / iOS — Core ML、TFLite/XNNPACK（CPU フォールバック）
Android — NNAPI、TFLite/XNNPACK（CPU フォールバック）
Linux — TFLite/XNNPACK（CPU）

NPU は Intel Core Ultra（Intel AI Boost）や Qualcomm Hexagon（Copilot+ PC）で利用可能です（Windows Developer Blog）。

基本的な使い方

navigator.ml.createContext() でコンテキストを作成し、MLGraphBuilder で計算グラフを構築・コンパイル・実行します（Quickstart）。

// C = 0.2 * A + B
const descriptor = { dataType: 'float32', shape: [2, 2] };
const context = await navigator.ml.createContext();
const builder = new MLGraphBuilder(context);

const constant = builder.constant(descriptor, new Float32Array(4).fill(0.2));
const A = builder.input('A', descriptor);
const B = builder.input('B', descriptor);
const C = builder.add(builder.mul(A, constant), B);

const graph = await builder.build({ 'C': C });

ONNX Runtime Web との連携

ONNX Runtime Web では Execution Provider として webnn を指定することで、既存の ONNX モデルを WebNN バックエンドで実行できます。

const session = await ort.InferenceSession.create('./model.onnx', {
  executionProviders: [{
    name: 'webnn',
    deviceType: 'gpu',           // 'cpu' | 'gpu' | 'npu'
    powerPreference: 'default',  // 'default' | 'low-power' | 'high-performance'
  }],
});

const input = new ort.Tensor('float32', new Float32Array([1, 2, 3, 4]), [1, 4]);
const results = await session.run({ input });
console.log(results.output.data);

ブラウザ対応チェック

チェック中...

Chrome 146 で Origin Trial として利用可能（Chrome 146 Beta）。 Edge も同時期にサポート予定。Firefox（standards-positions #1215）・ Safari（standards-positions #486）は実装未着手です（Web Platform Status）。

ライブデモ — 画像分類

MobileNetV2 (ONNX, ~14MB) を ONNX Runtime Web 経由で実行します。WebNN が利用可能なら WebNN EP、なければ WASM EP にフォールバックします。

画像をドラッグ＆ドロップ、またはクリックして選択