选自 arXiv
机器之心合集
参演：Jane W、蒋思源
UIzard Technologies 是一家位于哥本哈根的初创公司，它训练了一个神经网络，可以将图形用户界面的屏幕截图转换为代码行，成功地为开发人员减轻了部分网站设计过程的负担。 令人惊奇的是，同一个模型可以跨平台工作，包括 iOS、Android 和 Web 界面。 从目前的研发水平来看，该算法的准确率已经达到了77%。
该公司发表的一篇研究论文解释了这个名为 Pix2Code 的模型的工作原理。 要点如下：与所有机器学习一样，研究人员需要使用手头任务的示例来训练模型。 但与其他任务不同的是，它需要做的不是从图片生成图片，也不是将文本转换为文本。 该算法必须输入图片并生成相应的文本（在本例中为代码）输出。 为了实现这一目标能生成网页的软件，研究人员需要分三个步骤进行训练。 首先，使用计算机视觉来理解 GUI 图像及其内部元素（按钮、栏等）。 接下来，模型需要理解计算机代码并能够生成语法和语义正确的样本。 最后的挑战是连接前两个步骤，这要求它使用推测场景生成描述性文本。
只需基本编码知识的 UI 或图形设计师就可以在它的帮助下自己构建整个网站。 另一方面，它也使得从其他网站复制代码变得更加容易，这是一个困扰许多开发人员的问题。 虽然协作和共享的精神已经在 Github 等网站上的程序员中流行起来，但一些开发人员（尤其是为需要原始网站的客户构建网站的开发人员）不希望其他人窃取他们的代码。 。
以下视频显示了该应用程序的实际效果：
在实际工作中，Pix2Cod绝对可以为开发人员节省时间。 他们可以将设计界面的JPEG图像输入Pix2Code中，生成可运行的代码，并可以进一步调整和优化。 而那些只有基本编码知识的UI或图形设计师可以在它的帮助下自己构建整个网站。
UIzard Technologies 不断优化模型并使用更多数据对其进行训练以提高准确性。 公司创始人兼首席执行官 Tony Beltramelli 最近完成了他在哥本哈根 IT 大学和苏黎世联邦理工学院的机器学习毕业项目，并正在考虑向学校贡献 Pix2Code。 他在研究论文中写道：“考虑到在线可访问网站的数量已经非常庞大，而且每天都有新网站被开发出来，互联网理论上可以支持无限量的训练数据。” “我们认为，以这种方式使用深度学习最终将不再需要手动编程的 GUI（图形用户界面）。”
Pix2Code 是 UIzard 开发的第一个应用程序，目前仍处于测试阶段。 该公司的愿景是帮助开发人员、设计师和初创公司消除开发早期阶段编写代码的过程，从而留出更多时间进行原型设计、迭代，并最终构建更好的产品，最终打造出更好的产品。 应用程序和网站。
机器之心对本文内容进行了概述，如下：
摘要：计算机开发人员经常对设计师设计的图形用户界面（GUI）进行屏幕截图，并通过编译计算机代码将其应用到软件、网站和移动应用程序中。 在本文中，我们展示了给定 GUI 图像作为输入，深度学习技术可用于自动生成代码。 我们的模型能够从单个输入图像生成适用于三个不同平台（即 iOS、Android 和基于 Web 的技术）的代码，准确率超过 77%。
介绍
基于设计者设计的图形用户界面（GUI）实现客户端软件的过程是开发人员的责任。 然而，编写代码来实现 GUI 非常耗时，并且占用了开发人员大量时间来实现软件的实际功能和逻辑。 此外，用于实现此类 GUI 的计算机语言因特定平台而异； 导致为多个平台开发软件（尽管使用本机技术）的繁琐和重复工作。 在本文中，我们描述了一个系统，该系统可以在给定 GUI 屏幕截图作为输入的情况下自动生成特定于平台的代码。 我们推断，这种方法的扩展版本可能会消除手动对 GUI 进行编程的需要。
本文的第一个贡献是 pix2code，这是一种基于卷积和循环神经网络的新方法，能够从单个 GUI 屏幕截图生成计算机代码。
本文的第二个贡献是发布了一个综合数据集，其中包含来自三个不同平台的 GUI 屏幕截图和相关源代码。 本文发表后，该数据集将开源并免费提供，以促进未来的研究。
相关工作（略）
像素2码
给定 GUI 屏幕截图生成代码的任务可以与给定场景照片生成文本描述的任务进行比较。 因此，我们可以将问题分为三个子问题。 首先，存在一个计算机视觉问题：理解给定的场景（即本例中的 GUI 屏幕截图）并推断图形中的对象、身份、位置和姿势（即按钮、标签、元素容器）。 其次，是语言模型问题：理解文本（即本例中的计算机代码）并生成语法和语义正确的样本。 最后，通过利用前两个子问题的解决方案来生成代码，即使用从场景理解推断出的潜在变量来生成相应的文本描述（这里是计算机代码而不是文本）。
图 1：pix2code 模型的架构概述。 在训练过程中，GUI 屏幕截图由基于 CNN 的计算机视觉模型进行编码； 与 DSL 代码（领域特定语言）相对应的单热编码符号序列由包含一堆 LSTM 层的语言模型进行编码。 然后将得到的两个编码向量连接起来并馈送到用作解码器的第二个 LSTM 层堆栈中。 最后，使用softmax层对符号进行单独采样； softmax 层的输出大小对应于 DSL 的词汇量大小。 给定图像和符号序列，模型（即灰色框中的内容）是可微分的，因此在预测序列中的下一个符号时可以通过梯度下降进行端到端优化。 在每次预测时，输入状态（即符号序列）都会更新以包含最后预测的符号。 在采样时，使用传统的编译器设计技术将生成的 DSL 代码编译为所需的目标语言。
3.1 视觉模型
CNN 目前是解决各种视觉问题的首选方法，因为它们的原生拓扑有助于学习训练图像中丰富的潜在表示 [14,10]。 我们使用CNN通过将输入图像映射到学习的固定长度向量来进行无监督特征学习； 从而起到编码器的作用，如图 1 所示。
初始化后，输入图像大小调整为 256 × 256 像素（不保留纵横比），像素值在输入 CNN 之前进行归一化。 不执行进一步的预处理。 为了将每个输入图像编码为固定大小的输出向量能生成网页的软件，我们专门使用卷积步长为 1 的小型 3 × 3 感受野。这种方法类似于 Simonyan 和 Zisserman 在 VGGNet 中使用的方法。 [15]。 这些操作执行两次，然后使用最大池进行下采样。 第一个卷积层宽度为32，后面是宽度为64的层，最后是宽度为128的层。最后使用两个大小为1024的全连接层，使用修正线性单元完成视觉模型的建模激活函数。
图 2：在 DSL 中编写本机 iOS GUI 的示例。
3.2 语言模型
我们设计了一个简单的DSL来描述图2中描述的GUI。在这项工作中，我们只对GUI的布局感兴趣，只对那些不同的图形控件以及它们之间的关系感兴趣，所以我们的DSL实际上忽略了文本值的标签控件。 另外，为了减少搜索空间的大小，简化DSL会减少词汇表的大小（即DSL支持的符号总数）。 因此，我们的语言模型可以使用one-hot编码向量的离散输入来进行字符级语言建模，这减少了对word2vec[12]等词嵌入技术的需求，从而大大减少了计算量。
在大多数编程语言和标记语言中，元素通常被声明为开放符号。 但是，如果子元素或指令包含在块内，则解释器或编译器通常需要结束标记。 如果父元素中包含的子元素的数量是一个变量，则构建长期依赖关系以封闭开放块非常重要。 传统的循环神经网络（RNN）在拟合数据时会出现梯度消失或梯度爆炸的问题，因此我们选择了长短期记忆（LSTM），它可以很好地解决这个问题。 不同的 LSTM 门控输出可以通过以下方程组计算：
其中 W 是权重矩阵，xt 是时间 t 时的新输入向量，ht−1 是先前生成的输出向量，ct−1 是先前生成的单位状态输出，b 是偏置项，而 φ 和 σ 是 S分别。 类型激活函数（sigmoid）和双曲正切激活函数（双曲正切）。
3.3 复合模型
我们的模型使用监督学习，将图像 I 和符号 T 的序列 X (xt, t ∈ {0 . . . T − 1}) 作为输入，符号 xT 作为目标注释。 如图1所示，基于CNN的视觉模型将输入图像I编码为向量表示p，而基于LSTM的语言模型允许模型更多地关注特定符号而更少地关注其他符号[7]。
第一个语言模型由两个 LSTM 层实现，每个层都有 128 个单元的堆栈。 视觉编码向量 p 和语言编码向量 qt 可以连接成单个向量 rt，然后可以将其馈送到基于 LSTM 的模型以解码视觉模型和语言模型学习的表示。 因此，解码器了解输入 GUI 图像中的对象与 DSL 代码中的符号之间的关系，并因此可以对这种关系进行建模。 我们的解码器由两个 LSTM 层组成的堆栈实现，每个层有 512 个单元。 整个架构可以用数学表达为：
该架构允许通过梯度下降对整个 pix2code 模型进行端到端优化，以便系统在看到图像和序列中的先前符号后预测下一个符号。
3.4 培训
用于训练的序列长度 T 对于长期依赖性建模非常重要。 经过实证实验，用于训练的DSL代码输入文件被大小为48的滑动窗口分割，即我们使用48步来展开循环神经网络。
训练是通过损失函数对神经网络的权重进行偏导来进行反向传播算法，因此可以最小化多级对数损失进行训练：
其中，xt+1为期望符号，yt为预测符号。
3.5 采样
为了生成 DSL 代码，我们投影一个 GUI 图像和一个由 T = 48 个符号组成的序列 X，其中符号 xt 。 。 。
表1：数据集统计
测试
图 3：不同训练集上的训练损失以及模型在 10 个 epoch 训练中的采样 ROC 曲线。
表 2：测试集的实验结果报告（如表 1 所示）。
图 4、5 和 6 显示了输入 GUI 图像（示例地面实况）以及由经过训练的 pix2code 模型生成的输出 GUI。
图 4：来自 iOS GUI 数据集的实验样本。
图 5：Android GUI 数据集中的实验示例。
图 6：Web GUI 数据集的实验示例。
结论
在本文中，我们提出了 pix2code 模型，这是一种可以在给定 GUI 图像作为输入的情况下生成计算机代码的新方法。 虽然我们的工作展示了这种系统自动生成 GUI 代码的潜力，但我们的工作只触及了这种潜力的表面。 我们的模型由相对较少的参数组成，并且只能在相对较小的数据集上进行训练。 构建更复杂的模型并在更大的数据集上进行训练将显着提高代码生成的质量。 而各种正则化方法的使用以及注意力机制（attention Mechanism [1]）的实现也可以进一步提高生成代码的质量。 同时，该模型中使用的one-hot编码没有提供任何有关符号之间关系的信息，使用word2vec[12]等词嵌入模型可能会更好。 同时，独热编码（one-hotencoding）也会限制可以支持的符号数量。 最后，由于最近生成对抗网络（GAN）在图像生成方面的出色表现，也许我们可以使用 GAN 及其思想从 GUI 图像生成计算机代码。
