Fondo

Los diseños gráficos son la base de la comunicación entre los diseñadores de medios y su público objetivo. Desempeñan un papel fundamental en la organización de diversos elementos visuales, como texto renderizado, logotipos, imágenes de productos, llamadas a la acción (como botones) y texturas/imágenes de fondo. La disposición de estos elementos es la clave para crear anuncios, páginas web, carteles y mucho más. Los diseños elaborados por expertos tienen el poder de cautivar a los espectadores, enfatizar la información crítica y mejorar el atractivo visual general de los medios de comunicación.

Motivación

El objetivo de este proyecto es agilizar el flujo de trabajo de los diseñadores gráficos. Al crear un diseño gráfico, como un banner publicitario, los diseñadores suelen empezar por seleccionar una imagen de fondo adecuada. A continuación, marcan el anuncio incorporando elementos como el logotipo de la empresa, fuentes personalizadas, botones, eslóganes y redactando el texto del anuncio en varias categorías como encabezados, cuerpo del contenido y descargos de responsabilidad (véase la Fig. 1). Por último, ajustan meticulosamente la alineación de estos componentes visuales, al tiempo que eligen cuidadosamente la paleta de colores adecuada. Este proceso exige la pericia de diseñadores experimentados y no es fácilmente escalable para necesidades de producción masivas y diversas.

Fig. 1. Un ejemplo de anuncio bien diseñado. Un ejemplo de banner publicitario bien diseñado, compuesto por una imagen de fondo, una imagen de producto y tres tipos de texto.

Nuestro enfoque pretende aliviar el laborioso trabajo de ensamblaje capa por capa aprovechando la potencia de múltiples técnicas de IA generativa. Estos modelos han sido entrenados en una gran escala de datos gráficos diseñados profesionalmente, lo que nos permite considerar el lienzo de fondo y acelerar significativamente el proceso de diseño.

BannerGen

Diseño del sistema

Con el fin de inspirar la creatividad de los usuarios proporcionando una variedad de ideas de diseño, nuestro sistema comprende tres métodos distintos de generación de banners en paralelo: LayoutDETR, LayoutInstructPix2Pix, y Framed Template RetrieveAdapter.

Hemos abierto los tres modelos de generación de banners y su implementación en nuestro repositorio BannerGen GitHub. Estos métodos de generación de banners se han diseñado como módulos Python importables. Nuestro proyecto de código abierto permite a investigadores y desarrolladores experimentar rápidamente con cada uno de los métodos. Además, al incorporar fuentes con licencia y una colección ampliada de plantillas enmarcadas cuidadosamente elaboradas, los desarrolladores pueden aprovechar sin esfuerzo nuestros módulos de código abierto para crear una herramienta de asistencia al diseño de banners de alta calidad y calidad profesional.

En concreto, nuestra biblioteca de código abierto BannerGen está estructurada en la Fig. 2, y cada módulo se presenta en las secciones siguientes.

Fig. 2. BannerGen. El diseño de nuestro sistema incorpora tres módulos distintos de generación de banners en paralelo, cada uno de ellos procesado posteriormente por el mismo renderizador, que superpone los contenidos en primer plano sobre una imagen de fondo. Dentro de este marco, un código de envoltura, banner_gen.py, desempeña un papel central en la configuración de los pasos de preparación, el análisis sintáctico de las entradas del usuario, la carga de los pesos del modelo y la llamada a uno de los generadores según sea necesario.

Generación de diseños basada en layoutDETR [arXiv]

Fig. 3. El marco de entrenamiento unificado LayoutDETR cubre tres variantes de generadores: GAN, VAE y VAE-GAN. La red generadora de layout (color más oscuro y negrita) aparece en todas las variantes. Su arquitectura multimodal basada en DETR aparece en la parte inferior izquierda. Durante la inferencia, sólo se necesita el generador.

Al diseñar el generador de trazados, tenemos en cuenta tres criterios clave:

