論文の概要: DesignCoder: Hierarchy-Aware and Self-Correcting UI Code Generation with Large Language Models

• arxiv url: http://arxiv.org/abs/2506.13663v1
• Date: Mon, 16 Jun 2025 16:20:43 GMT
• ステータス: 翻訳完了
• システム内更新日: 2025-06-17 17:28:48.9871
• Title: DesignCoder: Hierarchy-Aware and Self-Correcting UI Code Generation with Large Language Models
• Title（参考訳）: DesignCoder: 大きな言語モデルによる階層認識と自己修正UIコード生成
• Authors: Yunnong Chen, Shixian Ding, YingYing Zhang, Wenkai Chen, Jinzhou Du, Lingyun Sun, Liuqing Chen,
• Abstract要約: DesignCoderは、階層的かつ自己修正の自動化コード生成フレームワークである。 複雑なネストUI階層を理解し予測するMLLMの能力を向上するUI Grouping Chainsを導入する。 また、生成したコードのエラーを特定し、修正するモデルの能力を改善するための自己補正機構も組み込んでいます。
• 参考スコア（独自算出の注目度）: 17.348284143568282
• License: http://creativecommons.org/licenses/by-nc-nd/4.0/
• Abstract: Multimodal large language models (MLLMs) have streamlined front-end interface development by automating code generation. However, these models also introduce challenges in ensuring code quality. Existing approaches struggle to maintain both visual consistency and functional completeness in the generated components. Moreover, they lack mechanisms to assess the fidelity and correctness of the rendered pages. To address these issues, we propose DesignCoder, a novel hierarchical-aware and self-correcting automated code generation framework. Specifically, we introduce UI Grouping Chains, which enhance MLLMs' capability to understand and predict complex nested UI hierarchies. Subsequently, DesignCoder employs a hierarchical divide-and-conquer approach to generate front-end code. Finally, we incorporate a self-correction mechanism to improve the model's ability to identify and rectify errors in the generated code. Extensive evaluations on a dataset of UI mockups collected from both open-source communities and industry projects demonstrate that DesignCoder outperforms state-of-the-art baselines in React Native, a widely adopted UI framework. Our method achieves a 37.63%, 9.52%, 12.82% performance increase in visual similarity metrics (MSE, CLIP, SSIM) and significantly improves code structure similarity in terms of TreeBLEU, Container Match, and Tree Edit Distance by 30.19%, 29.31%, 24.67%. Furthermore, we conducted a user study with professional developers to assess the quality and practicality of the generated code. Results indicate that DesignCoder aligns with industry best practices, demonstrating high usability, readability, and maintainability. Our approach provides an efficient and practical solution for agile front-end development, enabling development teams to focus more on core functionality and product innovation.
• Abstract（参考訳）: MLLM(Multimodal large language model)は、コード生成を自動化することでフロントエンドインタフェースの開発を効率化する。 しかし、これらのモデルはコード品質を保証する上での課題ももたらします。 既存のアプローチは、生成したコンポーネントの視覚的一貫性と機能的完全性の両方を維持するのに苦労している。 さらに、レンダリングされたページの忠実度と正しさを評価するメカニズムが欠如している。 これらの問題に対処するため、我々はDesignCoderという新しい階層的かつ自己修正の自動化コード生成フレームワークを提案する。 具体的には、複雑なネストUI階層を理解し予測するMLLMの機能を強化するUI Grouping Chainを紹介する。 その後、DesignCoderは、フロントエンドコードを生成するために階層的な分割・コンカレントアプローチを採用する。 最後に、生成したコードのエラーを特定し、修正するモデルの能力を改善するために、自己補正機構を組み込む。 オープンソースコミュニティと業界プロジェクトの両方から収集されたUIモックアップのデータセットに関する大規模な評価は、DesignCoderが広く採用されているUIフレームワークであるReact Nativeの最先端のベースラインを上回っていることを示している。 本手法では,視覚的類似度指標(MSE,CLIP,SSIM)のパフォーマンスが37.63%,9.52%,12.82%向上し,TreeBLEU,Container Match,Tree Edit Distanceのコード構造が30.19%,29.31%,24.67%向上した。 さらに,生成したコードの品質と実用性を評価するために,プロの開発者とともにユーザスタディを実施した。 結果として、DesignCoderは業界のベストプラクティスと整合し、高いユーザビリティ、可読性、保守性を示します。 私たちのアプローチは、アジャイルのフロントエンド開発に効率的で実践的なソリューションを提供し、開発チームがコア機能や製品革新にもっと集中できるようにします。

