論文の概要: LaTCoder: Converting Webpage Design to Code with Layout-as-Thought

• arxiv url: http://arxiv.org/abs/2508.03560v1
• Date: Tue, 05 Aug 2025 15:28:48 GMT
• ステータス: 翻訳完了
• システム内更新日: 2025-08-06 18:18:56.0466
• Title: LaTCoder: Converting Webpage Design to Code with Layout-as-Thought
• Title（参考訳）: LaTCoder: Layout-as-ThoughtでWebページデザインをコードに変換する
• Authors: Yi Gui, Zhen Li, Zhongyi Zhang, Guohao Wang, Tianpeng Lv, Gaoyang Jiang, Yi Liu, Dongping Chen, Yao Wan, Hongyu Zhang, Wenbin Jiang, Xuanhua Shi, Hai Jin,
• Abstract要約: LaTCoderは、レイアウト・アズ・ソート(LaT)によるコード生成中のWebページ設計におけるレイアウトの保存性を高める新しいアプローチである。 具体的には、まず、Webページのデザインを画像ブロックに分割する単純なアルゴリズムを導入する。次に、CoTベースのアプローチを用いて、各ブロックのコードを生成する。最後に、2つのアセンブリ戦略絶対位置決めと、動的選択によりMLLMベースのメソッドを適用して、最適出力を決定する。
• 参考スコア（独自算出の注目度）: 27.815304610123754
• License: http://arxiv.org/licenses/nonexclusive-distrib/1.0/
• Abstract: Converting webpage designs into code (design-to-code) plays a vital role in User Interface (UI) development for front-end developers, bridging the gap between visual design and functional implementation. While recent Multimodal Large Language Models (MLLMs) have shown significant potential in design-to-code tasks, they often fail to accurately preserve the layout during code generation. To this end, we draw inspiration from the Chain-of-Thought (CoT) reasoning in human cognition and propose LaTCoder, a novel approach that enhances layout preservation in webpage design during code generation with Layout-as-Thought (LaT). Specifically, we first introduce a simple yet efficient algorithm to divide the webpage design into image blocks. Next, we prompt MLLMs using a CoTbased approach to generate code for each block. Finally, we apply two assembly strategies-absolute positioning and an MLLM-based method-followed by dynamic selection to determine the optimal output. We evaluate the effectiveness of LaTCoder using multiple backbone MLLMs (i.e., DeepSeek-VL2, Gemini, and GPT-4o) on both a public benchmark and a newly introduced, more challenging benchmark (CC-HARD) that features complex layouts. The experimental results on automatic metrics demonstrate significant improvements. Specifically, TreeBLEU scores increased by 66.67% and MAE decreased by 38% when using DeepSeek-VL2, compared to direct prompting. Moreover, the human preference evaluation results indicate that annotators favor the webpages generated by LaTCoder in over 60% of cases, providing strong evidence of the effectiveness of our method.
• Abstract（参考訳）: Webページのデザインをコード(設計からコード)に変換することは、フロントエンド開発者にとってユーザーインターフェース(UI)開発において重要な役割を担い、ビジュアルデザインと機能実装のギャップを埋める。 最近のMultimodal Large Language Models (MLLM) は、設計からコードへのタスクにおいて大きな可能性を示しているが、コード生成時のレイアウトを正確に保存することができないことが多い。 この目的のために,人間の認知におけるChain-of-Thought(CoT)推論から着想を得たLaTCoderを提案し,Layout-as-Thought(LaT)を用いたコード生成において,Webページ設計におけるレイアウトの保存を向上する手法を提案する。 具体的には、まず、Webページのデザインを画像ブロックに分割する、単純だが効率的なアルゴリズムを提案する。 次に、ブロック毎にコードを生成するためにCoTベースのアプローチを用いてMLLMをプロンプトする。 最後に、2つの組立戦略絶対位置決めと、動的選択によるMLLMに基づく手法を適用し、最適出力を決定する。 本稿では,複数のバックボーンMLLM(DeepSeek-VL2,Gemini,GPT-4o)を用いたLaTCoderの有効性を評価する。 自動測定実験の結果は大幅に改善された。 具体的には、TreeBLEUのスコアは66.67%、MAEはDeepSeek-VL2を使用すると38%低下した。 また,ヒトの嗜好評価の結果から,LaTCoderが生成するWebページの60%以上をアノテーションが好んでいることが示唆され,本手法の有効性が強く示唆された。