Criterio nº 1: Aprender de maquetaciones reales. Nuestro objetivo principal es aprender y generar diseños que se ajusten a los patrones encontrados en las distribuciones del mundo real. Para lograrlo, hemos integrado el marco VAEGAN en nuestro enfoque. En este marco, el generador (Fig. 3, azul) toma elementos multimodales de fondo y primer plano como entradas y produce parámetros de cuadro delimitador para cada elemento de primer plano. Un codificador (Fig. 3, azul) precede al generador, mientras que un discriminador (Fig. 3, amarillo) le sigue. Tanto el codificador como el discriminador reciben como entrada el conjunto de recuadros delimitadores. El codificador genera incrustaciones latentes para cada cuadro delimitador, mientras que el discriminador produce logits de clasificación binaria para diferenciar entre diseños reales y falsos. Además, hemos incluido un decodificador auxiliar (Fig. 3, amarillo) después del discriminador y un reconstructor auxiliar (Fig. 3, verde) después del generador para garantizar que las salidas del discriminador y del generador estén totalmente condicionadas a sus elementos de entrada sin ningún atajo. Durante el entrenamiento, entrenamos conjuntamente el codificador, el generador y su reconstructor auxiliar para codificar y reconstruir diseños reales. Mientras tanto, entrenamos de forma adversa al discriminador y a su decodificador auxiliar para clasificar los diseños como reales o falsos. Durante la inferencia, sólo se conserva el generador, y tomamos muestras del espacio latente para generar diseños.

Criterio nº 2: Comprensión del fondo. Para lograrlo, nos hemos inspirado en los principios de detección de objetos y hemos incorporado la arquitectura DETR a nuestro marco. De ahí que denominemos a nuestro método LayoutDETR. En concreto, codificamos las imágenes de fondo utilizando Transformadores de Visión (ViT) y empleamos estas incrustaciones para la atención cruzada con el generador de diseño, aprovechando el decodificador de la implementación DETR (véase la Fig. 3, abajo a la izquierda).

Criterio #3: Comprensión de los elementos en primer plano. Para lograrlo, hemos modificado el descodificador DETR para que gestione entradas de primer plano multimodales. Los elementos de texto, en particular, se caracterizan por su contenido, longitud y categoría textual. Estas categorías, definidas por profesionales del marketing, abarcan textos de cabecera de anuncios, textos del cuerpo, textos de descargo de responsabilidad, textos de botones, etc. (véase la Fig. 3, abajo a la izquierda). Para cada elemento en primer plano, codificamos cada atributo por separado y concatenamos sus incrustaciones como entrada de consulta para los transformadores del generador.

Generación de diseños basada en layoutInstructPix2Pix

Fig. 4. El diagrama LayoutInstructPix2Pix comienza con un prompt de entrada que incluye el contenido del texto y sus atributos asociados, resaltados en rojo. A continuación, se extrae el layout, representado por bounding box(es) en rosa, basándose en las diferencias entre las imágenes de entrada y salida. El modelo se ajusta a partir de los pesos y la implementación oficiales de InstructPix2Pix.

Además de LayoutDETR, el sistema BannerGen incorpora un generador de diseños complementario que se alinea con la técnica emergente de edición imagen a imagen conocida como InstructPix2Pix, que se basa en modelos de difusión. El objetivo de la integración de InstructPix2Pix es convertir los elementos de texto en primer plano y sus atributos asociados en instrucciones que guíen la edición de las imágenes de fondo. Posteriormente, perfeccionamos InstructPix2Pix para transformar imágenes de fondo limpias en imágenes con texto superpuesto, como se muestra en la Fig. 4. Aprovechamos la notable capacidad de control de InstructPix2Pix, al tiempo que reconocemos sus limitaciones en cuanto a la calidad de la generación de texto. Como resultado, nuestro enfoque se centra en extraer únicamente la información de diseño representada por los cuadros delimitadores de los textos tras la edición de la imagen, sin tener en cuenta los píxeles textuales.

Framed Template RetrieveAdapter

Fig. 5. Ejemplos de plantillas enmarcadas creadas por la empresa. Ejemplos de plantillas enmarcadas creadas por diseñadores de Salesforce.

Para mejorar la diversidad de diseños generados, introducimos un enfoque adicional conocido como Framed Template RetrieveAdapter. Este enfoque está diseñado para acomodar las entradas multimodales de los usuarios dentro de las plantillas enmarcadas recuperadas. Nuestro diseñador UX, Paul Josel, ha creado meticulosamente 56 plantillas de banners enmarcadas distintas para su recuperación, como se muestra en la Fig. 5. Estas plantillas presentan varios estilos de fondo, como el de la imagen de fondo, el de la imagen de fondo y el de la imagen de fondo. Estas plantillas presentan varios estilos de fondo, como texturas claras, degradados, colores uniformes o combinaciones de los mismos. La capa de fondo sirve de lienzo para otros tres tipos de capas de primer plano: (1) capas de texto de copia de anuncios, que incluyen encabezados, texto del cuerpo, etc.; (2) capas de marcadores de posición de imágenes, representadas como máscaras de formas geométricas comunes; (3) capas compuestas, que pueden incluir elementos opcionales como botones.

