Compatibilidad y rendimiento de navegadores para quitar fondos en el cliente

Qué tiene que ofrecer el navegador

Un eliminador de fondos en el cliente funciona dentro de una página web, así que todas las capacidades que necesita tiene que ofrecerlas el navegador, no una instalación. Importan cuatro, y un dispositivo al que le falte cualquiera de ellas no puede ejecutar la herramienta.

WebAssembly ejecuta el modelo dentro del propio entorno aislado del navegador, lo que mantiene el material de una herramienta en el cliente en tu dispositivo; bgremover.ai, en cambio, lo sube a nuestros servidores GPU, como explica cómo funciona quitar el fondo. La inferencia es sobre todo multiplicación de matrices, así que pide una GPU: WebGL la expone mediante una API gráfica y WebGPU mediante una API de cómputo.

Sin ninguna de las dos, la inferencia recurre a la CPU. Además, algo tiene que codificar los fotogramas terminados en un archivo: MediaRecorder, la vía más compatible, o WebCodecs, la más precisa. El cuarto requisito, la memoria para los fotogramas decodificados, es el más subestimado.

Tres vías de ejecución

WebGL es un apaño más que un diseño: la API se creó para dibujar triángulos, y mover datos mediante texturas cuesta tiempo. Aun así, sigue siendo la opción práctica por defecto. WASM compite por el hilo principal salvo que el trabajo pase a un worker, y BEN2 necesita WebGPU con FP16, así que solo funciona en GPU de escritorio recientes.

Esto lo decide la disponibilidad, no la preferencia: una herramienta que solo implementa WebGPU es rápida donde funciona y no existe en ningún otro sitio.

Por qué la primera ejecución es más lenta

1. 1 El modelo se descarga una vez

   Antes de procesar ningún fotograma.

2. 2 Se inicializa y se calienta

   Después pasa el primer fotograma.

3. 3 Los clips siguientes se saltan ambos pasos

   Se sirve desde la caché, así que solo queda la inicialización.

Por eso, una herramienta en el cliente debería cargar el modelo cuando el usuario hace un gesto, no al cargar la página: megabytes de WebAssembly llegando nada más entrar harían que la página pareciera rota para quien solo vino a leer.

Las cuentas de los fotogramas decodificados

Un fotograma de video decodificado son píxeles sin comprimir, así que la resolución es lo que más pesa en la memoria.

Esas cifras son cuentas, no mediciones, y el tamaño del archivo comprimido es una mala referencia. Nada necesita todos los fotogramas decodificados a la vez, pero el flujo mantiene un conjunto de trabajo: el fotograma que se decodifica, el que se segmenta, su máscara, la composición y el búfer del codificador.

Multiplica unos cuantos fotogramas por 33 MB en 4K y el presupuesto de una pestaña empieza a importar, sobre todo en un teléfono. Si un clip largo de alta resolución falla o la pestaña se recarga, reduce la resolución en lugar de la duración: dividir cada dimensión a la mitad reduce la memoria a la cuarta parte.

Qué determina el tiempo de procesamiento

Son relaciones, no cifras: un tiempo medido en un portátil no te dice nada sobre un teléfono.

• Número de fotogramasDuración por fotogramas por segundo; 60 fps es el doble que 30 fps.
• ResoluciónDetermina la decodificación, la composición y la codificación; la inferencia no cambia.
• Vía de ejecuciónWebGPU, WebGL y WASM-SIMD rinden distinto en una misma máquina.
• Tipo de dispositivoLas GPU de escritorio, de portátil y de móvil son tres máquinas distintas.
• Elección del modeloEl matting cuesta más por fotograma que MediaPipe.
• Estado térmicoUn trabajo de GPU sostenido en un móvil caliente se ralentiza.

Tabla de compatibilidad de navegadores

Antes de que el sitio afirme una compatibilidad universal, aquí debería ir una verificación por navegador. Lo que podemos afirmar sin probarlo es arquitectónico: una herramienta en el cliente necesita WebAssembly y una vía de GPU, no WebGPU. bgremover.ai necesita WebCodecs, que usa para preparar la subida y generar la exportación.

La situación real en el móvil

Para una herramienta en el cliente, el poco peso de la segmentación de selfies de MediaPipe es lo que hace viables los navegadores móviles. Unos pocos megabytes con una demanda de memoria modesta caben en el presupuesto de una pestaña en el teléfono; un modelo para GPU de escritorio, no. bgremover.ai evita el problema ejecutando su modelo en servidores GPU; el teléfono sigue decodificando y codificando el clip.

No vamos a afirmar una compatibilidad móvil universal antes de probar navegador por navegador. El móvil es más difícil: menos memoria por pestaña, cierre agresivo de pestañas, limitación térmica. Los clips más cortos y de menor resolución son la vía fiable, y las fotos con el eliminador de fondo de fotos cuestan un solo fotograma.

Preguntas frecuentes