論文の概要: WAFFLE: Multi-Modal Model for Automated Front-End Development
- arxiv url: http://arxiv.org/abs/2410.18362v1
- Date: Thu, 24 Oct 2024 01:49:49 GMT
- ステータス: 翻訳完了
- システム内更新日: 2024-10-25 12:52:11.749588
- Title: WAFFLE: Multi-Modal Model for Automated Front-End Development
- Title(参考訳): WAFFLE:フロントエンド自動開発のためのマルチモーダルモデル
- Authors: Shanchao Liang, Nan Jiang, Shangshu Qian, Lin Tan,
- Abstract要約: We introduced Waffle, a new fine-tuning strategy that using a structure-ware attention mechanism to improve LLMs's understanding of HTML's structure。
Waffleで微調整されたモデルでは、HTMLマッチが9.00pp(パーセント)、CW-SSIMが0.0982、CLIPが32.99pp、LLEMが27.12ppである。
- 参考スコア(独自算出の注目度): 10.34452763764075
- License:
- Abstract: Web development involves turning UI designs into functional webpages, which can be difficult for both beginners and experienced developers due to the complexity of HTML's hierarchical structures and styles. While Large Language Models (LLMs) have shown promise in generating source code, two major challenges persist in UI-to-HTML code generation: (1) effectively representing HTML's hierarchical structure for LLMs, and (2) bridging the gap between the visual nature of UI designs and the text-based format of HTML code. To tackle these challenges, we introduce Waffle, a new fine-tuning strategy that uses a structure-aware attention mechanism to improve LLMs' understanding of HTML's structure and a contrastive fine-tuning approach to align LLMs' understanding of UI images and HTML code. Models fine-tuned with Waffle show up to 9.00 pp (percentage point) higher HTML match, 0.0982 higher CW-SSIM, 32.99 higher CLIP, and 27.12 pp higher LLEM on our new benchmark WebSight-Test and an existing benchmark Design2Code, outperforming current fine-tuning methods.
- Abstract(参考訳): これは、HTMLの階層構造とスタイルの複雑さのため、初心者と経験豊富な開発者の両方にとって困難である。
LLMのためのHTMLの階層構造を効果的に表現すること、そして、UI設計の視覚的性質とHTMLコードのテキストベースのフォーマットとのギャップを埋めることである。
これらの課題に対処するために、我々は、構造化対応の注意機構を使用して、LLMのHTML構造理解を改善する新しい微調整戦略であるWaffleと、LLMのUIイメージとHTMLコードに対する理解を整合させる対照的な微調整アプローチを紹介する。
Waffleで微調整されたモデルでは、HTMLマッチが9.00pp(パーセント)、CW-SSIMが0.0982、CLIPが32.99pp、LLEMが27.12ppに向上した。
関連論文リスト
- HtmlRAG: HTML is Better Than Plain Text for Modeling Retrieved Knowledge in RAG Systems [62.36019283532854]
Retrieval-Augmented Generation (RAG) は知識能力の向上を目的としている。
RAGは、検索された知識のフォーマットとして、平易なテキストの代わりにHTMLを使用する。
我々は,情報の損失を最小限に抑えつつ,HTMLの短縮化を図るため,HTMLのクリーニング,圧縮,プルーニング戦略を提案する。
論文 参考訳(メタデータ) (2024-11-05T09:58:36Z) - EMMA: Efficient Visual Alignment in Multi-Modal LLMs [56.03417732498859]
EMMAは、視覚的およびテキスト的エンコーディングを効率的に融合するために設計された軽量なクロスプラットフォームモジュールである。
EMMAは複数のタスクのパフォーマンスを最大9.3%向上させ、幻覚に対する堅牢性を大幅に向上させる。
論文 参考訳(メタデータ) (2024-10-02T23:00:31Z) - 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ページ・ツー・コードデータセットを新たに構築したベンチマークであるWeb2Codeを提案する。
論文 参考訳(メタデータ) (2024-06-28T17:59:46Z) - 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) - PosterLLaVa: Constructing a Unified Multi-modal Layout Generator with LLM [58.67882997399021]
本研究では,グラフィックレイアウトの自動生成のための統合フレームワークを提案する。
データ駆動方式では、レイアウトを生成するために構造化テキスト(JSONフォーマット)とビジュアルインストラクションチューニングを用いる。
我々は、大規模な実験を行い、パブリックなマルチモーダルレイアウト生成ベンチマーク上で、最先端(SOTA)性能を達成した。
論文 参考訳(メタデータ) (2024-06-05T03:05:52Z) - DesignProbe: A Graphic Design Benchmark for Multimodal Large Language Models [35.10231741092462]
精巧なグラフィックデザインは、きめ細かいデザイン要素(色、フォント、レイアウト)から全体的なデザインまで、2段階の調和を実現するのが一般的である。
MLLM(Multimodal Large Language Models)の急速な開発に伴い,設計におけるMLLMの能力を調べるためのベンチマークであるDesignProbeを確立する。
論文 参考訳(メタデータ) (2024-04-23T07:31:19Z) - Unlocking the conversion of Web Screenshots into HTML Code with the WebSight Dataset [8.581656334758547]
我々は、200万組のHTMLコードとそれに対応するスクリーンショットからなるデータセットであるWebSightを紹介する。
この分野での研究を加速するため、私たちはWebSightをオープンソースにしました。
論文 参考訳(メタデータ) (2024-03-14T01:40:40Z) - Hierarchical Multimodal Pre-training for Visually Rich Webpage
Understanding [22.00873805952277]
WebLMは、WebページにおけるHTMLの構造的モダリティとテキストのみをモデリングする制限に対処するために設計されたマルチモーダル事前学習ネットワークである。
本稿では,テキスト,構造,画像モダリティ間の相互作用を効果的にモデル化するための事前学習タスクを提案する。
実験の結果、事前学習されたWebLMは、いくつかのWebページ理解タスクにおいて、従来の最先端の事前学習モデルを大幅に上回っていることが示された。
論文 参考訳(メタデータ) (2024-02-28T11:50:36Z) - Understanding HTML with Large Language Models [73.92747433749271]
大規模言語モデル(LLM)は、様々な自然言語タスクにおいて例外的な性能を示している。
我々は,HTML 理解モデル (微調整 LLM ) と,その機能に関する3つのタスクの詳細な分析に貢献する。
本稿では,標準自然言語コーパスで事前訓練されたLLMが,HTML理解タスクに極めて適していることを示す。
論文 参考訳(メタデータ) (2022-10-08T07:27:17Z)
関連論文リストは本サイト内にある論文のタイトル・アブストラクトから自動的に作成しています。
指定された論文の情報です。
本サイトの運営者は本サイト(すべての情報・翻訳含む)の品質を保証せず、本サイト(すべての情報・翻訳含む)を使用して発生したあらゆる結果について一切の責任を負いません。