サーバーもサブスクリプションも不要！ブラウザ上で画像から背景を削除する方法
ペットプロジェクト、商品カード、アバターのために写真から背景をすばやく削除する必要があるたびに、同じ苦労が始まります。Remove.bgのような一般的なオンラインサービスは、3回のダウンロード後に有料サブスクリプションを要求したり、画像を切手サイズに圧縮したり、Google認証を要求したりします。また、個人的な写真やすぐに使えるモックアップをサードパーティのサーバーに送信したくない場合もあるでしょう。
最近、開発者のSuvinkによるcut-it-outリポジトリを見つけました。同じことをユーザーのマシン上でブラウザ内で直接実行できるオープンソースツールです。バックエンドもキューも、サードパーティインフラストラクチャのコストも一切かかりません。
内部構造
このプロジェクトの主な特徴は、すべての計算がクライアント側で実行されることです。このリポジトリでは、ONNX RuntimeでWebAssembly（WASM）を介してU2-Netニューラルネットワークモデルを読み込む、@imgly/background-removalライブラリを使用しています。
以前、セグメンテーションネットワークの推論を実行するには、Python、PyTorch、および少なくとも控えめなGPUを備えたサーバーが必要でしたが、今はWASM + WebGL/WebGPUスタックがChromeやFirefoxのタブ内でそれを処理します。
ページを初めて開くと、ブラウザがモデル重みをダウンロードしてキャッシュし、その後受信したファイルをローカルで処理します。データはどこにも送信されません。ノートPCをインターネットから切断し、画像をウィンドウにドラッグしても、数秒以内にマスクが生成されます。
手動微調整のためのツール
ニューラルネットワークは複雑な境界で間違いを犯すことがよくあります。細い髪、透明なガラス、半ぼけ背景は、不揃いなエッジになることが多いです。CutItOutの作成者は、「背景を削除」ボタンだけに限定せず、いくつかの実用的な手動補正ツールを追加しました：
- マジックブラシ。色類似性で隣接するピクセルを選択するため、不自然に残った背景の部分をすばやく消去できます。
- 半透明レイヤー（ゴーストオーバーレイ）を使用した復元モード。ニューラルネットワークが切りすぎた場合、盲目的に必要なフラグメントを復元するのは困難です。元の画像がソフトアウトラインでハイライトされるため、ブラシを当てる場所を正確に確認できます。
- キャンバスナビゲーション。高解像度で小さな詳細を丁寧にクリーンアップするためのズームとパンがあります。
- ロスレスエクスポート。完成した結果は透かしや待機タイマーなしで、元の解像度で透明なアルファチャンネルを持つPNGとして提供されます。
プロジェクトを自分でデプロイする方法
コードベースはTypeScriptで記述されており、標準的なフロントエンドツールでビルドされます。プロジェクトをローカルで実行したり、独自のサービスの基盤として使用したりするには、Node.js 18+とnpm 9+が必要です。
リポジトリをクローンしてフォルダに移動します：
git clone https://github.com/Suvink/cut-it-out.git
cd cut-it-out
依存関係をインストールします：
npm install
ローカル開発サーバーを起動します：
npm run dev
Viteがhttp://localhost:5173でアプリを起動します。
自分でアプリをデプロイしたい場合は、1つのコマンドで静的ファイルにビルドできます：
npm run build
すべての完成したファイルはdistディレクトリに配置されます。プロジェクトはバックエンドをまったく必要としないため、Vercel、Netlify、GitHub Pagesなどの無料の静的ホスティングにこれらのファイルをアップロードできます。Dockerコンテナ、APIキーの環境変数、Celeryキュー設定のセットアップは不要です。
開発者にとってこのプロジェクトが有用的である理由
CutItOutのコードは2つの観点から興味深いです。
第一に、個人的な使用のための便利な готовый ユーティリティです。ホームサーバーで実行したりブックマークに保存したりして、何十もの画像を準備する必要がある場合に商用代替サービスを支払うことを避けることができます。
第二に、フロントエンドにおけるエッジコンピューティングアプローチの優れた実例です。ユーザーがアバターや商品写真をアップロードするアプリを構築している場合、セグメンテーションをクライアントに移動させることで 상당なコストを節約できます。クラウドGPUインスタンスに支払う代わりに、作業をユーザーのCPUに移します。リポジトリでは、著者がキャンバス操作、スケーリング、WASMライブラリのインターフェースへの統合をどのように整理しているかを確認できます。
CutItOutはApache 2.0ライセンスの下にあるクリーンで正直なプロジェクトです。特定の日常的な問題を解決し、ブラウザの機械学習能力がどれほど進化したかを明確に示しています。このプロジェクトはまだ多くのスターを獲得していませんが、コードはクリーンで理解しやすく、独自のタスクに簡単に適応できます。
関連プロジェクト