Cómo construí un eliminador de fondos en el navegador

Tenía 300 fotos de productos para procesar. Necesitaba eliminar sus fondos para una tienda de Shopify.

No quería subir estas fotos aún no publicadas a un servidor cualquiera. Quería una solución que se ejecutara localmente en el navegador.

Probé dos métodos diferentes para ver cuál funcionaba mejor.

Método 1: Canvas API Este método utiliza la manipulación de píxeles. Seleccionas un color de una esquina y conviertes todos los píxeles similares en transparentes.

• Pros: Extremadamente rápido. Sin archivos adicionales para descargar. Consume casi nada de memoria. • Contras: Falla si el fondo tiene sombras, degradados o texturas. Crea bordes dentados.

Método 2: WebAssembly (WASM) + Machine Learning Este método utiliza un modelo de ML a través de ONNX Runtime Web para entender qué es una persona u objeto.

• Pros: Maneja cabello, pelaje y bordes complejos. Funciona con casi cualquier fondo. • Contras: Debes descargar un modelo de 8 MB. Consume mucha más CPU y memoria.

Los resultados Probé 500 imágenes en un MacBook Pro. Así fue la comparativa:

  • Velocidad de Canvas: 12-18 ms por imagen.
  • Velocidad de WASM: 180-220 ms por imagen.
  • Precisión de Canvas: 187 de 500 imágenes.
  • Precisión de WASM: 412 de 500 imágenes.

Mi solución: El enfoque híbrido Construí una herramienta que utiliza ambos. Primero intenta el método Canvas. Si el fondo es demasiado complejo, cambia al modelo de ML. Esto da un promedio de 40 ms por imagen.

Consejos técnicos para ti:

  • getImageData() causa un retraso porque mueve datos de la GPU a la CPU. Agrupa tus operaciones para ahorrar tiempo.
  • Usa el backend de WebGL en ONNX Runtime para obtener velocidades de 3 a 5 veces más rápidas.
  • Mantén un tamaño de entrada de 256x256 para los modelos. Los tamaños más grandes hacen que el proceso sea 4 veces más lento sin aportar suficiente beneficio para fotos de productos.

Si necesitas una solución rápida para fotos sencillas, usa Canvas. Si necesitas calidad, usa Machine Learning.

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

Comunidad de aprendizaje opcional: https://t.me/GyaanSetuAi