論文の概要: Automatically Generating UI Code from Screenshot: A Divide-and-Conquer-Based Approach
- arxiv url: http://arxiv.org/abs/2406.16386v1
- Date: Mon, 24 Jun 2024 07:58:36 GMT
- ステータス: 処理完了
- システム内更新日: 2024-06-25 15:43:33.471517
- Title: Automatically Generating UI Code from Screenshot: A Divide-and-Conquer-Based Approach
- Title（参考訳）: スクリーンショットからUIコードを自動的に生成する: 分割とコンカレントに基づくアプローチ
- Authors: Yuxuan Wan, Chaozheng Wang, Yi Dong, Wenxuan Wang, Shuqing Li, Yintong Huo, Michael R. Lyu,
- Abstract要約: ウェブページデザインのUIコードへの変換を自動化するための分割型アプローチであるDCGenを提案する。
DCGenはまず、スクリーンショットを管理可能なセグメントに分割し、各セグメントについて記述を生成し、その後、スクリーンショット全体のUIコードに再組み立てする。
実世界のWebサイトとさまざまなMLLMで構成されたデータセットを用いて広範囲なテストを行い、DCGenが競合するメソッドに比べて最大14%の視覚的類似性を実現していることを示す。
- 参考スコア（独自算出の注目度）: 51.522121376987634
- License: http://creativecommons.org/licenses/by-nc-nd/4.0/
- Abstract: Websites are critical in today's digital world, with over 1.11 billion currently active and approximately 252,000 new sites launched daily. Converting website layout design into functional UI code is a time-consuming yet indispensable step of website development. Manual methods of converting visual designs into functional code present significant challenges, especially for non-experts. To explore automatic design-to-code solutions, we first conduct a motivating study on GPT-4o and identify three types of issues in generating UI code: element omission, element distortion, and element misarrangement. We further reveal that a focus on smaller visual segments can help multimodal large language models (MLLMs) mitigate these failures in the generation process. In this paper, we propose DCGen, a divide-and-conquer-based approach to automate the translation of webpage design to UI code. DCGen starts by dividing screenshots into manageable segments, generating descriptions for each segment, and then reassembling them into complete UI code for the entire screenshot. We conduct extensive testing with a dataset comprised of real-world websites and various MLLMs and demonstrate that DCGen achieves up to a 14% improvement in visual similarity over competing methods. To the best of our knowledge, DCGen is the first segment-aware prompt-based approach for generating UI code directly from screenshots.
- Abstract（参考訳）: 現在のデジタル世界ではウェブサイトが重要であり、現在11億人以上がアクティブであり、毎日約25万2000の新規サイトが開設されている。
Webサイトレイアウト設計を機能的なUIコードに変換することは、Webサイト開発の時間を要するが必須のステップである。
ビジュアルデザインを機能コードに変換する手作業の手法は、特に非専門家にとって重要な課題である。
まず GPT-4o のモチベーション調査を行い,UI コード生成における 3 種類の問題,すなわち要素の欠落,要素の歪み,要素の誤配置を同定する。
さらに、より小さな視覚セグメントに焦点を当てることで、生成プロセスにおけるこれらの障害を軽減するマルチモーダルな大規模言語モデル(MLLM)が実現可能であることも明らかにした。
本稿では,WebページデザインのUIコードへの変換を自動化する分割・コンカレントベースのアプローチであるDCGenを提案する。
DCGenはまず、スクリーンショットを管理可能なセグメントに分割し、各セグメントについて記述を生成し、その後、スクリーンショット全体のUIコードに再組み立てする。
実世界のWebサイトとさまざまなMLLMで構成されたデータセットを用いて広範囲なテストを行い、DCGenが競合するメソッドに比べて最大14%の視覚的類似性を実現していることを示す。
私たちの知る限りでは、DCGenは、スクリーンショットから直接UIコードを生成するための、最初のセグメント対応プロンプトベースのアプローチです。
関連論文リスト
- Harnessing Webpage UIs for Text-Rich Visual Understanding [112.01029887404296]
テキストベース大規模言語モデル(LLM)を用いたWebページUIからの汎用マルチモーダル命令の合成を提案する。
これらの命令はUIスクリーンショットと組み合わせて、マルチモーダルモデルのトレーニングを行う。
我々は、100万のWebサイトから730万のサンプルを含むデータセットであるMultiUIを紹介し、多様なマルチモーダルタスクとUIレイアウトをカバーした。
論文 参考訳（メタデータ） (2024-10-17T17:48:54Z) - VISION2UI: A Real-World Dataset with Layout for Code Generation from UI Designs [29.80918775422563]
実世界のシナリオから抽出し,包括的レイアウト情報を付加した新しいデータセットVISION2UIを提案する。
このデータセットは、オープンソースのCommon Crawlデータセットの収集、クリーニング、フィルタリングを含む一連の操作によって生成される。
最終的にこのプロセスは、デザインビジョンとUIコードを含む2,000の並列サンプルからなるデータセットを生成する。
論文 参考訳（メタデータ） (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) - Reinforced UI Instruction Grounding: Towards a Generic UI Task
Automation API [17.991044940694778]
汎用的なUIタスク自動化エグゼキュータとして、与えられたUIスクリーンショットに自然言語命令をベースとしたマルチモーダルモデルを構築します。
画像からテキストまでの事前学習知識の活用を容易にするため,画素からシーケンスまでのパラダイムを踏襲する。
提案する強化UI命令グラウンドモデルでは,最先端の手法よりも明確なマージンで性能が向上する。
論文 参考訳（メタデータ） (2023-10-07T07:22:41Z) - Learning UI-to-Code Reverse Generator Using Visual Critic Without
Rendering [18.74127660489501]
本稿では,スクリーンショット処理を行うビジョンエンコーダと,コードを生成する言語デコーダからなる新しいビジョンコードトランス (ViCT) を提案する。
これらは事前訓練されたモデルによって構成されるが、2つのモダリティの調整にはエンドツーエンドの微調整が必要である。
ViCTはLLaMAのような大きなデコーダを使用する場合と同等のパフォーマンスを達成できる。
論文 参考訳（メタデータ） (2023-05-24T02:17:32Z) - Towards Accurate Image Coding: Improved Autoregressive Image Generation
with Dynamic Vector Quantization [73.52943587514386]
既存のベクトル量子化(VQ)ベースの自己回帰モデルは、2段階生成パラダイムに従う。
画像領域を可変長符号に符号化する動的量子化VAE(DQ-VAE)を提案する。
論文 参考訳（メタデータ） (2023-05-19T14:56:05Z) - Transformer-Based Visual Segmentation: A Survey [118.01564082499948]
ビジュアルセグメンテーションは、画像、ビデオフレーム、またはポイントクラウドを複数のセグメンテーションまたはグループに分割する。
トランスフォーマー(Transformer)は、自然言語処理用に設計された自己アテンションに基づくニューラルネットワークの一種である。
トランスフォーマーは、様々なセグメンテーションタスクに対して堅牢で統一的で、さらにシンプルなソリューションを提供する。
論文 参考訳（メタデータ） (2023-04-19T17:59:02Z) - Sketch2FullStack: Generating Skeleton Code of Full Stack Website and
Application from Sketch using Deep Learning and Computer Vision [2.422788410602121]
大規模なWebサイトを設計し、それをコードに変換するには、経験豊富な開発者のチームが必要だ。
貴重なリソースを節約し、開発プロセス全体を短縮するでしょう。
論文 参考訳（メタデータ） (2022-11-26T16:32:13Z) - HAT: Hierarchical Aggregation Transformers for Person Re-identification [87.02828084991062]
我々は,CNNとトランスフォーマーの両方の利点を,高性能な画像ベース人物Re-IDに適用する。
作業は、画像ベースのRe-IDのためのCNNとTransformerの両方の利点を初めて活用する。
論文 参考訳（メタデータ） (2021-07-13T09:34:54Z)
関連論文リストは本サイト内にある論文のタイトル・アブストラクトから自動的に作成しています。
指定された論文の情報です。
本サイトの運営者は本サイト（すべての情報・翻訳含む）の品質を保証せず、本サイト（すべての情報・翻訳含む）を使用して発生したあらゆる結果について一切の責任を負いません。