Design2Code: Wie weit sind wir von der Automatisierung des Front-End-Engineerings entfernt?

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

March 5, 2024

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

cs.AI

Zusammenfassung

Generative KI hat in den letzten Jahren rasante Fortschritte gemacht und beispiellose Fähigkeiten im multimodalen Verständnis und der Code-Generierung erreicht. Dies könnte ein neues Paradigma im Frontend-Entwicklungsprozess ermöglichen, bei dem multimodale LLMs visuelle Designs direkt in Code-Implementierungen umwandeln. In dieser Arbeit formalisieren wir dies als eine Design2Code-Aufgabe und führen umfassende Benchmarking-Studien durch. Konkret kuratieren wir manuell einen Benchmark mit 484 vielfältigen, realen Webseiten als Testfälle und entwickeln eine Reihe automatischer Bewertungsmetriken, um zu beurteilen, wie gut aktuelle multimodale LLMs Code-Implementierungen generieren können, die direkt in die gegebenen Referenz-Webseiten gerendert werden, wobei Screenshots als Eingabe dienen. Wir ergänzen die automatischen Metriken durch umfassende menschliche Bewertungen. Wir entwickeln eine Suite multimodaler Prompting-Methoden und zeigen deren Wirksamkeit auf GPT-4V und Gemini Pro Vision. Darüber hinaus finetunen wir ein Open-Source-Modell, Design2Code-18B, das die Leistung von Gemini Pro Vision erfolgreich erreicht. Sowohl die menschliche Bewertung als auch die automatischen Metriken zeigen, dass GPT-4V bei dieser Aufgabe im Vergleich zu anderen Modellen am besten abschneidet. Zudem sind die Annotatoren der Ansicht, dass die von GPT-4V generierten Webseiten in 49 % der Fälle die ursprünglichen Referenz-Webseiten in Bezug auf visuelles Erscheinungsbild und Inhalt ersetzen können; und vielleicht überraschenderweise werden die von GPT-4V generierten Webseiten in 64 % der Fälle als besser als die ursprünglichen Referenz-Webseiten eingestuft. Unsere detaillierten Metriken zeigen, dass Open-Source-Modelle hauptsächlich bei der Erinnerung an visuelle Elemente aus den Eingabe-Webseiten und bei der Generierung korrekter Layout-Designs zurückbleiben, während Aspekte wie Textinhalt und Farbgebung durch geeignetes Finetuning erheblich verbessert werden können.

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.