Design2Code: フロントエンドエンジニアリングの自動化はどこまで進んでいるか?
Design2Code: How Far Are We From Automating Front-End Engineering?
March 5, 2024
著者: Chenglei Si, Yanzhe Zhang, Zhengyuan Yang, Ruibo Liu, Diyi Yang
cs.AI
要旨
近年、生成AIは急速な進歩を遂げ、マルチモーダル理解やコード生成において前例のない能力を達成しています。これにより、マルチモーダルLLMが視覚的なデザインを直接コード実装に変換するという新しいフロントエンド開発のパラダイムが可能になります。本研究では、これをDesign2Codeタスクとして形式化し、包括的なベンチマークを行います。具体的には、484の多様な実世界のウェブページをテストケースとして手動でキュレーションし、スクリーンショットを入力として与えられた参照ウェブページを直接レンダリングするコード実装を現在のマルチモーダルLLMがどれだけうまく生成できるかを評価するための自動評価指標を開発します。また、自動指標を補完するために、包括的な人間評価も行います。マルチモーダルプロンプティング手法のスイートを開発し、GPT-4VとGemini Pro Visionでの有効性を示します。さらに、Gemini Pro Visionの性能に匹敵するオープンソースのDesign2Code-18Bモデルをファインチューニングします。人間評価と自動指標の両方で、GPT-4Vが他のモデルと比較してこのタスクで最も優れた性能を示すことがわかります。さらに、アノテーターは、GPT-4Vが生成したウェブページが視覚的な外観と内容において元の参照ウェブページを49%のケースで置き換え可能であると考えています。そして、驚くべきことに、64%のケースでGPT-4Vが生成したウェブページは元の参照ウェブページよりも優れていると評価されています。私たちの細分化された指標は、オープンソースモデルが主に入力ウェブページから視覚要素を想起し、正しいレイアウトデザインを生成する点で遅れをとっている一方、テキスト内容や配色などの側面は適切なファインチューニングによって大幅に改善できることを示しています。
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.