Design2Code: Hoe Ver Zijn We Met Het Automatiseren Van Front-End Engineering?

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

March 5, 2024

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

cs.AI

Samenvatting

Generatieve AI heeft de afgelopen jaren snelle vooruitgang geboekt en ongekende mogelijkheden bereikt op het gebied van multimodale begrip en codegeneratie. Dit kan een nieuw paradigma voor front-end ontwikkeling mogelijk maken, waarbij multimodale LLM's visuele ontwerpen direct kunnen omzetten in code-implementaties. In dit werk formaliseren we dit als een Design2Code-taak en voeren we uitgebreide benchmarking uit. Specifiek stellen we handmatig een benchmark samen van 484 diverse webpagina's uit de praktijk als testcases en ontwikkelen we een set van automatische evaluatiemetrics om te beoordelen hoe goed huidige multimodale LLM's de code-implementaties kunnen genereren die direct renderen in de gegeven referentiewebpagina's, waarbij screenshots als invoer worden gebruikt. We vullen de automatische metrics aan met uitgebreide humanevaluaties. We ontwikkelen een reeks multimodale promptingmethoden en tonen hun effectiviteit aan op GPT-4V en Gemini Pro Vision. We finetunen verder een open-source Design2Code-18B-model dat met succes de prestaties van Gemini Pro Vision evenaart. Zowel humanevaluatie als automatische metrics laten zien dat GPT-4V de beste prestaties levert op deze taak in vergelijking met andere modellen. Bovendien vinden annotators dat de door GPT-4V gegenereerde webpagina's in 49% van de gevallen de originele referentiewebpagina's kunnen vervangen wat betreft visuele verschijning en inhoud; en misschien verrassend, in 64% van de gevallen worden de door GPT-4V gegenereerde webpagina's als beter beschouwd dan de originele referentiewebpagina's. Onze fijnmazige uitsplitsing van metrics geeft aan dat open-source modellen vooral achterblijven in het herinneren van visuele elementen van de invoerwebpagina's en in het genereren van correcte lay-outontwerpen, terwijl aspecten zoals tekstinhoud en kleuring aanzienlijk kunnen worden verbeterd met de juiste finetuning.

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.