对于前端工程师来说，开发GUI界面极其耗费时间和精力。这种重复、繁琐的工作是否可以交给机器自动化完成，是目前AI领域研究人员积极探索的新方向。最近，西安交通大学的人工智能与机器人研究所提出了一种新的方法，可以帮助前端工程师将设计好的GUI图自动转换为代码，不仅在简单布局的GUI上可以生成非常好的代码，即使在图形元素复杂、样式复杂、空间布局复杂的情况下，生成效果也非常接近真实情况。本文是AI前线第56篇论文导读，我们将深入探讨这一方法背后的技术实现细节，揭开其神秘的面纱。

更多优质内容请关注微信公众号“AI 前线”（ID：ai-front）

介绍

**目前，利用机器学习技术自动化生成用户界面的代码是AI领域比较热门的研究方向。**前端工程师在开发GUI时会耗费大量的时间和精力。如果有一套系统，可以根据图形界面自动生成代码，将会大大提高开发者的效率。

之前已经有研究者做过相关研究，其中一项工作是使用梯度下降的方法，通过可区分的解释性程序，从输入-输出的例子中归纳源代码。后来这种方法被证明性能上存在缺陷，不如编程语言社区使用的基于离散搜索的技术效果好。另外一项工作是DeepCoder，该系统试图通过统计预测的手段来增强传统搜索技术生成代码的不足，但是它有一个问题是对复杂编程语言建模的能力会受到其对特定领域依赖的限制。

目前，从图形界面生成代码的任务中，pix2code是相对而言做的比较好的一个，其利用反馈机制，在解码阶段，使用两个分层的LSTM。但是，该方法存在一个缺陷在LSTM处理长距离依赖的过程中，需要限制输入序列的长度，这个影响到可扩展性和泛化能力；另外一个缺陷是没有考虑到图形界面的层次结构，这样就限制了它在生成精确图形方面的表现。

针对以上问题，本论文提出了一种全新的自动生成图形界面代码的方法。它不仅能很好地解决长距离依赖问题，而且还可以通过显式地表示分层的代码生成过程，来捕获代码的分层结构。该方法使用分层的解码器对代码序列进行推理，逐块生成图形界面的代码。这个方法已经在基准测试集上证明是有效的，并且效果非常好。其中，基准数据集涉及到iOS、Android和Web平台。此外，为了进一步证明该模型在处理复杂的图形界面生成代码问题上的优势，作者还创建了新的包含元素多样性、风格多样性、空间布局多样性的GUI屏幕截图数据集，测试结果表现大大优于以往的几种方法。下图1是使用本论文方法生成GUI代码的过程：

研究背景

自动生成GUI屏幕截图的代码任务和图像生成文字字幕的任务非常类似，都是首先理解图像的可视化内容，然后将它们解释为语言形式。这些任务都遵循encoder-decoder加attention机制的框架，由于encoder和decoder阶段会涉及到RNN神经网络结构，所以会存在长距离依赖问题，这个问题导致无法生成很长的图像描述。

在图像生成文字字幕的任务中，Jonathan等人利用层次结构的LSTM解决长序列依赖问题，他们的模型可以生成段落级别的图像描述。在他们的工作中，使用了两个分层的基于LSTM网络的语言解码器：第一个阶段的LSTM网络捕获图像的一般信息，并将每个句子的上下文信息存储到隐含状态中；第二个阶段的LSTM网络结构用来解码第一个阶段LSTM存储在隐含状态的信息，在段落级别产生不同的句子。本文借鉴这一思想，并做了一些改进，提出了用于GUI代码自动生成任务的新方法。该方法第一阶段的LSTM网络的隐含状态仅仅用于attention网络中，主要是来帮助选择CNN网络提取特征，然后将结果输入第二个阶段的LSTM网络用来生成GUI代码。

本论文的主要贡献如下：

（1）首次提出利用层次化的方法从用户界面生成代码程序；

（2）提出了一种将注意力机制（attention mechanism）与层次的LSTM相结合的新方法，性能表现优于目前使用层次LSTM的其他方法。

