用户界面代码生成研究进展

2020-11-25王慧亚范佳琪张志翔

现代计算机 2020年8期

王慧亚，范佳琪，张志翔

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

0 引言

随着互联网技术的进步和智能设备的普及，各种网站、移动应用层出不穷，极大地方便了人们的生活。对于一个新应用的开发者来说，无论是出于抢占市场的考量，还是节约成本的打算，缩短项目开发周期都是永恒的追求。在软件开发的各个流程中，用户界面的设计和实现是非常重要的一部分。用户界面（User Interface，UI），是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换；界面需要体现需求，展示功能，同时界面风格对用户体验也有莫大的影响[1]。因此在软件开发过程中，界面开发十分重要。

界面开发的一个重要步骤是起草和设计模型，它有助于用户界面的实例化，以评估或验证抽象的设计概念。在工业环境中，这一过程通常由专门的设计师执行，他们拥有特定领域的专业知识，能够使用图像编辑软件制作具有吸引力、直观的图形用户界面，或是创建线框或实体模型，从而在投入开发资源实现它们之前对设计进行评估。在创建了这些初始设计草稿之后，必须将它们转换为代码，以便最终用户能够以其预期的形式体验用户界面。这一过程是耗时、繁琐且易出错的，即使软件开发人员具有相当的专业知识，完成设计图到代码的转换也要花费大量时间和精力。因此，用户界面的自动化生成是一项意义重大的研究，可以解放开发者生产力，使其有更多时间专注于逻辑和业务的实现，缩短开发周期。本文对目前存在的界面自动生成研究进行了整理和归纳，介绍了部分代表性工作，同时对这些工作存在的限制进行了说明，并在此基础上提出了对未来研究方向的猜想。

1 研究现状

1.1 基于模型的界面生成

界面生成方法早期是基于模型的，建模者需要对整个系统有充分的了解，定义包括任务、用户、展示、会话和平台模型在内的多个模型，模型可以用高度专业化的标记来表示，从而使得界面更容易创建和维护。

Puerta 描述了Mobi-D（基于模型的界面设计器），这是一个通过基于模型的界面开发支持以用户为中心的设计的综合环境[12]。为了解决从场景到正式规范的过渡以及UI 代码的生成不明确的问题，Elkoutbi 等人提出了一种需求工程方法，该方法从场景生成用户界面原型，并生成应用程序的正式规范[13]。为了对交互操作对象进行建模，以及实现交互对象与域对象的协作，Silva 等人设计了交互式应用程序的统一建模语言（UMLi），该语言是UML 的扩展，为UI 设计提供支持[14]。冯仕红等人利用模型驱动理论，建立了一个包括多个平台无关模型和平台相关模型的多设备用户界面模型[16]。

为了解决缺少对界面进行良好描述的界面描述语言，或者生成的界面依然遵循传统的图形用户界面的规范的问题，杜一等人首先提出一种多尺度的界面描述方法，该方法能够在不同的层次上对界面进行模块化的描述；然后以该描述方法为基础，提出一种基于该方法的移动界面生成框架[17]。

1.2 基于机器学习的界面生成

利用机器学习技术生成图形用户界面代码是一个相对较新的研究领域，近年使用机器学习技术自动生成的人类可读格式的程序是[4-5]，使用梯度下降法通过解释程序从输入输出示例中生成源代码。然而，他们的表现已经被文献[6]证明不如离散编程语言社区广泛使用的基于搜索的技术。

另一项工作是DeepCoder，这是一个能够通过利用统计预测来增强传统搜索技术来生成计算机程序的系统[7]。这项工作中，作者定义了一种表达性足够的编程语言，包括现实世界的编程问题，同时可以从输入输出示例中预测，得到了用于将输入输出示例集映射到程序属性的模型，进行了与标准程序合成技术相比表现出一个数量级加速的实验，这使得该方法可用于解决与编程竞争网站上出现的最简单问题类似的难题。

在Gaunt 等人的研究中，通过可微分解释器学习输入输出示例之间的关系，可以生成源代码[6]。作者的目标是开发基于神经网络和图形模型的新机器学习方法，并理解机器学习技术相对于传统替代方案的能力，例如基于编程语言社区的约束求解的方法。其主要贡献是TerpreT 的提出，这是一种用于表达程序合成问题的领域特定语言。TerpreT 类似于概率编程语言：模型由程序表示的规范（随机变量的声明）和描述程序如何将输入映射到输出（将未知数连接到观察的模型）的解释器组成。推理任务是观察一组输入输出示例并推断底层程序。

