Web2Code :网页理解和代码生成能力的评估框架

      多模态大型语言模型(MLLMs)在过去几年中取得了爆炸性的增长。利用大型语言模型(LLMs)中丰富的常识知识,MLLMs在处理和推理各种模态(如图像、视频和音频)方面表现出色,涵盖了识别、推理和问答等一系列任务,所有这些任务都使用语言作为中间表示。然而,现有的MLLMs在理解网页截图和生成表达其潜在状态的HTML代码方面出奇地差。

      为了解决现有 MLLM 在网页理解和代码生成方面的局限性,本文提出了 Web2Code 基准。Web2Code 包含一个大规模的网页到代码数据集,用于指令微调和一个评估框架,用于测试 MLLM 的网页理解和 HTML 代码翻译能力。

源代码下载:https://github.com/MBZUAI-LLM/web2code

1 数据集的构建

数据集构建是Web2Code项目的核心部分,它涉及创建和优化网页图像与HTML代码配对的数据,以及生成与网页理解相关的问答对。

1.1 创建新的网页图像-代码对数据 (DWCG)

  • 使用 GPT-3.5 生成 60K 个 HTML 页面,遵循 CodeAlpaca 提示。
  • 使用 Selenium WebDriver 从生成的 HTML 代码中创建网页图像截图。
  • 将网页图像-代码对转换为指令跟随数据格式,类似于 LLaVA 数据格式,以便用于训练 MLLM。

1.2 精炼现有的网页代码生成数据 (DWCGR)

  • 利用 Pix2code 和 WebSight 数据集来增强模型在 HTML 代码生成任务上的能力。
  • 使用 GPT-4 将 Pix2code 数据集中的随机字母替换为有意义文本,并将网页精炼为包含产品着陆页、个人作品集、博客等类别的多样化网页。
  • 将所有数据转换为 LLaVA 指令跟随数据格式。

1.3 创建新的文本问答对数据 (DWU)

  • 使用 GPT-4 生成基于网页代码的问答对数据,用于网页理解任务。
  • 为 24.35K 个网页数据生成 10 个问答对,共计 243.5K 个数据点。
  • 问答对涵盖了网页的结构、设计、内容等方面,以确保模型能够全面理解网页信息。

1.4 精炼现有的网页理解数据 (DWUR)

  • 将 WebSRC 数据集集成到训练中,以提高模型在网页理解任务上的能力。
  • 对 WebSRC 数据集中的问答对进行筛选,确保其相关性和质量。
  • 使用 GPT-4 评估和提升答案的质量,将数据集精炼为 51.5K 个高质量的指令数据。

1.5 数据集统计和分析

  • 图表展示了问答数据集中答案集的词云,突出了数据中结构性和设计元素的重要性。
  • 图表展示了 GPT-3.5 生成 HTML 数据中最常见的 HTML 标签分布,表明生成的页面包含丰富的元素,结构完整。
  • 表格将 Web2Code 数据集与其他现有数据集进行了比较,例如 WebSight、Design2Code 和 Pix2Code,结果表明 Web2Code 数据集更大、更复杂、更具挑战性。

1.6 数据集分布

  • Web2Code 数据集包含 1179.7K 个指令数据点,包括 884.7K 个网站图像-代码对和 295K 个问答对。
  • 问答对由 243.5K 个 GPT-4 基于问答对和 51.5K 个 WebSRC 图像基于问答对组成。
  • 评估数据集包含 1198 个网页截图图像,来自 WebSight、Pix2Code、GPT-3.5 基于数据和人工作业。
  • 此外,还使用了 5,990 个“是/否”问答对,使用 GPT-4 Vision API 生成,用于 WUB 基准测试。

2 评估框架

Web2Code 提出了一个包含两个方案的评估框架,用于评估 MLLM 的网页理解和代码生成能力

2.1 网页理解基准 (WUB)

这是一个离线评估,使用“是/否”问题进行评估。

  • 该基准包含 5,990 个高质量问答对,由 GPT-4 Vision API 生成,基于 1,198 个网页截图图像。
  • 每个问题的答案都是“是”或“否”。
  • 将模型对问题的预测答案与真实答案进行比较,最终准确率作为评估指标。

2.2 网页代码生成基准 (WCGB)

这是一个在线评估,基于图像相似度进行评估。

  • 该基准评估 MLLM 从网页图像生成 HTML 代码的能力。
  • 将预测的 HTML 代码转换为图像,并与真实图像进行比较。
  • 评估考虑了 10 个不同的方面,进一步分为四个评估矩阵,使用 GPT-4 Vision API 进行评分。

