論文の概要: Widget2Code: From Visual Widgets to UI Code via Multimodal LLMs

• arxiv url: http://arxiv.org/abs/2512.19918v1
• Date: Mon, 22 Dec 2025 22:45:39 GMT
• ステータス: 翻訳完了
• システム内更新日: 2025-12-24 19:17:49.681257
• Title: Widget2Code: From Visual Widgets to UI Code via Multimodal LLMs
• Title（参考訳）: Widget2Code: ビジュアルウィジェットからマルチモーダルLCMによるUIコードへ
• Authors: Houston H. Zhang, Tao Zhang, Baoze Lin, Yuanqi Xue, Yincheng Zhu, Huan Liu, Li Gu, Linfeng Ye, Ziqiang Wang, Xinxin Zuo, Yang Wang, Yuanhao Yu, Zhixiang Chi,
• Abstract要約: We formalize the Widget-to-Code (Widget2Code) set and introduced a image-only widget benchmark with fine-fine, multi-dimensional evaluation metrics。 ベンチマークによると、一般化された大言語モデル(MLLM)は、特別なUI2Codeメソッドよりも優れているが、信頼できない、視覚的に一貫性のないコードを生成する。 知覚レベルでは、我々は、アイコン検索と再利用可能な可視化モジュールを備えた、原子部品を完全なレイアウトに組み立てるためのウィジェット設計原則に従う。
• 参考スコア（独自算出の注目度）: 28.028216548288725
• License: http://arxiv.org/licenses/nonexclusive-distrib/1.0/
• Abstract: User interface to code (UI2Code) aims to generate executable code that can faithfully reconstruct a given input UI. Prior work focuses largely on web pages and mobile screens, leaving app widgets underexplored. Unlike web or mobile UIs with rich hierarchical context, widgets are compact, context-free micro-interfaces that summarize key information through dense layouts and iconography under strict spatial constraints. Moreover, while (image, code) pairs are widely available for web or mobile UIs, widget designs are proprietary and lack accessible markup. We formalize this setting as the Widget-to-Code (Widget2Code) and introduce an image-only widget benchmark with fine-grained, multi-dimensional evaluation metrics. Benchmarking shows that although generalized multimodal large language models (MLLMs) outperform specialized UI2Code methods, they still produce unreliable and visually inconsistent code. To address these limitations, we develop a baseline that jointly advances perceptual understanding and structured code generation. At the perceptual level, we follow widget design principles to assemble atomic components into complete layouts, equipped with icon retrieval and reusable visualization modules. At the system level, we design an end-to-end infrastructure, WidgetFactory, which includes a framework-agnostic widget-tailored domain-specific language (WidgetDSL) and a compiler that translates it into multiple front-end implementations (e.g., React, HTML/CSS). An adaptive rendering module further refines spatial dimensions to satisfy compactness constraints. Together, these contributions substantially enhance visual fidelity, establishing a strong baseline and unified infrastructure for future Widget2Code research.
• Abstract（参考訳）: コードへのユーザーインターフェイス(UI2Code)は、与えられた入力UIを忠実に再構築できる実行可能なコードを生成することを目的としています。 以前の作業は主にWebページとモバイル画面に焦点を当てており、アプリのウィジェットは未調査のままだった。 リッチな階層的なコンテキストを持つWebやモバイルのUIとは異なり、ウィジェットは、厳密なレイアウトと厳密な空間的制約の下で、キー情報を要約する、コンパクトでコンテキストのないマイクロインターフェースである。 さらに、(イメージ、コード)ペアはWebまたはモバイルUIで広く利用可能であるが、ウィジェットデザインはプロプライエタリであり、アクセス可能なマークアップがない。 We formalize this set as the Widget-to-Code (Widget2Code) and introduced a image-only widget benchmark with fine-fine, multi-dimensional evaluation metrics。 ベンチマークでは、一般化されたマルチモーダル大言語モデル(MLLM)は、特別なUI2Codeメソッドよりも優れているが、信頼できない、視覚的に一貫性のないコードを生成する。 これらの制約に対処するため、我々は知覚的理解と構造化コード生成を共同で進めるベースラインを開発する。 知覚レベルでは、我々は、アイコン検索と再利用可能な可視化モジュールを備えた、原子部品を完全なレイアウトに組み立てるためのウィジェット設計原則に従う。 システムレベルでは、フレームワークに依存しないウィジェットに適したドメイン固有言語(WidgetDSL)と、それを複数のフロントエンド実装(React、HTML/CSSなど)に変換するコンパイラを含む、エンドツーエンドのインフラストラクチャであるWidgetFactoryを設計します。 適応レンダリングモジュールは、さらに空間次元を洗練してコンパクト性制約を満たす。 これらの貢献によって視覚的忠実性が大幅に向上し、将来のWidget2Code研究のための強力なベースラインと統一されたインフラが確立される。

