Transferencia de estilo con TensorFlow.js

MAMB ejecuta la transferencia de estilo artístico en el navegador usando TensorFlow.js. La foto original nunca sale del dispositivo del usuario: la inferencia corre en su CPU/GPU local.

¿Qué es la transferencia de estilo?

Es una técnica de visión por computador que toma dos imágenes — una de contenido (la foto del usuario) y una de estilo (la obra de referencia del museo) — y produce una nueva imagen que preserva el contenido pero aplica la estética de la segunda.

Arquitectura del flujo

Comparador antes / después

Una vez procesado, el usuario ve su foto original y la versión estilizada lado a lado, y puede comparar arrastrando el slider:

Captura del comparador en el paso 3 del stepper de subida.

Hook useStyleTransfer

Encapsula el ciclo de vida del modelo y del procesamiento:

• Carga el modelo de forma diferida (no afecta el LCP del home).
• Mantiene el modelo en memoria entre transferencias.
• Expone status: 'idle' | 'loading' | 'processing' | 'ready' | 'error'.
• Procesa en un <canvas> oculto para no bloquear la UI.
• Devuelve un Blob listo para subir a Storage.

Estilos disponibles

Estilo	Referencia
Expresionismo Barranquillero	Mural/obras del MAMB
Abstracto Moderno	Colección permanente
Cubismo	Serie cubista del museo
Pop Art	Exhibición temporal

Los modelos se sirven como assets versionados; el cliente los cachea con el service worker de la PWA.

Limitaciones conocidas

• Resolución efectiva ~512×512 px para mantener el rendimiento en dispositivos de gama media.
• En GPUs integradas el procesamiento puede tardar 4–8 s por imagen.
• Solo se procesa una imagen a la vez por pestaña.