VISION2UI: A Real-World Dataset with Layout for Code Generation from UI Designs

要約

Web ページのデザイン ビジョンから UI コードを自動的に生成すると、開発者の負担が大幅に軽減され、初心者の開発者やデザイナーでもデザイン図から Web ページを直接生成できるようになります。
現在、先行研究は、ディープ ニューラル ネットワークの設計を通じて、基本的な設計ビジョンまたはスケッチから UI コードを生成するという目的を達成しています。
マルチモーダル大規模言語モデル (MLLM) によって達成された画期的な進歩に触発されて、高忠実度の設計イメージから UI コードを自動生成することが実現可能な可能性として浮上しています。
それにもかかわらず、私たちの調査では、既存の MLLM は本物で高品質で大規模なデータセットの不足によって妨げられており、自動 UI コード生成のパフォーマンスが満足のいくものではないことが明らかになりました。
このギャップを軽減するために、現実世界のシナリオから抽出され、UI コード生成における MLLM の微調整用に特別に調整された包括的なレイアウト情報で強化された、VISION2UI と呼ばれる新しいデータセットを紹介します。
具体的には、このデータセットは、オープンソース Common Crawl データセットの収集、クリーニング、フィルタリングを含む一連の操作を通じて派生します。
その品質を維持するために、ラベル付きサンプルでトレーニングされたニューラル スコアラーを利用してデータを洗練し、より高品質のインスタンスを保持します。
最終的に、このプロセスにより、設計ビジョンと UI コードを含む 2,000 (さらに多くのサンプルが近日公開される) の並列サンプルで構成されるデータセットが生成されます。
データセットは https://huggingface.co/datasets/xcodemind/vision2ui で入手できます。

要約(オリジナル)

Automatically generating UI code from webpage design visions can significantly alleviate the burden of developers, enabling beginner developers or designers to directly generate Web pages from design diagrams. Currently, prior research has accomplished the objective of generating UI code from rudimentary design visions or sketches through designing deep neural networks. Inspired by the groundbreaking advancements achieved by Multimodal Large Language Models (MLLMs), the automatic generation of UI code from high-fidelity design images is now emerging as a viable possibility. Nevertheless, our investigation reveals that existing MLLMs are hampered by the scarcity of authentic, high-quality, and large-scale datasets, leading to unsatisfactory performance in automated UI code generation. To mitigate this gap, we present a novel dataset, termed VISION2UI, extracted from real-world scenarios, augmented with comprehensive layout information, tailored specifically for finetuning MLLMs in UI code generation. Specifically, this dataset is derived through a series of operations, encompassing collecting, cleaning, and filtering of the open-source Common Crawl dataset. In order to uphold its quality, a neural scorer trained on labeled samples is utilized to refine the data, retaining higher-quality instances. Ultimately, this process yields a dataset comprising 2,000 (Much more is coming soon) parallel samples encompassing design visions and UI code. The dataset is available at https://huggingface.co/datasets/xcodemind/vision2ui.

arxiv情報

提供元, 利用サービス

arxiv.jp, Google