图形用户界面代码自动生成研究综述

尹浩

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

0 引言

随着移动互联网时代的到来，越来越多的移动应用和网站开始涌现，给人们的生活带来了极大的便利。在巨大的市场需求面前，移动应用和网站的迭代变得快速，前端开发者将会耗费极大的精力去实现从设计图到代码的转变，而在不同的平台（iOS、Android、Web）下，界面代码也不尽相同，这更增加了开发者的劳动。用户界面包括支持人与机之间交互的软件和硬件系统，是人机交互系统的重要组成部分[1]，友好的界面是人们长期以来的期待。人们日益增长的功能需求是推动软件进行快速迭代的动力，正因为这些功能的迭代，软件界面也在发生着快速的变化，如果能寻求一种自动化的方式去实现从图像到代码的转化，那将会极大地缩短软件的开发周期，降低开发成本。

因此，实现界面代码自动生成具有相当的重要性。在代码生成领域的早期阶段，研究者通过一些基于代码检索、归纳演绎的方法进行代码合成，依托于庞大的代码仓库从大量的数据中推断出一些规律来生成代码，这是人们在早期做的有效的尝试，但由于生成的代码一般很短，并且代码生成器的设计需要程序员的丰富经验，效果不太理想。深度学习的出现，让代码自动化生成步入了新的阶段，在一些研究中，已经出现了可以直接基于界面截图生成代码的端到端模型，给个人开发者和中小企业带来了方便。本文对这些工作进行了分类整理，在此基础上探讨了未来的研究方向。

1 界面代码生成简介

界面在本文中特指用户界面（User Interface），它是用户与应用之间进行数据交换的唯一介质。界面通常以图形化的方式呈现，友好易用的界面深受使用者的青睐，而界面的产生通常是通过编写前端代码，这样的代码就是界面代码。上文已经提到由人来编写界面代码具有诸多缺点，因此出现了由机器自动生成界面代码的技术，它无须开发者的介入，根据手绘图或原型图可以自动生成界面代码。这项技术根据过程可分为图像理解和代码生成两个过程。

图像理解指对原型图或手绘图的语义理解，研究图像中有什么组件，以及组件之间的相互关系。由于要处理图像数据，同时也要处理代码数据，使得该过程横跨了图像描述与自然语言处理两大领域。代码生成指根据理解的图像的语义信息，将其转化为描述图像的代码，这种具有相当长度的文本生成是目前研究中的一大难点。

2 研究现状

2.1 基于设计模式的界面代码生成

模式意味着重用，设计模式这一词首次出现于上世纪90年代，它指的是在软件开发过程中被反复使用的一种代码设计经验，使用设计模式是为了实现对代码的重用。早期人们对界面代码生成的探索中也使用了同样的方法，基于不同的设计模式，这些研究的侧重点也不尽相同，有的侧重于数据模式，有的侧重于界面模式。

在侧重于数据模式的研究中，研究者常常通过使用一种抽象语言（如统一建模语言（UML））或一种文档格式来保存所有模型信息以及相应的转化方法。冯文堂等人[2]选择了支持界面自动生成的FMP模型，提出了一种基于XML文档来表示FMP模型信息的方法，由XML文档来生成界面代码，由于XML的树结构很好地对应了Web界面中的DOM树，使得我们可以通过顺序遍历DOM树来构建界面。针对在多设备环境下，界面开发的难以调试的困难，崔洛等人[4]提出了一种与独立于设备的界面模式描述语言SPLML，并实现了一个界面模式生成框架UIPF来实现界面的自动生成。

在侧重于界面模式的研究中，研究者通常针对一种软件架构模式来有目的地生成界面中的部分代码。郭爱平等人[3]提出了一种基于MVC模式的界面自动生成技术，以元数据作为基础数据对象，通过MVC模式将模型层与视图层分离，然后使用自适应模板来生成用户界面。李琦等人[5]提出了一种在特定设计环境下生成界面代码的方法，并且该方法可以生成多平台的代码，如Java Swing的界面代码、JSP的界面代码等，在一定程度上提高了界面开发的重用性和效率。

2.2 基于低保真图像的界面代码生成

低保真图像在界面代码生成领域特指低保真线框图或手绘图，区别于高保真原型图，低保真图像仅仅呈现最终产品的部分视觉属性，或仅包含关键的元素，在软件的开发流程中，低保真图像具有快速、便宜、清晰等优点，所以基于低保真图像到界面代码具有重要的研究意义。

