前端设计图转代码，西安交大表示复杂界面也能一步步搞定

使用机器学习技术自动生成图形用户界面（GUI）代码是一个相对较新的研究领域。通常，按照设计编写 GUI 对前端开发者来说是一项耗时又繁琐的工作，因为这使得他们无法投入更多的时间来开发软件的实用功能和逻辑。因此，构建一个将 GUI 原型自动转化为对应编程代码的系统是非常有前景的。

近期人们使用机器学习技术自动生成人类可读格式的程序，它们使用梯度下降从输入-输出样本中导出源代码。然而，它们的性能被证明还不如基于离散搜索的传统技术，这一技术一直在编程语言社区得到广泛哦使用。另一个同类研究是 DeepCoder，该系统尝试利用统计预测来增强传统搜索技术，以生成计算机程序。然而，它对复杂编程语言建模的能力受限于其对特定领域语言（DSL）的依赖。

对于从视觉输入生成代码的任务，目前只有为数不多的几项研究，而其中，与本文研究最相似的是 pix2code 。pix2code 采用反馈机制，其中解码过程可以通过两种不同级别的LSTM迭代进行：「编码」LSTM，对已经生成的代码序列进行编码以减轻「解码」LSTM学习长序列关系的负担。「解码」LSTM，用于代码序列生成，然后将解码 token 序列返回给「解码」LSTM以形成反馈循环。通过采用反馈机制，pix2code 能够生成比其它基于单流程的方法长得多的单词/token 序列。但是，它们的方法需要预先固定「编码」LSTM可以生成的最大序列长度。也就是说，代码长度范围需要预先指定，这降低了该方法的可拓展性和泛化能力。该方法的另一个明显缺陷是，它没有把 GUI 及其代码的层次结构纳入考虑，这限制了其生成准确图形程序的性能。

为了解决这些问题，研究者们提出了一种用于自动生成图形编程的新方法。它不仅能很好地解决长期依赖性问题，同时还能通过将代码生成过程以层级的方式表示出来而捕捉到代码的层级结构。研究者们的新方法使用层级解码器来推理代码序列，并一个接一个模块地生成图形源代码。

下图 1 展示了 GUI 和对应代码的示例，同时也展示了将 GUI 划分为不同模块的方法。DSL 的详细代码生成过程如下所示：首先第一阶段的LSTM会用于解码模块级别的图像视觉信息，其中该LSTM的每一个隐藏状态都包含了这个模块的一般上下文信息。然后将第一阶段LSTM的隐藏状态和图像的卷积特征输入到注意力模型以选择最重要的局部卷积特征，这些局部卷积特征会进一步馈送到第二阶段的LSTM，并作为上下文信息以为对应的模块生成代码。

图 1：给定一张 GUI 截屏图像后，研究者新模型所生成的代码示例。其中 (a) 为输入 GUI，它会以某些方式分割为 5 个模块。(b) 展示了模型根据 5 个模块所对应生成的 DSL 代码，最后 (c) 为根据前面所生成的 DSL 代码而重新渲染的 GUI。

研究者在 pix2code 所提供的基准数据集进行了测试，且实验结果表明他们的方法是非常高效的：他们的模型在所有三种子数据集（IOS、安卓和网页端）都比目前最优的方法要好。此外为了进一步说明他们提出的模型在处理复杂的 GUI 时有更强的优势，他们构建了一个新数据集，该数据集包含具有更多图形元素的 GUI 截图，且图形元素的样式和空间布局更加多样化。研究者表示在新的复杂数据集上，他们的方法会以更大的优势好于其它对比的方法。

论文：Automatic Graphics Program Generation using Attention-Based Hierarchical Decoder

论文地址：https://arxiv.org/pdf/1810.11536.pdf

摘要：近期深度学习的研究进展使得利用编码器-解码器框架自动地将图形用户界面（GUI）截图转换为代码变得可能。尽管常用的图像编码器（例如 CNN 网络）能提取足够的图像特征，将这些抽象图像特征解释为数百代码符号对基于 RNN 的代码生成器而言是很大的挑战。考虑到用于描述 GUI 的代码通常是分层的结构，我们提出了一种基于注意力的代码生成模型，它可以用更精细级别的细节描述 GUI 图像，同时也可以生成和 GUI 的图形元素的分层展开一致的分层结构化代码。我们的模型遵循编码器-解码器框架，所有的组件都能以端到端的方式联合训练。实验结果表明我们的方法在公开 GUI-代码数据集和我们提出的数据集上都超越了其它当前最佳方法。

