Automatically Generating UI Code from Screenshot: A Divide-and-Conquer-Based Approach

在当今数字世界中，网站至关重要，目前已有超过11.1亿个网站处于活跃状态，每天约有25.2万个新网站上线。将网站布局设计转换为功能性UI代码是网站开发中耗时但不可或缺的步骤。手动将视觉设计转换为功能代码的方法存在重大挑战，特别是对于非专业人士而言。为了探索自动设计转换为代码的解决方案，我们首先对GPT-4o进行了一项激励性研究，并确定了生成UI代码时存在的三种问题：元素遗漏、元素扭曲和元素错位。我们进一步揭示，关注更小的视觉片段可以帮助多模式大语言模型（MLLMs）缓解生成过程中的这些故障。在本文中，我们提出了DCGen，一种基于分而治之的方法，用于自动将网页设计翻译为UI代码。DCGen首先将屏幕截图分成可管理的片段，为每个片段生成描述，然后将它们重新组合成完整的UI代码以显示整个屏幕截图。我们使用由真实网站和各种MLLMs组成的数据集进行了广泛的测试，并展示了DCGen在视觉相似性方面比竞争方法提高了高达14％。据我们所知，DCGen是第一种基于片段感知的提示式方法，可直接从屏幕截图生成UI代码。

自动将网页设计转换为UI代码是网站开发中必不可少的步骤，但手动方法存在显著的挑战，特别是对于非专业人士。本文旨在探索自动设计到代码的解决方案，并通过研究发现在生成UI代码过程中存在元素遗漏、元素扭曲和元素错位等问题。

本文提出了DCGen，一种基于分治的方法，可以将网页设计自动转换为UI代码。DCGen将屏幕截图分成可管理的段落，为每个段落生成描述，然后重新组合它们以形成整个屏幕截图的完整UI代码。相比于当前领域的研究状况，DCGen的关键思路在于将屏幕截图分割成小的可处理部分，以缓解多模态大语言模型在生成过程中的失败。

本文在真实世界网站数据集上进行了广泛的测试，并使用各种多模态大语言模型进行了演示，证明DCGen在视觉相似性方面比竞争方法提高了高达14%。DCGen是第一个从屏幕截图直接生成UI代码的分段感知提示方法。本文的亮点在于DCGen的分治方法，以及其在真实世界数据集上的表现。

最近在这个领域中，还有一些相关的研究，如DeepCoder、SketchAdapt、Pix2Code等。