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

• arxiv url: http://arxiv.org/abs/2505.09904v1
• Date: Thu, 15 May 2025 02:09:54 GMT
• ステータス: 翻訳完了
• システム内更新日: 2025-05-16 22:29:06.154011
• Title: UICopilot: Automating UI Synthesis via Hierarchical Code Generation from Webpage Designs
• Title（参考訳）: UICopilot: ページ設計から階層的なコード生成を通じてUI合成を自動化する
• Authors: Yi Gui, Yao Wan, Zhen Li, Zhongyi Zhang, 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が生成したページよりも好んでいることが明らかになった。

関連論文リスト

• LaTCoder: Converting Webpage Design to Code with Layout-as-Thought [27.815304610123754]
  LaTCoderは、レイアウト・アズ・ソート(LaT)によるコード生成中のWebページ設計におけるレイアウトの保存性を高める新しいアプローチである。 具体的には、まず、Webページのデザインを画像ブロックに分割する単純なアルゴリズムを導入する。次に、CoTベースのアプローチを用いて、各ブロックのコードを生成する。最後に、2つのアセンブリ戦略絶対位置決めと、動的選択によりMLLMベースのメソッドを適用して、最適出力を決定する。
  論文  参考訳（メタデータ） (2025-08-05T15:28:48Z)
• ScreenCoder: Advancing Visual-to-Code Generation for Front-End Automation via Modular Multimodal Agents [35.10813247827737]
  本稿では,3つの解釈可能な段階でユーザインタフェースからコード生成を行うモジュール型マルチエージェントフレームワークを提案する。 このフレームワークは、エンドツーエンドのブラックボックスメソッドよりも堅牢性、解釈可能性、忠実性を改善する。 提案手法は, レイアウト精度, 構造コヒーレンス, コード正確性において, 最先端の性能を実現する。
  論文  参考訳（メタデータ） (2025-07-30T16:41:21Z)
• MLLM-Based UI2Code Automation Guided by UI Layout Information [17.177322441575196]
  3つのキーモジュールを含む実世界のWebページイメージからUIコードを生成するMLLMベースの新しいフレームワークを提案する。 評価のために、Snap2Codeという350の現実世界のWebサイトを含む新しいベンチマークデータセットを構築しました。
  論文  参考訳（メタデータ） (2025-06-12T06:04:16Z)
• AgentTrek: Agent Trajectory Synthesis via Guiding Replay with Web Tutorials [53.376263056033046]
  既存のアプローチは高価な人間のアノテーションに依存しており、大規模には持続不可能である。 本稿では,Webエージェントトラジェクトリを生成するスケーラブルなデータ合成パイプラインであるAgentTrekを提案する。 完全に自動化されたアプローチは、データ収集コストを大幅に削減し、人間のアノテータを使わずに、高品質な軌道を0.55ドルに抑えることができます。
  論文  参考訳（メタデータ） (2024-12-12T18:59:27Z)
• 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)

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

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