DCGen：一种新的Design-to-Code框架，设计稿转代码有效性大幅提高

发布时间：2024 年 06 月 24 日

代码编写

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

在数字化时代，网站的重要性不言而喻，全球活跃网站超过 11 亿，每天新增约 252,000 个。将网站设计图转换为实用的 UI 代码，虽耗时却至关重要。传统的手动转换方法对非专业人士来说挑战重重。为此，我们研究了 GPT-4o，并发现了 UI 代码生成中的三大问题：元素遗漏、变形和错位。我们发现，聚焦于小视觉片段能帮助多模态大型语言模型（MLLMs）减少这些错误。本文介绍了 DCGen，一种基于分而治之的策略，能自动将网页设计转化为 UI 代码。DCGen 首先将截图细分为小片段，为每个片段生成描述，再整合成完整的 UI 代码。通过大量测试，我们发现 DCGen 在视觉相似性上比其他方法提升了 14%。DCGen 是首个基于分段感知的提示方法，能直接从截图生成 UI 代码。

https://arxiv.org/abs/2406.16386

1. 为什么要提出DCGen？

---

根据统计，平均每天有25.2万个新网站出现，而且网站也是现在网络生活中必不可少的一个信息载体。网站开发一般包括两个步骤，第一步是UI设计师设计网站布局，然后做出设计图；第二步事由开发人员将设计图转换为UI代码。

手动将设计图转换为UI代码是目前网页开发的主要形式，但确实非常复杂和耗时的。因此，大家想到了一种自动化将UI设计稿转化为代码的思路，称为 Design-to-Code 。

理论上，Design-to-Code这个思想可以带来很多好处，比如：可以允许非技术专家构建web程序，可以让大家更多的关注视觉效果，而不是如何将设计稿转换为代码。

尽管，Design-to-Code思想很好，但是实际解决方案却很难落地。

传统的将设计稿转换为代码的技术有三种：

• • 卷积神经网络（CNN）
• • 结合计算机视觉和光学字符识别（俗称OCR）
• • 其他深度学习模型，比如结合CNN和LSTM

随着大语言模型（LLM）和多模态大模型（MLLM）的出现，Design-to-Code也多了一个新的实现途径，即利用多模态大模型强大的理解能力来生成前端代码。MLLM在理解图像和视觉问答方面，比传统的CNN模型表现更出色。

尽管MLLM在图像到文本任务中表现出色，但直接应用它们进行UI代码生成也不是特别理想。

• • 首先，MLLM必须检测和分类网页中丰富多样的元素和嵌套结构，如按钮、文本字段和图像。
• • 其次，它要求精确复制复杂的布局和样式。
• • 最后，与静态描述不同，生成的代码必须是可执行的，符合前端框架的语法和语义要求。

直接使用多模态大模型来生成网站代码的过程中，一般会出现三个主要问题：

• • （1）元素遗漏，即在生成的代码中缺少某些视觉组件

• • （2）元素变形，即元素在形状、大小或颜色方面被不准确地复制

• • （3）元素错位，意味着元素相对于其设计布局的位置或顺序不正确。

所以为了提升直接使用多模态大模型生成代码的效果，作者提出了DCGen（D ivide-and-C onquer-based method to Gen erate），一种新的 Design-to-Code 框架，将设计稿转代码的效果有效提升13.42%。

2. 什么是DCGen?

---

如上图所示，DCGen主要采用的是一种分拆的思想，将复杂的设计稿拆解为更小、更容易处理的视觉单元，然后再利用MLLM来解决每一个视觉单元的代码生成，最后再将这些代码进行整合生成完整代码。

DCGen主要由两个阶段组成：分割与组装。

• • 在分割阶段，DCGen递归地将屏幕截图划分为更小的片段。首先在网页中寻找水平分割线，然后据此分割图像。对于每个水平片段，DCGen再寻找垂直分割线，继续细分。“先水平后垂直”的递归分割过程，不断将图像细化为更小、完整的单元，直至无法进一步找到分割线或达到用户设定的最大深度。然后，DCGen将每个图像片段传递给MLLMs进行代码生成。
• • 在组装阶段，较小的子片段代码逐步被整合，构建出它们的父片段。这一递归的组装过程持续进行，直至网站的整体结构得以重建。

2.1 分割阶段

