Design2Code : Dans quelle mesure sommes-nous proches de l'automatisation du développement front-end ?

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

Résumé

L'IA générative a connu des avancées rapides ces dernières années, atteignant des capacités sans précédent en compréhension multimodale et en génération de code. Cela pourrait permettre un nouveau paradigme dans le développement front-end, où les LLM multimodaux pourraient directement convertir des conceptions visuelles en implémentations de code. Dans ce travail, nous formalisons cela comme une tâche Design2Code et menons une évaluation approfondie. Plus précisément, nous avons manuellement constitué un benchmark de 484 pages web réelles et diversifiées comme cas de test, et développé un ensemble de métriques d'évaluation automatiques pour évaluer dans quelle mesure les LLM multimodaux actuels peuvent générer des implémentations de code qui rendent directement les pages web de référence données, en utilisant les captures d'écran comme entrée. Nous complétons également les métriques automatiques par des évaluations humaines approfondies. Nous développons une série de méthodes d'invite multimodales et montrons leur efficacité sur GPT-4V et Gemini Pro Vision. Nous affinons en outre un modèle open-source Design2Code-18B qui parvient à égaler les performances de Gemini Pro Vision. Tant l'évaluation humaine que les métriques automatiques montrent que GPT-4V obtient les meilleurs résultats sur cette tâche par rapport aux autres modèles. De plus, les annotateurs estiment que les pages web générées par GPT-4V peuvent remplacer les pages web de référence originales dans 49 % des cas en termes d'apparence visuelle et de contenu ; et, peut-être de manière surprenante, dans 64 % des cas, les pages web générées par GPT-4V sont considérées comme meilleures que les pages web de référence originales. Nos métriques détaillées indiquent que les modèles open-source sont principalement en retard dans le rappel des éléments visuels des pages web d'entrée et dans la génération de conceptions de mise en page correctes, tandis que des aspects comme le contenu textuel et la coloration peuvent être considérablement améliorés avec un affinage approprié.

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.