EGFE：基于多模态学习的UI设计中碎片化元素端到端分组方法
软件工程
2023-09-19 v1 人工智能
摘要
在工业界将UI设计原型转化为代码时，从设计原型自动生成代码可加速应用与GUI迭代开发。然而，在缺乏严格设计规范的设计原型中，UI组件可能由碎片化元素组成。对这些碎片化元素分组可大幅提升生成代码的可读性与可维护性。现有方法采用两阶段策略并引入手工规则来分组碎片化元素，但由于视觉重叠与微小UI元素，其性能不尽如人意。本研究提出EGFE，一种通过UI序列预测自动端到端分组碎片化元素的新方法。为促进UI理解，我们创新性地构建Transformer编码器，以多模态表示学习建模UI元素间关系。在从专业UI设计师收集的4606个UI原型数据集上的评估表明，在编辑距离阈值为4时，我们的方法在精确率（提升29.75%）、召回率（提升31.07%）和F1分数（提升30.39%）上均优于最先进基线。此外，我们开展实证研究评估所生成前端代码的改进情况，结果证明了我们的方法在真实软件工程应用中的有效性。这种端到端碎片化元素分组方法为改进UI相关软件工程任务创造了机遇。
引用
@article{arxiv.2309.09867,
title = {EGFE: End-to-end Grouping of Fragmented Elements in UI Designs with Multimodal Learning},
author = {Liuqing Chen and Yunnong Chen and Shuhong Xiao and Yaxuan Song and Lingyun Sun and Yankun Zhen and Tingting Zhou and Yanfang Chang},
journal= {arXiv preprint arXiv:2309.09867},
year = {2023}
}
备注
Accepted to 46th International Conference on Software Engineering (ICSE 2024)