高品質なUIデザイン画像からHTMLコードを自動生成するためのリアルワールドデータセット「VISION2UI」

Alapfogalmak

UIデザイン画像からHTMLコードを自動生成するための大規模で高品質なデータセット「VISION2UI」を提案する。

Kivonat

本論文では、UIデザイン画像からHTMLコードを自動生成するための大規模で高品質なデータセット「VISION2UI」を提案している。
データセット構築のパイプラインは以下の通り:

Common Crawlデータセットから元データを収集
HTMLコードとCSSコードを統合し、ノイズを除去
Pyppeteerを使ってスクリーンショットを生成し、レイアウト情報を付与
手動で評価したサブセットを使って学習したニューラルスコアを用いて高品質なサンプルを選別

提案したデータセットは以下の特徴を持つ:

20,000サンプル(今後100万サンプル以上を公開予定)
HTMLコードとデザイン画像のペア
各HTMLエレメントのレイアウト情報を含む
既存のWebSightやDesign2Codeと比べ、より多様で実世界に近いデータ
本データセットは、マルチモーダルな大規模言語モデルをUIコード生成に適用する際の課題を解決し、より高度な自動UIコード生成を実現することが期待される。

Statisztikák

HTMLコードの平均トークン長は8,460±7,120
HTMLコードの平均タグ数は175±94
HTMLコードの平均固有タグ数は21±5
HTMLコードのDOM木の平均最大深さは15±5

Idézetek

なし

Főbb Kivonatok

VISION2UI

by Yi Gui,Zhen ... : arxiv.org 04-10-2024

https://arxiv.org/pdf/2404.06369.pdf

Mélyebb kérdések

UIデザイン画像からHTMLコードを生成する際の主な課題は何か?

UIデザイン画像からHTMLコードを生成する際の主な課題の1つは、CSSの長さと複雑さです。CSSは長大で複雑であり、すべての要素が一緒に集約されています。この大きなCSSブロックは、モデルのトレーニングにおいて大きな課題を提供します。また、HTML DOMツリー構造の生成も課題となります。画像内のサブ要素が重なる可能性があるため、明確な境界がない要素もあり、構造化された情報を抽出することが困難です。これらの課題を克服するために、データセットの改善やモデル設計、エンジニアリング手法の改善が必要です。

既存のマルチモーダル言語モデルの性能を向上させるためにはどのような工夫が必要か?

マルチモーダル言語モデルの性能を向上させるためには、データセットの品質向上が重要です。高品質なデータセットを使用してモデルをトレーニングし、適切なラベル付けを行うことが必要です。また、モデルの訓練時にHTML DOMツリー構造の生成に焦点を当てることが重要です。画像からの構造化情報の抽出やモデルのHTML構造生成能力の向上に取り組むことで、性能を向上させることができます。

本データセットを活用して、どのようなアプリケーションや市場価値が期待できるか?

本データセットを活用することで、高品質なUIコードを効率的に生成するアプリケーションが期待されます。開発者の負担を軽減し、初心者の開発者やデザイナーがデザイン図から直接Webページを生成できるようになります。これにより、アプリケーションの価値が向上し、市場価値が高まることが期待されます。さらに、自動UIコード生成の分野において、より効果的なツールやサービスの開発が可能となり、開発プロセスの効率化や生産性の向上が期待されます。