🖼️

background-removal-js — ブラウザでAI背景除去が動く原理

IS-Netモデル + ONNX Runtime Web + WebGPU、サーバーなしでクライアント側セグメンテーション

import { removeBackground } from '@imgly/background-removal';
const blob = await removeBackground(imageUrl);

この一行の裏でかなり多くのことが起きている。

使用モデル：IS-Net

IS-Net（Intermediate Supervision Network）はU-Net系のsalient object detectionモデル。DIS（Dichotomous Image Segmentation）論文で発表。SAMやMODNetではない。

エンコーダ-デコーダ構造で中間レイヤーごとにsupervisionをかけて精密なバイナリマスクを生成。「目立つオブジェクト」を背景から分離するのが目的。

3つのモデル変形：large（~176MB FP32）、medium（~88MB FP16、デフォルト）、small（~44MB INT8量子化）。

前処理→推論→後処理パイプライン

ステップ1：入力をRGBA Uint8Arrayテンソル[H,W,4]に変換
ステップ2：1024×1024にbilinearリサイズ（アスペクト比無視）。HWC→BCHW変換+正規化：float32 = (uint8 - 128) / 256。出力shape：[1, 3, 1024, 1024]
ステップ3：ONNX Runtime Web推論。出力：[1024, 1024, 1] float32アルファマスク（0.0〜1.0）
ステップ4：255を掛けてuint8変換→元解像度にリサイズ→アルファチャンネルに直接代入：data[4*i+3] = mask[i]

別途alpha matting後処理なし — IS-Net出力が十分精密。

ONNX Runtime Web

WASMバックエンド（デフォルト）：WebAssembly SIMD+マルチスレッド。WebGPUバックエンド：device: 'gpu'。GPU利用不可時自動フォールバック。

IS-Netパイプライン

入力URL/Blob → createImageBitmap → Canvas getImageData → RGBA [H, W, 4]

前処理bilinearリサイズ → 1024×1024 → HWC→BCHW → (pixel-128)/256 → [1, 3, 1024, 1024]

推論ONNX Runtime Web (WASM/WebGPU) → IS-Net → [1024, 1024, 1]アルファマスク

後処理×255→uint8→元解像度リサイズ→アルファチャンネル直接代入

キーポイント

1

入力画像をRGBA Uint8Array [H, W, 4]テンソルに変換

2

1024×1024にbilinearリサイズ→HWC→BCHW変換+正規化（mean=128, std=256）

3

IS-Netモデルが[1024, 1024, 1] float32アルファマスク出力（前景=1.0、背景=0.0）

4

マスクを元解像度にリサイズ→元画像のアルファチャンネルに直接代入

5

ONNX Runtime：WASM（デフォルト）またはWebGPUバックエンド — モデルはCDNからchunk並列ダウンロード

ユースケース

プロフィール写真編集 — サーバーなしでブラウザで即座に背景除去 ECサイト商品画像 — 背景を白に自動置換ビデオ会議バーチャル背景 — リアルタイムではないが静止画マスキング