論文の概要: MLLM-Based UI2Code Automation Guided by UI Layout Information

• arxiv url: http://arxiv.org/abs/2506.10376v1
• Date: Thu, 12 Jun 2025 06:04:16 GMT
• ステータス: 翻訳完了
• システム内更新日: 2025-06-13 15:37:22.593689
• Title: MLLM-Based UI2Code Automation Guided by UI Layout Information
• Title（参考訳）: UIレイアウト情報によるMLLMベースのUI2Code自動化
• Authors: Fan Wu, Cuiyun Gao, Shuqing Li, Xin-Cheng Wen, Qing Liao,
• Abstract要約: 3つのキーモジュールを含む実世界のWebページイメージからUIコードを生成するMLLMベースの新しいフレームワークを提案する。 評価のために、Snap2Codeという350の現実世界のWebサイトを含む新しいベンチマークデータセットを構築しました。
• 参考スコア（独自算出の注目度）: 17.177322441575196
• License: http://creativecommons.org/licenses/by/4.0/
• Abstract: Converting user interfaces into code (UI2Code) is a crucial step in website development, which is time-consuming and labor-intensive. The automation of UI2Code is essential to streamline this task, beneficial for improving the development efficiency. There exist deep learning-based methods for the task; however, they heavily rely on a large amount of labeled training data and struggle with generalizing to real-world, unseen web page designs. The advent of Multimodal Large Language Models (MLLMs) presents potential for alleviating the issue, but they are difficult to comprehend the complex layouts in UIs and generate the accurate code with layout preserved. To address these issues, we propose LayoutCoder, a novel MLLM-based framework generating UI code from real-world webpage images, which includes three key modules: (1) Element Relation Construction, which aims at capturing UI layout by identifying and grouping components with similar structures; (2) UI Layout Parsing, which aims at generating UI layout trees for guiding the subsequent code generation process; and (3) Layout-Guided Code Fusion, which aims at producing the accurate code with layout preserved. For evaluation, we build a new benchmark dataset which involves 350 real-world websites named Snap2Code, divided into seen and unseen parts for mitigating the data leakage issue, besides the popular dataset Design2Code. Extensive evaluation shows the superior performance of LayoutCoder over the state-of-the-art approaches. Compared with the best-performing baseline, LayoutCoder improves 10.14% in the BLEU score and 3.95% in the CLIP score on average across all datasets.
• Abstract（参考訳）: ユーザインターフェースをコードに変換するUI2Codeは、Webサイト開発において重要なステップです。 UI2Codeの自動化は、このタスクの合理化に不可欠である。 このタスクには深層学習に基づく手法があるが、大量のラベル付きトレーニングデータに大きく依存しており、実世界の目に見えないWebページの設計への一般化に苦慮している。 MLLM(Multimodal Large Language Models)の出現は問題を緩和する可能性を示しているが、UIの複雑なレイアウトを理解し、レイアウトを保存した正確なコードを生成するのは難しい。 これらの問題に対処するため, MLLMベースの新しいフレームワークであるLayoutCoderを提案する。1) コンポーネントの識別とグループ化によるUIレイアウトの取得を目的とした要素関係構築,2) コード生成プロセスの誘導を目的としたUIレイアウトツリーの生成を目的としたUIレイアウト解析,3) レイアウト保存による正確なコード生成を目的としたレイアウトガイドコードフュージョンである。 評価のために、私たちは、一般的なデータセットであるDesign2Codeに加えて、データ漏洩問題を緩和するために、スナップ2Codeという350の現実世界のWebサイトを含む、新しいベンチマークデータセットを構築しました。 大規模な評価は、最先端のアプローチよりもLayoutCoderの優れたパフォーマンスを示している。 最高のパフォーマンスのベースラインと比較して、LayoutCoderはBLEUスコアが10.14%、CLIPスコアが3.95%改善されている。

関連論文リスト

• 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)
• WebCode2M: A Real-World Dataset for Code Generation from Webpage Designs [49.91550773480978]
  本稿では256万のインスタンスからなる新しいデータセットであるWebCode2Mを紹介する。 WebCode2Mの有効性を検証するため,WebCoderという名称のVision Transformer(ViT)に基づくベースラインモデルを導入し,公正比較のためのベンチマークを確立する。 ベンチマークの結果、我々のデータセットは、Webページの設計からコードを生成するMLLMの能力を大幅に改善することを示した。
  論文  参考訳（メタデータ） (2024-04-09T15:05:48Z)
• LayoutNUWA: Revealing the Hidden Layout Expertise of Large Language Models [84.16541551923221]
  本稿では,レイアウト生成をコード生成タスクとして扱うモデルを提案する。 3つの相互接続モジュールからなるCode Instruct Tuning (CIT) アプローチを開発した。 複数のデータセット上で、最先端のパフォーマンスを実現しています。
  論文  参考訳（メタデータ） (2023-09-18T06:35:10Z)
• Sketch2FullStack: Generating Skeleton Code of Full Stack Website and Application from Sketch using Deep Learning and Computer Vision [2.422788410602121]
  大規模なWebサイトを設計し、それをコードに変換するには、経験豊富な開発者のチームが必要だ。 貴重なリソースを節約し、開発プロセス全体を短縮するでしょう。
  論文  参考訳（メタデータ） (2022-11-26T16:32:13Z)

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

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