在基于低保真图像的研究中，Alexander Robinson等人[6]使用边缘检测算法检测出手绘界面各种元素的轮廓，通过启发式的算法对这些元素进行分类，再利用机器学习对手绘界面中的容器进行预测，最后通过递归算法推断出界面的树结构，得到了相应的前端代码。Vanita Jain等人[7]创建了一个界面草图数据库，使用ResNet网络在ImageNet上的预训练参数来做迁移学习，并使用残差学习的方式训练一个深度学习模型，通过该模型可以识别界面元素的类型，并且以JSON格式表示界面组件的嵌套结构，通过UI解释器，JSON格式的数据可以被转化为跨平台的前端代码。A.Zita[8]基于目标检测网络Faster R-CNN，结合深度残差网络ResNet-50，识别手绘的UI组件，在组件的分类任务上，通过正则化训练方法，作者提出的模型可以在手绘组件分类任务上将精确率提升到0.97。

生成对抗网络在近几年发展迅猛，特别是在图像和语音的研究领域，生成对抗网络逐渐开始占据一定的市场，Y Deng等人[9]在2019年提出了一个生成对抗网络模型，用于自动生成界面代码。作者使用强化学习领域的策略梯度更新的方式进行模型训练，在生成模型生成的数据是离散的，这让生成模型无法通过梯度下降的方法得到调整的问题上，提出了一个rollout网络，利用蒙特卡洛搜索的方法评估生成数据与真实数据的误差。实验结果表明生成对抗网络模型在手绘界面的代码生成问题上表现更佳。

2.3 基于高保真图像的界面代码生成

高保真图像在软件开发中一般特指高保真原型图，高保真原型是尽可能与最终产品在功能和外观上都相同的原型，与低保真原型不同的地方在于，高保真原型具有更细致的图形界面，更真实的内容。在界面代码生成中，我们将界面截图也归于高保真图像一类，因为我们并不能总是能获得应用的初期原型，但是可以轻松得到应用的界面截图。通过真实截图生成界面代码也是一个重要的研究内容。

在根据界面截图生成代码的研究中，Beltramelli T等人[10]率先提出了pix2code深度学习模型，通过作者设计的领域特定语言（DSL），结合CNN的图像特征提取能力和LSTM的长期依赖建模能力，模型可以根据一张bootstrap风格的图形界面生成对应的DSL，最终通过启发式的方法，将DSL编译为最终的目标平台的前端代码。模型支持三个平台（Android、iOS、Web）的前端代码生成，并且准确率可以达到77%。Pix2code是利用深度学习处理界面代码生成问题的一次创新，为后续的研究开辟了道路，此后，有不少的研究基于此基础上做出了不断地突破。Yanbin Liu等人[11]使用双向的LSTM网络来替换原始模型中的LSTM，考虑到界面代码的结构性特征，DSL的生成不仅仅依赖于之前的单词，其后的单词也对其产生影响，双向的LSTM网络降低了模型在测试集上的错误率，并提高了模型的稳定性。

为了得到更好的图像特征，郝同安等人[12]提出将视觉模型置于整体模型之外，使用基于反卷积网络的自编码器来训练CNN，这样得到的图像特征将不再依赖于整体模型的误差反馈，更加能表达图像本身的特征，在BLEU评分上有显著的提升。黄倩等人[13]提出了pix2code-e模型，使用自编码器，提前在GUI截图上进行预训练，通过反卷积还原图像进行特征提取，将视觉模型的训练置于整体模型之外，使整体模型的误差反馈只传递到语言模型，带来了更少的训练时间和更高的预测准确率。

在对语言模型进行优化的研究上，黄倩等人[13]提出了使用层次化注意力机制，使DSL单词的生成可以重点关注图像的一些局部特征，例如在生成button组件的代码时，注意力机制可以使图像中button区域的权重变得更大些，由此生成的DSL更加准确。Meine Mat⁃thias Velzel等人[14]提出使用GRU网络代替pix2code中的LSTM结构，可以减少模型的整体参数数量，减少训练耗时，使模型更加容易收敛。

3 结语

本文介绍了界面代码生成领域出现的方法及模型，阐述了模型中使用到的技术手段，并对其局限性做出剖析。深度学习的出现，让自动化前端代码生成成为了可能，虽然现阶段的数据集过于简单，只能生成一些样式特定内容简单的界面代码，在实际生产当中还存在较大的局限性。同时由于计算机内存与计算能力的限制，以及HTML代码的多样性和复杂性，越过DSL直接生成HTML代码还不具有可行性。现阶段的研究工作应该考虑更大更复杂的数据集，包括更多组件更多样式的界面图，和表现形式更丰富的DSL，并在研究中结合计算机视觉的方法，以提高模型的表现，相信在不久的将来，自动化前端界面开发将会成为现实。