論文の概要: Design2Code: How Far Are We From Automating Front-End Engineering?

• arxiv url: http://arxiv.org/abs/2403.03163v1
• Date: Tue, 5 Mar 2024 17:56:27 GMT
• ステータス: 処理完了
• システム内更新日: 2024-03-06 14:03:28.967500
• Title: Design2Code: How Far Are We From Automating Front-End Engineering?
• Title（参考訳）: Design2Code: フロントエンドエンジニアリングの自動化からどのくらい離れていますか?
• Authors: Chenglei Si, Yanzhe Zhang, Zhengyuan Yang, Ruibo Liu, Diyi Yang
• Abstract要約: これを Design2Code タスクとして形式化し,包括的なベンチマークを行う。 具体的には、テストケースとして、484の多様な現実世界のWebページのベンチマークを手動でキュレートする。 我々は,GPT-4V と Gemini Pro Vision 上で,マルチモーダルプロンプト手法のスイートを開発し,その有効性を示す。 人的評価と自動測定の両方で、GPT-4Vは他のモデルと比較して、このタスクにおいて最善であることを示している。
• 参考スコア（独自算出の注目度）: 83.06100360864502
• License: http://creativecommons.org/licenses/by/4.0/
• Abstract: Generative AI has made rapid advancements in recent years, achieving unprecedented capabilities in multimodal understanding and code generation. This can enable a new paradigm of front-end development, in which multimodal LLMs might directly convert visual designs into code implementations. In this work, we formalize this as a Design2Code task and conduct comprehensive benchmarking. Specifically, we manually curate a benchmark of 484 diverse real-world webpages as test cases and develop a set of automatic evaluation metrics to assess how well current multimodal LLMs can generate the code implementations that directly render into the given reference webpages, given the screenshots as input. We also complement automatic metrics with comprehensive human evaluations. We develop a suite of multimodal prompting methods and show their effectiveness on GPT-4V and Gemini Pro Vision. We further finetune an open-source Design2Code-18B model that successfully matches the performance of Gemini Pro Vision. Both human evaluation and automatic metrics show that GPT-4V performs the best on this task compared to other models. Moreover, annotators think GPT-4V generated webpages can replace the original reference webpages in 49% of cases in terms of visual appearance and content; and perhaps surprisingly, in 64% of cases GPT-4V generated webpages are considered better than the original reference webpages. Our fine-grained break-down metrics indicate that open-source models mostly lag in recalling visual elements from the input webpages and in generating correct layout designs, while aspects like text content and coloring can be drastically improved with proper finetuning.
• Abstract（参考訳）: 生成AIは近年急速に進歩し、マルチモーダル理解とコード生成において前例のない能力を達成した。 これによって、マルチモーダル LLM がビジュアルデザインを直接コード実装に変換するという、フロントエンド開発の新たなパラダイムが可能になる。 本研究では,これを Design2Code タスクとして形式化し,包括的なベンチマークを行う。 具体的には、テストケースとして484の多様な実世界のWebページのベンチマークを手動でキュレートし、スクリーンショットを入力として、現在のマルチモーダル LLM が与えられた参照Webページに直接レンダリングするコード実装をどれだけうまく生成できるかを評価するための、一連の自動評価指標を開発する。 また,自動計測を総合的な評価で補完する。 我々は,GPT-4V と Gemini Pro Vision 上で,マルチモーダルプロンプト手法のスイートを開発し,その有効性を示す。 我々はさらに,gemini pro visionのパフォーマンスに適合するオープンソース design2code-18b モデルを微調整した。 人的評価と自動測定の両方で、GPT-4Vは他のモデルと比較して、このタスクにおいて最善であることを示している。 さらにアノテータは、GPT-4V生成されたWebページは、視覚的な外観と内容の49%のケースで元のリファレンスWebページを置き換えることができると考えている。 我々の詳細なブレークダウンメトリクスは、オープンソースのモデルは、入力されたWebページから視覚的要素をリコールし、正しいレイアウト設計を生成するのにほとんど遅れがあることを示します。

関連論文リスト

