Bagaimana Saya Membina Pembuang Latar Belakang di Pihak Pelayar

Saya mempunyai 300 foto produk untuk diproses. Saya perlu membuang latar belakangnya untuk sebuah kedai Shopify.

Saya tidak mahu memuat naik foto-foto yang belum diterbitkan ini ke pelayan rawak. Saya mahukan penyelesaian yang berjalan secara tempatan di dalam pelayar.

Saya menguji dua kaedah berbeza untuk melihat yang mana paling berkesan.

Kaedah 1: Canvas API Kaedah ini menggunakan manipulasi piksel. Anda memilih satu warna dari penjuru dan menetapkan semua piksel yang serupa kepada lut sinar.

• Kelebihan: Sangat pantas. Tiada fail tambahan untuk dimuat turun. Menggunakan hampir tiada memori. • Kekurangan: Ia gagal jika latar belakang mempunyai bayang-bayang, kecerunan, atau tekstur. Ia menghasilkan tepi yang bergerigi.

Kaedah 2: WebAssembly (WASM) + Machine Learning Kaedah ini menggunakan model ML melalui ONNX Runtime Web untuk memahami apa itu manusia atau objek.

• Kelebihan: Mengendalikan rambut, bulu, dan tepi yang kompleks. Berfungsi pada hampir mana-mana latar belakang. • Kekurangan: Anda mesti memuat turun model bersaiz 8MB. Ia menggunakan jauh lebih banyak CPU dan memori.

Keputusan Saya menguji 500 imej pada sebuah MacBook Pro. Berikut adalah perbandingannya:

  • Kelajuan Canvas: 12-18 ms setiap imej.
  • Kelajuan WASM: 180-220 ms setiap imej.
  • Ketepatan Canvas: 187 daripada 500 imej.
  • Ketepatan WASM: 412 daripada 500 imej.

Penyelesaian Saya: Pendekatan Hibrid Saya membina satu alat yang menggunakan kedua-duanya. Ia mencuba kaedah Canvas terlebih dahulu. Jika latar belakang terlalu kompleks, ia akan bertukar kepada model ML. Ini memberikan purata 40 ms setiap imej.

Tip Teknikal Untuk Anda:

  • getImageData() menyebabkan kelewatan kerana ia memindahkan data dari GPU ke CPU. Lakukan operasi secara berkelompok untuk menjimatkan masa.
  • Gunakan backend WebGL dalam ONNX Runtime untuk kelajuan 3-5x lebih pantas.
  • Kekal dengan saiz input 256x256 untuk model. Saiz yang lebih besar menjadikan proses 4x lebih lambat tanpa memberi manfaat yang mencukupi untuk foto produk.

Jika anda memerlukan penyelesaian pantas untuk foto yang ringkas, gunakan Canvas. Jika anda memerlukan kualiti, gunakan Machine Learning.

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

Komuniti pembelajaran pilihan: https://t.me/GyaanSetuAi