2.2.1 WCGB 评估的四个方面

  • 视觉结构和对齐: 评估网页元素的结构和布局、元素对齐、比例精度和视觉和谐。
  • 颜色和美学设计: 评估颜色方案、美学相似性、整体美学吸引力。
  • 文本和内容一致性: 评估字体特征、文本内容匹配、数字和特殊字符精度。
  • 用户界面和交互性: 评估用户界面一致性、设计语言和 UI 元素的外观。

2.3 评估指标

  • WUB:准确率 (%)
  • WCGB:视觉结构和对齐、颜色和美学设计、文本和内容一致性、用户界面和交互性的分数 (0-10)

2.4 定量评估

表格展示了不同 LLM 核心和不同数据配置在 WCGB 和 WUB 基准测试上的性能。

结果表明,Web2Code 数据集可以显著提高 MLLM 的网页理解和代码生成能力,而现有数据集则导致性能下降。

2.5 定性评估

图表展示了使用不同 LLM 核心生成的网页图像与真实图像之间的比较。

结果表明,Web2Code 数据集可以提高模型生成网页图像的质量。

通过提出的评估框架,我们证明了Web2Code数据集在增强MLLMs的网页理解和网页到HTML翻译能力方面是有效的,同时现有的数据集可能导致性能下降。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/38849.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

系统中非功能性需求的思考

概要 设计系统时不仅要考虑功能性需求,还要考虑一些非功能性需求,比如: 扩展性可靠性和冗余安全和隐私服务依赖SLA要求 下面对这5项需要考虑的事项做个简单的说明 1. 可扩展性 数据量增长如何扩展? 流量增长如何扩展&#xf…

【LLM教程-llama】如何Fine Tuning大语言模型?

今天给大家带来了一篇超级详细的教程,手把手教你如何对大语言模型进行微调(Fine Tuning)!(代码和详细解释放在后文) 目录 大语言模型进行微调(Fine Tuning)需要哪些步骤? 大语言模型进行微调(Fine Tuning)训练过程及代码 大语言…

VuePress介绍

从本文开始,动手搭建自己的博客!希望读者能跟着一起动手,这样才能真正掌握。 ‍ VuePress 是什么 VuePress 是由 Vue 作者带领团队开发的,非常火,使用的人很多;Vue 框架官网也是用了 VuePress 搭建的。即…

000.二分查找算法题解目录

000.二分查找算法题解目录 69. x 的平方根(简单)

4PCS点云配准算法实现

4PCS点云配准算法的C实现如下&#xff1a; #include <iostream> #include <pcl/io/pcd_io.h> #include <pcl/point_types.h> #include <pcl/common/common.h> #include <pcl/common/distances.h> #include <pcl/common/transforms.h> #in…

唯一ID:UUID 介绍与 google/uuid 库生成 UUID

UUID 即通用唯一识别码&#xff0c;是一种用于计算机系统中以确保全局唯一性的标识符。其标准定义于 RFC 4122 文档中。标准形式包含 32 个 16 进制数字&#xff0c;以连字符切割为五组&#xff0c;格式为 8-4-4-4-12&#xff0c;总共 36 个字符。&#xff08;形如, d169aa7f-4…

php 通过vendor文件 生成还原最新的composer.json

起因&#xff1a;因为历史原因&#xff0c;在本项目中composer.json基本算废了&#xff0c;没法直接使用composer管理扩展&#xff0c;今天尝试修复一下composer.json。 历史文件&#xff0c;可以看出来已经很久没有维护了&#xff0c;我们主要是恢复require的信息 {"na…

K8s节点维护流程

用途 用于下线异常节点、集群缩容等 操作步骤 1. 查看节点名称 先确认节点的名称 kubectl get node -o wide2. 设置节点不可调度 设置节点不可调度状态&#xff0c;禁止新的pod调度到该节点上 kubectl cordon ${node_name}3. 剔除节点上运行的pod&#xff08;生产环境慎…

Spring Boot中集成Redis实现缓存功能

Spring Boot中集成Redis实现缓存功能 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天我们将深入探讨如何在Spring Boot应用程序中集成Redis&#xff0c;实现…

AP无法上线原因分析及排障

