Fragmented Layer Grouping in GUI Designs Through Graph Learning Based on Multimodal Information

📄 arXiv: 2412.05555v1 📥 PDF

作者: Yunnong Chen, Shuhong Xiao, Jiazhi Li, Tingting Zhou, Yanfang Chang, Yankun Zhen, Lingyun Sun, Liuqing Chen

分类: cs.SE, cs.AI

发布日期: 2024-12-07

备注: 28 pages,6 figures

💡 一句话要点

提出基于图学习的多模态GUI碎片化图层分组方法，提升代码可维护性。

🎯 匹配领域: 支柱九：具身大模型 (Embodied Foundation Models)

关键词: GUI设计 碎片化图层分组 图学习 多模态融合 图神经网络 自注意力机制 GUI到代码

📋 核心要点

  1. 工业界GUI到代码转换过程中，碎片化图层降低了生成代码的可读性和可维护性，现有方法难以有效解决。
  2. 提出基于图学习的方法，融合多模态信息，通过图神经网络学习图层之间的关系，实现碎片化图层的有效分组。
  3. 在真实数据集上实验表明，该模型达到了SOTA性能，并通过用户研究验证了其在生成可维护代码方面的有效性。

📝 摘要（中文）

本文提出了一种基于图学习的方法，旨在解决GUI设计中碎片化图层分组的问题。该方法利用设计原型中的多模态信息，通过图学习模块（包含自注意力机制和图神经网络）对GUI图层进行分组。该模块以GUI图层的多模态融合表示作为输入，创新性地通过同时分类GUI图层和回归对应GUI组件的边界框来实现碎片化图层的分组。在两个真实数据集上的实验表明，该模型达到了最先进的性能。进一步的用户研究验证了该方法可以辅助智能下游工具生成更易于维护和阅读的前端代码。

🔬 方法详解

问题定义：论文旨在解决GUI设计原型中碎片化图层分组的问题。现有方法在处理语义一致的碎片化图层时存在不足，导致生成的代码可读性和可维护性较差。因此，需要一种能够有效识别和分组这些碎片化图层的方法。

核心思路：论文的核心思路是利用图学习方法，将GUI图层表示为图中的节点，图层之间的关系表示为边，然后通过图神经网络学习图结构，从而实现碎片化图层的分组。这种方法能够有效地利用图层之间的上下文信息和多模态特征，提高分组的准确性。

技术框架：整体框架包括以下几个主要模块：1) 多模态特征提取：从GUI图层中提取视觉特征、文本特征等多种模态的特征。2) 多模态特征融合：将提取到的多模态特征进行融合，得到GUI图层的综合表示。3) 图构建：根据GUI图层之间的空间关系、语义关系等构建图结构。4) 图学习模块：利用图神经网络学习图结构，实现GUI图层的分类和边界框回归。5) 分组后处理：对图学习模块的输出进行后处理，得到最终的GUI图层分组结果。

关键创新：该方法的主要创新点在于：1) 提出了基于图学习的碎片化图层分组方法，能够有效地利用图层之间的上下文信息。2) 创新性地将GUI图层分类和边界框回归任务结合起来，提高了分组的准确性。3) 利用多模态信息，综合考虑了GUI图层的视觉特征、文本特征等多种因素。

关键设计：图学习模块采用了自注意力机制和图神经网络。自注意力机制用于学习GUI图层之间的关系，图神经网络用于学习图结构。损失函数包括分类损失和回归损失，分别用于优化GUI图层的分类和边界框回归任务。具体的网络结构和参数设置在论文中有详细描述。

📊 实验亮点

实验结果表明，该模型在两个真实数据集上均达到了SOTA性能。与现有方法相比，该模型在分组准确率和边界框回归精度方面均有显著提升。用户研究也表明，使用该模型生成的代码更易于阅读和维护，能够有效提高开发效率。

🎯 应用场景

该研究成果可应用于GUI自动化设计、GUI到代码的自动转换、以及智能UI生成等领域。通过自动分组碎片化图层，可以提高生成代码的可读性和可维护性，降低开发成本，并加速UI设计的迭代过程。未来，该技术有望应用于更复杂的UI设计场景，并与其他AI技术相结合，实现更智能化的UI设计。

📄 摘要（原文）

Automatically constructing GUI groups of different granularities constitutes a critical intelligent step towards automating GUI design and implementation tasks. Specifically, in the industrial GUI-to-code process, fragmented layers may decrease the readability and maintainability of generated code, which can be alleviated by grouping semantically consistent fragmented layers in the design prototypes. This study aims to propose a graph-learning-based approach to tackle the fragmented layer grouping problem according to multi-modal information in design prototypes. Our graph learning module consists of self-attention and graph neural network modules. By taking the multimodal fused representation of GUI layers as input, we innovatively group fragmented layers by classifying GUI layers and regressing the bounding boxes of the corresponding GUI components simultaneously. Experiments on two real-world datasets demonstrate that our model achieves state-of-the-art performance. A further user study is also conducted to validate that our approach can assist an intelligent downstream tool in generating more maintainable and readable front-end code.