面对一张完整的屏幕截图，分割阶段的任务是生成一个层级结构。这一阶段难点在于，分割算法需细致审视视觉元素，确保每个元素完整无损；同时，图像片段需有序存储，以便未来能够完整重构网页。

分割算法由两个核心环节组成：识别分割线和细分屏幕截图。

• • 首先，分割线检测器会识别出屏幕截图中的所有明显或隐含的分割线，无论是垂直还是水平。
• • 随后，屏幕截图细分环节利用这些线条，将图像划分为更小的、具有层级关系的片段。
• • 这两个环节交替进行，先是水平分割，然后对子图像进行垂直分割，再对子子图像进行水平分割。

上图是原始设计稿

第一次切割设计稿（depth = 1）

第二次切割设计稿（depth = 2）

上面三个图展示了在不同分割深度下，即交替次数不同的情况下，屏幕截图分割算法的多种可能结果。

2.1.1 分割线检测

DCGen的第一步是识别屏幕截图中的所有分割线，无论是垂直的还是水平的。这些线条需将截图划分为包含完整元素的矩形区域，避免后续代码整合时的碎片化问题。传统图像分割技术主要针对背景与不规则物体的区分，并不适用于网页的分割。

网站一般通过显式（如可见的线条）或隐式（如内容间的空白或边框）的分割线来组织内容和不同区域。下面两个图展示了这两种分割线的例子。

上图展示了显式线条分割，通过显式线条区分灰色和紫色区域。

上图展示了隐式线条分割。

DCGen 首先将截图转换为灰度图，然后逐行扫描以识别显式和隐式线条。分割线的特征是像素值的突变。

在隐式分割线的识别上，采用了滑动窗口技术，通过分析连续行的亮度变化来定位潜在的空白区域。算法将每个窗口与相邻行对比，如果窗口内的亮度变化低于阈值，并且与上下行的亮度差异超过设定阈值，超过行长的30%，则判定为分割线。这种双重阈值策略有助于捕捉细微的边界和空白，识别出低内容区域及其边缘的显著变化。算法中的阈值和参数是基于数据集子集手动调整优化的。

至于显式分割线的识别，方法与隐式相同，只是将窗口大小设为1。算法会检查每行的亮度一致性，亮度变化低于预设阈值的行被视为潜在线条。如果该行与其相邻行的亮度差异超过阈值，且超过行长的至少30%，则确认为分割线。

2.1.2 设计稿的细分策略

采用交替递归的方式，通过水平和垂直划分，将屏幕截图细化为更小巧的区块。具体操作中，DCGen首先尝试基于水平分割线对屏幕截图进行分割；若未探测到合适的线条，则再次调用分割线检测器，转而利用垂直线进行划分。这一递归过程将持续应用于每个新生的区块，直至无法进一步识别分割线或达到用户预设的最大递归层级。

为有效管理这些分层的屏幕截图细分，引入了树状数据结构。假设一张图像被划分为A和B两个区块，A即被视为B和C的父区块，而B和C则作为其子嗣。递归的深度直接映射为树的层级，树的每个末端节点都代表一个经过完全细分、尺寸最小的屏幕截图片段。

2.2 组装阶段

在组装阶段，汇集细分后的图像生成的代码，然后重构原始屏幕截图的完整用户界面代码。

对于每个末端图像片段，DCGen向MLLM（即叶节点求解器MLLM）展示一个带有红色矩形框选的网页截图，框选区域指出了MLLM需要特别关注的图像部分，并请求其对这一部分进行描述。对于每个父级图像片段，DCGen向MLLM（即组装MLLM）提供一张带有边框的截图，以及其所有子片段生成的描述。在最终步骤（根节点合并）中，DCGen调用生成MLLM，根据其子片段的描述，生成整个屏幕的完整UI代码。

上图展示了叶节点求解器MLLM、组装MLLM和生成MLLM的提示词。

3. 效果如何？

---

3.1 DCGen 相比其他利用MLLM方法是否有提升？

3.1.1 综合性能表现

上表汇总了不同方法在 GPT-4o 模型上基于 CLIP 和 BLEU 指标的表现。

作者采用了两种指标来衡量生成的代码的有效性，分别是：代码相似性和图像相似性。

