論文の概要: Bridging Design and Development with Automated Declarative UI Code Generation

• arxiv url: http://arxiv.org/abs/2409.11667v1
• Date: Wed, 18 Sep 2024 03:04:12 GMT
• ステータス: 処理完了
• システム内更新日: 2024-09-19 19:19:53.394574
• Title: Bridging Design and Development with Automated Declarative UI Code Generation
• Title（参考訳）: 自動宣言型UIコード生成によるブリッジ設計と開発
• Authors: Ting Zhou, Yanjie Zhao, Xinyi Hou, Xiaoyu Sun, Kai Chen, Haoyu Wang,
• Abstract要約: 宣言的なUIフレームワークはモバイルアプリ開発で広く採用されており、コード可読性の改善やメンテナンスの容易化といったメリットを提供している。 マルチモーダルな大規模言語モデル(MLLM)の最近の進歩は、ユーザインターフェース(UI)設計から直接モバイルアプリコードを生成することを約束している。 本稿では,コンピュータビジョン(CV),MLLM,反復的コンパイラ駆動最適化を併用して,宣言型UIコードを設計から生成・洗練する自動アプローチであるDeclaUIを提案する。
• 参考スコア（独自算出の注目度）: 18.940075474582564
• License: http://arxiv.org/licenses/nonexclusive-distrib/1.0/
• Abstract: Declarative UI frameworks have gained widespread adoption in mobile app development, offering benefits such as improved code readability and easier maintenance. Despite these advantages, the process of translating UI designs into functional code remains challenging and time-consuming. Recent advancements in multimodal large language models (MLLMs) have shown promise in directly generating mobile app code from user interface (UI) designs. However, the direct application of MLLMs to this task is limited by challenges in accurately recognizing UI components and comprehensively capturing interaction logic. To address these challenges, we propose DeclarUI, an automated approach that synergizes computer vision (CV), MLLMs, and iterative compiler-driven optimization to generate and refine declarative UI code from designs. DeclarUI enhances visual fidelity, functional completeness, and code quality through precise component segmentation, Page Transition Graphs (PTGs) for modeling complex inter-page relationships, and iterative optimization. In our evaluation, DeclarUI outperforms baselines on React Native, a widely adopted declarative UI framework, achieving a 96.8% PTG coverage rate and a 98% compilation success rate. Notably, DeclarUI demonstrates significant improvements over state-of-the-art MLLMs, with a 123% increase in PTG coverage rate, up to 55% enhancement in visual similarity scores, and a 29% boost in compilation success rate. We further demonstrate DeclarUI's generalizability through successful applications to Flutter and ArkUI frameworks.
• Abstract（参考訳）: 宣言的なUIフレームワークはモバイルアプリ開発で広く採用されており、コード可読性の改善やメンテナンスの容易化といったメリットを提供している。 これらの利点にもかかわらず、UI設計を機能コードに変換するプロセスは困難で時間がかかる。 マルチモーダル大規模言語モデル(MLLM)の最近の進歩は、ユーザインターフェース(UI)設計から直接モバイルアプリコードを生成することを約束している。 しかし、このタスクへのMLLMの直接適用は、UIコンポーネントを正確に認識し、インタラクションロジックを包括的にキャプチャする際の課題によって制限される。 これらの課題に対処するために、コンピュータビジョン(CV)、MLLM、反復コンパイラ駆動最適化を相乗化して宣言型UIコードを設計から生成・洗練する自動化アプローチであるDeclaUIを提案する。 DeclarUIは、正確なコンポーネントセグメンテーション、複雑なページ間の関係をモデル化するためのページ遷移グラフ(PTG)、反復最適化を通じて、視覚的忠実度、機能的完全性、コード品質を向上させる。 この評価では、広く採用されている宣言型UIフレームワークであるReact Nativeのベースラインを上回り、96.8%のPTGカバレッジ率と98%のコンパイル成功率を達成した。 特に、DeclaUIは最先端のMLLMよりも大幅に改善され、PTGカバレッジレートが123%増加し、視覚的類似度スコアが55%向上し、コンパイル成功率が29%向上した。 さらに、FlutterやArkUIフレームワークへのアプリケーションの成功を通じて、DeclaUIの汎用性を実証します。

