AI可以将UI设计图自动生成跨平台代码，前端工程师福利（paper）
| 全文共3333字，建议阅读时长3分钟 |
转载公众号：机械鸡
微信号：jixieji2017
前端工程师有了这个利器，可以更愉快的编程了~
哥本哈根的一家初创公司 UIzard Technologies 训练了一个神经网络，能够把图形用户界面的截图转译成代码行，成功为开发者们分担了部分产品的设计流程。
到目前为止，他们能够从一个单一的输入图像中，生成针对三种不同平台（iOS，Android和基于Web的技术）的代码，其精度超过77％，但他们表示，可以通过在较大的数据集上，训练他们的网络来大幅提升代码质量。
创始人兼首席执行官Tony Beltramelli在相关研究论文中提到：“开发GUI（图形用户界面）是耗时的，影响了开发者实现他们正在构建软件的实际功能和逻辑。“
此外，用于实现这种GUI的计算机语言，是根据每个目标平台定制化的。从而能够开发软件之前，能够在多个本地化平台上试运行，减少繁琐而重复的工作。
使用CUDA、Tesla K80 GPU和cuDNN与TensorFlow 深度学习框架，他们训练有素的模型将驱使屏幕抓取UI设计，评估图片 - 各种图标、功能和布局，然后根据素材生成代码。
跟所有机器学习一样，研究者们需要用手头的任务实例去训练模型。但与其他任务不同的是，它需要做的不是从图片中生成图片，也不是把文本转换成文本，这个算法要做到输入图片后生成对应的文本（在这里就是代码）输出。
为了实现这一点，开发者们需要分三个步骤来训练：
首先，通过计算机视觉来理解 GUI 图像和里面的元素（按钮、条框等）。
接下来模型需要理解计算机代码，并且能生成在句法上和语义上都正确的样本。
最后的挑战是把之前的两步联系起来，需要它用推测场景来生成描述文本。
他们推断，以这种方式使用的深度学习，最终会终结对手动编程 GUI的需求。
Pix2Code 是 UIzard 开发的第一个 app，而且还处于测试阶段。这家公司的愿景是帮助开发者、设计者和初创公司省去在开发初期阶段写代码的流程，为原型设计、迭代和最终生成更好的产品留出更多的时间，最终开发出更好的 app 和网站。
详解
该公司发表的一篇研究论文，解释了这个叫做 Pix2Code 的模型是如何工作的。
计算机开发人员经常将设计师设计的图形用户界面（GUI）截图通过编译计算机代码应用到软件、网站和移动应用程序中。
在本文中，我们展示了给定图形用户界面图像作为输入，深度学习技术可以被用来自动生成代码。我们的模型能够从单一输入图像中生成针对三种不同平台（即 iOS、Android 和基于 Web 的技术）的代码，其准确率超过 77％。
在客户端软件实现基于由设计师设计的图形用户界面（GUI）的过程是开发人员的责任。然而，编写实现 GUI 的代码是耗时的，并且占用了开发人员大量用于实现软件实际特征和逻辑的时间。
此外，不同的特定平台用于实现这种 GUI 的计算机语言也不尽相同；从而导致在开发针对多个平台的软件时繁琐而重复的工作（尽管都运用本机技术）。在本文中，我们描述了一个给定图形用户界面截图作为输入，可以自动生成特定平台代码的系统。我们推断，此方法的扩展版本可能会终止手动编程 GUI 的需要。
本文的第一个贡献是 pix2code，一个基于卷积和循环神经网络的新方法，它能够由单个 GUI 屏幕截图生成计算机代码。
本文的第二个贡献是发布来自三个不同平台的 GUI 屏幕截图和相关源代码组成的合成数据集。在本文发表后，此数据集将开源免费使用，以促进今后的研究。
pix2code
GUI 屏幕截图生成代码的任务，可以类比于给出场景照片生成文本描述的任务。
因此，我们可以将问题分为三个子问题。
首先，是一个计算机视觉问题：理解给定场景（即这种情况下为 GUI 截图）并推断图中的对象、身份、位置和姿势（即按钮、标签、元素容器）。
第二，是一个语言模型问题：理解文本（即这种情况下为计算机代码）并产生语法和语义正确的样本。
最后，通过利用前两个子问题的解决方案生成代码，即运用从场景理解推断出的潜在变量（latent variable）来生成相应文本描述（这里是计算机代码而不是文本）。
视觉模型
CNN 目前是解决各种视觉问题的首选方法，因为它们自身的拓扑结构便于学习训练的图像中丰富的潜在表征 [14,10]。我们通过将输入图像映射到一个学习到的固定长度向量，运用 CNN 来进行无监督特征学习；从而起到如图 1 所示的编码器的作用。
语言模型
我们设计了一个简单的 DSL 来描述图 2 所述的 GUI。在该项工作中，我们只对 GUI 的布局感兴趣，只对那些不同图形控件及其相互间的关系感兴趣，因此我们的 DSL 实际上忽略了标签控件的文本值。
在大多数编程语言和标记语言中，元素通常声明为开放符号。
其中 W 为权重矩阵，xt 为在时间 t 的新输入向量，ht1 是先前生成的输出向量，ct1 是先前生成的单元状态输出，b 是偏置项，而 φ 和 σ 分别是 S 型激活函数（sigmoid）和双曲正切激活函数（hyperbolic tangent）。
复合模型
我们的模型采用的是监督学习，它通过投送图像 I 和符号 T 的序列 X（xt, t ∈ {0 . . . T 1}）作为输入，而将符号 xT 作为目标标注。
该架构允许整个 pix2code 模型通过梯度下降实现端到端的优化，这样以便系统在看到图像和序列中前面的符号而预测下一个符号。
训练
用于训练的序列长度 T 对长期相关性（long-term dependencies）建模十分重要。在经验性试验后，用于训练的 DSL 代码输入文件由大小为 48 的滑动窗口（sliding window）分割，即我们用 48 步展开循环神经网络。
训练由损失函数对神经网络的权重求偏导数而执行反向传播算法，因此可以最小化多级对数损失而进行训练：
其中 xt+1 为预期符号（expected token），yt 为预测符号。
抽样
为了生成 DSL 代码，我们投送 GUI 图像和 T = 48 符号的序列 X，其中符号 xt . . . xT 1 设置为空符号，而序列 xT 设置为特别的符号。
▲表 1：数据集统计
在不同训练集的训练损失和模型在训练 10 个 epochs 中的抽样 ROC 曲线。
▲在测试集（表 1 所述）上的试验结果报告
图 4、5、6 展示了输入 GUI 图像（样本真值），和由已训练 pix2code 模型生成输出的 GUI。
▲iOS GUI 数据集中的试验样本。
▲安卓 GUI 数据集中的试验样本
▲网页 GUI 数据集的试验样本
结语
在本论文中，我们提出了 pix2code 模型，它是一种给定 GUI 图片作为输入，且能生成计算机代码的新方法。
我们的模型由相对较少的参数组成，并且只能在相对较小的数据集上训练。而构建更复杂的模型，并在更大的数据集上训练会显著地提升代码生成的质量。并且采用各种正则化方法和实现注意力机制（attention mechanism [1]）也能进一步提升生成代码的质量。
最后，由于近来生成对抗网络（GAN）在图片生成上有极其出色的表现，也许我们可以借助 GAN 及其思想由 GUI 图像生成计算机代码。
有缘的人终会相聚，慕客君想了想，要是不分享出来，怕我们会擦肩而过~
《【调查问卷】“屏幕时代，视觉面积与学习效率的关系“——你看对了吗？》
本文编辑：慕编组成员（leo）
相关内容
微信扫码咨询专知VIP会员