論文の概要: ScreenCoder: Advancing Visual-to-Code Generation for Front-End Automation via Modular Multimodal Agents
- arxiv url: http://arxiv.org/abs/2507.22827v1
- Date: Wed, 30 Jul 2025 16:41:21 GMT
- ステータス: 翻訳完了
- システム内更新日: 2025-07-31 16:14:18.340006
- Title: ScreenCoder: Advancing Visual-to-Code Generation for Front-End Automation via Modular Multimodal Agents
- Title（参考訳）: ScreenCoder: モジュール化されたマルチモーダルエージェントによるフロントエンド自動化のためのビジュアル・ツー・コード生成の改善
- Authors: Yilei Jiang, Yaozhi Zheng, Yuxuan Wan, Jiaming Han, Qunzhong Wang, Michael R. Lyu, Xiangyu Yue,
- Abstract要約: 本稿では,3つの解釈可能な段階でユーザインタフェースからコード生成を行うモジュール型マルチエージェントフレームワークを提案する。
このフレームワークは、エンドツーエンドのブラックボックスメソッドよりも堅牢性、解釈可能性、忠実性を改善する。
提案手法は, レイアウト精度, 構造コヒーレンス, コード正確性において, 最先端の性能を実現する。
- 参考スコア（独自算出の注目度）: 35.10813247827737
- License: http://creativecommons.org/licenses/by/4.0/
- Abstract: Automating the transformation of user interface (UI) designs into front-end code holds significant promise for accelerating software development and democratizing design workflows. While recent large language models (LLMs) have demonstrated progress in text-to-code generation, many existing approaches rely solely on natural language prompts, limiting their effectiveness in capturing spatial layout and visual design intent. In contrast, UI development in practice is inherently multimodal, often starting from visual sketches or mockups. To address this gap, we introduce a modular multi-agent framework that performs UI-to-code generation in three interpretable stages: grounding, planning, and generation. The grounding agent uses a vision-language model to detect and label UI components, the planning agent constructs a hierarchical layout using front-end engineering priors, and the generation agent produces HTML/CSS code via adaptive prompt-based synthesis. This design improves robustness, interpretability, and fidelity over end-to-end black-box methods. Furthermore, we extend the framework into a scalable data engine that automatically produces large-scale image-code pairs. Using these synthetic examples, we fine-tune and reinforce an open-source VLM, yielding notable gains in UI understanding and code quality. Extensive experiments demonstrate that our approach achieves state-of-the-art performance in layout accuracy, structural coherence, and code correctness. Our code is made publicly available at https://github.com/leigest519/ScreenCoder.
- Abstract（参考訳）: ユーザインターフェース(UI)設計のフロントエンドコードへの変換を自動化することは、ソフトウェア開発を加速し、設計ワークフローを民主化するための大きな約束である。
最近の大規模言語モデル(LLM)はテキスト・コード生成の進歩を示しているが、既存の多くのアプローチは自然言語のプロンプトに依存しており、空間的レイアウトと視覚的デザインの意図を捉えている。
対照的に、実際にはUI開発は本質的にマルチモーダルであり、しばしば視覚的なスケッチやモックアップから始まる。
このギャップに対処するために,UI-to-code生成を3つの解釈可能なステージ – グラウンド,プランニング,ジェネレーション – で実行するモジュール型マルチエージェントフレームワークを導入する。
グラウンドティングエージェントは、視覚言語モデルを用いてUIコンポーネントを検出してラベル付けし、プランニングエージェントは、フロントエンドエンジニアリングプリエントを使用して階層的なレイアウトを構築し、生成エージェントは、適応的なプロンプトベースの合成を通じてHTML/CSSコードを生成する。
この設計は、エンドツーエンドのブラックボックス方式よりも堅牢性、解釈可能性、忠実性を向上させる。
さらに、このフレームワークをスケーラブルなデータエンジンに拡張し、大規模な画像コードペアを自動的に生成する。
これらの合成例を使って、我々はオープンソースのVLMを微調整し強化し、UIの理解とコード品質に顕著な利益をもたらします。
大規模な実験により, レイアウト精度, 構造コヒーレンス, コード正確性において, 最先端の性能を実現することができた。
私たちのコードはhttps://github.com/leigest519/ScreenCoder.comで公開されています。
関連論文リスト
- DesignCoder: Hierarchy-Aware and Self-Correcting UI Code Generation with Large Language Models [17.348284143568282]
DesignCoderは、階層的かつ自己修正の自動化コード生成フレームワークである。
複雑なネストUI階層を理解し予測するMLLMの能力を向上するUI Grouping Chainsを導入する。
また、生成したコードのエラーを特定し、修正するモデルの能力を改善するための自己補正機構も組み込んでいます。
論文 参考訳（メタデータ） (2025-06-16T16:20:43Z) - PreGenie: An Agentic Framework for High-quality Visual Presentation Generation [25.673526096069548]
PreGenieは、マルチモーダルな大規模言語モデル(MLLM)を利用して高品質なビジュアルプレゼンテーションを生成するエージェント型でモジュール型のフレームワークである。
1)マルチモーダル入力を要約して初期コードを生成する解析と初期生成,(2)中間コードを反復的にレビューし,スライドを描画して最終品質の高いプレゼンテーションを生成するレビューと再生成の2段階で動作する。
論文 参考訳（メタデータ） (2025-05-27T18:36:19Z) - UICopilot: Automating UI Synthesis via Hierarchical Code Generation from Webpage Designs [43.006316221657904]
本稿では,Webページの設計から階層的なコード生成によってユーザインタフェース(UI)を自動生成する手法を提案する。
UICopilotの基本的な考え方は、生成プロセスを2つのステージに分解することである。
実験の結果、UICopilotは、自動評価と人的評価の両方において、既存のベースラインを大幅に上回っていることがわかった。
論文 参考訳（メタデータ） (2025-05-15T02:09:54Z) - UniToken: Harmonizing Multimodal Understanding and Generation through Unified Visual Encoding [84.87802580670579]
離散表現と連続表現の組み合わせによって視覚入力を符号化する自動回帰生成モデルUniTokenを導入する。
我々の統合ビジュアルエンコーディングフレームワークは、多次元情報を提供しながら、高レベルのセマンティクスと低レベルの詳細の両方をキャプチャする。
論文 参考訳（メタデータ） (2025-04-06T09:20:49Z) - From PowerPoint UI Sketches to Web-Based Applications: Pattern-Driven Code Generation for GIS Dashboard Development Using Knowledge-Augmented LLMs, Context-Aware Visual Prompting, and the React Framework [1.4367082420201918]
本稿では,複雑なGISアプリケーションのための知識拡張型コード生成フレームワークを提案する。
このフレームワークは、専門知識ベースから、ソフトウェアエンジニアリングのベストプラクティス、ドメイン、および高度な技術スタックを取得する。
論文 参考訳（メタデータ） (2025-02-12T19:59:57Z) - MageBench: Bridging Large Multimodal Models to Agents [90.59091431806793]
LMMは印象的な視覚的理解能力を示しており、エージェントに適用される可能性がある。
既存のベンチマークは、主に言語部分における推論能力を評価する。
MageBenchは推論機能指向のマルチモーダルエージェントベンチマークである。
論文 参考訳（メタデータ） (2024-12-05T17:08:19Z) - 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) - PosterLLaVa: Constructing a Unified Multi-modal Layout Generator with LLM [58.67882997399021]
本研究では,グラフィックレイアウトの自動生成のための統合フレームワークを提案する。
データ駆動方式では、レイアウトを生成するために構造化テキスト(JSONフォーマット)とビジュアルインストラクションチューニングを用いる。
我々は,ユーザのデザイン意図に基づいて編集可能なポスターを生成する自動テキスト投稿システムを開発した。
論文 参考訳（メタデータ） (2024-06-05T03:05:52Z) - Design2Code: Benchmarking Multimodal Code Generation for Automated Front-End Engineering [74.99736967448423]
私たちは、このタスクのための最初の実世界のベンチマークであるDesign2Codeを構築します。
テストケースとして484の多様な実世界のWebページを手作業でキュレートし、自動評価指標のセットを開発する。
我々の詳細なブレークダウンメトリクスは、入力されたWebページから視覚要素をリコールし、正しいレイアウト設計を生成するモデルがほとんど遅れていることを示している。
論文 参考訳（メタデータ） (2024-03-05T17:56:27Z) - Reinforced UI Instruction Grounding: Towards a Generic UI Task
Automation API [17.991044940694778]
汎用的なUIタスク自動化エグゼキュータとして、与えられたUIスクリーンショットに自然言語命令をベースとしたマルチモーダルモデルを構築します。
画像からテキストまでの事前学習知識の活用を容易にするため,画素からシーケンスまでのパラダイムを踏襲する。
提案する強化UI命令グラウンドモデルでは,最先端の手法よりも明確なマージンで性能が向上する。
論文 参考訳（メタデータ） (2023-10-07T07:22:41Z)
関連論文リストは本サイト内にある論文のタイトル・アブストラクトから自動的に作成しています。
指定された論文の情報です。
本サイトの運営者は本サイト（すべての情報・翻訳含む）の品質を保証せず、本サイト（すべての情報・翻訳含む）を使用して発生したあらゆる結果について一切の責任を負いません。