GUI 源码自动生成研究综述

刘子龙

（四川大学计算机学院，成都610065）

0 引言

互联网时代的到来，各式软件应用的开发为人们的生活带来极大的便捷性，软件市场的高利润也不断吸引着新兴企业加入。无论何种智能设备，图形用户界面（GUI）都是软件应用提供给用户操作的直接媒介，决定着用户的使用体验，是软件能否占据市场的决定性因素之一。网络时代，用户对软件应用的GUI 美观性和功能创新性更是提出了更高的个性化需求。

创建用户喜爱的个性化图形界面是目前软件研发的重点。GUI 设计一般由UI 设计师通过纸笔或Photo⁃shop 等图像编辑工具绘制而成，再交由前端工程师通过手动的方式将其转化为真实代码（GUI 源码），这是一项耗时、易出错的任务[1]。为了满足用户个性化需求，UI 设计师会在设计图中采用一些定制UI 组件，这将会对前端工程师的工作增加难度。同时，GUI 开发是一个多次迭代过程，需根据用户反馈不断修改设计并转换为GUI 源码，软件市场是一个分秒必争的环境，快速GUI 迭代开发能力可以有效提高公司的市场竞争力。

因此，GUI 源码生成对于自动化软件开发有着重要的研究意义。目前计算机视觉、自然语言处理等领域的不断进步，为GUI 源码生成提供了技术指导，通过数据驱动的方式，帮助计算机学习GUI 代码的编写规则，协助软件开发流程，使开发人员能够专注于功能逻辑设计，提高生产效率。本文就近二十年现有的GUI源码生成技术进行了归纳和整理，讨论其中方法的优越性及存在的不足之处，并简述了未来的研究方向。

1 GUI源码自动生成概况

GUI 源码自动生成是指在使用计算机相关技术，无需开发人员的参与，自动将UI 设计师绘制的界面草图或高保真数字概念图转换为能够运行的GUI 真实代码。GUI 包括GUI 组件、层次结构、组件样式三个重要组成部分，每部分的准确识别才能够完成对设计图的高度还原。

GUI 组件是指GUI 设计常用的控件或元件，将简单手绘设计图或高保真设计图转换为GUI 源码的关键一步是识别界面上存在的组件元素，个性化界面中使用的非标准组为机器的UI 组件自动识别提出了新的困难。GUI 层次结构是指界面组件的组织和布局方式。设计图转换为GUI 源码的基础是设计合理GUI层次结构以完美还原设计图。现有研究中，一般通过启发式规则或机器学习算法来推测合理的层次结构，规则的定义需要专家的启发式经验，工作量大，对未知问题的处理不够灵活，容易造成多余底层容器的嵌套，减低页面的呈现速度，浪费计算资源。样式识别在GUI 源码生成中是最具挑战性的。组件样式是指用UI组件所表现出来的字符格式或段落格式，因为组件样式的多样性以及个性化组件的应用，在以数据驱动为基础的机器学习方法中，数据集的收集与处理对组件样式的识别造成了前所未有的难度。

2 GUI源码生成相关研究

2.1 基于模型驱动架构（MDA）策略

上世纪90 年代以来，基础平台和工具技术更迭和变革愈演愈烈，为了解决基础系统整合和改造的需求，2002 年由OMG 提出了MDA 技术，对解决对平台系统的开发和移植提供了一个很好的技术方案，研究人员借鉴MDA 思想，设计了多种GUI 源码自动生成方法，各自侧重点不同，有些注重平台无关性，有些注重GUI交互设计。

在注重平台无关性研究中，研究人员通过一种独立于各系统的GUI 描述方法，使用UML 描述模型或XML 标记语言构建GUI 模型。Josef Jelinek 等人[2]提出从带注释的源代码中以程序结构和附加GUI 控制指令的形式定义任务模型，将任务模型的动作事件对象和数据传输对象解析为对应的GUI 组件。Max Schlee 等人[3]遵循生成编程（GP）范式，使用GUI 图形化设计工具创建XML 文件，并根据XML 规范以及ANGIE 框架技术将一组预先开发的特定GUI 组件组装成可执行应用程序。Mohamed Lachgar 等人[5]提出了一个Android⁃GUI 元模型，通过Eclipsed 的Xtex 设计了一套DSL 语言，开发人员能够直接进行DSL 编程来构建用户界面模型，然后使用Xtend 转换为对应特定平台的界面模型和代码。

在注重GUI 交互设计研究中，研究人员以交互设计模型来迭代探索和评估交互设计方案。David Rane⁃burger 等人[6]设计了一个通信交互设计模型，通过构建的需求树状模型使用UCP 提供的工具将其自动转换为GUI 源代码，在使用过程中找出设计问题。Her⁃mann Kaindl 等人[7]为了实现类似问题解决方案的可重用性以及避免从零开始设计新方案，提出一种论述交互模型，在收集的针对具体问题的问答对中使用有序的联合关系指定可同时执行的子部件来构建GUI 树状模型，再据此生成GUI 源码。

2.2 基于目标识别策略

为了提高设计图中GUI 组件的识别准确率，有些研究人员采用目标检测方式，在大量标注数据集的支持下，采用CNN 网络识别GUI 组件类别和对应位置信息，定义启发式规则处理识别结果并推断层次结构，最后采用模板方法生成GUI 源码。

