論文の概要: Prototype2Code: End-to-end Front-end Code Generation from UI Design Prototypes

• arxiv url: http://arxiv.org/abs/2405.04975v1
• Date: Wed, 8 May 2024 11:32:50 GMT
• ステータス: 処理完了
• システム内更新日: 2024-05-09 14:44:45.401826
• Title: Prototype2Code: End-to-end Front-end Code Generation from UI Design Prototypes
• Title（参考訳）: Prototype2Code: UIデザインプロトタイプからエンドツーエンドのフロントエンドコード生成
• Authors: Shuhong Xiao, Yunnong Chen, Jiazhi Li, Liuqing Chen, Lingyun Sun, Tingting Zhou,
• Abstract要約: ビジネスニーズでエンドツーエンドのフロントエンドコード生成を実現するPrototype2Codeを紹介します。 Prototype2Codeでは、設計リンティングをワークフローに組み込んで、断片化された要素や知覚グループの検出に対処する。 階層構造を最適化し、UI要素の型をインテリジェントに認識することで、Prototype2Codeはより読みやすく構造的にクリアなコードを生成する。
• 参考スコア（独自算出の注目度）: 13.005027924553012
• License: http://arxiv.org/licenses/nonexclusive-distrib/1.0/
• Abstract: UI-to-code technology has streamlined the front-end development process, reducing repetitive tasks for engineers. prior research mainly use design prototypes as inputs, with the effectiveness of the generated code heavily dependent on these prototypes' quality, leading to compromised robustness. Moreover, these approaches also exhibit shortcomings in code quality, including issues such as disorganized UI structures and the inability to support responsive layouts. To address these challenges, we introduce Prototype2Code, which achieves end-to-end front-end code generation with business demands. For Prototype2Code, we incorporate design linting into the workflow, addressing the detection of fragmented elements and perceptual groups, enhancing the robustness of the generated outcomes. By optimizing the hierarchical structure and intelligently recognizing UI element types, Prototype2Code generates code that is more readable and structurally clearer. To meet responsive design requirements, Prototype2Code primarily supports flexbox layout model, ensuring code compatibility across various device sizes. To validate the efficacy, we compare Prototype2Code with the commercial code generation platform CodeFun and Screenshot-to-code based on GPT-4 with vision. Employing structural similarity index measure (SSIM), peak signal-to-noise ratio (PSNR), and mean squared error (MSE) for visual similarity assessment, Prototype2Code's rendered UI effects align most closely with the design prototypes, exhibiting the minimal errors. We also conduct a user study with five experienced front-end engineers, inviting them to review and revise code generated by the three methods. As a result, Prototype2Code surpasses other methods in readability, usability, and maintainability, better meeting the business needs of industrial development.
• Abstract（参考訳）: UI-to-code技術はフロントエンドの開発プロセスを効率化し、エンジニアの繰り返しタスクを削減した。 以前の研究では、主に設計プロトタイプを入力として使用しており、生成されたコードの有効性はこれらのプロトタイプの品質に大きく依存しているため、堅牢性が損なわれている。 さらに、これらのアプローチは、非組織的なUI構造やレスポンシブレイアウトをサポートできないといった問題など、コード品質の欠点も示している。 これらの課題に対処するために、ビジネスニーズでエンドツーエンドのフロントエンドコード生成を実現するPrototype2Codeを紹介します。 Prototype2Codeでは、設計リンティングをワークフローに組み込み、断片化された要素や知覚グループの検出に対処し、生成された結果の堅牢性を高める。 階層構造を最適化し、UI要素の型をインテリジェントに認識することで、Prototype2Codeはより読みやすく構造的にクリアなコードを生成する。 レスポンシブな設計要件を満たすため、Prototype2Codeは主にflexboxレイアウトモデルをサポートし、さまざまなデバイスサイズのコード互換性を保証する。 有効性を検証するため,プロトタイプ2Codeと商用コード生成プラットフォームCodeFunとGPT-4に基づくScreenshot-to-codeを比較した。 構造的類似度指数測定(SSIM)、ピーク信号-雑音比(PSNR)、視覚的類似度評価に平均2乗誤差(MSE)を用いることで、Prototype2CodeのレンダリングUIエフェクトは設計プロトタイプと最も密接に一致し、最小限のエラーを示す。 また、経験豊富なフロントエンドエンジニア5人とユーザスタディを行い、3つのメソッドが生成したコードをレビューし、修正するよう呼びかけます。 その結果、Prototype2Codeは可読性、ユーザビリティ、保守性といった他の手法を超越し、産業開発におけるビジネスニーズをより良く満たします。

関連論文リスト