（3）介绍了一种新的数据集PixCo-e，其中包含了三个平台的GUI代码示例： iOS、Android和Web。

技术原理

1.整体架构

下面先整体介绍一下该模型自动生成图形界面代码的架构图，如下：

首先，输入的GUI截图给到卷积神经网络（CNN）中以便获取高级视觉特征。然后，将所有高级视觉特征投射到 D维空间，合并到一起生成一个v向量，其中v向量表征图像的紧密特征；接着将其输入到 block LSTM结构中生成h隐含状态向量和p分布，p分布用于确定生成界面图形块的数目，h隐含状态向量指导学习图形块结构中的代码逻辑。CNN抽取的高级视觉特征结合h隐含状态向量，经过多层感知机网络和softmax函数等处理后，生成一个新的向量v(^)，然后输入token LSTM的结构中，token LSTM解码生成图形界面的第t个块代码，最后将所有token LSTM生成的代码块拼接产生整个GUI的代码程序。

2.视觉编码器：卷积特征

利用卷积神经网络（CNN）作为图像的编码器，抽取图像特征向量v的集合V，其中v是一个D维的向量，表征图像某部分的特征。

Region Pooling：将所有的图像特征v，聚合到一个向量v§中，以表示紧密的图像特征信息，并且作为上下文输入到block LSTM结构中。其中，聚合向量v§是通过求每个channel的v（p）和v（i）逐元素求得最大值计算得来的。

3.基于注意力的分层解码器

将提取的视觉特征输入到层次视觉解码器模型中，该模型由两个模块组成：一个是block LSTM，另外一个是token LSTM。block LSTM负责确定整个程序的总块数，并且为每个块生成一个H维的指导向量。token LSTM利用指导向量结合CNN提取的基础图像特征，抽取每个块中最重要的图像特征，作为每一步输入的上下文信息，来指导生成每个块的代码结构。

Block LSTM

block LSTM由一个LSTM构成，隐含状态的大小为512，初始的hidden状态和cell状态都设置为0，开始block LSTM会将聚合特征的向量v§作为初始输入，然后会产生一系列的隐含状态，分别对应不同的代码块结构。隐含状态在整个过程中有两个作用：一个是决定代码块是否是整个程序的最后一块；另外一个是作为attention网络的输入，来指导CNN网络抽取跟块相关的更精确的特征。

Token LSTM

token LSTM由两层LSTM构成，隐含状态的大小512，图像特征v向量作为token LSTM的初始输入，然后来生成代码块。其中，图像特征v向量是由CNN产生高级特征，然后结合block LSTM输出的隐含状态，输入多层感知机网络，经过softmax函数处理输出attention 网络的权重，再与CNN抽取的特征求和而得到。

第二个LSTM网络的隐含状态，用来预测token在词表中的分布，特殊的“END”字符是一个块解码结束的信号。经过token LSTM的处理，产生GUI相应的各个块的代码，然后拼接到一起就是整个GUI的代码程序了。

4.训练

训练数据集由（x,y）组成，其中x代表输入的GUI屏幕截屏，y代表GUI的代码。之前研究者的方法是在每一次迭代训练中，利用固定大小的切片窗口获取一个切片代码块，然后输入到LSTM编码器中。而本论文新提出的方法是，一次性将全部的代码输入给模型。遵循DSL原则，在训练过程中，我们使用统一的规则来切分代码块，按stack模块来解析处理，“｛”代表代码块的开始，“｝”代表代码块的结束，并且手工插入一些代码块结束的标识符号。

代码程序经过切分处理后，假设程序包含S个块，第i个块有N（i）个tokens，y(i,j)是第i个块的第j个token的分布。p（i）是每一个块的状态，其中0代表继续，1代表结束。q(i,j)是block LSTM产生的隐含状态输入token LSTM的一个副本后，为每个token产生的一个分布。g（i）是第i个块的隐含状态的分布，其中0代表继续，1代表结束。训练的损失函数由block LSTM的损失函数和token LSTM的损失函数的交叉熵求和而得，下面是损失函数的公式：

