图 1：pix2code 模型的架构概述。训练中，GUI 屏幕截图由基于 CNN 的计算机视觉模型编码；对应于 DSL 代码（领域特定语言）的独热编码（one-hot encode）符号的序列由含有 LSTM 层堆栈的语言模型编码。然后将两个得到的编码向量进行级联并馈送到用作解码器的第二个 LSTM 层堆栈中。最后，用 softmax 层对符号进行单个抽样；softmax 层的输出大小对应于 DSL 的词汇量大小。给定图像和符号序列，模型（即灰色框中的内容）是可微分的，因此在预测序列中的下一个符号时可以通过梯度下降来端到端地优化。在每次预测时，输入状态（即符号序列）都会被更新以包含上次预测的符号。在抽样时，使用传统的编译器设计（compiler design）技术将生成的 DSL 代码编译为所需的目标语言。

3.1 视觉模型

CNN 目前是解决各种视觉问题的首选方法，因为它们自身的拓扑结构便于学习训练的图像中丰富的潜在表征 [14,10]。我们通过将输入图像映射到一个学习到的固定长度向量，运用 CNN 来进行无监督特征学习；从而起到如图 1 所示的编码器的作用。

初始化时，输入图像的大小重新定义为 256×256 像素（不保留宽高比），像素值在馈送到 CNN 之前被标准化。不进行进一步的预处理。为了将每个输入图像编码为固定大小的输出向量，我们专门使用卷积步长（stride）为 1 的小 3×3 感受野（receptive field），此方法与 Simonyan 和 Zisserman 用于 VGGNet 的方法相似 [15]。这些操作进行两次，然后运用最大池化进行下采样（down sample）。第一个卷积层的宽度为 32，其后是宽度为 64 的层，最后为宽度 128 的层。最后，使用 2 个大小为 1024 的全连接层运用修正线性单元激活函数（rectified linear unit activation）来完成视觉模型的建模。

图 2：在 DSL 中编写本机的 iOS GUI 的例子。

3.2 语言模型

我们设计了一个简单的 DSL 来描述图 2 所述的 GUI。在该项工作中，我们只对 GUI 的布局感兴趣，只对那些不同图形控件及其相互间的关系感兴趣，因此我们的 DSL 实际上忽略了标签控件的文本值。另外为了缩小搜索空间的大小，简化 DSL 减少了词汇量的大小（即由 DSL 支持的符号总数量）。因此我们的语言模型可以通过使用独热编码（one-hot encoded）向量的离散型输入执行字符级的语言建模，这也就降低了对如 word2vec [12] 那样词嵌入技术的需求，因此也就大大降低了计算量。

在大多数编程语言和标记语言中，元素通常声明为开放符号。但如果子元素或指令包含在一个块（block）内，解释器或者编译器通常需要一个封闭符号（closing token）。如果包含在父元素中的子元素数量是一个变量，那么重要的是构建长期相关性（long-term dependencies）以封闭一个开放性的块（block）。而传统的循环神经网络（RNN）在拟合数据时会出现梯度消失或梯度爆炸的情况，因此我们选择了能很好解决这个问题的长短期记忆（LSTM）。不同的 LSTM 门控输出可由以下方程组计算：

其中 W 为权重矩阵，xt 为在时间 t 的新输入向量，ht−1 是先前生成的输出向量，ct−1 是先前生成的单元状态输出，b 是偏置项，而 φ 和 σ 分别是 S 型激活函数（sigmoid）和双曲正切激活函数（hyperbolic tangent）。

3.3 复合模型

我们的模型采用的是监督学习，它通过投送图像 I 和符号 T 的序列 X（xt, t ∈ {0 . . . T − 1}）作为输入，而将符号 xT 作为目标标注。正如图 1 所示，基于 CNN 的视觉模型将输入图像 I 编码为向量表征 p，而基于 LSTM 的语言模型通过将输入符号 xt 编码为中间表征 qt 而允许模型更关注于特定的符号和少关注于其他符号 [7]。

第一个语言模型由两个 LSTM 层、每层带有 128 个单元的堆栈而实现。视觉编码向量 p 和语言编码向量 qt 可以级联为单一向量 rt，该级联向量 rt 随后可以投送到基于 LSTM 的模型来解码同时由视觉模型和语言模型学到的表征。因此解码器就学到了输入 GUI 图像中的对象和 DSL 代码中的符号间的关系，因此也就可以对这一关系进行建模。我们的解码器由两个 LSTM 层、每层带有 512 个单元的堆栈而实现。整个架构可以数学上表示为：

该架构允许整个 pix2code 模型通过梯度下降实现端到端的优化，这样以便系统在看到图像和序列中前面的符号而预测下一个符号。

3.4 训练