本文提出的方法

我们的方法将一个 GUI 截图作为输入，生成编程语言来描述它，并被设计为能利用 GUI 和图形程序的分层特征。图 2 展示了我们的基于注意力的分层代码生成模型。我们首先使用从 CNN 得到的中间滤波器响应来构建图像的高级抽象视觉表征，由ν表示，然后将其输入到两个层级的分层LSTM：一个 blockLSTM和一个 tokenLSTM。blockLSTM接收图像的视觉特征，然后确定用多少代码块来生成最终的程序。blockLSTM的隐藏状态 h^block_t 在每个时间步 t 被馈送到一个注意力模型作为引导向量来选择视觉特征图中最重要的子区域。给定选取的视觉特征作为语境，tokenLSTM生成对应代码块的代码。

图 2：我们提出的用于自动生成图形程序的模型概览。输入 GUI 截图首先被馈送到 CNN 获取高级视觉特征。所有的视觉特征被投影为 R^D，经过池化得到紧凑的图像表征，然后被馈送到 blockLSTM作为输入。blockLSTM确定生成基于 p_t 的代码块数量，并生成引导向量 h^block_t，再被馈送到注意力模型来选择特定 CNN 特征，以输入第 t 个 tokenLSTM来生成第 t 个代码块的代码。

使用分层LSTM使得以端到端的方式训练整个模型成为可能。训练数据由 (x,y) 对构成，其中 x 代表输入 GUI 截图，y 代表 GUI 的对应代码。和 pix2code 中的方法不同，其中使用了一个固定尺寸的滑动窗口来获取代码片段，再在不同的训练迭代中馈送到「编码器」LSTM中，我们的方法仅需要馈送一次完整的代码到模型中。

实验

我们在两个数据集上实现了该论文提出的自动图编程生成模型，每个数据集都由 GUI 截图与对应的源代码组成。

• 第一个是由 pix2code 论文给出的公开数据集 PixCo；

• 第二个是我们自己的数据集：PixCo-e 数据集。

我们首先重新把输入图像的大小改为 256×256，然后对像素值进行归一化。在编码部分，为了进行更好地压缩，我们采用 pix2code 论文中同样基于 CNN 的编码架构，它包含 3 个宽度分别为 32、64、128 的卷积层，和两个全连接层。在解码部分，模块LSTM和 tokenLSTM的输入维度都设定为 512，sigmoid 被用作非线性激活函数。此外，因为我们的 token 词汇很小，我们直接使用带有 one-hot 编码向量的 token 级别的语言模型。

在训练流程中，我们使用 Adam 算法进行模型更新，mini-batch 大小为 128。我们把模型的学习率设定为 0.001，dropout 率设定为 0.5。使用单个英伟达 TITAN X GPU，整个训练流程在 PixCo 数据集上大约花费 3 小时，在 PixCo-e 数据集上大约花费 6 小时。

图 3：我们的模型在 PixCo 数据集上的定性结果。黑色代表我们的模型生成的 DSL 代码，蓝色的是真实值 DSL 代码，GUI 截图如图中所示。a、b、c 分别代表 iOS、安卓和 Web 平台。

图 4：随着时间推移变化的注意力。随着模型生成每个模块，其注意力有所改变，从而反映出图像的相关部分。亮色区域表示注意力所在，暗色区域注意较少。橘色代码是当前步骤生成的模块。

表 1：基线-2 方法和本文提出的方法在 PixCo 和 PixCo-e 数据集上模块划分准确率的性能对比。

表 2：本文提出方法与基线-1、基线-2 和 pix2code 方法在测试集上的性能对比。所有方法都使用贪婪搜索策略。

图 5：来自基于网页的 GUI 数据集的实验样本。左边的样本来自 PixCo 数据集，右边的样本来自 PixCo-e 数据集。