此外，Ling 等人演示了从混合自然语言和结构化程序规范作为输入的程序合成[8]。值得注意的是，大多数这些方法都依赖于域特定语言（DSL），计算机语言（例如标记语言、编程语言、建模语言），它们是为专用域设计的，但通常比全功能的计算机语言更具限制性。因此，使用DSL 限制了需要建模的编程语言的复杂性并减小了搜索空间的大小。

1.3 基于可视输入的界面生成

通过可视输入，例如手绘，UI 屏幕截图等生成代码的工作较少。其中pix2code[9]是第一个试图通过机器学习方法学习潜在变量而不是工程复杂启发式，来解决视觉输入产生用户界面代码问题的工作。作者首先从原型图生成DSL（领域专用语言），再将DSL 编译为源代码。作者用设计原型图及DSL 上下文作为训练数据，用一个CNN 网络获取图像特征，两个LSTM 网络来理解DSL 上下文的基本规律以及DSL 与对应原型图的关系。pix2code 整体表现不错，但存在一定的限制，例如需要预先制定代码长度范围，以及pix2code 没有考虑GUI 的层次结构以及代码结构。

之后有研究对pix2code 进行改进。按时间顺序预测的标准LSTM 忽略了未来的上下文信息，有时仅仅查看前一个单词是不够的。因为计算机代码是相对空间关系，不仅需要识别令牌，还要完全理解所有序列的结构。为了解决该问题，Liu 等人将pix2code 模型用双向LSTM 优化，其允许输出层获得输入序列中的每个点的完整的过去和未来的上下文信息[19]。该模型在测试集中的转换精度得到了显着提高，达到了85%。

Zhihao Zhu 等人基于注意力的分层解码模型对pix2code 做出了改进[10]，作者提出了一种基于注意力的代码生成模型，它可以更精细地描述GUI 图像，同时也可以生成和GUI 的图形元素的分层展开一致的分层结构化代码。并且所有组件都能单独提取出来进行端到端方式联合训练，实验结果表明作者的方法对比于pix2code 在公开的GUI 代码数据集和他们自己提出的数据集中都有明显的进步.

Tuan Anh Nguyen 等人首次提出自动对移动应用程序用户界面进行逆向工程的技术（REMAUI）[20]。REMAUI 自动从用户界面的屏幕截图或概念设计图中推断移动应用程序用户界面的源代码。在给定的输入位图上，REMAUI 通过计算机视觉和光学字符识别（OCR）技术识别用户界面元素，之后推断合适的用户界面层次结构，并将结果作为源代码导出，以便编译和执行。实验评估结果显示，REMAUI 生成的UI 在像素级别以及在其运行时的UI 层次结构上，与原始UI 相似。但REMAUI 同样存在限制，第一，不支持将检测到的组件分类为其本地组件类型，而是使用文本或图像的二进制分类，限制了该方法的实际适用性；第二，从开发人员的角度来看，不清楚REMAUI 生成的GUI 层次结构是否真实有用，因为没有对GUI 层次结构进行评估。

Kevin Moran 等人在REMAUI 的基础上提出了REDRAW[11]。相比之下，REDRAW 不特定于任何特定领域，采用数据驱动的方法来分类和生成GUI 层次结构，能够使用CNN 将GUI 组件分类为各自的类型，以及能够使用数据驱动的迭代KNN 算法结合计算机视觉技术生成真实的GUI 层次结构。

1.4 基于深度学习的界面生成

基于可视输入的方法完美适应软件开发流程，是今后界面生成的研究趋势。图像到界面代码的转换主要是视觉问题，而深度学习在视觉问题方面取得了相当大的成功，并且界面数据量相当大，满足深度学习的应用条件。

目前基于深度学习进行界面生成的研究比较少，其中1.3 小节中提到的pix2code[9]首次使用深度学习直接从截图推断代码。它是在大型语料库（图形用户界面（GUI）屏幕截图和相关代码）上进行训练的，利用循环神经网络学习了组件与其代码之间的关系。pix2code 的优点在于它只需要示例数据并且可以学习新样式的关联。然而，尽管pix2code 在其数据集上具有高性能，但它暂时无法推广到实际生产中[11]。

sketch2code 使用深度学习方法将在纸上绘制的线框直接转换为代码[15]。这允许一个没有经过编程训练的人通过在纸上绘制线框图，来生成完整的功能正常的网站。虽然结果表明该方法没有足够高的性能来用于生产环境，但他们的数据集、框架和评估技术将促进未来的研究。