一、AP未分配到IP地址 如果遇到AP无法上线问题&#xff0c;可以检查下AP是否分配到IP地址。AP获取IP地址有两种方式&#xff1a;静态方式&#xff1a;登录到AP设备&#xff0c;手工配置IP地址&#xff0c;该方式操作起来比较麻烦&#xff0c;不推荐使用&#xff1b;DHCP方式&am…

基于CNN的股票预测方法【卷积神经网络】

基于机器学习方法的股票预测系列文章目录 一、基于强化学习DQN的股票预测【股票交易】 二、基于CNN的股票预测方法【卷积神经网络】 文章目录 基于机器学习方法的股票预测系列文章目录一、CNN建模原理二、模型搭建三、模型参数的选择&#xff08;1&#xff09;探究window_size…

下代iPhone或回归可拆卸电池,苹果这操作把我看傻了

刚度过一个愉快的周末&#xff0c;苹果又双叒叕摊上事儿了。 iPhone13 系列被曝扎堆电池鼓包了。 早在去年&#xff0c;就有 iPhone13 和 iPhone14 用户反馈过类似的问题&#xff0c;表示在手机仅仅使用了一年多的时间就出现了电池鼓包的情况&#xff0c;而且还把屏幕给撑起来了…

舞会无领导:一种树形动态规划的视角

没有上司的舞会 Ural 大学有 &#x1d441; 名职员&#xff0c;编号为1∼&#x1d441;。 他们的关系就像一棵以校长为根的树&#xff0c;父节点就是子节点的直接上司。 每个职员有一个快乐指数&#xff0c;用整数 &#x1d43b;&#x1d456; 给出&#xff0c;其中1≤&…

校园卡手机卡怎么注销?

校园手机卡的注销流程可以根据不同的运营商和具体情况有所不同&#xff0c;但一般来说&#xff0c;以下是注销校园手机卡的几种常见方式&#xff0c;我将以分点的方式详细解释&#xff1a; 一、线上注销&#xff08;通过手机APP或官方网站&#xff09; 下载并打开对应运营商的…

C++ 指针介绍

指针是C编程语言中的一个强大且重要的特性。它允许程序员直接操作内存地址&#xff0c;从而提供了对低级别内存的访问和控制。虽然指针在使用时可能比较复杂且容易出错&#xff0c;但它们在提高程序效率和灵活性方面有着不可替代的作用。本文将介绍C指针的基本概念、用法及其应…

Docker 中 MySQL 迁移策略(单节点)

目录 一、 简介二、操作流程2.1 进入mysql容器2.2 导出 MySQL 数据2.3. 将导出的文件复制到宿主机2.4 创建 Docker Compose 配置2.5 启动新的 Docker 容器2.6 导入数据到新的容器2.7 验证数据2.8 删除旧的容器&#xff08;删除操作需慎重&#xff09; 三、推荐配置四、写在后面…

当年很多跑到美加澳写代码的人现在又移回香港?什么原因?

当年很多跑到美加澳写代码的人现在又移回香港&#xff1f;什么原因&#xff1f; 近年来&#xff0c;确实有部分曾经移民到美国、加拿大、澳大利亚等地的香港居民选择移回香港。这一现象与多种因素相关&#xff0c;主要可以归结为以下几点&#xff1a; 疫情后的环境变化&#…

【STM32】温湿度采集与OLED显示

一、任务要求 1. 学习I2C总线通信协议&#xff0c;使用STM32F103完成基于I2C协议的AHT20温湿度传感器的数据采集&#xff0c;并将采集的温度-湿度值通过串口输出。 任务要求&#xff1a; 1&#xff09;解释什么是“软件I2C”和“硬件I2C”&#xff1f;&#xff08;阅读野火配…

2025第13届常州国际工业装备博览会招商全面启动

常州智造 装备中国|2025第13届常州国际工业装备博览会招商全面启动 2025第13届常州国际工业装备博览会将于2025年4月11-13日在常州西太湖国际博览中心盛大举行&#xff01;目前&#xff0c;各项筹备工作正稳步推进。 60000平米的超大规模、800多家国内外工业装备制造名企将云集…

C++中的RAII(资源获取即初始化)原则

C中的RAII&#xff08;Resource Acquisition Is Initialization&#xff0c;资源获取即初始化&#xff09;原则是一种管理资源、避免资源泄漏的惯用法。RAII是C之父Bjarne Stroustrup提出的设计理念&#xff0c;其核心思想是将资源的获取&#xff08;如动态内存分配、文件句柄、…