Crear diseños de baja fidelidad hablando con tu computadora

Teníamos un sueño...#

TeleportHQ se fundó en 2016 con la misión de humanizar la tecnología. Reunimos a un equipo internacional de diseñadores, desarrolladores y científicos de datos con el objetivo de crear herramientas lo bastante potentes como para aprovechar el conocimiento acumulado por la humanidad y, así, automatizar cada vez más el proceso de creación de interfaces de usuario.

Una de las ideas iniciales de nuestra lista de deseos de investigación era generar sitios web simplemente hablando con una computadora. Los avances recientes en inteligencia artificial hicieron que, por primera vez, la generación de interfaces de usuario estuviera al alcance.

Para crear una solución de aprendizaje automático exitosa, necesitábamos dos elementos principales: una gran cantidad de datos y una herramienta «traductora de humano a computadora» que reconociera el lenguaje natural y lo convirtiera en lenguajes de programación. En particular, resultaba muy difícil encontrar una herramienta de traducción adecuada. Probamos herramientas como IBM Watson o Google Dialogflow, pero no eran apropiadas para nuestros fines.

Al mismo tiempo, nuestro equipo de ingeniería estaba creando Playground, una nueva plataforma de desarrollo visual para interfaces de usuario. La tecnología de Playground permitió finalmente que desarrolladores, diseñadores y creadores de productos colaboraran en un proyecto y vieran al instante, en tiempo real, el código resultante de su trabajo colectivo.

Playground despegó, ganó impulso y reunió a una comunidad de usuarios cada vez mayor. Está construido sobre el lenguaje de desarrollo de interfaces de usuario UIDL, el lenguaje de representación intermedio de TeleportHQ, y un conjunto de generadores de código de código abierto.

Puedes ver cómo funcionan juntos en nuestro REPL, donde puedes editar el UIDL y ver cómo se genera código en tiempo real en distintas variantes de JavaScript.

La creación de Playground tuvo otra ventaja: su UIDL y sus generadores de código de código abierto proporcionaron una pieza de infraestructura fundamental que liberó nuestra línea de investigación inicial. Para un científico de datos, era mucho más fácil trabajar con la UIDL como lenguaje específico de dominio que con código puro, que puede fallar ante el más mínimo error de sintaxis y requiere intervención humana para repararlo.

Gracias a esta ventaja, TeleportHQ ha logrado avances significativos en su objetivo de generar sitios web hablando con una computadora. Aquí tienes un video con nuestros últimos avances:

https://www.youtube.com/embed/fq1RPJUI_GM

Estamos a punto de hacer realidad nuestro sueño y nos gustaría compartir algunos de los pasos fundamentales de nuestra investigación en la siguiente entrada del blog.

Fijar el objetivo: definir el resultado del modelo#

El primer paso fue definir el resultado con el que entrenaríamos nuestro modelo. Para simplificar el problema, elegimos lo que nos gusta llamar un enfoque «semántico»: un conjunto de cuadros delimitadores con sus tipos y posiciones absolutas. A este formato lo denominamos «diseño de baja fidelidad», ya que es un subconjunto de lo que suele llamarse diseño de alta fidelidad (que también incluye colores, formas, tipos de letra y otros atributos visuales). Podríamos decir que nuestro diseño de baja fidelidad es al diseño de alta fidelidad lo que una estructura de etiquetas HTML simples es a una página web con todos sus textos y propiedades CSS.

Seleccionar los datos: crear el conjunto de datos de entrenamiento#

Cabe mencionar que, paralelamente al desarrollo de Playground, comenzamos a recopilar y seleccionar millones de páginas web para disponer de un suministro continuo de datos seleccionados, que utilizamos en nuestro proyecto de conversión de wireframes a código .

Para gestionar y acceder a esta base de datos en expansión, creamos un analizador web personalizado capaz de procesar hasta 6 000 páginas por minuto. Puedes leer más sobre este tema en esta entrada del blog.

Decidimos generar las páginas web de forma iterativa, empezando por la barra de navegación y terminando con el pie de página. Para ello, extrajimos de nuestro conjunto de datos principal de páginas web un subconjunto de 850 000 secciones que representan distintas partes semánticas de las páginas. Mira el ejemplo a continuación:

Datos y captura de pantalla de una sección principal de baja fidelidad

Primeros intentos: autocodificador secuencia a secuencia#

A finales de 2019, empezamos con un enfoque sencillo y no supervisado basado en un autocodificador secuencia a secuencia. En el centro de esta arquitectura hay un cuello de botella en el que las secciones se codifican en un arreglo unidimensional. Este cuello de botella suele utilizarse para generar datos nuevos; por eso, pensamos que sería posible generar nuevos diseños a partir de él mediante el muestreo aleatorio de sus valores.

Por desgracia, no funcionó como esperábamos. Aunque el sistema aprendió a codificar y decodificar, fracasó estrepitosamente con muestras nuevas o con una codificación aleatoria.

Probamos algunos otros enfoques y arquitecturas, incluidos los autocodificadores variacionales, las GAN y las redes neuronales de grafos, pero, tras nueve meses de ensayo y error, los resultados no eran viables.

Arquitectura del autocodificador

El punto de inflexión: llega la tecnología GPT-3#

A principios de este año, OpenAI lanzó una nueva versión del Generative Pretrained Transformer (GPT-3). Su sistema establece un nuevo estándar con resultados de vanguardia en diversos puntos de referencia, como la respuesta a preguntas y la traducción automática.

GPT-3 genera secuencias de valores discretos a partir de un contexto determinado. A partir de este contexto, el modelo genera el resto de la secuencia completándola automáticamente, token por token.

