ブラウザ側で動作する背景削除ツールを構築した方法
処理すべき300枚の商品写真がありました。Shopifyストアのために、それらの背景を削除する必要がありました。
未公開のこれらの写真を、どこにでもあるようなサーバーにアップロードしたくはありませんでした。ブラウザ内でローカルに動作するソリューションを求めていました。
どちらが最適かを確認するために、2つの異なる手法をテストしました。
手法1: Canvas API この手法はピクセル操作を利用します。隅にある色を選択し、それと似たすべてのピクセルを透明に設定します。
• メリット: 非常に高速。追加のダウンロードファイルなし。メモリ消費がほとんどない。 • デメリット: 背景に影、グラデーション、テクスチャがある場合に失敗する。エッジがギザギザになる。
手法2: WebAssembly (WASM) + 機械学習 この手法は、ONNX Runtime Webを介してMLモデルを使用し、何が人物や物体であるかを理解します。
• メリット: 髪の毛、毛皮、複雑なエッジにも対応。ほぼあらゆる背景で動作する。 • デメリット: 8MBのモデルをダウンロードする必要がある。CPUとメモリを大幅に消費する。
結果 MacBook Proで500枚の画像をテストしました。比較結果は以下の通りです。
- Canvasの速度: 1枚あたり12〜18 ms。
- WASMの速度: 1枚あたり180〜220 ms。
- Canvasの精度: 500枚中187枚。
- WASMの精度: 500枚中412枚。
私の解決策: ハイブリッド・アプローチ 両方を使用するツールを構築しました。まずCanvasの手法を試し、背景が複雑すぎる場合はMLモデルに切り替えます。これにより、平均で1枚あたり40 msとなります。
技術的なヒント:
getImageData()はデータをGPUからCPUに移動させるため、遅延が発生します。時間を節約するために、操作をバッチ処理してください。- 3〜5倍高速化するために、ONNX RuntimeではWebGLバックエンドを使用してください。
- モデルの入力サイズは256x256に固定してください。サイズを大きくすると、商品写真としてのメリットが十分でないにもかかわらず、処理速度が4倍遅くなります。
シンプルな写真に対して素早い修正が必要ならCanvasを、品質が必要なら機械学習を使用してください。
オプションの学習コミュニティ: https://t.me/GyaanSetuAi