En esencia, en lugar de emplear la imagen de entrada del usuario como fondo del banner, la «enmarcamos» como capa de imagen de primer plano. Para integrar perfectamente la imagen de entrada en el banner, hemos desarrollado un algoritmo de recorte inteligente que identifica subventanas destacadas dentro de la imagen de entrada. Estas subventanas suelen preservar objetos destacados en primer plano, como rostros humanos, productos, logotipos y otros. Cuando se recupera una plantilla enmarcada, se selecciona una de estas subventanas salientes en función del tamaño y la relación de aspecto de la capa de la imagen de la plantilla. Por último, un renderizador compila scripts HTML y CSS para fusionar todas las capas en un archivo HTML, lo que permite la renderización y los ajustes manuales.

En resumen, nuestro método RetrieveAdapter consta de tres componentes principales:

  1. Retriever: este componente recupera las plantillas enmarcadas más adecuadas basándose en métricas predefinidas, incluyendo el número y tipo de copias de anuncios proporcionadas por el usuario, puntuaciones de coincidencia de longitud de texto, etc.
  2. Adaptador: el adaptador personaliza el texto y las imágenes introducidas por el usuario para que encajen en cada plantilla enmarcada coincidente.
  3. Renderizador: este componente produce cada banner publicitario en HTML/CSS mezclando a la perfección la capa de fondo con capas adaptadas a las entradas del usuario.

Renderizado de diseño a imagen

El objetivo de nuestro renderizador de banners es seguir cada uno de los generadores de diseño anteriores y rasterizar sin problemas las entradas multimodales de los usuarios junto con las predicciones de cuadro delimitador de nuestros generadores, adaptándose a la modalidad de entrada específica. Esto implica las siguientes acciones:

  1. Para los textos:
    1. Renderizar el contenido del texto de entrada de acuerdo con la familia de fuentes, el color y las mejoras especificadas por el usuario.
    2. Calcular el tamaño máximo de la fuente basándose en la predicción del cuadro delimitador del texto.
    3. Alineación del contenido de texto según el argumento de postprocesamiento especificado.
  2. Para imágenes:
    1. Realización de mezcla alfa con la subimagen recortada de forma inteligente, basada en la capa de imagen enmascarada.

Nuestro proceso de renderizado genera banners en dos formatos distintos: HTML y PNG. Proporcionamos el banner renderizado en formato HTML para facilitar su posterior manipulación. Simultáneamente, nuestro renderizador realiza una captura de pantalla del banner HTML utilizando un navegador Chrome sin navegador. Estos archivos PNG guardados representan el resultado final y están listos para incrustarse en cualquier medio o para su uso inmediato.

Resultados

Fig. 6. Resultados de la generación del diseño y del renderizado del texto. Resultados de generación de layout y renderizado de texto. Izquierda: LayoutDETR. Derecha: LayoutInstructPix2Pix. Ambos métodos generan layouts en ubicaciones y escalas razonables, de modo que los textos renderizados tienen un aspecto agradable junto con las imágenes de fondo.
Fig. 7. Dos banners renderizados creados usando el Framed Template RetrieveAdapter. En cada presentación, la imagen inicial (sin ningún texto) es la imagen de entrada proporcionada por el usuario. Esta imagen de entrada se somete a un proceso de recorte inteligente para generar múltiples subimágenes, centrándose en los objetos destacados en primer plano. A continuación, estas subimágenes seleccionadas se integran perfectamente en las capas de imágenes de las plantillas enmarcadas superiores recuperadas en función de las entradas del usuario, incluidos los tipos y longitudes de texto.

Bottom Line

BannerGen allana el camino hacia el diseño de maquetas personalizables. Hereda la calidad de generación y la capacidad de control de los modelos generativos modernos y, a su vez, facilita una generación de diseños eficiente y escalable. Hemos integrado todos los módulos anteriores en código abierto, con el propósito de inspirar trabajos posteriores en esta dirección, así como acelerar las iteraciones de implementación.

    Entradas recomendadas

    Red Teaming xGen Modelo de generación de textos para la seguridad
    xGen-Sales: IA de última generación para Sales Cloud
    Zero Copy revoluciona la nube de datos con análisis en tiempo real