Si aún no sabes lo que es TlDraw agárrate. ¿Y si, en un futuro cercano, es necesario saber dibujar para ser programador frontend (es decir, de interfaces de usuario)? Esta es la posible realidad que nos introduce una innovadora herramienta que nos permite imaginar un diseño de programa simple, dibujarlo, y tenerlo. Hablamos de pintar un piano y tenerlo. Pintar un conversor de libras a kilos y tenerlo.

Hace unos días que vio la luz una suerte de pizarra colaborativa llamada «tldraw» cuya función «Make it Real» hace posible dibujar un boceto de una interfaz de usuario (o una página web, o una calculadora) y convertirla en software mediante inteligencia artificial. A continuación, en Diario IA te explicamos cómo funciona esta herramienta para programar con inteligencia artificial.

(Relacionado: ¿Se puede hacer un juego como Flappy Bird usando sólo ChatGPT?: sí y no)

¿Qué es TlDraw y para qué sirve?

Tldraw, desarrollada por Steve Ruiz en Londres, es una aplicación de dibujo digital colaborativa que permite a los usuarios trabajar juntos en un lienzo en tiempo real. Se trata de una herramienta gratuita y de código abierto disponible para su uso en el navegador web o como aplicación de escritorio.

TlDraw se puede utilizar para una variedad de propósitos, incluyendo:

  • Dibujo técnico: TlDraw es una herramienta útil para crear dibujos técnicos, como planos, diagramas y esquemas. Los usuarios pueden usar herramientas como líneas, círculos, rectángulos y texto para crear dibujos precisos y detallados.
  • Arte digital: También es una buena opción para crear arte digital. Los usuarios pueden usar herramientas como pinceles, lápices y colores para crear dibujos creativos y expresivos.
  • Colaboración: TlDraw es una excelente herramienta para la colaboración. Los usuarios pueden trabajar juntos en un proyecto de dibujo al mismo tiempo, lo que puede ser útil para proyectos complejos o proyectos que requieren la opinión de varios usuarios.

Aprovechando el lanzamiento de la API de GPT-4V, Ruiz integró un prototipo de diseño llamado «draw-a-ui» o «make it real» creado por Sawyer Hood para llevar la funcionalidad potenciada por IA a tldraw.

¿Cómo funciona Make it Real de TLDraw?

La IA interpreta y genera código HTML y CSS utilizando TailwindCSS, una biblioteca de estilos altamente popular. Incluso permite realizar modificaciones en tiempo real, como cambiar colores o agregar elementos. Es como tener un diseñador web automático a tu disposición. En este vídeo puedes ver como, por ejemplo, el usuario dibuja un reloj (minuto 2:30 )y la inteligencia artificial programa un reloj:

TLDraw utiliza la la función de reconocimiento de imágenes de ChatGPT (GPT-4V o GPT Vision) para, mediante conexión por API, interpretar visualmente un dibujo vectorial y convertirlo en código web Tailwind CSS y JavaScript.

Aunque la función principal de esta herramienta para programar con IA es reproducir interfaces de usuario, también es posible crear implementaciones sencillas de juegos como Breakout. El límite lo pone tu imaginación.

(Relacionado: Así funciona GPT-4V(ision), las gafas de Chat GPT)

Si tienes una API de OpenAI, puedes experimentar en línea con una demo en directo de Make It Real. Aquellos con conocimientos técnicos pueden ejecutar el código localmente, pero seguirán necesitando acceso a la API de OpenAI.

GPT-4V es una versión del gran modelo de lenguaje de OpenAI que puede interpretar imágenes visuales y utilizarlas como indicaciones. Como explica el experto en IA Simon Willison en X, Make it Real funciona «generando un PNG codificado en base64 de los componentes dibujados y pasándoselo a GPT-4 Vision» con una indicación del sistema e instrucciones para convertir la imagen en un archivo utilizando Tailwind.

De hecho, aquí está el mensaje completo del sistema que le dice a GPT-4V cómo manejar las entradas y convertirlas en código funcional:

const systemPrompt = ‘Usted es un desarrollador web experto que se especializa en css tailwind.
Un usuario le proporcionará un wireframe de baja fidelidad de una aplicación.
Usted devolverá un único archivo html que utiliza HTML, tailwind css y JavaScript para crear un sitio web de alta fidelidad.
Incluye cualquier CSS y JavaScript extra en el archivo html.
Si tiene imágenes, cárguelas desde Unsplash o utilice rectángulos de colores sólidos.
El usuario le proporcionará notas en texto azul o rojo, flechas o dibujos.
El usuario también puede incluir imágenes de otros sitios web como referencias de estilo. Transfiere los estilos lo mejor que puedas, haciendo coincidir fuentes / colores / diseños.
También es posible que te faciliten el html de un diseño anterior que quieran que utilices para iterar.
Realiza los cambios que te pidan.
En el wireframe, el html del diseño anterior aparecerá como un rectángulo blanco.
Utiliza licencias creativas para dar más cuerpo a la aplicación.
Utiliza módulos JavaScript y unpkg para importar las dependencias necesarias’.

A medida que más gente experimente con GPT-4V y lo combine con otros frameworks, es probable que en las próximas semanas veamos aparecer más aplicaciones novedosas de la tecnología de análisis de visión de OpenAI.