软件开发代码-android应用案例开发大全吴亚峰代码

选自 arXiv

机器之心合辑

参与：Jane W、姜思远

哥本哈根初创公司 UIzard Technologies 训练了一个神经网络，可以将 GUI 的屏幕截图转换为代码行，成功地从开发人员那里卸载了部分网站设计过程。 令人惊讶的是，同一个模型可以跨平台工作，包括 iOS、Android 和 Web 界面，并且该算法在其当前开发状态​​下的准确率为 77%。

该公司发表的一篇研究论文解释了这个名为 Pix2Code 的模型是如何工作的。 要点如下：与所有机器学习一样，研究人员需要根据手头任务的示例训练模型。 但与其他任务不同的是，它需要做的不是图片生成图片，也不是文字转文字。 该算法需要在输入图片后生成相应的文本（本例中为代码）输出。 为了实现这一点，研究人员需要分三个步骤进行训练。 首先，使用计算机视觉来理解 GUI 图像和里面的元素（按钮、栏等）。 接下来软件开发代码，模型需要理解计算机代码并能够生成句法和语义正确的样本。 最后的挑战是将前两个步骤联系起来，要求它使用推测场景生成描述性文本。

那些只有基本编码知识的 UI 或图形设计师可以在它的帮助下自行构建整个网站。 另一方面，它也使得从其他站点复制代码变得更加容易，这个问题一直困扰着许多开发人员。 虽然协作和共享的精神在 Github 等网站的程序员中变得流行，但一些开发人员——尤其是那些为想要原始站点的客户开发站点的开发人员——不希望其他人窃取他们的代码。

这是一个显示应用程序运行情况的视频：

在实际工作中，Pix2Cod 一定会为开发者节省时间。 他们可以将设计界面的JPEG图像输入Pix2Code生成可运行的代码，并可以进一步调整和优化。 而那些只有基本代码知识的UI或图形设计师可以在它的帮助下自行构建整个网站。

UIzard Technologies 正在继续改进模型，使用更多数据对其进行训练以提高准确性。 公司创始人兼 CEO Tony Beltramelli 最近完成了他在哥本哈根 IT 大学（IT University of Copenhagen）和苏黎世联邦理工学院（ETH Zurich）的机器学习研究生项目，同时也在考虑为学校贡献 Pix2Code。 他在研究论文中写道：“鉴于在线访问的网站数量已经非常庞大，而且每天都在开发新网站，互联网理论上可以支持无限量的训练数据。” “我们推断，以这种方式使用深度学习最终将结束对手动编程 GUI（图形用户界面）的需求。”

Pix2Code 是 UIzard 开发的第一个应用程序，目前还处于测试阶段。 公司的愿景是帮助开发人员、设计师和初创公司在开发的早期阶段消除编写代码的过程，为原型设计、迭代和最终生产更好的产品留出更多时间，最终开发出更好的产品。 应用程序和网站。

机器之心对这篇论文的内容进行了概述，如下：

摘要：计算机开发人员经常采用设计师设计的图形用户界面 (GUI) 屏幕截图，并将计算机代码编译成软件、网站和移动应用程序。 在本文中，我们展示了给定 GUI 图像作为输入，深度学习技术可用于自动生成代码。 我们的模型能够从单个输入图像生成针对三个不同平台（即 iOS、Android 和基于 Web 的技术）的代码，准确率超过 77%。

介绍

开发人员有责任根据设计人员设计的图形用户界面 (GUI) 流程来实现客户端软件。 但是，编写代码来实现 GUI 非常耗时，并且会占用开发人员大量的时间来实现软件的实际功能和逻辑。 此外，用于实现此类 GUI 的计算机语言因平台而异； 在为多个平台开发软件时（尽管使用本机技术）导致繁琐和重复的工作。 在本文中，我们描述了一个系统，该系统可以在给定 GUI 屏幕截图作为输入的情况下自动生成特定于平台的代码。 我们推断这种方法的扩展版本可能会结束手动编程 GUI 的需要。

本文的第一个贡献是 pix2code，一种基于卷积和递归神经网络的新方法，能够从单个 GUI 屏幕截图生成计算机代码。

本文的第二个贡献是发布了一个合成数据集，其中包含来自三个不同平台的 GUI 屏幕截图和相关源代码。 在本文发表后，该数据集将开源并免费提供软件开发代码，以促进未来的研究。

相关工作（略）

pix2code

可以将给定 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 实际上忽略了文本值标签控件。 除了减少搜索空间的大小外，Simplified DSL 还减少了词汇表的大小（即 DSL 支持的符号总数）。 因此，我们的语言模型可以使用单热编码向量对离散输入执行字符级语言建模，这减少了对 word2vec [12] 等词嵌入技术的需求，从而大大减少了计算量。

在大多数编程和标记语言中，元素通常被声明为开放符号。 但是如果子元素或指令包含在一个块中，解释器或编译器通常需要一个结束标记。 如果父元素中包含的子元素数量是可变的，那么建立长期依赖关系以关闭开放式块很重要。 但是，传统的循环神经网络（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 的语言模型允许模型更多地关注特定符号而不是其他符号 [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 。 . . xT -1 设置为空符号，序列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 encoding不提供任何符号之间关系的信息，像word2vec[12]这样的词嵌入模型可能会有所改进，而one-hot编码（one-hot encoding ) 编码) 也限制了支持的符号的数量。 最后，由于生成对抗网络 (GAN) 最近在图像生成方面表现非常出色，也许我们可以使用 GAN 及其思想从 GUI 图像生成计算机代码。