En el artículo anterior propuse que creando contenido con Inteligencia Artificial y software libre se pueden lograr resultados mucho mejores que solo pidiendo que haga algo. Se trata de aprovechar la característica de muchos de estos programas de automatizar tareas usando lenguajes de programación o formatos de imágenes que permiten construirlas mediante instrucciones de texto.

Durante años, el gran problema del software libre y de código abierto, particularmente el enfocado al diseño, fue la falta de documentación. La curva de aprendizaje era muy alta y no se justificaba si tenías a tu disposición multitud de tutoriales en Internet que te decían cómo hacer las cosas usando software privativo.

Los modelos de Inteligencia Artificial vinieron a solucionar esto. Tienes al alcance de tu teclado un maestro capaz de explicarte cómo se hace lo que quieres hacer. Incluso puede construirte un script que lo haga.

Creando contenido con Inteligencia Artificial y software libre

La pregunta que puedes estarte haciendo si no leíste el artículo anterior es ¿Por qué tomarse la molestia? Solo tienes que darle al modelo que más te guste una descripción detallada de lo que quieres lograr y él hace todo el trabajo.

Hay dos razones: En primer lugar, los mejores resultados se logran con modelos de pago y el consumo de tokens en la generación de imágenes es alto. En segundo lugar, todos los resultados se terminan pareciendo.

Además, las empresas detrás de los modelos están comenzando a insertar marcas de agua en las creaciones generadas por Inteligencia Artificial, las plataformas de contenidos a penalizarlas y los consumidores a rechazarlas.

Un punto más a favor de la colaboración entre software libre e Inteligencia Artificial es que para generar imágenes se requiere un hardware que está por encima del que poseemos la mayoría de los usuarios. Sin embargo, una PC moderna puede correr modelos locales que generen código. Lo que pasa en tu Disco de Estado Sólido se queda en tu Disco de Estado Sólido.

Por supuesto que nos estamos refiriendo a un tipo especial de imágenes que usan el formato SVG.  Aunque no es el mejor de los formatos para crear imágenes fotorealistas, es insuperable para diagramas, ilustraciones, infografías e iconos.

• Permite definir una sola vez los elementos que se utilizarán varias veces como sombras y colores.
• Permite agrupar los elementos para asignarles las características que tienen en común.
• Permite crear los elementos en la esquina superior izquierda y después moverlos a su posición final.
• Permite que su diseño se adecue a diferentes tamaños de pantalla.

Modificando nuestra infografía

En nuestro artículo anterior le había pedido a ChatGPT que me generara el código de una imagen como esta pero sin el texto.

Utilizando esta infografía como base, le pediremos a un modelo de Inteligencia Artificial que nos genere otra como base para la modificación.

Lo que obtuve fue esto:

No son dos gotas de agua porque no necesitaba que lo fueran. Solo quería la estructura básica. Ahora puedo hacer las modificaciones que quiera moviendo o copiando elementos en un editor como Inkscape o agregándole textos con El Gimp.

De todas formas, como veremos más adelante, es posible lograr un resultado más parecido al del original mejorando el prompt.

Por el momento, veamos el código:

Vamos a analizar las diferentes partes del programa. Como el gestor de contenidos que usamos no permite mostrar código XML, tengo que remitirme a las líneas indicadas en la ventana de arriba. Puedes ir navegando por el código pulsando con el ratón sobre ella o pulsando donde dice SEE ORIGINAL para verlo completo.

Línea 1

Indica al programa que abre el archivo que debe considerarlo una imagen SVG. Establece el ancho y el alto que tendrá la imagen y un sistema de coordenadas que permitirá ampliar o reducir la imagen sin pérdida de calidad.

Línea 2
Comienza una serie de definiciones de partes de la imagen que pueden reutilizarse.

Líneas 3 a 21

Establecen los degradados que van en forma lineal diagonal desde la esquina superior izquierda a la inferior derecha para los diferentes colores utilizados. La etiqueta stop define los colores de inicio y final.

Líneas 22 a 24

Esto crea un efecto de sombra suave, la posiciona 4 píxeles abajo y le da un aspecto borroso desenfocándola y mezclandola con la figura original.. Esto hace que los paneles de la infografía parezcan elevarse por sobre el fondo.

Líneas 25 a 27

Esto funciona como las hojas de estilo de los sitios web. A todos los elementos que sean de un mismo tipo o clase les corresponderán las mismas características. En este caso, las líneas no tendrán relleno y sus extremos serán redondeados.

Línea 28

Cierra el bloque de definición de elementos reutilizables.

Líneas 30 a 32

Dibuja un rectángulo que cubre todo el lienzo y pone como fondo el degradado que definimos entre las líneas 3 y 6. Indica posición, ancho, alto, color y ancho de la línea.

Líneas 34 a 51

La instrucción g agrupa elementos a los que se les aplica una característica. En este caso, es una opacidad del 38 %.

La instrucción path d indica que se dibujarán líneas. M mueve el cursor y L dibuja una línea. Circle dibuja los puntos que marcan las intersecciones de las líneas, lo que permite construir el patrón de red que vemos en las esquinas de la infografía. En los circle cambia el valor de fill porque queremos que el interior tenga un color sólido.

Líneas 54 a 69

En esta parte se dibujan las formas de la parte superior de la infografía. No son exactamente iguales a las de la imagen de referencia y lo corregiremos más adelante.

Las líneas 54 a 63 trazan los rectángulos de los costados, dándoles un borde redondeado con rx=»9″.

Las líneas 64 a 69 construyen mediante la instrucción path la figura hexagonal del centro, incluyendo instrucciones sobre el color y ancho de las líneas.

Líneas 72 a 83

Aquí se trazan los 5 paneles. Como vemos, las instrucciones son las mismas, con solo un cambio de posición.

Con la instrucción g se les asigna una sombra a los 5 paneles para que haya un efecto tridimensional y con rx se les redondea el borde. Las demás instrucciones establecen el color y ancho de la línea y el color de relleno.

Líneas 86 a 340

Estas líneas definen los diferentes elementos ubicados dentro de los paneles. Vamos a verlos en profundidad en el próximo artículo, donde procederemos a modificar nuestra infografía trabajando tanto con el código como con la imagen.

Artículo original