論文の概要: WebCode2M: A Real-World Dataset for Code Generation from Webpage Designs
- arxiv url: http://arxiv.org/abs/2404.06369v2
- Date: Sat, 22 Feb 2025 05:15:18 GMT
- ステータス: 翻訳完了
- システム内更新日: 2025-02-25 22:36:55.278049
- Title: WebCode2M: A Real-World Dataset for Code Generation from Webpage Designs
- Title（参考訳）: WebCode2M:Webページデザインからコードを生成するリアルタイムデータセット
- Authors: Yi Gui, Zhen Li, Yao Wan, Yemin Shi, Hongyu Zhang, Yi Su, Bohua Chen, Dongping Chen, Siyuan Wu, Xing Zhou, Wenbin Jiang, Hai Jin, Xiangliang Zhang,
- Abstract要約: 本稿では256万のインスタンスからなる新しいデータセットであるWebCode2Mを紹介する。
WebCode2Mの有効性を検証するため,WebCoderという名称のVision Transformer(ViT)に基づくベースラインモデルを導入し,公正比較のためのベンチマークを確立する。
ベンチマークの結果、我々のデータセットは、Webページの設計からコードを生成するMLLMの能力を大幅に改善することを示した。
- 参考スコア（独自算出の注目度）: 49.91550773480978
- License: http://arxiv.org/licenses/nonexclusive-distrib/1.0/
- Abstract: Automatically generating webpage code from webpage designs can significantly reduce the workload of front-end developers, and recent Multimodal Large Language Models (MLLMs) have shown promising potential in this area. However, our investigation reveals that most existing MLLMs are constrained by the absence of high-quality, large-scale, real-world datasets, resulting in inadequate performance in automated webpage code generation. To fill this gap, this paper introduces WebCode2M, a new dataset comprising 2.56 million instances, each containing a design image along with the corresponding webpage code and layout details. Sourced from real-world web resources, WebCode2M offers a rich and valuable dataset for webpage code generation across a variety of applications. The dataset quality is ensured by a scoring model that filters out instances with aesthetic deficiencies or other incomplete elements. To validate the effectiveness of WebCode2M, we introduce a baseline model based on the Vision Transformer (ViT), named WebCoder, and establish a benchmark for fair comparison. Additionally, we introduce a new metric, TreeBLEU, to measure the structural hierarchy recall. The benchmarking results demonstrate that our dataset significantly improves the ability of MLLMs to generate code from webpage designs, confirming its effectiveness and usability for future applications in front-end design tools. Finally, we highlight several practical challenges introduced by our dataset, calling for further research. The code and dataset are publicly available at our project homepage: https://webcode2m.github.io.
- Abstract（参考訳）: WebページのデザインからWebページコードを自動的に生成することで、フロントエンド開発者の作業量が大幅に削減され、最近のMLLM(Multimodal Large Language Models)はこの領域で有望な可能性を示している。
しかし,本研究では,既存のMLLMの多くは,高品質で大規模な実世界のデータセットが欠如しているため,自動Webページコード生成の性能が不十分であることが判明した。
このギャップを埋めるために、WebCode2Mという256万のインスタンスからなる新しいデータセットを紹介し、それぞれが対応するWebページコードとレイアウトの詳細と共にデザインイメージを含む。
WebCode2Mは、現実世界のWebリソースをソースとして、さまざまなアプリケーションにわたるWebページコード生成のためのリッチで価値のあるデータセットを提供する。
データセットの品質は、美的欠陥やその他の不完全な要素を持つインスタンスをフィルタリングするスコアリングモデルによって保証される。
WebCode2Mの有効性を検証するため,WebCoderという名称のVision Transformer(ViT)に基づくベースラインモデルを導入し,公正比較のためのベンチマークを確立する。
さらに,構造的階層的リコールを測定するための新しい指標であるTreeBLEUを導入する。
ベンチマークの結果、我々のデータセットは、Webページデザインからコードを生成するMLLMの能力を大幅に改善し、フロントエンド設計ツールにおける将来のアプリケーションの有効性とユーザビリティを確認した。
最後に、データセットで導入されたいくつかの実践的な課題を強調し、さらなる研究を要求します。
コードとデータセットはプロジェクトのホームページで公開されています。
関連論文リスト
- MRWeb: An Exploration of Generating Multi-Page Resource-Aware Web Code from UI Designs [50.274447094978996]
マルチページリソース対応Webページ(MRWeb)生成タスクは、UIデザインをマルチページ、内部/外部ナビゲーション、イメージローディング、バックエンドルーティングを備えた機能的なWebUIに変換する。
本稿では,500のWebサイト(300の合成,200の現実世界)を新たにキュレートしたデータセットを用いて既存のMRWeb問題に適用する。特に,Web UIの類似性を評価し,MRWeb生成に対するリソースリストの影響を評価し,MLLMの制約を分析し,MRWebツールの有効性を評価する。
論文 参考訳（メタデータ） (2024-12-19T15:02:33Z) - RedPajama: an Open Dataset for Training Large Language Models [80.74772646989423]
我々は、オープンソースの言語モデルを前進させるために対処しなければならない3つの中核的なデータ関連課題を特定します。
例えば、(1)データキュレーションプロセス、(2)大量の高品質データへのアクセス、(3)データセットキュレーションと分析のためのアーティファクトとメタデータの可用性などである。
LLaMAトレーニングデータセットのオープンレプリケーションであるRedPajama-V1と、生の未フィルタリングテキストデータと品質信号とメタデータからなる巨大なWeb専用データセットであるRedPajama-V2をリリースする。
論文 参考訳（メタデータ） (2024-11-19T09:35:28Z) - Web-Scale Visual Entity Recognition: An LLM-Driven Data Approach [56.55633052479446]
Webスケールのビジュアルエンティティ認識は、クリーンで大規模なトレーニングデータがないため、重大な課題を呈している。
本稿では,ラベル検証,メタデータ生成,合理性説明に多モーダル大言語モデル(LLM)を活用することによって,そのようなデータセットをキュレートする新しい手法を提案する。
実験により、この自動キュレートされたデータに基づいてトレーニングされたモデルは、Webスケールの視覚的エンティティ認識タスクで最先端のパフォーマンスを達成することが示された。
論文 参考訳（メタデータ） (2024-10-31T06:55:24Z) - EDGE: Enhanced Grounded GUI Understanding with Enriched Multi-Granularity Synthetic Data [15.801018643716437]
本稿では,大規模視覚言語モデル(LVLM)のGUI理解と対話能力を,データ駆動型アプローチにより向上することを目的とする。
本稿では,Web上のWebページから大規模で粒度の高いトレーニングデータを自動的に生成する汎用データ合成フレームワークEDGEを提案する。
提案手法は,手動アノテーションへの依存を著しく低減し,研究者がWeb上で利用可能な膨大な公開リソースを活用して作業を進めることを可能にする。
論文 参考訳（メタデータ） (2024-10-25T10:46:17Z) - Data Formulator 2: Iteratively Creating Rich Visualizations with AI [65.48447317310442]
これらの課題に対処するためのLCMを利用した可視化システムであるData Formulator 2を提案する。
Data Formulator 2では、ユーザはUIと自然言語をブレンドして視覚化の意図を記述し、データ変換はAIに委譲される。
イテレーションをサポートするため、Data Formulator 2では、ユーザがイテレーション履歴をナビゲートし、以前の設計を新しい設計に再利用することで、毎回スクラッチから始める必要がない。
論文 参考訳（メタデータ） (2024-08-28T20:12:17Z) - WebRPG: Automatic Web Rendering Parameters Generation for Visual Presentation [24.99791278208309]
ウェブレンダリングパラメータ生成(WebRPG, Web Rendering Parameters Generation)はHTMLコードに基づくWebページの視覚的表示の自動生成を目的とした新しいタスクである。
VAEを利用して多数の要素やレンダリングパラメータを管理するベースラインモデルと、HTMLから本質的なセマンティックおよび階層的な情報をキャプチャするためのカスタムHTML埋め込みを提示する。
論文 参考訳（メタデータ） (2024-07-22T09:35:43Z) - Web2Code: A Large-scale Webpage-to-Code Dataset and Evaluation Framework for Multimodal LLMs [112.89665642941814]
MLLM(Multimodal large language model)は、画像、ビデオ、オーディオなどのモダリティにおいて顕著な成功を収めている。
現在のMLLMは、Webページのスクリーンショットを理解し、対応するHTMLコードを生成するのに驚くほど貧弱です。
命令チューニングのための大規模Webページ・ツー・コードデータセットを新たに構築したベンチマークを提案する。
論文 参考訳（メタデータ） (2024-06-28T17:59:46Z) - PosterLLaVa: Constructing a Unified Multi-modal Layout Generator with LLM [58.67882997399021]
本研究では,グラフィックレイアウトの自動生成のための統合フレームワークを提案する。
データ駆動方式では、レイアウトを生成するために構造化テキスト(JSONフォーマット)とビジュアルインストラクションチューニングを用いる。
我々は、大規模な実験を行い、パブリックなマルチモーダルレイアウト生成ベンチマーク上で、最先端(SOTA)性能を達成した。
論文 参考訳（メタデータ） (2024-06-05T03:05:52Z) - AutoScraper: A Progressive Understanding Web Agent for Web Scraper Generation [54.17246674188208]
Webスクレイピングは、Webサイトからデータを抽出し、自動データ収集を可能にし、データ分析機能を強化し、手動のデータ入力作業を最小化する強力なテクニックである。
既存の手法では、ラッパーベースの手法は、新しいウェブサイトで直面する場合、適応性とスケーラビリティの制限に悩まされる。
本稿では,大規模言語モデル(LLM)を用いたWebスクレイパー生成のパラダイムを紹介し,多様なWeb環境をより効率的に処理できる2段階フレームワークであるAutoScraperを提案する。
論文 参考訳（メタデータ） (2024-04-19T09:59:44Z) - Design2Code: Benchmarking Multimodal Code Generation for Automated Front-End Engineering [74.99736967448423]
私たちは、このタスクのための最初の実世界のベンチマークであるDesign2Codeを構築します。
テストケースとして484の多様な実世界のWebページを手作業でキュレートし、自動評価指標のセットを開発する。
我々の詳細なブレークダウンメトリクスは、入力されたWebページから視覚要素をリコールし、正しいレイアウト設計を生成するモデルがほとんど遅れていることを示している。
論文 参考訳（メタデータ） (2024-03-05T17:56:27Z) - 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) - TRoVE: Transforming Road Scene Datasets into Photorealistic Virtual
Environments [84.6017003787244]
本研究では、シミュレーションデータセットに存在する困難とドメインギャップに対処する合成データ生成パイプラインを提案する。
既存のデータセットからアノテーションや視覚的手がかりを利用すれば、自動マルチモーダルデータ生成が容易になることを示す。
論文 参考訳（メタデータ） (2022-08-16T20:46:08Z)
関連論文リストは本サイト内にある論文のタイトル・アブストラクトから自動的に作成しています。
指定された論文の情報です。
本サイトの運営者は本サイト（すべての情報・翻訳含む）の品質を保証せず、本サイト（すべての情報・翻訳含む）を使用して発生したあらゆる結果について一切の責任を負いません。