Design2Code: Quão Longe Estamos da Automação da Engenharia 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

Resumo

A IA generativa tem feito avanços rápidos nos últimos anos, alcançando capacidades sem precedentes em compreensão multimodal e geração de código. Isso pode habilitar um novo paradigma de desenvolvimento front-end, no qual LLMs multimodais podem converter diretamente designs visuais em implementações de código. Neste trabalho, formalizamos isso como uma tarefa Design2Code e realizamos uma avaliação abrangente. Especificamente, criamos manualmente um benchmark de 484 páginas da web diversas do mundo real como casos de teste e desenvolvemos um conjunto de métricas de avaliação automática para medir quão bem os LLMs multimodais atuais podem gerar implementações de código que renderizam diretamente as páginas da web de referência fornecidas, tendo como entrada capturas de tela. Também complementamos as métricas automáticas com avaliações humanas abrangentes. Desenvolvemos um conjunto de métodos de prompt multimodal e demonstramos sua eficácia em GPT-4V e Gemini Pro Vision. Além disso, ajustamos um modelo open-source Design2Code-18B que iguala o desempenho do Gemini Pro Vision. Tanto a avaliação humana quanto as métricas automáticas mostram que o GPT-4V tem o melhor desempenho nessa tarefa em comparação com outros modelos. Além disso, os avaliadores consideram que as páginas da web geradas pelo GPT-4V podem substituir as páginas de referência originais em 49% dos casos em termos de aparência visual e conteúdo; e, surpreendentemente, em 64% dos casos, as páginas geradas pelo GPT-4V são consideradas melhores que as páginas de referência originais. Nossas métricas detalhadas indicam que os modelos open-source ficam principalmente atrás na recuperação de elementos visuais das páginas da web de entrada e na geração de designs de layout corretos, enquanto aspectos como conteúdo de texto e coloração podem ser drasticamente melhorados com o ajuste adequado.

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.