Saltar al contenido principal

Walmart Activation Totem – Guía Gafetes

Fecha de creación: 24 de junio de 2026
Autor: Antonio Díaz

Introducción​

En Inmersys, nuestra experiencia con Walmart Activation Tótem está diseñada para ofrecer gafetes personalizados por medio de Gemini AI de Google.

Implementación de SVG o PNG​

Durante la fase de desarrollo hubo un problema de optimización debido al uso indebido de SVG en vez de PNG o JPG. La utilización correcta de los formatos sería la siguiente:

FormatoCuándo usarloVentajasDesventajas
SVGÍconos, logos, ilustraciones, gráficos simplesEscala sin perder calidad, pesa muy poco, se puede modificar con CSS y JavaScriptNo sirve para fotografías ni imágenes muy complejas
PNGImágenes con transparencia, capturas de pantalla, elementos de UICalidad sin pérdida, soporta transparenciaArchivos más pesados que JPG
JPG/JPEGFotografías e imágenes con muchos coloresMuy ligero para fotosPierde calidad al comprimirse, no soporta transparencia

Responsividad​

Durante el desarrollo, al intentar mantener la responsividad se editó la página de resultado del gafete para hacerla adaptativa. Esto causaba que al cambiar la dimensión de la pantalla, el gafete se mostrara diferente al guardarse o imprimirse.

La solución aplicada fue:

  • Modo gallery (lista de gafetes): la imagen tiene un tamaño fijo de 600px.
  • Modo default: se elimina la altura explícita para no generar espacio vacío blanco en la exportación.

Mejora de impresión en la imagen​

Durante la fase de ejecución se mostró una impresión con poca opacidad o de mala calidad. Para resolverlo, en ListItemPhoto.jsx se realizaron los siguientes cambios:

  • Se aplicó ctx.filter con los siguientes valores para mejorar la calidad visual de la imagen exportada:
ctx.filter = "saturate(120%) contrast(108%) brightness(105%)";
  • Se cambió el formato de exportación de .png a .jpg.
  • Se incrementó la escala del canvas a 3 para mayor resolución en la imagen final.

Repositorio BACKEND​

Problema con CORS​

En el desarrollo hubo un problema al usar la API: el cors() sin opciones no permite credentials: true, lo que bloqueaba las peticiones POST con Authorization header al generar las imágenes de los gafetes — el navegador rechazaba la respuesta preflight antes de enviar la petición real.

La solución aplicada fue configurar CORS explícitamente:

const corsOptions = {
    origin: (origin, callback) => callback(null, true),
    methods: ["GET", "POST", "PUT", "DELETE", "PATCH", "OPTIONS"],
    allowedHeaders: [
        "Content-Type",
        "Authorization",
        "X-Requested-With",
        "Accept",
        "Origin",
    ],
    credentials: true,
    optionsSuccessStatus: 200,
};

this.app.use(cors(corsOptions));
this.app.options("*", cors(corsOptions));

Prompt Utilizado​

El prompt final para la generación de personas en los gafetes utilizó una imagen de composición de referencia (example_composition.png) que define la pose esperada del personaje generado.

Imagen de referencia de composición (example_composition.png):

Silueta con wireframe 3D sobre fondo verde chromakey, encuadre hasta la cintura, sujeto mirando hacia la derecha.

#Generacion:
- La persona de la imagen[2] (fotografia) debe ser representada como un personaje de animacion 3D cartoon Disney-Pixar.
  Render with smooth skin, soft volumetric 3D lighting, expressive rounded eyes, and clean geometry.
  The character is smiling warmly, High detail, polished 3D render, studio lighting, shallow depth of field, high resolution.
- No queremos acercarnos a la realidad, debe ser más estilo caricatura.
- Solo interesa convertir a la persona.
- El background del sujeto debe ser convertido a un chromakey de color verde (#00ff00).
  Esto es importante porque la imagen pasará a otro proceso para eliminar el background.
- El sujeto debe ser lo más parecido a la de la foto.
- Si tiene accesorios como lentes, audífonos, etc., estos se deben mantener con el estilo esperado.
- Genera la imagen hasta la cintura de la persona.
- *Únicamente* si el sujeto tiene ropa verde, cámbiala a color azul.
- Composición técnica: El sujeto debe replicar la posición de imagen[1] example_composition.png
  (la imagen que muestra el ejemplo esperado con fondo verde).
  Deben ser REPLICADAS TAL CUAL mirando hacia la derecha.
- Solo replica la posición, no cambies rasgos faciales ni peinado.
  El sujeto debe ser lo más parecido a la foto original (no la verde, la foto de persona) imagen[2]
  pero con el estilo de animación 3D Disney/Pixar.

Limitaciones:
- No deben aparecer textos, logos, marcas en la imagen.
- El fondo debe desaparecer y usar el chromakey.
- No debe ser fotorrealista.
- No debe ser cartoon plano.
- No debe ser realista.
- No se deben cortar los hombros.

Investigaciones compatibles​