Tuan Anh Nguyen 等人[1]使用传统的计算机视觉和OCR 技术构建了第一个对移动用户界面进行逆向工程项目REMAUI。REMAUI 采用边缘检测算法Canny 在截图上识别组件及位置，OCR 技术用于识别界面文本和字体类型，计算组件和文本的位置对应关系，对组件类型进行二值划分，利用定义启发式规则去除识别错误的组件并根据组件的位置坐标推断合理的层次结构，GUI 源码的生成选择模板和绝对布局方法，在已建好的工程项目中填写对应信息。Kevin Moran 等人[8]在REMAUI 的启发下，使用预训练的CNN 网络识别组件类别，并采用KNN 算法从大量的软件资源库中寻找可复用的容器类型来组成合适的层次结构。

在手绘草图识别方面，Alexander Robinson[9]的研究中分别使用了计算机视觉和语义分割网络两种方法来对草图界面元素进行识别，并将识别结果转换为前端代码，实现了草图到代码的自动化。Vanita Jain 等人[11]使用了更先进的目标检测网络RetinaNet 来对识别草图元素，提高了识别准确率，然后通过一个UI 解析器来生成不同平台的代码。

2.3 基于端到端策略

为了更加便捷识别GUI 组件，抛弃繁琐的启发式规则定义，有些研究人员借鉴计算机视觉和自然语言处理方向的相关研究方法，提出了基于深度学习的端到端模型实现GUI 源码的自动生成。Tony Beltramelli[12]首次在GUI 源码生成任务中引入神经网络，构建了名为pix2code 的代码自动生成模型。作者以界面截图为输入，并设计了一套DSL 语言用以描述界面，网路架构借鉴机器翻译的经验，采用CNN+RNN 构建编解码模型学习GUI 截图和DSL 代码之间的联系，最后使用传统的编译技术将DSL 代码翻译为特定平台对应的GUI源码。

Pix2code 为GUI 源码生成探索了一个全新的方向，更多的研究人员致力改进pix2code 模型，提出了很多富有创新性的方法。Zhihao Zhu 等人[13]使用分层结构的LSTM 模型，块级LSTM 用以帮助CNN 提取特征，Token 级LSTM 学习DSL 序列特征，采用注意力机制指导特征的选择。黄倩[14]在模型中引入图像自编码方法和分层视觉注意力机制，同时支持了手绘图的转换。雷慧[15]调整了pix2code 模型中的CNN 网络结构以保留组件位置和颜色，使用多层卷积层，增加步伐以替代池化层。韩易[16]在传统的编解码模型中加入了目标检测机制，使用目标检测器Mask-RCNN 抠出目标图像，再利用CNN 和Bi-LSTM 对原始图像、目标图像和文本数据进行建模。Xiongwen Pang 等人[17]提出了两个神经网络模型HGui2code 和SGui2code，用以解决现有研究中GUI 和DSL 代码中信息利用不充分以及生成的DSL 代码不符合语法规则的问题。以上模型均是基于pix2code 做出了改进，目标在于生成准确率较高的DSL 代码，GUI 源码生成都采用统一的传统编译技术，按照预先定义的翻译规则翻译为对应的GUI 源码。

3 现有研究不足之处

针对GUI 源码生成的现有研究，在总体上可分为三种实现方法。基于MDA 策略的GUI 源码生成方法重点在于功能逻辑设计，没有注重解决GUI 个性化和美观问题，美观性只能由开发人员手动添加。MDA 方式通常使用UML 或XML 文件描述系统的动态流程和对象关系，这种设计方式很难集成到现有GUI 开发流程中。依据UML 或XML 定义的系统对象关系图生成相应的GUI 源码，需要专家根据特定的领域知识制定启发式规则，规则定义难度大，在未知问题的处理上也存在很大的局限性，有时还需要借助特定的生成框架。

基于目标检测策略的GUI 源码自动生成侧重点在于解决组件类别识别的准确度和组件位置的计算。基于GUI 组件标注数据集训练的CNN 网络能够有效提高组件分类准确率，组件的排布方式可以使用绝对布局，但这样生成的GUI 存在着布局固定，难以调整的问题。为解决固定布局的局限性，开发人员可以选择定义启发式规则，依据组件的位置坐标推断合理的相对布局方式，但启发式规则定义的难度又成为了目标检测策略的瓶颈。

基于端到端策略的GUI 源码自动生成侧重点在于解决启发式规则定义难度大的问题。在现有的编解码模型中，DSL 的使用能降低网络的训练难度，但因为DSL 代码存在结构性，普通的LSTM 网络缺乏学习DSL 语法结构特征的能力。在编码器模型的训练中，图像特征的一维展开会导致组件相对位置信息的丢失，顺序拼接方式无法图像结构信息和DSL 结构信息相对应。为了DSL 的简单性，其中不包含组件样式信息，DSL 代码转换为GUI 源码采用的是模板方法，难以还原设计图，并且缺乏灵活性，模板的编译规则定义工作量大，难以穷尽。

4 结语

通过对现有GUI 源码自动生成方面的文献研究总结发现，目前针对设计图到GUI 源码的生成已经取得了很大的进步，但其中仍然存在者一些需要解决的问题。

首先在GUI 源码生成方面，最要的问题是优质数据集的缺失。目前深度学习在代码自动生成方面已经取得长足的探索，但由于数据集缺失，依赖于数据驱动的神经网络模型并未表现出很高的潜力。其次，现有研究中缺乏组件样式信息的考虑以及代码结构特征的合理运用，而这也是提高设计图还原度的关键。GUI源码中包含的信息更为完善，在解决好长文本生成问题的基础上，使用GUI 源码作为序列特征，关注代码的结构特征，同时采用注意力机制处理图像特征和序列特征之间的对应关系，这也是未来的一个提高设计图还原度的研究方向。