関連論文リスト

• UISearch: Graph-Based Embeddings for Multimodal Enterprise UI Screenshots Retrieval [1.3563834727527375]
  本稿では,UIスクリーンショットを階層関係や空間配置を符号化した属性グラフに変換するグラフベース表現を提案する。 対照的なグラフオートエンコーダは、視覚的、構造的、意味的な特性にまたがる多レベル類似性を保存する埋め込みを学習する。 この表現を,構成可能なクエリ言語による構造埋め込みとセマンティック検索を組み合わせたマルチモーダル検索フレームワークであるUISearchに実装する。
  論文  参考訳（メタデータ） (2025-11-24T18:20:08Z)
• ScreenCoder: Advancing Visual-to-Code Generation for Front-End Automation via Modular Multimodal Agents [40.697759330690815]
  ScreenCoderはモジュール型のマルチエージェントフレームワークで、タスクを3つの解釈可能なステージ(グラウンド、プランニング、生成)に分解する。 特殊エージェントにこれらの異なる責任を割り当てることで、我々のフレームワークはエンド・ツー・エンドのアプローチよりもはるかに高い堅牢性と忠実性を達成する。 提案手法は, レイアウト精度, 構造コヒーレンス, コード正確性において, 最先端の性能を実現する。
  論文  参考訳（メタデータ） (2025-07-30T16:41:21Z)
• CAL-RAG: Retrieval-Augmented Multi-Agent Generation for Content-Aware Layout Design [6.830055289299306]
  CAL-RAGは、コンテンツ対応レイアウト生成のための検索拡張エージェントフレームワークである。 我々は、LangGraphを使ってフレームワークを実装し、セマンティック変数に富んだベンチマークで評価する。 その結果,検索強化とエージェント的多段階推論を組み合わせることで,拡張性,解釈性,高忠実度な解が得られることがわかった。
  論文  参考訳（メタデータ） (2025-06-27T06:09:56Z)
• MLLM-Based UI2Code Automation Guided by UI Layout Information [17.177322441575196]
  3つのキーモジュールを含む実世界のWebページイメージからUIコードを生成するMLLMベースの新しいフレームワークを提案する。 評価のために、Snap2Codeという350の現実世界のWebサイトを含む新しいベンチマークデータセットを構築しました。
  論文  参考訳（メタデータ） (2025-06-12T06:04:16Z)
• GLDesigner: Leveraging Multi-Modal LLMs as Designer for Enhanced Aesthetic Text Glyph Layouts [53.568057283934714]
  本稿では,コンテンツ対応のテキストロゴレイアウトを生成するVLM(Vision-Language Model)ベースのフレームワークを提案する。 本稿では,複数のグリフ画像を同時に処理するための計算コストを削減する2つのモデル手法を提案する。 本モデルでは,既存の公開データセットの5倍の広義のテキストロゴデータセットを2つ構築する。
  論文  参考訳（メタデータ） (2024-11-18T10:04:10Z)
• Harnessing Webpage UIs for Text-Rich Visual Understanding [112.01029887404296]
  テキストベース大規模言語モデル(LLM)を用いたWebページUIからの汎用マルチモーダル命令の合成を提案する。 これらの命令はUIスクリーンショットと組み合わせて、マルチモーダルモデルのトレーニングを行う。 我々は、100万のWebサイトから730万のサンプルを含むデータセットであるMultiUIを紹介し、多様なマルチモーダルタスクとUIレイアウトをカバーした。
  論文  参考訳（メタデータ） (2024-10-17T17:48:54Z)
• LayoutNUWA: Revealing the Hidden Layout Expertise of Large Language Models [84.16541551923221]
  本稿では,レイアウト生成をコード生成タスクとして扱うモデルを提案する。 3つの相互接続モジュールからなるCode Instruct Tuning (CIT) アプローチを開発した。 複数のデータセット上で、最先端のパフォーマンスを実現しています。
  論文  参考訳（メタデータ） (2023-09-18T06:35:10Z)

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

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