• GLDesigner: Leveraging Multi-Modal LLMs as Designer for Enhanced Aesthetic Text Glyph Layouts [53.568057283934714]
  コンテンツ対応のテキストロゴレイアウトを生成するVLMベースのフレームワークを提案する。 本稿では,複数のグリフ画像の同時処理における計算量を削減するための2つのモデル手法を提案する。 アウトモデルのインストラクションチューニングを支援するために,既存の公開データセットよりも5倍大きい2つの拡張テキストロゴデータセットを構築した。
  論文  参考訳（メタデータ） (2024-11-18T10:04:10Z)
• Sketch2Code: Evaluating Vision-Language Models for Interactive Web Design Prototyping [55.98643055756135]
  初歩的なスケッチのWebページプロトタイプへの変換を自動化する上で,最先端のビジョン言語モデル(VLM)を評価するベンチマークであるSketch2Codeを紹介した。 我々は、既存のVLMではSketch2Codeが困難であることを示す10の商用およびオープンソースモデルを分析した。 UI/UXの専門家によるユーザ調査では、受動的フィードバックの受信よりも、積極的に質問を行うのがかなり好まれている。
  論文  参考訳（メタデータ） (2024-10-21T17:39:49Z)
• DIDUP: Dynamic Iterative Development for UI Prototyping [19.486064197590995]
  我々は,LLM生成コードプロトタイピングシステムであるGPT Pilotの形式的研究を行う。 開発が開始されると、変更に対する柔軟性が低下し、障害防止や動的計画の弱点が生じることが分かりました。 反復スパイラルモデルに従うコードベースのUIプロトタイピングシステムであるDIDUPを紹介する。
  論文  参考訳（メタデータ） (2024-07-11T13:10:11Z)
• Query-guided Prototype Evolution Network for Few-Shot Segmentation [85.75516116674771]
  本稿では,前景と背景のプロトタイプの生成プロセスにクエリ機能を統合する新しい手法を提案する。 PASCAL-$5i$とミラーリング-$20i$データセットの実験結果は、QPENetが達成した実質的な拡張を示している。
  論文  参考訳（メタデータ） (2024-03-11T07:50:40Z)
• Design2Code: Benchmarking Multimodal Code Generation for Automated Front-End Engineering [74.99736967448423]
  私たちは、このタスクのための最初の実世界のベンチマークであるDesign2Codeを構築します。 テストケースとして484の多様な実世界のWebページを手作業でキュレートし、自動評価指標のセットを開発する。 我々の詳細なブレークダウンメトリクスは、入力されたWebページから視覚要素をリコールし、正しいレイアウト設計を生成するモデルがほとんど遅れていることを示している。
  論文  参考訳（メタデータ） (2024-03-05T17:56:27Z)
• EGFE: End-to-end Grouping of Fragmented Elements in UI Designs with Multimodal Learning [10.885275494978478]
  断片化された要素をグループ化することで、生成されたコードの可読性と保守性を大幅に向上させることができる。 現在の手法では、フラグメントされた要素をグループ化する手作りのルールを導入する2段階の戦略を採用している。 UIシークエンス予測によるエンドツーエンドのグルーピングフラグメンテッド要素の自動生成手法EGFEを提案する。
  論文  参考訳（メタデータ） (2023-09-18T15:28:12Z)
• Improving Code Search with Hard Negative Sampling Based on Fine-tuning [15.341959871682981]
  本稿では,クエリとコードの結合を共同で符号化するコード検索のためのクロスエンコーダアーキテクチャを提案する。 また、両エンコーダとクロスエンコーダをカスケードしたRetriever-Ranker(RR)フレームワークを導入し、評価とオンラインサービスの有効性を高める。
  論文  参考訳（メタデータ） (2023-05-08T07:04:28Z)
• Code Difference Guided Adversarial Example Generation for Deep Code Models [25.01072108219646]
  ディープコードモデルの堅牢性をテストし、強化する上で、敵対的な例は重要です。 深層コードモデルをテストするための新しい逆例生成手法(CODA)を提案する。
  論文  参考訳（メタデータ） (2023-01-06T08:03:56Z)
• UniXcoder: Unified Cross-Modal Pre-training for Code Representation [65.6846553962117]
  プログラミング言語のためのクロスモーダル事前学習モデルUniXcoderを提案する。 木の構造情報を全て保持するシーケンス構造でASTを変換する1対1のマッピング手法を提案する。 我々は,UniXcoderを9つのデータセット上で5つのコード関連タスクで評価する。
  論文  参考訳（メタデータ） (2022-03-08T04:48:07Z)
• GraphCodeBERT: Pre-training Code Representations with Data Flow [97.00641522327699]
  本稿では,コード固有の構造を考慮したプログラミング言語の事前学習モデルであるGraphCodeBERTを提案する。 これは変数間の"where-the-value-comes-from"の関係をエンコードするコードのセマンティックレベルの構造です。 コード検索,クローン検出,コード翻訳,コード改良の4つのタスクにおいて,本モデルを評価する。
  論文  参考訳（メタデータ） (2020-09-17T15:25:56Z)

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

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