实验评测结果

在两个数据集上，都实现了本文提出的自动生成图形界面代码的模型。第一个是公开的数据集PixCo，其中包含iOS、Android和Web三个子数据集，每个子数据集包含1500个GUI-code对的训练数据，250个GUI-code对的测试集。第二个是我们自己收集的实际场景下的数据集PixCo-e，创建第二个数据集的原因是，第一个数据集相对简单，而真实的GUI包含多个图形元素，视觉布局也相对复杂。类似第一个数据集，第二个数据集也分iOS、Android和Web三个子数据集。其中，训练数据有3000对，测试数据有500对，样本量也有扩大。

一些实现上的小细节：我们重新设置了输入图片的尺寸大小为256*256像素，再对像素值做归一化处理。编码阶段同样使用基于CNN网络结构的编码器，使用三个卷积层，宽度分别为：32,64,和128，和两个全连接网络。解码阶段，block LSTM和token LSTM的输入维度都设置为512，并且使用sigmoid作为非线性激活函数。此外，因为token词表比较小，所以使用one-hot编码后的token-level的语言模型。在训练过程中，使用Adam优化算法进行优化，mini-batch 大小设置为128，learning rate大小设置为0.001，dropout rate大小设置为0.5。

整个训练过程使用NVIDIA TITAN X GPU，PixCo数据集花费大约3个小时，我们自己的数据集PixCo-e大约花费6个小时。

定量的实验效果

表1是基于分层的LSTM架构的基准测试结果。

Baseline-2和本论文提出的模型不同的点是它的模型在第一阶段LSTM隐状态在每一步直接输入到第二阶段的LSTM作为上下文，而没有其他指导信息输入。

表2对比了在PixCo和PixCo-e数据集上baseline-1、baseline-2、pix2code和本论文提出的模型效果，生成代码的质量效果通过计算每个样本token的分类错误率来评估。

可以看到，在PixCo的三个子数据集上，本论文的模型明显优于pix2code。从分类错误率看，在iOS和Android平台上，其拥有比Web平台长的代码长度，所以更能说明本论文的模型在处理复杂GUI布局和长序列依赖上表现要更好。baseline-2也是基于分层的LSTM结构，但是跟本论文的模型比较，在两个数据集和三个平台上，效果都不如本论文的模型。这进一步说明，同样使用CNN网络，添加attention机制后，可以提升层次LSTM模型生成代码的质量。

表3对比了本论文的模型使用不同搜索策略的效果。

从实验效果看，使用beam策略搜索效果会更好。实验分别对比了beam的大小设置为3和5的效果，当beam的大小为5时效果更佳。

定性的实验效果

图4展示了生成图形界面代码过程中的attention动态处理过程。模型能够学习GUI屏幕截图中的代码块和其对应的空间区域之间的正确对齐。

图5和图6展示了iOS和Web端的例子。在PixCo数据集上，尽管偶尔会出现一些图形元素错位和样式错误的情况，但是pix2code和本论文提出的模型输出的结果都非常接近真实情况。这证明了两个模型在学习简单的GUI布局上都是可行的。然而，在GUI变得更加复杂的PixCo-e数据集上，我们观察到，由pix2code生成的GUI质量急剧下降，并且明显低于本论文提出的模型。

未来展望

本文提出了一种新型的自动生成GUI代码的方法，该方法在基准数据集和自己创建的数据集上都表现出非常好的效果。本文提出的模型使用了层次结构的解码器，并且添加了attention机制，这样可以更好地捕获GUI和代码的分层布局。实验结果证明解决长距离依赖非常有效，能够为复杂的GUI布局精确地生成高质量代码。研究团队接下来计划尝试新的方法，用于识别和分开重叠的图形元素，并生成正确的代码描述。

论文原文链接：

https://arxiv.org/pdf/1810.11536.pdf

创作场景

搞定复杂 GUI！西安交大提出前端设计图自动转代码新方法