論文の概要: ScreenCoder: Advancing Visual-to-Code Generation for Front-End Automation via Modular Multimodal Agents
- arxiv url: http://arxiv.org/abs/2507.22827v2
- Date: Mon, 20 Oct 2025 14:13:43 GMT
- ステータス: 翻訳完了
- システム内更新日: 2025-10-25 00:56:38.484351
- 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要約: ScreenCoderはモジュール型のマルチエージェントフレームワークで、タスクを3つの解釈可能なステージ(グラウンド、プランニング、生成)に分解する。
特殊エージェントにこれらの異なる責任を割り当てることで、我々のフレームワークはエンド・ツー・エンドのアプローチよりもはるかに高い堅牢性と忠実性を達成する。
提案手法は, レイアウト精度, 構造コヒーレンス, コード正確性において, 最先端の性能を実現する。
- 参考スコア（独自算出の注目度）: 40.697759330690815
- 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 multimodal large language models (MLLMs) can translate images to code, they often fail on complex UIs, struggling to unify visual perception, layout planning, and code synthesis within a single monolithic model, which leads to frequent perception and planning errors. To address this, we propose ScreenCoder, a modular multi-agent framework that decomposes the task into three interpretable stages: grounding, planning, and generation. By assigning these distinct responsibilities to specialized agents, our framework achieves significantly higher robustness and fidelity than end-to-end approaches. Furthermore, ScreenCoder serves as a scalable data engine, enabling us to generate high-quality image-code pairs. We use this data to fine-tune open-source MLLM via a dual-stage pipeline of supervised fine-tuning and reinforcement learning, demonstrating substantial gains in its UI generation capabilities. 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)設計のフロントエンドコードへの変換を自動化することは、ソフトウェア開発を加速し、設計ワークフローを民主化するための大きな約束である。
MLLM(Multimodal large language model)は、イメージをコードに変換することができるが、視覚的な認識、レイアウト計画、コードの合成を単一のモノリシックモデルで統一するのに苦労する複雑なUIでは、しばしば失敗し、頻繁な認識や計画上のエラーを引き起こす。
これを解決するために,ScreenCoderを提案する。ScreenCoderは,タスクを3つの解釈可能なステージ(グラウンド,プランニング,生成)に分解するモジュール型マルチエージェントフレームワークである。
特殊エージェントにこれらの異なる責任を割り当てることで、我々のフレームワークはエンド・ツー・エンドのアプローチよりもはるかに高い堅牢性と忠実性を達成する。
さらに、ScreenCoderはスケーラブルなデータエンジンとして機能し、高品質なイメージコードペアを生成することができます。
このデータを用いて、教師付き微調整および強化学習のデュアルステージパイプラインを通じてオープンソースのMLLMを微調整し、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)
関連論文リストは本サイト内にある論文のタイトル・アブストラクトから自動的に作成しています。
指定された論文の情報です。
本サイトの運営者は本サイト（すべての情報・翻訳含む）の品質を保証せず、本サイト（すべての情報・翻訳含む）を使用して発生したあらゆる結果について一切の責任を負いません。