DesignBench: A Comprehensive Benchmark for MLLM-based Front-end Code Generation

要約

マルチモーダル大手言語モデル（MLLMS）は、視覚設計からUIコードを生成する自動化されたフロントエンドエンジニアリングにおいて顕著な機能を実証しています。
ただし、既存のフロントエンドUIコード生成ベンチマークには次の制限があります。（1）フレームワークベースの開発は最新のフロントエンドプログラミングで支配的になりますが、現在のベンチマークは主流の開発フレームワークを組み込むことができません。
（2）既存の評価は、UIコード生成タスクのみに焦点を当てていますが、実際のUI開発には、編集の洗練、問題の修復など、いくつかの反復が含まれます。
（3）現在のベンチマークは、一次元評価を採用しており、タスクの難易度、入力コンテキストのバリエーション、詳細なコードレベル分析などの影響の影響を調査していません。
これらのギャップを埋めるために、自動化されたフロントエンドエンジニアリングにおけるMLLMの機能を評価するためのマルチフレームワーク、マルチタスク評価ベンチマークであるDesignBenchを紹介します。
DesignBenchは、バニラHTML/CSSと並んで、広く使用されている3つのUIフレームワーク（React、Vue、およびAngular）を網羅し、実際の開発ワークフローにおける3つの重要なフロントエンドタスク（生成、編集、および修理）を評価します。
DesignBenchには、11のトピック、9つの編集タイプ、6つの問題カテゴリにまたがる900のWebページサンプルが含まれており、複数のディメンションにわたるMLLMパフォーマンスの詳細な分析を可能にします。
私たちの体系的な評価は、MLLMのフレームワーク固有の制限、タスク関連のボトルネック、およびさまざまな条件下でのパフォーマンスの変動に関する重要な洞察を明らかにし、自動フロントエンド開発における将来の研究のガイダンスを提供します。
私たちのコードとデータは、https：//github.com/webpai/designbenchで入手できます。

要約(オリジナル)

Multimodal Large Language Models (MLLMs) have demonstrated remarkable capabilities in automated front-end engineering, e.g., generating UI code from visual designs. However, existing front-end UI code generation benchmarks have the following limitations: (1) While framework-based development becomes predominant in modern front-end programming, current benchmarks fail to incorporate mainstream development frameworks. (2) Existing evaluations focus solely on the UI code generation task, whereas practical UI development involves several iterations, including refining editing, and repairing issues. (3) Current benchmarks employ unidimensional evaluation, lacking investigation into influencing factors like task difficulty, input context variations, and in-depth code-level analysis. To bridge these gaps, we introduce DesignBench, a multi-framework, multi-task evaluation benchmark for assessing MLLMs’ capabilities in automated front-end engineering. DesignBench encompasses three widely-used UI frameworks (React, Vue, and Angular) alongside vanilla HTML/CSS, and evaluates on three essential front-end tasks (generation, edit, and repair) in real-world development workflows. DesignBench contains 900 webpage samples spanning over 11 topics, 9 edit types, and 6 issue categories, enabling detailed analysis of MLLM performance across multiple dimensions. Our systematic evaluation reveals critical insights into MLLMs’ framework-specific limitations, task-related bottlenecks, and performance variations under different conditions, providing guidance for future research in automated front-end development. Our code and data are available at https://github.com/WebPAI/DesignBench.

arxiv情報

提供元, 利用サービス

arxiv.jp, Google