関連論文リスト

• MLLM-Based UI2Code Automation Guided by UI Layout Information [17.177322441575196]
  3つのキーモジュールを含む実世界のWebページイメージからUIコードを生成するMLLMベースの新しいフレームワークを提案する。 評価のために、Snap2Codeという350の現実世界のWebサイトを含む新しいベンチマークデータセットを構築しました。
  論文  参考訳（メタデータ） (2025-06-12T06:04:16Z)
• UICopilot: Automating UI Synthesis via Hierarchical Code Generation from Webpage Designs [43.006316221657904]
  本稿では,Webページの設計から階層的なコード生成によってユーザインタフェース(UI)を自動生成する手法を提案する。 UICopilotの基本的な考え方は、生成プロセスを2つのステージに分解することである。 実験の結果、UICopilotは、自動評価と人的評価の両方において、既存のベースラインを大幅に上回っていることがわかった。
  論文  参考訳（メタデータ） (2025-05-15T02:09:54Z)
• 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)
• 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)
• Prototype2Code: End-to-end Front-end Code Generation from UI Design Prototypes [13.005027924553012]
  ビジネスニーズでエンドツーエンドのフロントエンドコード生成を実現するPrototype2Codeを紹介します。 Prototype2Codeでは、設計リンティングをワークフローに組み込んで、断片化された要素や知覚グループの検出に対処する。 階層構造を最適化し、UI要素の型をインテリジェントに認識することで、Prototype2Codeはより読みやすく構造的にクリアなコードを生成する。
  論文  参考訳（メタデータ） (2024-05-08T11:32:50Z)
• 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)
• Design2Code: Benchmarking Multimodal Code Generation for Automated Front-End Engineering [74.99736967448423]
  私たちは、このタスクのための最初の実世界のベンチマークであるDesign2Codeを構築します。 テストケースとして484の多様な実世界のWebページを手作業でキュレートし、自動評価指標のセットを開発する。 我々の詳細なブレークダウンメトリクスは、入力されたWebページから視覚要素をリコールし、正しいレイアウト設計を生成するモデルがほとんど遅れていることを示している。
  論文  参考訳（メタデータ） (2024-03-05T17:56:27Z)
• Coding by Design: GPT-4 empowers Agile Model Driven Development [0.03683202928838613]
  この研究は、アジャイルモデル駆動開発(MDD)アプローチを提供し、OpenAIのGPT-4を使ってコードの自動生成を強化する。 私たちの研究は、現行のMDDメソッドへの重要な貢献として"アジリティ"を強調しています。 最終的に、GPT-4を利用して、最後のレイヤはJavaとPythonの両方でコードを自動生成します。
  論文  参考訳（メタデータ） (2023-10-06T15:05:05Z)
• LayoutNUWA: Revealing the Hidden Layout Expertise of Large Language Models [84.16541551923221]
  本稿では,レイアウト生成をコード生成タスクとして扱うモデルを提案する。 3つの相互接続モジュールからなるCode Instruct Tuning (CIT) アプローチを開発した。 複数のデータセット上で、最先端のパフォーマンスを実現しています。
  論文  参考訳（メタデータ） (2023-09-18T06:35:10Z)
• MetaDistiller: Network Self-Boosting via Meta-Learned Top-Down Distillation [153.56211546576978]
  本研究では,ラベル生成器を用いて高い適合性を有するソフトターゲットを生成することを提案する。 このラベルジェネレータを最適化するためにメタ学習技術を用いることができる。 実験は CIFAR-100 と ILSVRC2012 の2つの標準分類ベンチマークで実施された。
  論文  参考訳（メタデータ） (2020-08-27T13:04:27Z)

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

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