論文の概要: 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で公開されています。
関連論文リスト
- ThinkGen: Generalized Thinking for Visual Generation [97.19923474851987]
ThinkGenは、さまざまな世代のシナリオでChain-of-Thought(CoT)推論を明示的に活用する、思考駆動のビジュアル生成フレームワークである。
本稿では,MLLMとDiTモジュール間の強化学習を交互に行う,分離可能なGRPOベースのトレーニングパラダイムを提案する。
実験の結果、ThinkGenは複数の世代ベンチマークで堅牢で最先端のパフォーマンスを実現している。
論文 参考訳(メタデータ) (2025-12-29T16:08:50Z) - VSA:Visual-Structural Alignment for UI-to-Code [29.15071743239679]
視覚テキストアライメントにより組織化された資産を合成するための多段階パラダイムであるbfVSA(VSA)を提案する。
私たちのフレームワークは、最先端のベンチマークよりもコードのモジュール化とアーキテクチャの一貫性を大幅に改善します。
論文 参考訳(メタデータ) (2025-12-23T03:55:45Z) - VinciCoder: Unifying Multimodal Code Generation via Coarse-to-fine Visual Reinforcement Learning [13.193184888476404]
統合マルチモーダルコード生成モデルである textbfciCoder を導入する。
まず、1.6Mイメージコードペアからなる大規模スーパービジョンファインタニング(SFT)コーパスを構築する。
次に,ビジュアル強化学習(ViRL)戦略を導入する。
論文 参考訳(メタデータ) (2025-11-01T04:05:26Z) - JanusCoder: Towards a Foundational Visual-Programmatic Interface for Code Intelligence [48.39202336809688]
本稿では,標準チャートから複雑な対話型Web UI,コード駆動型アニメーションに至るまで,大規模で高品質なコーパスを効率的に生成するための完全合成ツールキットを提案する。
これは私たちのモデルであるJanusCoderとJanusCoderVのトレーニングを支えています。
7Bから14Bのスケールモデルは、商用モデルの性能に近づいたり、超えたりしています。
論文 参考訳(メタデータ) (2025-10-27T17:13:49Z) - VisCodex: Unified Multimodal Code Generation via Merging Vision and Coding Models [82.05514464090172]
マルチモーダルな大言語モデル(MLLM)は、視覚的およびテキスト的理解の統合を著しく進歩させてきた。
しかし、マルチモーダル入力からコードを生成する能力は依然として限られている。
視覚とコーディング言語モデルをシームレスにマージする統合フレームワークであるVisCodexを紹介します。
論文 参考訳(メタデータ) (2025-08-13T17:00:44Z) - 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) - Boosting Chart-to-Code Generation in MLLM via Dual Preference-Guided Refinement [16.22363384653305]
MLLM(Multimodal Large Language Models)は、きめ細かい視覚解析、正確なコード合成、堅牢なクロスモーダル推論を行う。
本稿では、フィードバック駆動の2つのモダリティ報酬機構と反復的な嗜好学習を組み合わせた2つの嗜好誘導改善フレームワークを提案する。
本フレームワークは汎用MLLMの性能を大幅に向上させ,高品質なプロットコードを生成する。
論文 参考訳(メタデータ) (2025-04-03T07:51:20Z) - 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) - SynerGen-VL: Towards Synergistic Image Understanding and Generation with Vision Experts and Token Folding [66.74446220401296]
画像の理解と生成の両方が可能なシンプルだが強力なエンコーダのないMLLMであるSynerGen-VLを提案する。
トークンの折り畳み機構と,高分解能画像理解を効果的に支援するビジョンエキスパートベースのプログレッシブアライメント事前学習戦略を導入する。
コードとモデルはリリースされます。
論文 参考訳(メタデータ) (2024-12-12T18:59:26Z) - 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)
関連論文リストは本サイト内にある論文のタイトル・アブストラクトから自動的に作成しています。
指定された論文の情報です。
本サイトの運営者は本サイト(すべての情報・翻訳含む)の品質を保証せず、本サイト(すべての情報・翻訳含む)を使用して発生したあらゆる結果について一切の責任を負いません。