Design2Code: Quanto Siamo Lontani dall'Automatizzare l'Ingegneria del Front-End?

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

March 5, 2024

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

cs.AI

Abstract

L'IA generativa ha compiuto rapidi progressi negli ultimi anni, raggiungendo capacità senza precedenti nella comprensione multimodale e nella generazione di codice. Ciò può abilitare un nuovo paradigma nello sviluppo front-end, in cui i modelli linguistici multimodali (LLM) potrebbero convertire direttamente i progetti visivi in implementazioni di codice. In questo lavoro, formalizziamo questo compito come Design2Code e conduciamo un benchmarking completo. Nello specifico, abbiamo curato manualmente un benchmark di 484 pagine web reali e diversificate come casi di test e sviluppato una serie di metriche di valutazione automatica per valutare quanto bene gli attuali LLM multimodali possano generare implementazioni di codice che si traducono direttamente nelle pagine web di riferimento fornite, utilizzando screenshot come input. Abbiamo inoltre integrato le metriche automatiche con valutazioni umane approfondite. Abbiamo sviluppato una suite di metodi di prompting multimodale e dimostrato la loro efficacia su GPT-4V e Gemini Pro Vision. Abbiamo ulteriormente ottimizzato un modello open-source Design2Code-18B che eguaglia le prestazioni di Gemini Pro Vision. Sia la valutazione umana che le metriche automatiche mostrano che GPT-4V si comporta meglio in questo compito rispetto ad altri modelli. Inoltre, gli annotatori ritengono che le pagine web generate da GPT-4V possano sostituire le pagine web di riferimento originali nel 49% dei casi in termini di aspetto visivo e contenuto; e, forse sorprendentemente, nel 64% dei casi le pagine web generate da GPT-4V sono considerate migliori rispetto alle pagine web di riferimento originali. Le nostre metriche dettagliate indicano che i modelli open-source sono principalmente in ritardo nel ricordare gli elementi visivi dalle pagine web di input e nel generare layout corretti, mentre aspetti come il contenuto testuale e la colorazione possono essere drasticamente migliorati con un'adeguata ottimizzazione.

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.