Cara Saya Membangun Penghapus Latar Belakang di Sisi Browser

Saya memiliki 300 foto produk untuk diproses. Saya perlu menghapus latar belakangnya untuk toko Shopify.

Saya tidak ingin mengunggah foto-foto yang belum dirilis ini ke server sembarangan. Saya menginginkan solusi yang berjalan secara lokal di browser.

Saya menguji dua metode berbeda untuk melihat mana yang bekerja paling baik.

Metode 1: Canvas API

Metode ini menggunakan manipulasi piksel. Anda memilih warna dari sudut dan mengatur semua piksel serupa menjadi transparan.

• Kelebihan: Sangat cepat. Tidak ada file tambahan yang perlu diunduh. Hampir tidak menggunakan memori. • Kekurangan: Metode ini gagal jika latar belakang memiliki bayangan, gradasi, atau tekstur. Ini menghasilkan tepi yang bergerigi.

Metode 2: WebAssembly (WASM) + Machine Learning

Metode ini menggunakan model ML melalui ONNX Runtime Web untuk memahami apa itu orang atau objek.

• Kelebihan: Dapat menangani rambut, bulu, dan tepi yang kompleks. Berhasil pada hampir semua latar belakang. • Kekurangan: Anda harus mengunduh model berukuran 8MB. Menggunakan CPU dan memori yang jauh lebih besar.

Hasilnya

Saya menguji 500 gambar pada MacBook Pro. Berikut adalah perbandingannya:

  • Kecepatan Canvas: 12-18 ms per gambar.
  • Kecepatan WASM: 180-220 ms per gambar.
  • Akurasi Canvas: 187 dari 500 gambar.
  • Akurasi WASM: 412 dari 500 gambar.

Solusi Saya: Pendekatan Hybrid

Saya membangun alat yang menggunakan keduanya. Alat ini mencoba metode Canvas terlebih dahulu. Jika latar belakang terlalu kompleks, ia akan beralih ke model ML. Ini menghasilkan rata-rata 40 ms per gambar.

Tips Teknis untuk Anda:

  • getImageData() menyebabkan penundaan karena memindahkan data dari GPU ke CPU. Lakukan operasi secara batch untuk menghemat waktu.
  • Gunakan backend WebGL di ONNX Runtime untuk kecepatan 3-5x lebih cepat.
  • Tetap gunakan ukuran input 256x256 untuk model. Ukuran yang lebih besar membuat proses 4x lebih lambat tanpa memberikan manfaat yang sepadan untuk foto produk.

Jika Anda membutuhkan solusi cepat untuk foto sederhana, gunakan Canvas. Jika Anda membutuhkan kualitas, gunakan Machine Learning.

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

Komunitas belajar opsional: https://t.me/GyaanSetuAi