WebSight 数据集与 Sightseer 模型

Hugging Face 已发布 WebSight，这是一套大规模的合成数据集，旨在让视觉语言模型（VLM）能够将网站截图转换为功能性 HTML 代码。此举旨在减少开发者将 UI 设计转化为可运行网站所需的人工工作量，并降低非开发者创建网页界面的门槛。

WebSight：用于 UI 转换的大规模合成数据集

WebSight 提供了海量的截图与 HTML 代码配对，用于训练 AI 模型将视觉网页设计翻译成代码。通过使用合成数据，数据集避免了真实 HTML 中常见的噪声和复杂性，从而促进模型更高效的学习。

该数据集已通过两个主要版本演进：

• WebSight-v0.1：于 2024 年 1 月发布，包含 823,000 对 HTML 代码及相应截图。
• WebSight-v0.2：更新版，规模扩大至 200 万示例。该版本在截图中引入真实图像，并从传统 CSS 迁移到 Tailwind CSS。

Sightseer：将截图转换为功能性 HTML

Sightseer 是在 WebSight 数据集上微调的视觉语言模型。该模型能够以网页截图为输入，生成相应的功能性 HTML 代码。

除了基本的结构和样式外，Sightseer 还能在生成的 HTML 中嵌入与原始输入截图中图像高度相似的图片。

对 Web 开发和 UI 设计的影响

WebSight 及类似 Sightseer 的模型的出现预示着 UI 开发工作流的转变。通过实现视觉设计（包括纸质 UI 草图）快速转化为功能代码，这些工具可以显著缩短专业开发者的迭代时间。

此外，这项技术使没有正式编码经验的个人也能更容易创建功能性网页界面，展示了视觉语言模型在低代码软件开发中的实际应用。