基于多模态图学习的GUI碎片化图层分组方法ULMGNN研究

本文提出ULMGNN（基于多模态图学习的碎片化图层分组方法），通过构建GUI设计原型图结构并引入自注意力机制，创新性地实现合并组边界框检测与图层分类的联合学习。该方法有效解决界面层次重叠和视觉重叠导致的碎片化图层误分组问题，在工业级数据集上超越现有基线方法，为提升前端代码生成质量提供了新思路。

　　

Highlight

• 我们提出ULMGNN，这种基于图学习的新方法通过联合检测包含潜在图层组的边界框并对每个区域内的GUI图层进行分类，有效解决碎片化图层分组问题。我们还开发了后处理算法，进一步聚合每个检测组内语义一致的碎片化图层。

• 我们构建了GUI设计原型的图表示，并采用自注意力图神经网络，充分利用多模态UI信息学习每个图层的特征表示。

• 我们在两个真实世界数据集（包括工业和开源社区数据）上进行实验，模型实现了最先进的性能。实证研究表明该方法通过生成更可维护、更可读的前端代码，增强了自动化代码生成能力。

GUI理解

理解图形用户界面（GUI）是支持智能设计分析和下游自动化的关键步骤。先前研究可根据GUI数据源进行分类。第一类工作从截图或线框图草图研究GUI理解。例如Magic Layouts直接从图像检测和分类UI组件，而Pix2code和Doodle2app尝试从手绘草图推断视图层次结构。

Pipeline overview

我们的方法流程如图2和图3所示。设计画板由绘制各种UI组件的UI图层构成。我们将设计画板解析为包含以下多模态信息的图层列表，其中包含图层的线框信息、分辨率为64×64的图层图像、图层类别（如Text、ShapePath等）。我们将所有属性编码为嵌入向量并求和获得初始特征表示。

Data preparation

遵循UILM和EGFE，我们在4606个工业UI设计上实验验证方法有效性。不同设计画板中碎片化图层数量差异很大。因此我们按碎片化图层数量排序数据，将数据集均匀分为三部分。对每部分按8:2比例分割训练集和测试集。考虑到设计画板可能包含大量图层，我们采用滑动窗口策略确保模型处理能力范围内的输入规模。

User study

本节我们进行用户研究，评估将方法应用于Imgcook（自动化代码生成平台）的有效性。

Versatility and application scenarios

该方法的直接应用在于设计到代码的转换流程。现有方法通常以截图作为输入生成代码，忽略了原始设计文件包含的丰富结构信息。然而当界面包含大量碎片化图层或错误分组时，生成代码往往冗余、难以维护甚至结构无效。我们的方法通过准确分组碎片化图层有效解决这一瓶颈问题，为生成高质量前端代码奠定基础。

Conclusion

本文解决了GUI设计原型中碎片化图层的挑战，该问题常常阻碍可靠的设计到代码自动化。我们提出ULMGNN这种基于图学习的框架，通过联合执行UI图层分类和边界回归，将碎片化图层合并为连贯的组。通过构建新颖的图表示并在图学习块中集成自注意力，我们的方法有效捕捉复杂的结构和视觉关系，在真实场景中显著提升分组准确性。