Design2Code: Wie weit sind wir von der Automatisierung des Front-End-Engineerings entfernt?Design2Code: How Far Are We From Automating Front-End Engineering?
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.