|
参与：Jane W、蒋思源 哥本哈根的一家初创公司 UIzard Technologies 训练了一个神经网络，能够把图形用户界面的截图转译成代码行，成功为开发者们分担了部分网站设计流程。令人惊叹的是，同一个模型能跨平台工作，包括 iOS、Android 和 Web 界面，从目前的研发水平来看，该算法的准确率达到了 77%。 该公司发表的一篇研究论文，解释了这个叫做 Pix2Code 的模型是如何工作的。要点如下：跟所有机器学习一样，研究者们需要用手头的任务实例去训练模型。但与其他任务不同的是，它需要做的不是从图片中生成图片，也不是把文本转换成文本，这个算法要做到输入图片后生成对应的文本（在这里就是代码）输出。为了实现这一点，研究者们需要分三个步骤来训练，首先，通过计算机视觉来理解 GUI 图像和里面的元素（按钮、条框等）。接下来模型需要理解计算机代码，并且能生成在句法上和语义上都正确的样本。最后的挑战是把之前的两步联系起来，需要它用推测场景来生成描述文本。 那些只有基本代码知识的 UI 或平面设计师，有了它的帮助就能自己构建起整个网站了。在另一方面，它也能让复制其他网站的代码变得更容易，这是一个已经让困扰了很多开发者的问题。虽然像在 Github 这样的网站上，程序员之间已经流行起了协作共享的精神，但有些开发者—尤其是那些为需要原始网站的客户开发网站的—他们并不想让其他人剽窃自己的代码。 以下这段视频展示了应用效果： 在实际工作中，Pix2Cod 肯定能为开发者节省时间，他们就能把设计好界面的 JPEG 图像输入 Pix2Code，生成可运行的代码，并且还能进一步调整和优化。而那些只有基本代码知识的 UI 或平面设计师，有了它的帮助就能自己构建起整个网站了。 UIzard Technologies 还在继续优化改模型，用更多的数据训练它以提升准确度。公司创始人兼 CEO Tony Beltramelli 最近完成了他在哥本哈根信息技术大学（IT University of Copenhagen）和苏黎世联邦理工学院（ETH Zurich）的机器学习毕业项目，也有将 Pix2Code 贡献給学校的考虑。「考虑到线上可访问网站的数量已经非常多，而且每天都有新的网站被开发出来，互联网理论上能支持无限数量的训练数据」他在研究论文里写到。「我们推断，以这种方式使用的深度学习最终会终结对手动编程 GUI（图形用户界面）的需求」。 Pix2Code 是 UIzard 开发的第一个 app，atv，而且还处于测试阶段。这家公司的愿景是帮助开发者、设计者和初创公司省去在开发初期阶段写代码的流程，为原型设计、迭代和最终生成更好的产品留出更多的时间，最终开发出更好的 app 和网站。 论文地址：https://arxiv.org/pdf/1705.07962.pdf Github 项目地址：https://github.com/tonybeltramelli/pix2code 申请试用地址：https://uizard.io/?email_field=mmill06%40gmail.com 机器之心对这篇论文内容进行了概述性介绍，内容如下：
摘要：计算机开发人员经常将设计师设计的图形用户界面（GUI）截图通过编译计算机代码应用到软件、网站和移动应用程序中。在本文中，我们展示了给定图形用户界面图像作为输入，深度学习技术可以被用来自动生成代码。我们的模型能够从单一输入图像中生成针对三种不同平台（即 iOS、Android 和基于 Web 的技术）的代码，其准确率超过 77％。 引言 在客户端软件实现基于由设计师设计的图形用户界面（GUI）的过程是开发人员的责任。然而，编写实现 GUI 的代码是耗时的，并且占用了开发人员大量用于实现软件实际特征和逻辑的时间。此外，不同的特定平台用于实现这种 GUI 的计算机语言也不尽相同；从而导致在开发针对多个平台的软件时繁琐而重复的工作（尽管都运用本机技术）。在本文中，我们描述了一个给定图形用户界面截图作为输入，可以自动生成特定平台代码的系统。我们推断，此方法的扩展版本可能会终止手动编程 GUI 的需要。 本文的第一个贡献是 pix2code，一个基于卷积和循环神经网络的新方法，它能够由单个 GUI 屏幕截图生成计算机代码。 本文的第二个贡献是发布来自三个不同平台的 GUI 屏幕截图和相关源代码组成的合成数据集。在本文发表后，此数据集将开源免费使用，以促进今后的研究。 Related Work（略） pix2code 给出 GUI 屏幕截图生成代码的任务可以类比于给出场景照片生成文本描述的任务。因此，我们可以将问题分为三个子问题。首先，是一个计算机视觉问题：理解给定场景（即这种情况下为 GUI 截图）并推断图中的对象、身份、位置和姿势（即按钮、标签、元素容器）。第二，是一个语言模型问题：理解文本（即这种情况下为计算机代码）并产生语法和语义正确的样本。最后，通过利用前两个子问题的解决方案生成代码，即运用从场景理解推断出的潜在变量（latent variable）来生成相应文本描述（这里是计算机代码而不是文本）。
|
