El prototipo de IA Make It Real sorprende a los desarrolladores al convertir bocetos en software funcional

El miércoles, un creador de aplicaciones de pizarra colaborativa llamado “tldraw” generó revuelo en Internet con liberar Un prototipo de una función llamada «Make it Real» que permite a los usuarios hacer un dibujo del software y darle vida utilizando inteligencia artificial. Esta función utiliza la API GPT-4V de OpenAI para interpretar visualmente el dibujo vectorial en acción. viento de cola CSS Y código web JavaScript que puede replicar interfaces de usuario o incluso crear aplicaciones simples para juegos como adelante.

«Creo que necesito acostarme», publicó el diseñador Kevin Cannon al comienzo de la serie viral X que incluía la creación Controles deslizantes de trabajo Que rota los objetos en la pantalla y es una interfaz para Cambiar colores de objetosY un juego de acción tres en raya. Otros siguieron rápidamente con demostraciones para pintar una copia de adelantecrear algo Reloj de esfera de trabajo. Ese tic, dibuja juego de serpientehecho por A Apestar JuegoInterpretación A Gráfico de estado visualY mucho más.

Los usuarios pueden Experiencia con un show en vivo. Hazlo realidad en línea. Sin embargo, su funcionamiento requiere el suministro de una clave API de OpenAI, lo que representa un riesgo de seguridad. Si otros interceptan su clave API, pueden usarla para cobrar una factura muy grande a su nombre (OpenAI honorarios Por la cantidad de datos que se mueven hacia y desde su API). Aquellos que tengan inclinaciones técnicas pueden Ejecute el código Localmente, pero aún requerirá acceso a la API de OpenAI.

Teldraw, desarrollado por Esteban Ruiz En Londres, es una herramienta de pizarra colaborativa de código abierto. Proporciona un lienzo básico infinito para dibujar, texto y medios sin tener que iniciar sesión. El proyecto se lanzó en 2021. Recibir 2,7 millones de dólares en financiación inicial y apoyo de patrocinadores de GitHub. Cuando se lanzó recientemente la API GPT-4V, Ruiz integró un prototipo de diseño llamado «Dibujar la interfaz de usuario«Establecido por Capucha de aserrador Llevar la funcionalidad impulsada por IA a tldraw.

GPT-4V es una versión del modelo de lenguaje grande de OpenAI que puede interpretar imágenes visuales y utilizarlas como indicaciones. Como dice el experto en inteligencia artificial Simon Willison Explica en XMake it Real funciona «creando un archivo PNG codificado en base64 para los componentes dibujados y luego pasándolo a GPT-4 Vision» con un mensaje del sistema e instrucciones para convertir la imagen en un archivo usando Tailwind. De hecho, aquí está el mensaje completo del sistema que le indica a GPT-4V cómo manejar la entrada y convertirla en código eficiente:

const systemPrompt=»Es un desarrollador web experimentado que se especializa en CSS back-end.
El usuario le proporcionará una estructura alámbrica de baja resolución de la aplicación.
Devolverá un único archivo html que utiliza HTML, tailwind css y JavaScript para crear un sitio web de alta fidelidad.
Incluya cualquier CSS y JavaScript adicional en el archivo html.
Si tiene alguna imagen, cárguela desde Unsplash o use rectángulos de colores sólidos.
El usuario le proporcionará comentarios con texto, flechas o gráficos azules o rojos.
El usuario también puede incluir imágenes de otros sitios web como referencias de estilo. Transmita estilos lo mejor que pueda, haciendo coincidir fuentes/colores/diseños.
También pueden proporcionarle el texto HTML del diseño anterior que desean replicar.
Implemente cualquier cambio que le soliciten.
En la estructura alámbrica, el HTML del diseño anterior aparecerá como un rectángulo blanco.
Utilice una licencia creativa para darle más cuerpo a la aplicación.
Utilice módulos JavaScript y unpkg para importar las dependencias necesarias.

A medida que más personas experimenten con GPT-4V y lo integren con otros marcos, es probable que veamos surgir más aplicaciones nuevas de la tecnología de análisis de visión de OpenAI en las próximas semanas. También el miércoles, un desarrollador utilizó la API GPT-4V para crear una narración en vivo en tiempo real de un video con una voz falsa de David Attenborough generada por IA, que cubrimos por separado.

En este momento, parece que hemos tenido una vista previa del posible estado futuro del desarrollo de software, o del diseño de interfaz, al menos, donde crear un prototipo funcional es tan simple como crear un modelo visual y tener el modelo de IA. Haz el resto. Como desarrollador Michael Dobakov libros Al mostrar su propia creación, Make It Real, «Está bien, @tldraw está oficialmente loco. Es realmente interesante que después de 5 años hayamos terminado… ya no puedo seguir el ritmo de la innovación».