Tarayıcı Tabanlı Bir Arka Plan Kaldırıcıyı Nasıl Geliştirdim

İşlemem gereken 300 ürün fotoğrafı vardı. Bir Shopify mağazası için bunların arka planlarını kaldırmam gerekiyordu.

Bu henüz yayınlanmamış fotoğrafları rastgele bir sunucuya yüklemek istemedim. Tarayıcıda yerel olarak çalışan bir çözüm istiyordum.

Hangisinin en iyi çalıştığını görmek için iki farklı yöntemi test ettim.

Yöntem 1: Canvas API

Bu yöntem piksel manipülasyonu kullanır. Köşeden bir renk seçersiniz ve benzer tüm pikselleri şeffaf hale getirirsiniz.

• Artıları: Son derece hızlı. İndirilecek ekstra dosya yok. Neredeyse hiç bellek kullanmaz. • Eksileri: Arka planda gölgeler, gradyanlar veya dokular varsa başarısız olur. Tırtıklı kenarlar oluşturur.

Yöntem 2: WebAssembly (WASM) + Makine Öğrenmesi

Bu yöntem, bir kişinin veya nesnenin ne olduğunu anlamak için ONNX Runtime Web aracılığıyla bir ML modeli kullanır.

• Artıları: Saç, kürk ve karmaşık kenarları işleyebilir. Hemen hemen her türlü arka planda çalışır. • Eksileri: 8 MB'lık bir model indirmeniz gerekir. Çok daha fazla CPU ve bellek kullanır.

Sonuçlar

500 görüntüyü bir MacBook Pro üzerinde test ettim. Karşılaştırma şu şekilde:

  • Canvas hızı: Görüntü başına 12-18 ms.
  • WASM hızı: Görüntü başına 180-220 ms.
  • Canvas doğruluğu: 500 görüntüden 187 tanesi.
  • WASM doğruluğu: 500 görüntüden 412 tanesi.

Çözümüm: Hibrit Yaklaşım

Her ikisini de kullanan bir araç geliştirdim. Önce Canvas yöntemini deniyor. Eğer arka plan çok karmaşıksa ML modeline geçiş yapıyor. Bu, görüntü başına ortalama 40 ms sürüyor.

Sizin İçin Teknik İpuçları:

  • getImageData() verileri GPU'dan CPU'ya taşıdığı için gecikmeye neden olur. Zaman kazanmak için işlemlerinizi gruplandırın.
  • 3-5 kat daha hızlı hızlar için ONNX Runtime'da WebGL backend'ini kullanın.
  • Modeller için 256x256 giriş boyutuna sadık kalın. Daha büyük boyutlar, ürün fotoğrafları için yeterli fayda sağlamadan süreci 4 kat yavaşlatır.

Basit fotoğraflar için hızlı bir çözüm arıyorsanız Canvas kullanın. Kaliteye ihtiyacınız varsa Makine Öğrenmesi kullanın.

Kaynak: https://dev.to/saba_khan_50d6d6e112c484f/how-i-built-a-browser-side-background-remover-and-benchmarked-canvas-vs-webassembly-5bf2

İsteğe bağlı öğrenme topluluğu: https://t.me/GyaanSetuAi