从屏幕截图到 HTML 代码：WebSight 数据集介绍

在 Web 开发领域，将设计稿转化为功能性网站通常需要大量的编码和仔细的测试。如果我们能简化这个过程，让网页设计能更轻松、更快速地转换成可用的网站，那会怎么样呢？WebSight 是一个新的数据集，旨在构建能够将屏幕截图转换为 HTML 代码的人工智能系统。

挑战

将网站设计或屏幕截图转换成 HTML 代码通常需要经验丰富的开发人员。但如果这个过程能更高效呢？受此问题的启发，我们研究了如何利用视觉语言模型（VLM）进行 Web 开发，以创建提高效率的低代码解决方案。

如今，实现这一目标的主要挑战是缺乏为这项任务量身定制的高质量数据集。WebSight 旨在填补这一空白。

WebSight：一个大型的屏幕截图/HTML 代码对合成数据集

在 2024 年 1 月，我们推出了 WebSight-v0.1，这是一个包含 82.3 万对 HTML 代码及其对应屏幕截图的合成数据集。该数据集旨在训练 AI 模型处理视觉网页设计并将其转换为功能性 HTML 代码。通过专注于合成数据，我们成功绕过了真实世界 HTML 中常见的噪音和复杂性，使 AI 模型能够高效学习。

根据我们最初的发布和社区的反馈，我们将数据集更新到 WebSight-v0.2，并引入了重大改进。这些改进包括在屏幕截图中使用了真实图像，以及切换到 Tailwind CSS（而不是传统的 CSS）。我们进一步将数据集扩展到了 200 万个样本。

Sightseer：一个在 WebSight 上微调的模型

利用 WebSight 数据集，我们对即将推出的基础视觉语言模型进行了微调，得到了 Sightseer，这是一个能够将网页屏幕截图转换为功能性 HTML 代码的模型。Sightseer 还展示了将与原始屏幕截图非常相似的图像整合到生成的 HTML 中的能力。

迈向由视觉语言模型解锁的更强大工具

通过对 WebSight 的迭代，我们的目标是构建更强大的 AI 系统，以简化将 UI 设计转换为功能代码的过程。这可以通过将纸上的 UI 草图快速转换为功能代码来缩短开发人员的迭代时间，同时让非开发人员也更容易接触到这个过程。这是视觉语言模型的众多实际应用之一。通过开源 WebSight，我们鼓励社区与我们合作，共同构建更强大的 UI 开发工具。

资源

• 数据集: https://huggingface.co/datasets/HuggingFaceM4/WebSight
• 技术报告: http://arxiv.org/abs/2403.09029
• Google Colab: https://colab.research.google.com/drive/1LdamGKR2oacrDk-kYwz_Wfc1-RBUdzcO?usp=sharing