関連論文リスト

• DesignBench: A Comprehensive Benchmark for MLLM-based Front-end Code Generation [31.237236649603123]
  MLLM(Multimodal Large Language Models)は、フロントエンドの自動化において顕著な機能を示す。 DesignBenchは、自動フロントエンドエンジニアリングにおけるMLLMの機能を評価するためのベンチマークである。
  論文  参考訳（メタデータ） (2025-06-06T17:21:21Z)
• EpiCoder: Encompassing Diversity and Complexity in Code Generation [49.170195362149386]
  既存のコード生成方法はシードデータとしてコードスニペットを使用する。 階層的なコード機能を中心に展開する,新しい機能ツリーベースの合成フレームワークを提案する。 我々のフレームワークは、生成されたコードの複雑さを正確に制御し、関数レベルの操作からマルチファイルのシナリオまで幅広い機能を実現する。
  論文  参考訳（メタデータ） (2025-01-08T18:58:15Z)
• See-Saw Generative Mechanism for Scalable Recursive Code Generation with Generative AI [0.0]
  本稿では,動的かつ反復的なコード生成手法であるSee-Saw生成機構を紹介する。 提案されたアプローチは、アライメントと機能を保証するために、メインコード更新と依存性生成を交互に行う。 このメカニズムにより、すべてのコードコンポーネントが同期化され、機能し、スケーラブルで効率的なプロジェクト生成を可能にする。
  論文  参考訳（メタデータ） (2024-11-16T18:54:56Z)
• CodeTree: Agent-guided Tree Search for Code Generation with Large Language Models [106.11371409170818]
  大規模言語モデル(LLM)は、生成されたコードを自己定義し、自律的に改善する機能を持つエージェントとして機能する。 コード生成プロセスの異なる段階における探索空間を効率的に探索するLLMエージェントのためのフレームワークであるCodeTreeを提案する。 具体的には、異なるコーディング戦略を明示的に探求し、対応するコーディングソリューションを生成し、その後、ソリューションを洗練するために統合されたツリー構造を採用しました。
  論文  参考訳（メタデータ） (2024-11-07T00:09:54Z)
• Codev-Bench: How Do LLMs Understand Developer-Centric Code Completion? [60.84912551069379]
  Code-Development Benchmark (Codev-Bench)は、細粒度で現実世界、リポジトリレベル、開発者中心の評価フレームワークです。 Codev-Agentは、リポジトリのクローリングを自動化し、実行環境を構築し、既存のユニットテストから動的呼び出しチェーンを抽出し、データ漏洩を避けるために新しいテストサンプルを生成するエージェントベースのシステムである。
  論文  参考訳（メタデータ） (2024-10-02T09:11:10Z)
• Bridging Design and Development with Automated Declarative UI Code Generation [18.940075474582564]
  宣言的なUIフレームワークはモバイルアプリ開発で広く採用されており、コード可読性の改善やメンテナンスの容易化といったメリットを提供している。 マルチモーダルな大規模言語モデル(MLLM)の最近の進歩は、ユーザインターフェース(UI)設計から直接モバイルアプリコードを生成することを約束している。 本稿では,コンピュータビジョン(CV),MLLM,反復的コンパイラ駆動最適化を併用して,宣言型UIコードを設計から生成・洗練する自動アプローチであるDeclaUIを提案する。
  論文  参考訳（メタデータ） (2024-09-18T03:04:12Z)
• ALaRM: Align Language Models via Hierarchical Rewards Modeling [41.79125107279527]
  ALaRMは、人間からのフィードバックから強化学習において、階層的な報酬をモデル化する最初のフレームワークである。 このフレームワークは、全体的な報酬とアスペクト固有の報酬を統合することで、現在のアライメントアプローチの限界に対処する。 我々は、長文質問応答および機械翻訳タスクの応用を通して、我々のアプローチを検証する。
  論文  参考訳（メタデータ） (2024-03-11T14:28:40Z)

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

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