[bg-snap · on-device matting]

背景を、
ブラウザだけ
一瞬で消す。

画像をドロップすると、ブラウザ内のMLモデルが被写体を抽出して 透過PNGとして書き出します。アップロードは一切ありません。 プロフィール画像、商品写真、サムネ素材、切り抜きしたい全部に。

on-device onnx · wasm transparent png

[ ./how_it_works ]

仕組み。

step / 01

画像を渡す

jpg / png / webp をドロップ。画像はブラウザ内の ONNX 推論パイプラインに直接渡され、サーバーには送られない。

step / 02

ML推論で被写体抽出

初回のみ ~80MB の背景抽出モデルをダウンロードしてキャッシュ。以降はオフラインでも動く。短辺 1000px なら 1-3 秒。

step / 03

透過PNGで書き出す

before/after スライダーで結果を比較し、白・黒・紫・チェッカー柄のbackdropで仕上がりを確認してから透過PNGをダウンロード。

[ ./faq ]

よくある質問。

本当に画像はサーバーに送られないのですか?+

送られません。 @imgly/background-removal は ONNX Runtime Web を WebAssembly 上で走らせて、すべての推論をブラウザ内で完結します。画像ファイルが私たちのサーバーに届くことはありません。 (初回のみ imgly の CDN から ONNX モデル本体をダウンロードします。これはモデルファイルの取得で、あなたの画像ではありません)

どのくらいの解像度まで使えますか?+

短辺 ~5000px を上限の目安にしてください。それ以上は推論時間が伸び、メモリにも影響します。一般的な写真 (~3000px) なら数秒で完了します。

髪の毛や毛皮みたいな細かい境界は綺麗に抜けますか?+

モデル次第ですが、多くのケースで実用レベルに抜けます。完璧を求めるならプロ向け SaaS が上ですが、ブラウザ完結 × 無料 × プライバシー という条件込みで考えると BGSnap の精度は十分実用に耐える水準です。

対応している画像形式は?+

ブラウザの ImageBitmap が読める形式 (jpg / png / webp / gif / avif など)。出力は常に透過 PNG です。

なぜブラウザだけにこだわるのですか?+

画像は個人情報の塊です。プロフィール写真、商品写真、子供の写真、本人確認書類の切り抜き。これらをアップロードしないと使えないサービスは、潜在的な不安と引き換えに成り立っています。WebAssembly がここまで来た以上、その不安は必要ないはずだ、というのが BGSnap の主張です。

[ ./journal ]

開発ログ。

BGSnap

BGSnap ができるまで — ブラウザ内ONNXで画像の背景を切り抜く設計

@imgly/background-removal を使って画像の背景透過をクライアント完結で実現するWebサービスの設計記録。WASM推論パイプライン、UX工夫、メディア処理ラボの3本目の位置づけを解説します。

read log →

all_entries →

← back to ai-lab.org