Abstract
将设计人员创建的图形用户界面截图转换为计算机代码是开发人员为构建定制的软件、网站和移动应用程序而执行的典型任务。在本文中，我们证明了深度学习方法可以用来训练一个端到端模型，对三个不同的平台(即iOS、Android和基于web的技术)从单个输入图像自动生成代码，准确率超过77%的水平
Introduction
基于由设计人员创建的图形用户界面(GUI)模型来实现客户端软件的过程是开发人员的责任。然而，实现GUI代码很耗时，并且阻碍了开发人员花费大部分时间来实现他们正在构建的软件的实际功能和逻辑（编写前端功能耗时，妨碍后端逻辑的编写）
用于实现这种gui的计算机语言是特定于每个目标运行时系统的；因此，当正在构建的软件被期望使用本地技术在多个平台上运行时，就会导致繁琐和重复的工作（比如 Android和iOS或者HTML）
在本文中，我们描述了一个随机梯度端到端下降模型，同时学习建模序列和时空视觉特征，从单个GUI图像中生成可变长度的标记字符串作为输入。
第一个贡献是pix2代码，这是一种基于卷积和递归神经网络的新方法，允许从一个单一的GUI截图中生成计算机令牌作为输入。也就是说，没有设计设计的特征提取管道或专家启发式来处理输入数据；我们的模型仅从输入图像的像素值中学习。我们的实验证明了我们的方法在为各种平台(即iOS和Android本地移动接口，以及多平台基于多平台web的HTML/CSS接口)生成计算机代码方面的有效性，而不需要对模型进行任何更改或特定的调整。事实上，pix2代码可以简单地通过在不同的数据集上进行训练来支持不同的目标语言。一段展示我们的系统的视频可以在网上找到1。（YouTube）https://youtu.be/pqKeXkhFA3I
我们的第二个贡献是发布了我们的合成数据集，包括三个不同平台的GUI截图和相关的源代码。我们的数据集和pix2代码实现是公开的2，以促进未来的研究。
Related Work
使用机器学习技术自动生成程序是一个相对较新的研究领域，而以人类可读的格式合成程序直到最近才得到解决
最近的一个例子是DeepCoder[2]，这是一个能够通过利用统计预测来增强传统搜索技术来生成计算机程序的系统。在冈特等人的另一项研究中。[5]，通过可微解释器学习输入输出示例之间的关系，实现了源代码的生成。此外，Ling等人。[12]最近演示了从一种混合的自然语言和结构化的程序规范中进行的程序合成作为输入。需要注意的是，这些方法大多依赖于领域特定语言(DSLs)；计算机语言（例如标记语言、编程语言、建模语言）是为专门领域设计的，但通常比功能齐全的计算机语言更严格。因此，使用dsl限制了需要建模的编程语言的复杂性，并减少了搜索空间的大小。
从视觉输入中生成程序仍然是一个几乎未被探索的研究领域。最接近的相关工作是Nguyen等人开发的一种方法。[14]将从屏幕截图中逆向工程安卓用户界面。然而，他们的方法完全依赖于工程启发式方法，需要该领域的专家知识才能成功实现。据我们所知，我们的论文是第一个试图通过利用机器学习学习潜在变量而不是工程复杂的启发式方法来解决从视觉输入生成用户界面代码问题的工作
利用我们输入的图形性质，我们可以从计算机视觉文献中借用方法。事实上，大量的研究[21,4,10,22]已经解决了图像标题的问题，并取得了令人印象深刻的结果；表明深度神经网络能够学习描述图像中对象的潜在变量及其与相应的可变长度文本描述的关系。所有这些方法都依赖于两个主要组件。首先，一个卷积神经网络(CNN)执行无监督特征学习，将原始输入图像映射到一个学习到的表示。第二，一个递归神经网络(RNN)对与输入图像相关联的文本描述进行语言建模。这些方法具有端到端可区分的优点，因此允许使用梯度下降法进行优化。
pix2代码模型体系结构的概述
在训练过程中，GUI图像由基于cnn的视觉模型编码；上下文(即对应于DSL代码的单热编码标记序列)由一堆LSTM层组成的语言模型编码。然后将两个特征向量连接并输入第二个LSTM层堆栈作为解码器。最后，使用softmax层一次采样一个标记，与DSL词汇量大小对应的softmax层的输出大小。给定一个图像和一个标记序列，模型（即包含在灰色框中）是可微的，因此可以通过梯度下降端到端优化，以预测序列中的下一个标记。在采样过程中，为每个预测更新输入上下文，以包含最后一个预测的标记。使用传统的编译器设计技术将DSL标记序列编译成所需的目标语言
pix2code
从GUI屏幕截图中生成用给定的编程语言编写的计算机代码的任务可以与从场景摄影中生成英语文本描述的任务相比较。在这两种情况下，我们都希望从像素值中生成一个可变长度的标记字符串。因此，我们可以将我们的问题分为三个子问题。首先，理解给定的场景(即在这种情况下，GUI图像)并推断存在的物体，它们的身份，位置和姿势（即按钮、标签、元素容器）。其次，一个理解文本（即在本例中，计算机代码）和生成语法和语义上正确的样本的语言建模问题。最后，最后一个挑战是通过利用从场景理解中推断出的潜在变量，生成这些变量所代表的对象的相应的文本描述，从而使用前面两个子问题的解决方案
3.1 Vision Model
cnn目前是解决各种视觉问题的首选方法，因为它们的拓扑结构允许它们从在[16,11]上训练的图像中学习丰富的潜在表示。我们使用CNN通过将输入图像映射到学习到的固定长度向量来执行无监督特征学习；因此作为一个编码器，如图1所示。
输入图像最初被调整到256×256像素（不保留长宽比），像素值被归一化，然后送入CNN。不执行进一步的预处理。为了将每个输入图像编码为一个固定大小的输出向量，我们只使用了小的3×3接受域，并与步幅1进行卷积，如西蒙扬和齐瑟曼使用的VGGNet[18]。这些操作在使用最大池进行下采样之前被应用了两次。第一卷积层的宽度为32，接着是一层，其宽度为64，最后的宽度为128。两个尺寸为1024的全连接层应用校正的线性单元激活完成了视觉模型。
3.2 Language Model
我们设计了一个简单的轻量级DSL来描述gui，如图2所示。在这项工作中，我们只对GUI布局、不同的图形组件及其关系感兴趣；因此，标签的实际文本值被忽略了。除了减少搜索空间的大小之外，DSL的简单性还减少了词汇表的大小(即DSL支持的令牌总数)。因此，我们的语言模型可以使用单热编码向量，使用离散输入执行标记级语言建模；消除了需要单词嵌入技术，如word2vec[13]，这可能会导致昂贵的计算。
在大多数编程语言和标记语言中，元素使用打开标记声明；如果子元素或指令包含在块中，则解释器或编译器通常需要一个关闭标记。比如<h1> </h1>
在父元素中包含的子元素的数量是可变的情况下，建模长期依赖关系必须能够关闭已打开的块。传统的RNN架构存在消失和爆炸的梯度，使它们无法建模时间序列中分布的数据点之间（即这种序列中分布的令牌）的关系。霍克雷特和施米杜伯提出了长短期记忆(LSTM)神经结构来解决这个问题，[9]。不同的LSTM门输出可计算如下：
W为权值矩阵，在t时刻的新输入向量之间，ht−1为先前产生的输出向量，ct−1为先前产生的细胞状态的输出，b为偏置，φ和σ的激活函数分别为s型切和双曲切。细胞状态c通过使用递归连接来学习记忆信息，就像在传统的RNN细胞中一样。输入门i用于控制单元状态c输入上的错误流，以避免传统RNN中发生的输入权值冲突，因为存储某些输入必须使用相同的权值并忽略其他输入。输出门o控制来自单元状态c的输出的错误流，以防止在标准RNN中发生输出权值冲突，因为相同的权重必须用于检索信息而不检索其他信息。因此，LSTM内存块可以使用i来决定何时在c中写入信息，并使用o来决定何时从c中读取信息。我们使用Gers和施米杜伯[6]提出的带有遗忘门f的LSTM变量来重置内存，并帮助网络建模连续序列。
3.3 Decoder
我们的模型以一种有监督学习的方式进行训练，通过输入一个图像I和一个上下文序列X的T标记xt，T∈{0…T−1}作为输入；和标记xT作为目标标签。如图1所示，一个基于cnn的视觉模型将输入图像I编码为一个向量表示p。输入标记xt由基于LSTM的语言模型编码为中间表示qt，允许模型更多地关注某些标记，而更少地关注其他[8]。这个第一语言模型被实现为两个LSTM层的堆栈，每个层有128个单元格。将视觉编码向量p和语言编码向量qt连接成一个单一的特征向量rt，然后将其输入第二个基于LSTM的模型，解码视觉模型和语言模型学习到的表示。因此，解码器学习对输入GUI图像中出现的对象与DSL代码中存在的相关标记之间的关系进行建模。我们的解码器被实现为两个LSTM层的堆栈，每个层有512个单元格。该体系结构可以用数学方法表示如下：
这种架构允许整个pix2代码模型通过梯度下降端到端进行优化，以便在它看到序列中的图像和前面的标记后，一次预测一个标记。输出的离散性(即DSL中令牌的固定大小的词汇表)允许我们将任务简化为一个分类问题。也就是说，我们模型的输出层具有与词汇表大小的相同的单元格数量；因此，在每个时间步长生成候选令牌的概率分布，允许使用softmax层来执行多类分类。
3.4 Training
用于训练的序列的长度T对于建模长期依赖关系很重要；例如，能够关闭已打开的代码块。经过实证实验，对用于训练的DSL输入文件进行分割，使用大小为48的滑动窗口；换句话说，我们将递归神经网络展开48步。这是长期依赖学习和计算成本之间的一个令人满意的权衡。因此，对于输入DSL文件中的每4个标记，该模型都包含一个输入图像和一个T=48标记的上下文序列。
当用于训练的上下文（即令牌序列）通过滑动窗口在每个时间步（即每个令牌）更新时，对于与相同GUI关联的样本，重复使用相同的输入图像I。特殊标记<START>和<END>分别作为DSL文件的前缀和后缀，类似于卡病变和Fei-Fei[10]使用的方法。训练是通过计算损失与通过反向传播计算的网络权值的偏导数来完成的，以最小化多类对数损失：
使用xt+1，它是预期的标记，yt是预测的标记。该模型经过端到端优化，因此所有参数的损失L被最小化，包括基于cnn的视觉模型中的所有层和两个基于LSTM的模型中的所有层。使用RMSProp算法[20]进行训练，学习速率设置为1e−4，并将输出梯度剪切到[−1.0,1.0]范围，以应对数值不稳定性[8]。为了防止过拟合，在每次最大池化操作后，在每次全连接层后的30%的情况下，将辍学正则化[19]设置为25%。在基于LSTM的模型中，辍学被设置为10%，并且仅应用于非循环连接[24]。我们的模型是用64个图像序列对的小批量进行训练的。
3.5 Sampling
为了生成DSL代码，我们提供GUI图像I和T=48标记的上下文序列X，其中标记xt…xT−1最初被设置为空，序列的最后一个标记被设置为特殊的<START>标记。然后，预测的标记yt将用于更新下一个上下文标记序列。也就是说，xt……xT−1设置为xt+1…xT(xt被丢弃)，xT设置为yt。重复此过程，直到该模型生成令牌<END>为止。生成的DSL标记序列可以用传统的编译方法编译到所需的目标语言。
Experiments
在训练深度神经网络时，访问后续的数据集是一个典型的瓶颈。据我们所知，在撰写本文时，还没有同时包含GUI截图和源代码的数据集。因此，我们合成了我们自己的数据，从而得到了表1中描述的三个数据集。可合成的列是指使用我们的随机用户界面生成器可以合成的唯一GUI配置的最大数量。列实例指的是合成的（GUI屏幕截图、GUI代码）文件对的数量。列样本是指不同的图像序列对的数量。事实上，训练和采样做一个标记一次给模型的图像和序列的滑动窗口的固定大小t因此训练样本的总数取决于标记的总数写在DSL文件和滑动窗口的大小。我们的随机用户界面生成器被设计用来合成用DSL编写的gui，然后将其编译为所需的目标语言。使用数据合成也允许我们演示我们的m的能力
TABLE 3
我们的模型有大约109个×106个参数需要优化，所有的实验都使用相同的模型进行，没有特定的调整；只有训练数据集不同，如图3所示。采用贪婪搜索和波束搜索进行代码生成，以找到分类概率最大化的令牌。为了评估生成的输出的质量，我们计算了每个采样的DSL令牌的分类误差，并在整个测试数据集上取平均值。生成的和预期的标记序列之间的长度差也被视为误差。结果见表2。
图4、图5和图6显示了由输入gui（即地面真相）和由训练过的pix2代码模型生成的输出gui组成的样本。重要的是要记住，标签的实际文本值被忽略了，而且我们的数据合成算法和DSL编译器都将随机生成的文本分配给标签。尽管偶尔问题选择正确的颜色或正确的风格特定GUI元素和一些困难建模GUI组成的图形组件，我们的模型通常能够学习GUI布局以一种令人满意的方式，可以保留图形元素的层次结构。
Conclusion and Discussions
在本文中，我们提出了一种新的pix2代码生成方法，以生成计算机代码作为输入。虽然我们的工作证明了这种系统在自动化实现gui过程方面的潜力，但我们只是触及了可能的情况的表面。我们的模型由相对较少的参数组成，并在一个相对较小的数据集上进行训练。生成的代码的质量可以通过在更多的数据上训练一个更大的模型来大大提高。实现一个现在标准的注意机制[1,22]可以进一步提高生成的代码的质量。
使用单热编码并不能提供任何关于标记之间关系的有用信息，因为该方法只是为每个标记分配一个任意的向量表示。因此，对语言模型进行预训练以学习向量表示，可以推断出DSL中令牌之间的关系(即学习单词嵌入，如word2vec[13])，从而减轻生成代码中的语义错误。此外，单热编码并不能扩展到非常大的词汇表，因此限制了DSL可以支持的符号的数量。
生成对抗网络GANs[7]在生成图像和序列[23,15,25,17,3]方面非常强大。将这些技术应用于从输入图像生成计算机代码的问题是一个迄今尚未探索的研究领域。GANs可以作为一种独立的方法来生成代码，也可以与我们的pix2代码模型结合使用来微调结果。
深度神经网络的一个主要缺点是需要大量的训练数据来得到的模型来很好地推广新的不可见的例子。我们在本文中描述的该方法的一个显著优点是不需要人类标记的数据。事实上，该网络可以通过简单的图像序列对的训练来建模图形组件和相关令牌之间的关系。虽然我们在论文中使用了数据合成，部分是为了演示我们的方法为各种平台生成GUI代码的能力；如果你想只关注基于web的GUI，数据合成可能根本不需要。事实上，人们可以想象在万维网上爬行来收集与渲染网站截图相关的HTML/CSS代码的数据集。考虑到网上已经有大量的网页，以及每天都在创建新的网站的事实，网络理论上可以提供几乎无限数量的培训数据；潜在地允许深度学习方法完全自动化基于web的gui的实现。