• Automatically Generating UI Code from Screenshot: A Divide-and-Conquer-Based Approach [51.522121376987634]
  ウェブページデザインのUIコードへの変換を自動化するための分割型アプローチであるDCGenを提案する。 DCGenはまず、スクリーンショットを管理可能なセグメントに分割し、各セグメントについて記述を生成し、その後、スクリーンショット全体のUIコードに再組み立てする。 実世界のWebサイトとさまざまなMLLMで構成されたデータセットを用いて広範囲なテストを行い、DCGenが競合するメソッドに比べて最大14%の視覚的類似性を実現していることを示す。
  論文  参考訳（メタデータ） (2024-06-24T07:58:36Z)
• GPT-4V(ision) is a Generalist Web Agent, if Grounded [20.940613419944015]
  GPT-4Vは、手動でウェブサイト上のアクションに計画を立てれば、ライブWebサイト上で51.1タスクを完了できることを示す。 本稿では,Web上での視覚的理解と行動の統合にLMMの力を利用するWebエージェントであるSEEACTを提案する。
  論文  参考訳（メタデータ） (2024-01-03T08:33:09Z)
• The Dawn of LMMs: Preliminary Explorations with GPT-4V(ision) [121.42924593374127]
  我々は,最新のモデルであるGPT-4Vを分析し,LMMの理解を深める。 GPT-4Vは、任意にインターリーブされたマルチモーダル入力を処理するという前例のない能力により、強力なマルチモーダルジェネラリストシステムとなっている。 GPT-4Vの、入力画像に描かれた視覚マーカーを理解するユニークな能力は、新しい人間とコンピュータの相互作用方法をもたらす。
  論文  参考訳（メタデータ） (2023-09-29T17:34:51Z)
• Visual Programming for Text-to-Image Generation and Evaluation [73.12069620086311]
  テキスト・トゥ・イメージ(T2I)生成と評価のための2つの新しい解釈可能・説明可能なビジュアル・プログラミング・フレームワークを提案する。 まず,T2I生成をオブジェクト/カウント生成,レイアウト生成,画像生成という3つのステップに分解する,解釈可能なステップバイステップT2I生成フレームワークであるVPGenを紹介する。 第2に、視覚プログラミングに基づくT2I生成のための解釈可能かつ説明可能な評価フレームワークであるVPEvalを紹介する。
  論文  参考訳（メタデータ） (2023-05-24T16:42:17Z)
• Learning UI-to-Code Reverse Generator Using Visual Critic Without Rendering [18.74127660489501]
  本稿では,スクリーンショット処理を行うビジョンエンコーダと,コードを生成する言語デコーダからなる新しいビジョンコードトランス (ViCT) を提案する。 これらは事前訓練されたモデルによって構成されるが、2つのモダリティの調整にはエンドツーエンドの微調整が必要である。 ViCTはLLaMAのような大きなデコーダを使用する場合と同等のパフォーマンスを達成できる。
  論文  参考訳（メタデータ） (2023-05-24T02:17:32Z)
• Multimodal Web Navigation with Instruction-Finetuned Foundation Models [99.14209521903854]
  視覚言語基礎モデルを用いたWebエージェントのためのデータ駆動オフライントレーニングについて検討する。 本稿では,WebページのスクリーンショットとHTMLページの両方を観察する命令追従型マルチモーダルエージェントWebGUMを提案する。 このレシピは,マルチモーダル認識,HTML理解,マルチステップ推論といったエージェントの能力を向上させることを実証的に実証する。
  論文  参考訳（メタデータ） (2023-05-19T17:44:34Z)
• Visual Instruction Tuning [79.70923292053097]
  本稿では,言語のみの GPT-4 を用いてマルチモーダルな言語イメージ命令追跡データを生成する試みについて紹介する。 このようなデータに対して,LLaVA: Large Language and Vision Assistantを導入する。 科学QAを微調整すると、LLaVAとGPT-4の相乗効果は92.53%の新しい最先端精度を達成する。
  論文  参考訳（メタデータ） (2023-04-17T17:59:25Z)

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

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