Come ho creato un rimosore di sfondo lato browser

Avevo 300 foto di prodotti da elaborare. Dovevo rimuovere i loro sfondi per un negozio Shopify.

Non volevo caricare queste foto non ancora pubblicate su un server qualsiasi. Volevo una soluzione che girasse localmente nel browser.

Ho testato due metodi diversi per vedere quale funzionasse meglio.

Metodo 1: Canvas API Questo metodo utilizza la manipolazione dei pixel. Si sceglie un colore da un angolo e si impostano tutti i pixel simili come trasparenti.

• Pro: Estremamente veloce. Nessun file extra da scaricare. Consuma quasi zero memoria. • Contro: Fallisce se lo sfondo presenta ombre, gradienti o texture. Crea bordi frastagliati.

Metodo 2: WebAssembly (WASM) + Machine Learning Questo metodo utilizza un modello ML tramite ONNX Runtime Web per capire cosa sia una persona o un oggetto.

• Pro: Gestisce capelli, pelliccia e bordi complessi. Funziona su quasi ogni sfondo. • Contro: È necessario scaricare un modello da 8MB. Utilizza molta più CPU e memoria.

I Risultati Ho testato 500 immagini su un MacBook Pro. Ecco il confronto:

  • Velocità Canvas: 12-18 ms per immagine.
  • Velocità WASM: 180-220 ms per immagine.
  • Accuratezza Canvas: 187 su 500 immagini.
  • Accuratezza WASM: 412 su 500 immagini.

La mia soluzione: l'approccio ibrido Ho costruito uno strumento che utilizza entrambi. Prova prima il metodo Canvas. Se lo sfondo è troppo complesso, passa al modello ML. Questo garantisce una media di 40 ms per immagine.

Consigli tecnici per te:

  • getImageData() causa un ritardo perché sposta i dati dalla GPU alla CPU. Elabora le operazioni in batch per risparmiare tempo.
  • Usa il backend WebGL in ONNX Runtime per velocità da 3-5 volte superiori.
  • Mantieni una dimensione di input di 256x256 per i modelli. Dimensioni maggiori rendono il processo 4 volte più lento senza offrire benefici sufficienti per le foto dei prodotti.

Se hai bisogno di una soluzione rapida per foto semplici, usa Canvas. Se hai bisogno di qualità, usa il Machine Learning.

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

Community di apprendimento opzionale: https://t.me/GyaanSetuAi