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

Background

目前使用手动方法将网页布局设计转换为功能性UI代码较为耗时但却是设计网页必不可少的步骤。因此我们提出了DCGen方法，以解决该问题，并进行测试验证。

Motivation

我们进行了激励性研究并确定了MLLM在将屏幕截图转换为UI代码中出现的三个主要问题：1. 元素遗漏，2. 元素失真，3. 元素排列错误。

Insight：虽然现有的MLLM无法生成准确的UI代码，但是将完整的屏幕截图分解为小片段可以提升MLLM的性能，这种方法使得模型能够执行更多推理步骤。

Methodology

1. 分割： 算法如下图所示： Require: img(输入的截图图像(灰度图))var_thr(窗口方差阈值), diff_thr(亮度差异阈值), portion_thr(亮度差异超过阈值的像素比例的阈值), window_size(滑动窗口大小)

   首先将屏幕截图转换为灰度，然后通过像素值是否突变检测有无分割线存在。 - 隐式分割线：使用滑动窗口技术，将每个窗口与其正上、正下方行进行比较：若差异低于阈值则存在空白区域；若超过行长度的30%，则标识分割线。

   • 显示分割线：将滑动窗口大小设置为1。 屏幕截图细分：DCGen采用递归的方式，先水平再垂直细分，直到无法识别或达到用户定义的最大递归深度

2. 组装： 本质上为分割的逆过程