对于代码相似性，采用了BLEU（Bilingual Evaluation Understudy）评分来衡量生成代码与原始代码的相似度。BLEU评分是机器翻译领域广泛采用的自动评估指标，用于比较机器翻译结果与人类翻译的参考文本。

在图像相似性方面，利用CLIP评分来衡量原始设计图和生成代码产生的网页截图之间的相似度。

数据显示 DCGen 在BLEU和CLIP两个指标上均实现了最大的性能提升。特别地，DCGen 和自我优化策略均显著提升了模型性能，而思维链（Chain-of-Thought, CoT）提示法却对模型效能产生了负面效果。

深入分析 CoT 指令生成的代码发现，高达 70% 的 HTML 文件缺失 CSS 内容 ，导致生成的网站仅有文本而无视觉样式，这反映出逐步的视觉推理过程影响了模型对指令的遵循能力。

3.1.2 细致的性能指标对比

上图详细列出了 DCGen 在细致的性能指标上超越了直接提示和 CoT 指令。

DCGen 和自我优化策略在文本、颜色和块匹配度等指标上均提升了 GPT-4o 的性能，这些指标反映了元素的完整性与忠实度。

具体而言，DCGen 在颜色和块相似性方面的表现优于自我优化策略。

然而，CoT 指令虽然提升了文本相似性，却削弱了模型重现颜色的能力，影响了元素的忠实度。

这一发现突显了现有大型语言模型（MLLM）在独立处理复杂视觉任务时的挑战。

DCGen之所以表现更佳，是因为它为 MLLM 提供了更精确、更集中的信息，如专注的图像和细致的描述，这些都大幅提高了它们的效率。

上图展示了不同方法生成的两个网页案例，直观地证明了 DCGen 的优越性能。

3.2 网站复杂度的影响

作者通过HTML的标签数量来定义网站的复杂度指标，并专注于 GPT-4o 上网站复杂度对三个关键指标的影响：CLIP 分数、BLEU 分数以及四项细致指标（块匹配、文本、位置、颜色）的平均值。

本研究问题考量了 DCGen 在应对不同复杂度等级的现实世界网站时的有效性。我们依据 HTML 标签的数量来衡量网站复杂度，上面三个图清晰地展示了这些指标随着网站复杂度的增减而变化。DCGen 在所有测试的复杂度级别中，均展现出不错的效果。

DCGen 在维持高视觉得分方面表现出色（即 CLIP 分数和细致指标的平均得分），这表明它能够生成在视觉上与原网页高度相似的代码实现，无论网页的复杂程度如何。这种表现证明了 DCGen 对网站复杂度的波动具有强大的适应性，能够高效地处理从简单到复杂的各种网站结构。

3.3 DCGen 的泛化能力

上表对 DCGen 在各类 MLLM 上的表现进行了综合展示。结果显示，DCGen 与 Gemini 模型的契合度极高，在视觉和代码层面的评估指标上均实现了显著的性能提升。在 Claude-3 平台上，DCGen 更是大幅提升了原始网站与生成网站之间的视觉相似度，超越了其他竞争方法。

4. 局限性

---

4.1 上下文长度限制

现行的大型语言模型（MLLM）在上下文窗口长度上存在限制，如 GPT-4o 的限制是 128K。这可能导致DCGen无法应对那些所需 token 数量庞大的网站，超出了 MLLM 的处理能力。然而，实验显示所有提示均未超出最大上下文长度，说明DCGen在大多数情况下都具有普适性。

4.2 模型的选择

本文选用了三种广受欢迎的、能够遵循指令和处理多模态信息的大型语言模型来证实 DCGen 的效能。尽管其他大型语言模型也可能适用于DCGen，但参数规模较小的模型难以解析复杂的提示。

4.3 动态网站的处理难题

部分网站通过动态特性提升用户互动性，利用服务器端脚本语言（如 PHP、Python）来动态修改网页内容。虽然 DCGen 目前只能处理静态网页，但它作为首个能够从屏幕截图生成 UI 代码的段感知方法，为构建复杂的动态网站迈出了关键一步。

• • 论文原文: https://arxiv.org/abs/2406.16386

• • 获取更多最新 Arxiv 论文更新: https://github.com/HuggingAGI/HuggingArxiv!

• • 加入社群，+v: iamxxn886

• • 最新论文订阅体验：公众号号菜单回复 1

• • 最新论文订阅新人：公众号号菜单回复 2