論文の概要: ComUICoder: Component-based Reusable UI Code Generation for Complex Websites via Semantic Segmentation and Element-wise Feedback
- arxiv url: http://arxiv.org/abs/2602.19276v1
- Date: Sun, 22 Feb 2026 17:17:16 GMT
- ステータス: 翻訳完了
- システム内更新日: 2026-02-24 17:42:02.561015
- Title: ComUICoder: Component-based Reusable UI Code Generation for Complex Websites via Semantic Segmentation and Element-wise Feedback
- Title（参考訳）: ComUICoder: セマンティックセグメンテーションと要素ワイズフィードバックによる複雑なWebサイトのためのコンポーネントベースの再利用可能なUIコード生成
- Authors: Jingyu Xiao, Jiantong Qin, Shuoqi Li, Man Ho Lam, Yuxuan Wan, Jen-tse Huang, Yintong Huo, Michael R. Lyu,
- Abstract要約: 複雑なWebサイトのためのセマンティックアウェアなコード生成ツールであるComUICoderを紹介した。
ComUICoderは、複雑なマルチページWebサイトの全体的な生成品質とコード再利用性を大幅に改善する。
- 参考スコア（独自算出の注目度）: 38.10354940578983
- License: http://arxiv.org/licenses/nonexclusive-distrib/1.0/
- Abstract: Multimodal Large Language Models (MLLMs) have demonstrated strong performance on the UI-to-code task, which aims to generate UI code from design mock-ups. However, when applied to long and complex websites, they often struggle with fragmented segmentation, redundant code generation for repetitive components, and frequent UI inconsistencies. To systematically investigate and address these challenges, we introduce ComUIBench, a new multi-page complex webpage benchmark with component annotations, designed to evaluate MLLMs' ability to generate reusable UI code in realistic website scenarios. Building upon this benchmark, we propose ComUICoder, a component-based UI code generation framework that emphasizes semantic-aware segmentation, code reuse, and fine-grained refinement. Specifically, ComUICoder incorporates (1) Hybrid Semantic-aware Block Segmentation for accurate UI semantic coherent block detection, (2) Visual-aware Graph-based Block Merge to consolidate structurally similar components within and across webpages for reusable implementation, and (3) Priority-based Element-wise Feedback to refine generated code and reduce element-level inconsistencies. Extensive experiments demonstrate that ComUICoder significantly improves overall generation quality and code reusability on complex multipage websites. Our datasets and code are publicly available at https://github.com/WebPAI/ComUICoder.
- Abstract（参考訳）: マルチモーダル大言語モデル(MLLM)は、デザインモックアップからUIコードを生成することを目的としたUI-to-codeタスクにおいて、強力なパフォーマンスを示している。
しかし、長く複雑なWebサイトに適用すると、断片化されたセグメンテーション、繰り返しコンポーネントの冗長コード生成、頻繁なUIの不整合に悩まされることが多い。
これらの課題をシステマティックに調査し,対処するために,コンポーネントアノテーションを備えたマルチページ複雑なWebページベンチマークであるComUIBenchを導入し,現実的なWebシナリオにおいて再利用可能なUIコードを生成するMLLMの能力を評価する。
このベンチマークに基づいて、セマンティック・アウェア・セグメンテーション、コード再利用、きめ細かい精細化を強調するコンポーネントベースのUIコード生成フレームワークであるComUICoderを提案する。
具体的には,(1)UIのセマンティック・コヒーレント・ブロック検出のためのハイブリッドセマンティック・ブロック・セグメンテーション,(2)Webページ内および再利用可能な実装のための構造的に類似したコンポーネントを統合するビジュアル・アウェア・グラフ・ベース・ブロック・マージ,(3)生成したコードを洗練し,要素レベルの不整合を低減するための優先度ベースのエレメント・ワイド・フィードバックが組み込まれている。
大規模な実験により、ComUICoderは複雑なマルチページWebサイトの全体的な生成品質とコード再利用性を大幅に改善することが示された。
私たちのデータセットとコードはhttps://github.com/WebPAI/ComUICoder.comで公開されています。
関連論文リスト
- VSA:Visual-Structural Alignment for UI-to-Code [29.15071743239679]
視覚テキストアライメントにより組織化された資産を合成するための多段階パラダイムであるbfVSA(VSA)を提案する。
私たちのフレームワークは、最先端のベンチマークよりもコードのモジュール化とアーキテクチャの一貫性を大幅に改善します。
論文 参考訳（メタデータ） (2025-12-23T03:55:45Z) - Widget2Code: From Visual Widgets to UI Code via Multimodal LLMs [28.028216548288725]
We formalize the Widget-to-Code (Widget2Code) set and introduced a image-only widget benchmark with fine-fine, multi-dimensional evaluation metrics。
ベンチマークによると、一般化された大言語モデル(MLLM)は、特別なUI2Codeメソッドよりも優れているが、信頼できない、視覚的に一貫性のないコードを生成する。
知覚レベルでは、我々は、アイコン検索と再利用可能な可視化モジュールを備えた、原子部品を完全なレイアウトに組み立てるためのウィジェット設計原則に従う。
論文 参考訳（メタデータ） (2025-12-22T22:45:39Z) - 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) - MLLM-Based UI2Code Automation Guided by UI Layout Information [17.177322441575196]
3つのキーモジュールを含む実世界のWebページイメージからUIコードを生成するMLLMベースの新しいフレームワークを提案する。
評価のために、Snap2Codeという350の現実世界のWebサイトを含む新しいベンチマークデータセットを構築しました。
論文 参考訳（メタデータ） (2025-06-12T06:04:16Z) - Universal Item Tokenization for Transferable Generative Recommendation [89.42584009980676]
本稿では、転送可能な生成レコメンデーションのためのユニバーサルアイテムトークン化手法であるUTGRecを提案する。
木構造コードブックを考案することにより、コンテンツ表現をアイテムトークン化のための対応するコードに識別する。
生のコンテンツ再構成には、アイテムテキストとイメージを離散表現から再構成するために、デュアルライトウェイトデコーダを用いる。
協調的知識統合においては,共起的アイテムが類似していると仮定し,共起的アライメントと再構築を通じて協調的信号を統合する。
論文 参考訳（メタデータ） (2025-04-06T08:07:49Z) - EpiCoder: Encompassing Diversity and Complexity in Code Generation [66.43738008739555]
既存のコード生成方法はシードデータとしてコードスニペットを使用する。
階層的なコード機能を中心に展開する,新しい機能ツリーベースの合成フレームワークを提案する。
我々のフレームワークは、生成されたコードの複雑さを正確に制御し、関数レベルの操作からマルチファイルのシナリオまで幅広い機能を実現する。
論文 参考訳（メタデータ） (2025-01-08T18:58:15Z) - 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) - EGFE: End-to-end Grouping of Fragmented Elements in UI Designs with
Multimodal Learning [10.885275494978478]
断片化された要素をグループ化することで、生成されたコードの可読性と保守性を大幅に向上させることができる。
現在の手法では、フラグメントされた要素をグループ化する手作りのルールを導入する2段階の戦略を採用している。
UIシークエンス予測によるエンドツーエンドのグルーピングフラグメンテッド要素の自動生成手法EGFEを提案する。
論文 参考訳（メタデータ） (2023-09-18T15:28:12Z) - InterCode: Standardizing and Benchmarking Interactive Coding with
Execution Feedback [50.725076393314964]
標準的な強化学習環境として,インタラクティブコーディングの軽量でフレキシブルで使いやすいフレームワークであるInterCodeを紹介した。
私たちのフレームワークは、言語とプラットフォームに依存しない、自己完結型のDocker環境を使用して、安全で再現可能な実行を提供します。
我々は、異なるプロンプト戦略で構成された複数の最先端LLMを評価することにより、InterCodeの生存性をテストベッドとして示す。
論文 参考訳（メタデータ） (2023-06-26T17:59:50Z)
関連論文リストは本サイト内にある論文のタイトル・アブストラクトから自動的に作成しています。
指定された論文の情報です。
本サイトの運営者は本サイト（すべての情報・翻訳含む）の品質を保証せず、本サイト（すべての情報・翻訳含む）を使用して発生したあらゆる結果について一切の責任を負いません。