Como se entrenó con todo el contenido de Internet, el modelo ofrece resultados asombrosos en una gran variedad de problemas, desde la filosofía hasta la medicina. Pero hubo un caso de uso que captó especialmente nuestra atención: la generación de código.

Dos ejemplos destacaron especialmente. En el primero, se usó GPT-3 para generar comandos de bash. En el segundo, se usó para generar código JSX. Estos dos ejemplos entusiasmaron a nuestro equipo, ya que era evidente que el modelo había asimilado con éxito todos los datos de Stack Overflow. Esto demostraba de forma irrefutable que la tecnología GPT podía permitirnos hablar con una máquina y generar interfaces de usuario.

GPT-3 genera comandos de bash a partir del lenguaje natural

Viento a favor: aprovechar el poder de GPT#

Entusiasmado por el potencial de esta tecnología, TeleportHQ solicitó acceso anticipado a GPT-3, pero nuestra solicitud no prosperó. Aun así, seguíamos convencidos de que la respuesta a nuestro problema de aprendizaje automático estaba en la arquitectura GPT. Esto nos llevó a crear nuestra propia versión. Tras investigar un poco, decidimos trabajar con minGPT, una implementación ligera de GPT.

Una imagen vale más que mil palabras: GPT frente a minGPT

Con los datos disponibles y la sencillez de minGPT, pudimos alimentar la red con nuestros datos muy rápidamente. Para nuestra mayor sorpresa, simplemente funcionó.

En este primer experimento, el modelo aprendió a generar las secciones de nuestras páginas carácter por carácter, incluida la profundidad y las coordenadas de cada elemento.

Con el contexto “DIV 0 0.5 0.5 1.0 1.0”, el modelo pudo completar automáticamente los datos de una sección. Después, fue posible reconstruir la siguiente vista en árbol:

Primera sección generada con GPT-UI a partir del contexto “DIV 0 0.5 0.5 1.0 1.0”

Aunque prometedor, el problema aún no estaba resuelto: todavía no se podía definir el contexto como una intención del usuario. Por eso, refinamos el modelo insertando al principio de la secuencia el contenido que se quería generar (por ejemplo, la cantidad de imágenes, párrafos o elementos div).

Una vez más: simplemente funcionó.

A continuación, podemos ver algunas secciones seleccionadas (con especial cuidado) generadas por este modelo mejorado. En todos los casos, no solo las vistas de árbol y los cuadros delimitadores eran coherentes, sino que las secciones generadas también incluían el contenido solicitado.

Un ejemplo del nuevo contexto es el siguiente: «IMG 2 P 2 H1 2 $». Al insertarlo justo antes de la sección, el modelo podía empezar después del primer «$» y generar automáticamente toda la sección.

Tres secciones generadas en las primeras etapas de nuestros experimentos

Luego fuimos aún más lejos, proporcionando información adicional al comienzo de la secuencia para enriquecer la instrucción. Así, el sistema pudo aprender a generar secciones con alturas, orientaciones y funciones específicas.

Nuestra primera arquitectura funcional

Todavía nos faltaba un último elemento: una interfaz de usuario que permitiera a una persona comunicarse con la computadora en lenguaje natural. Creamos la siguiente configuración, en la que la intención del usuario se introduce mediante un formulario.

El primer formulario utilizado para interactuar con el modelo

Después de crear el formulario, añadimos una capa de procesamiento programático que transformaba los comandos en lenguaje natural (por ejemplo, «Hola, TeleportHQ, créame una sección de tipo barra de navegación con 1 imagen y 4 enlaces de 65 píxeles de alto») en contextos (por ejemplo, «NAVBAR $ h 65 $ IMAGE 1 LINK 4 $»).

A continuación, puedes ver una demostración de nuestra interfaz de usuario actual. Permite al usuario interactuar con el modelo y crear una página web en tan solo unos minutos.

Prototipo de GPT-UI

Nuevos horizontes: rumbo a 2021…#

Hace cuatro años, TeleportHQ era uno de los pocos equipos que creían que era posible crear interfaces de usuario mediante el lenguaje natural. Desde entonces, hemos trabajado constantemente para poner los cimientos del camino hacia una comunicación fluida entre humanos y máquinas. Nuestros resultados nos acercan cada vez más a nuestra misión original: automatizar por completo el proceso de creación de interfaces de usuario.

Hoy contamos con un prototipo de GPT-UI plenamente funcional. Contiene 6 millones de parámetros, frente a los 175 mil millones del gigantesco GPT-3.

Aunque GPT-3 es célebre por su increíble potencia y su capacidad para realizar prácticamente cualquier tarea en inglés, nuestro modelo ofrece una mayor especialización y capacidad de respuesta gracias a su tamaño más pequeño y ágil.

Con el tiempo, con los datos adecuados y gracias al entrenamiento del resto de la arquitectura de Teleport, nuestro GPT-UI podría competir con GPT-3 en la creación de interfaces de usuario a partir del lenguaje natural, con la ventaja añadida de ser totalmente personalizable y utilizar solo una fracción de los recursos necesarios para ejecutar el modelo.

TeleportHQ ya ha empezado a utilizar el mismo enfoque para crear otros modelos nuevos, especializados en la creación de componentes específicos y diseños móviles completos.

Nos entusiasma su potencial y confiamos en que, en un futuro próximo, podremos generar páginas web completas y de alta fidelidad con una sola solicitud.

Si quieres solicitar una demostración privada, proponer una colaboración o hacernos llegar tus comentarios, te invitamos a escribirnos a hello@teleporthq.io .

💡

Si te ha gustado este artículo, quizá también te interesen nuestros resultados anteriores sobre el uso del aprendizaje automático para generar automáticamente código a partir de wireframes.

https://www.youtube.com/embed/ZD8Cnzc6KlY