Design2Code: ¿Qué Tan Lejos Estamos de Automatizar la Ingeniería de Front-End?

Design2Code: How Far Are We From Automating Front-End Engineering?

March 5, 2024

Autores: Chenglei Si, Yanzhe Zhang, Zhengyuan Yang, Ruibo Liu, Diyi Yang

cs.AI

Resumen

La IA generativa ha experimentado avances rápidos en los últimos años, logrando capacidades sin precedentes en comprensión multimodal y generación de código. Esto puede habilitar un nuevo paradigma en el desarrollo de interfaces, donde los LLM multimodales podrían convertir directamente diseños visuales en implementaciones de código. En este trabajo, formalizamos esto como una tarea de Design2Code y realizamos una evaluación exhaustiva. Específicamente, hemos creado manualmente un conjunto de referencia de 484 páginas web diversas del mundo real como casos de prueba y desarrollado un conjunto de métricas de evaluación automática para medir qué tan bien los LLM multimodales actuales pueden generar implementaciones de código que se rendericen directamente en las páginas web de referencia, utilizando capturas de pantalla como entrada. También complementamos las métricas automáticas con evaluaciones humanas exhaustivas. Desarrollamos un conjunto de métodos de prompting multimodal y demostramos su efectividad en GPT-4V y Gemini Pro Vision. Además, ajustamos un modelo de código abierto Design2Code-18B que iguala el rendimiento de Gemini Pro Vision. Tanto la evaluación humana como las métricas automáticas muestran que GPT-4V tiene el mejor desempeño en esta tarea en comparación con otros modelos. Además, los evaluadores consideran que las páginas web generadas por GPT-4V pueden reemplazar a las páginas de referencia originales en el 49% de los casos en términos de apariencia visual y contenido; y, sorprendentemente, en el 64% de los casos, las páginas generadas por GPT-4V se consideran mejores que las páginas de referencia originales. Nuestras métricas detalladas indican que los modelos de código abierto suelen quedarse atrás en la recuperación de elementos visuales de las páginas web de entrada y en la generación de diseños de disposición correctos, mientras que aspectos como el contenido de texto y el color pueden mejorarse drásticamente con un ajuste adecuado.

English

Generative AI has made rapid advancements in recent years, achieving unprecedented capabilities in multimodal understanding and code generation. This can enable a new paradigm of front-end development, in which multimodal LLMs might directly convert visual designs into code implementations. In this work, we formalize this as a Design2Code task and conduct comprehensive benchmarking. Specifically, we manually curate a benchmark of 484 diverse real-world webpages as test cases and develop a set of automatic evaluation metrics to assess how well current multimodal LLMs can generate the code implementations that directly render into the given reference webpages, given the screenshots as input. We also complement automatic metrics with comprehensive human evaluations. We develop a suite of multimodal prompting methods and show their effectiveness on GPT-4V and Gemini Pro Vision. We further finetune an open-source Design2Code-18B model that successfully matches the performance of Gemini Pro Vision. Both human evaluation and automatic metrics show that GPT-4V performs the best on this task compared to other models. Moreover, annotators think GPT-4V generated webpages can replace the original reference webpages in 49% of cases in terms of visual appearance and content; and perhaps surprisingly, in 64% of cases GPT-4V generated webpages are considered better than the original reference webpages. Our fine-grained break-down metrics indicate that open-source models mostly lag in recalling visual elements from the input webpages and in generating correct layout designs, while aspects like text content and coloring can be drastically improved with proper finetuning.