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

要約

生成 AI は近年急速に進歩し、マルチモーダルな理解とコード生成において前例のない機能を実現しています。
これにより、マルチモーダル LLM がビジュアル デザインをコード実装に直接変換する、フロントエンド開発の新しいパラダイムが可能になります。
この作業では、これを Design2Code タスクとして形式化し、包括的なベンチマークを実行します。
具体的には、484 の多様な現実世界の Web ページのベンチマークをテスト ケースとして手動で厳選し、現在のマルチモーダル LLM が特定の参照 Web ページに直接レンダリングするコード実装をどの程度うまく生成できるかを評価する一連の自動評価メトリクスを開発します。
入力。
また、自動メトリクスを人間による包括的な評価で補完します。
私たちは一連のマルチモーダル プロンプト手法を開発し、GPT-4V および Gemini Pro Vision でその有効性を示します。
私たちは、Gemini Pro Vision のパフォーマンスにうまく適合するオープンソースの Design2Code-18B モデルをさらに微調整しました。
人間による評価と自動メトリクスの両方から、GPT-4V が他のモデルと比較してこのタスクで最高のパフォーマンスを発揮することがわかります。
さらに、アノテーターは、GPT-4V で生成された Web ページは、見た目と内容の点で 49% のケースで元の参照 Web ページを置き換えることができると考えています。
そしておそらく驚くべきことに、64% のケースで GPT-4V で生成された Web ページが元の参照 Web ページよりも優れていると考えられます。
私たちの詳細な内訳メトリクスは、オープンソース モデルは、入力 Web ページからの視覚要素の呼び出しと正しいレイアウト デザインの生成においてほとんどの点で遅れをとっている一方、テキスト コンテンツや色付けなどの側面は、適切な微調整によって大幅に改善できることを示しています。

要約(オリジナル)

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.

arxiv情報

提供元, 利用サービス

arxiv.jp, Google