基于分割- conquered 方法的自动从屏幕生成 UI 代码

在当今数字时代，网站至关重要，当前活跃的网站数量超过1110亿，约每天新增25.2万个新网站。将网站布局设计转换为功能性UI代码是一个耗时且不可或缺的网站开发步骤。手动将视觉设计转换为功能代码的方法在尤其是针对非专家用户时，面临着显著的挑战。为探索自动化的设计到代码解决方案，我们首先对GPT-4o进行一次激励性研究，并确定生成UI代码中的三类问题：元素遗漏、元素变形和元素错位。我们进一步揭示，专注于较小的视觉片段可以帮助多模态大语言模型（MLLM）在生成过程中缓解这些故障。在本文中，我们提出DCGen，一种基于分割- conquered的方法，用于自动将网页设计转换为UI代码。DCGen通过将屏幕截图分为可管理的片段、为每个片段生成代码，然后将其重新组合成整个屏幕截图的完整UI代码来实现。我们使用由真实世界网站组成的数据集和各种MLLM进行了广泛测试，结果表明DCGen在大输入图像上可实现视觉相似性提升最高达15%，代码相似性提升8%。人类评估显示，DCGen可以帮助开发人员更快地实现网页，并且更贴近UI设计。据我们了解，DCGen是首个基于感知分割的MLLM方法，用于直接从屏幕截图生成UI代码。