Automatically Generating UI Code from Screenshot: A Divide-and-Conquer-Based Approach

要約

今日のデジタルの世界ではウェブサイトが重要であり、現在1,11億人以上が活動しており、毎日約252,000の新しいサイトが発売されています。
Webサイトのレイアウト設計を機能的なUIコードに変換することは、Webサイト開発の時間のかかるが不可欠なステップです。
視覚設計を機能コードに変換する手動の方法は、特に非専門家にとって重要な課題を提示します。
自動設計からコードへのソリューションを探索するために、最初にGPT-4Oに関する動機付け研究を実施し、UIコードの生成において3種類の問題を特定します：要素の省略、要素の歪み、および要素の誤解。
さらに、小さな視覚セグメントに焦点を当てることで、マルチモーダルの大手言語モデル（MLLM）がこれらの障害を生成プロセスに緩和するのに役立つことを明らかにします。
このホワイトペーパーでは、Webページ設計のUIコードへの翻訳を自動化するための分裂と征服ベースのアプローチであるDCGENを提案します。
DCGenは、スクリーンショットを管理可能なセグメントに分割し、各セグメントのコードを生成し、スクリーンショット全体の完全なUIコードに再組み立てすることから開始します。
現実世界のWebサイトとさまざまなMLLMで構成されるデータセットで広範なテストを実施し、DCGENが視覚的類似性を最大15％改善し、大規模な入力画像のコード類似性を8％に達成することを実証しています。
人間の評価は、DCGENが開発者がWebページを大幅に速く実装し、UIデザインよりも類似しているのを助けることができることを示しています。
私たちの知る限り、DCGENは、スクリーンショットから直接UIコードを生成するための最初のセグメントに対応するMLLMベースのアプローチです。

要約(オリジナル)

Websites are critical in today’s digital world, with over 1.11 billion currently active and approximately 252,000 new sites launched daily. Converting website layout design into functional UI code is a time-consuming yet indispensable step of website development. Manual methods of converting visual designs into functional code present significant challenges, especially for non-experts. To explore automatic design-to-code solutions, we first conduct a motivating study on GPT-4o and identify three types of issues in generating UI code: element omission, element distortion, and element misarrangement. We further reveal that a focus on smaller visual segments can help multimodal large language models (MLLMs) mitigate these failures in the generation process. In this paper, we propose DCGen, a divide-and-conquer-based approach to automate the translation of webpage design to UI code. DCGen starts by dividing screenshots into manageable segments, generating code for each segment, and then reassembling them into complete UI code for the entire screenshot. We conduct extensive testing with a dataset comprised of real-world websites and various MLLMs and demonstrate that DCGen achieves up to a 15% improvement in visual similarity and 8% in code similarity for large input images. Human evaluations show that DCGen can help developers implement webpages significantly faster and more similar to the UI designs. To the best of our knowledge, DCGen is the first segment-aware MLLM-based approach for generating UI code directly from screenshots.

arxiv情報

提供元, 利用サービス

arxiv.jp, Google