論文の概要: UICopilot: Automating UI Synthesis via Hierarchical Code Generation from Webpage Designs

• arxiv url: http://arxiv.org/abs/2505.09904v2
• Date: Fri, 23 May 2025 08:34:36 GMT
• ステータス: 翻訳完了
• システム内更新日: 2025-05-26 15:51:03.004078
• Title: UICopilot: Automating UI Synthesis via Hierarchical Code Generation from Webpage Designs
• Title（参考訳）: UICopilot: ページ設計から階層的なコード生成を通じてUI合成を自動化する
• Authors: Yi Gui, Zhen Li, Zhongyi Zhang, Yao Wan, Dongping Chen, Hongyu Zhang, Yi Su, Bohua Chen, Xing Zhou, Wenbin Jiang, Xiangliang Zhang,
• Abstract要約: 本稿では,Webページの設計から階層的なコード生成によってユーザインタフェース(UI)を自動生成する手法を提案する。 UICopilotの基本的な考え方は、生成プロセスを2つのステージに分解することである。 実験の結果、UICopilotは、自動評価と人的評価の両方において、既存のベースラインを大幅に上回っていることがわかった。
• 参考スコア（独自算出の注目度）: 43.006316221657904
• License: http://arxiv.org/licenses/nonexclusive-distrib/1.0/
• Abstract: Automating the synthesis of User Interfaces (UIs) plays a crucial role in enhancing productivity and accelerating the development lifecycle, reducing both development time and manual effort. Recently, the rapid development of Multimodal Large Language Models (MLLMs) has made it possible to generate front-end Hypertext Markup Language (HTML) code directly from webpage designs. However, real-world webpages encompass not only a diverse array of HTML tags but also complex stylesheets, resulting in significantly lengthy code. The lengthy code poses challenges for the performance and efficiency of MLLMs, especially in capturing the structural information of UI designs. To address these challenges, this paper proposes UICopilot, a novel approach to automating UI synthesis via hierarchical code generation from webpage designs. The core idea of UICopilot is to decompose the generation process into two stages: first, generating the coarse-grained HTML hierarchical structure, followed by the generation of fine-grained code. To validate the effectiveness of UICopilot, we conduct experiments on a real-world dataset, i.e., WebCode2M. Experimental results demonstrate that UICopilot significantly outperforms existing baselines in both automatic evaluation metrics and human evaluations. Specifically, statistical analysis reveals that the majority of human annotators prefer the webpages generated by UICopilot over those produced by GPT-4V.
• Abstract（参考訳）: ユーザインターフェース(UI)の合成を自動化することは、生産性を高め、開発ライフサイクルを加速し、開発時間と手作業の両方を減らす上で重要な役割を担います。 近年、MLLM(Multimodal Large Language Models)の急速な開発により、Webページデザインから直接フロントエンドのハイパーテキストマークアップ言語(HTML)コードを生成することが可能になった。 しかし、現実世界のWebページは多様なHTMLタグだけでなく、複雑なスタイルシートも含んでいるため、コードはかなり長い。 長大なコードはMLLMの性能と効率、特にUI設計の構造情報をキャプチャする上での課題となる。 これらの課題に対処するために,Webページ設計から階層的なコード生成を通じてUI合成を自動化する新しいアプローチであるUICopilotを提案する。 UICopilotの基本的な考え方は、生成プロセスを2つのステージに分解することである。 UICopilotの有効性を検証するために、実世界のデータセット、すなわちWebCode2Mで実験を行う。 実験の結果、UICopilotは、自動評価指標と人的評価の両方において、既存のベースラインを大幅に上回っていることがわかった。 具体的には、統計分析により、人間のアノテータの大多数は、UICopilotが生成したWebページを、GPT-4Vが生成したページよりも好んでいることが明らかになった。

関連論文リスト

• Interaction2Code: Benchmarking MLLM-based Interactive Webpage Code Generation from Interactive Prototyping [57.024913536420264]
  MLLM(Multimodal Large Language Models)は、設計からコードへのタスクにおいて顕著な性能を示す。 本稿では,インタラクティブなWebページを生成する上で,MLLMを初めて体系的に研究する。
  論文  参考訳（メタデータ） (2024-11-05T17:40:03Z)
• Automatically Generating UI Code from Screenshot: A Divide-and-Conquer-Based Approach [51.522121376987634]
  ウェブページデザインのUIコードへの変換を自動化するための分割型アプローチであるDCGenを提案する。 我々は,DCGenの視覚的類似度は最大15%向上し,コード類似度は8%向上したことを示す。 人間の評価によると、DCGenは開発者がUI設計と非常によく似たWebページを実装するのに役立つ。
  論文  参考訳（メタデータ） (2024-06-24T07:58:36Z)
• WebCode2M: A Real-World Dataset for Code Generation from Webpage Designs [49.91550773480978]
  本稿では256万のインスタンスからなる新しいデータセットであるWebCode2Mを紹介する。 WebCode2Mの有効性を検証するため,WebCoderという名称のVision Transformer(ViT)に基づくベースラインモデルを導入し,公正比較のためのベンチマークを確立する。 ベンチマークの結果、我々のデータセットは、Webページの設計からコードを生成するMLLMの能力を大幅に改善することを示した。
  論文  参考訳（メタデータ） (2024-04-09T15:05:48Z)
• Design2Code: Benchmarking Multimodal Code Generation for Automated Front-End Engineering [74.99736967448423]
  私たちは、このタスクのための最初の実世界のベンチマークであるDesign2Codeを構築します。 テストケースとして484の多様な実世界のWebページを手作業でキュレートし、自動評価指標のセットを開発する。 我々の詳細なブレークダウンメトリクスは、入力されたWebページから視覚要素をリコールし、正しいレイアウト設計を生成するモデルがほとんど遅れていることを示している。
  論文  参考訳（メタデータ） (2024-03-05T17:56:27Z)

関連論文リストは本サイト内にある論文のタイトル・アブストラクトから自動的に作成しています。

指定された論文の情報です。
本サイトの運営者は本サイト（すべての情報・翻訳含む）の品質を保証せず、本サイト（すべての情報・翻訳含む）を使用して発生したあらゆる結果について一切の責任を負いません。