関連論文リスト

• ContextFormer: Redefining Efficiency in Semantic Segmentation [46.06496660333768]
  畳み込み法は、局所的な依存関係をうまく捉えるが、長距離関係に苦慮する。 ビジョントランスフォーマー(ViT)は、グローバルなコンテキストキャプチャでは優れるが、高い計算要求によって妨げられる。 我々は,リアルタイムセマンティックセグメンテーションの効率,精度,堅牢性のバランスをとるために,CNN と ViT の強みを活用したハイブリッドフレームワーク ContextFormer を提案する。
  論文  参考訳（メタデータ） (2025-01-31T16:11:04Z)
• Iris: Breaking GUI Complexity with Adaptive Focus and Self-Refining [67.87810796668981]
  インフォメーション・インフォメーション・インフォメーション・クロッピング(ISC)と自己精製デュアルラーニング(SRDL) Irisは850KのGUIアノテーションだけで、複数のベンチマークで最先端のパフォーマンスを実現している。 これらの改善は、WebとOSエージェントの両方の下流タスクで大幅に向上した。
  論文  参考訳（メタデータ） (2024-12-13T18:40:10Z)
• ShowUI: One Vision-Language-Action Model for GUI Visual Agent [80.50062396585004]
  グラフィカルユーザインタフェース(GUI)アシスタントの構築は、人間のワークフロー生産性を向上させるための大きな約束である。 デジタルワールドにおける視覚言語アクションモデル、すなわちShowUIを開発し、以下のイノベーションを特徴とする。 256Kデータを使用した軽量な2BモデルであるShowUIは、ゼロショットのスクリーンショットグラウンドで75.1%の精度を実現している。
  論文  参考訳（メタデータ） (2024-11-26T14:29:47Z)
• 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)
• EMMA: Efficient Visual Alignment in Multi-Modal LLMs [56.03417732498859]
  EMMAは、視覚的およびテキスト的エンコーディングを効率的に融合するために設計された軽量なクロスプラットフォームモジュールである。 EMMAは複数のタスクのパフォーマンスを最大9.3%向上させ、幻覚に対する堅牢性を大幅に向上させる。
  論文  参考訳（メタデータ） (2024-10-02T23:00:31Z)
• CoCo-Agent: A Comprehensive Cognitive MLLM Agent for Smartphone GUI Automation [61.68049335444254]
  MLLM(Multimodal large language model)は、人間のような自律型言語エージェントが現実世界の環境と相互作用する可能性を示している。 包括的環境認識(CEP)と条件付き行動予測(CAP)の2つの新しいアプローチを備えた包括的認知型LLMエージェントCoCo-Agentを提案する。 AITW と META-GUI ベンチマークにおいて,我々のエージェントは実シナリオで有望な性能を示す新しい最先端性能を実現する。
  論文  参考訳（メタデータ） (2024-02-19T08:29:03Z)
• What Makes for Good Visual Instructions? Synthesizing Complex Visual Reasoning Instructions for Visual Instruction Tuning [111.01953096869947]
  マルチモーダル大言語モデル(MLLM)のゼロショット一般化能力向上に視覚的指導チューニングが不可欠である 我々は,高品質な視覚的推論命令を自動生成する体系的手法を開発した。 実験結果から, MLLMの強化性能が一貫した結果を得た。
  論文  参考訳（メタデータ） (2023-11-02T15:36:12Z)
• EGFE: End-to-end Grouping of Fragmented Elements in UI Designs with Multimodal Learning [10.885275494978478]
  断片化された要素をグループ化することで、生成されたコードの可読性と保守性を大幅に向上させることができる。 現在の手法では、フラグメントされた要素をグループ化する手作りのルールを導入する2段階の戦略を採用している。 UIシークエンス予測によるエンドツーエンドのグルーピングフラグメンテッド要素の自動生成手法EGFEを提案する。
  論文  参考訳（メタデータ） (2023-09-18T15:28:12Z)

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

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