深度学习成了前端开发神器:根据UI设计图自动生成代码

唐旭 编译整理

量子位 报道 | 公众号 QbitAI

UI设计和前端工程师之间，可能还需要一个神经网络。

近日，位于哥本哈根的一家创业公司Uizard Technologies开发出了一个名为“pix2code”的系统。运用深度学习，这个系统能够根据输入的图形用户界面（GUI）截图直接输出对应的代码，从而省去前端手动编写代码的过程。

目前pix2code所生成代码的准确率已经达到77%，且这些代码能够兼容安卓、iOS以及Web界面三种平台。

到底有多神奇？看看下面这段动图就知道了。

UIzard的创始人Tony Beltramelli说，为了搞出这个神经网络，研发团队不得不克服三个主要方面的困难：

• 第一是计算机视觉层面——计算机无法自动识别、理解给定的对象和场景，也无法判断它们的位置和特征；

• 第二是语言层面——他们需要教会神经网络理解文本，好让它能够创造出准确的样本；

• 最后，神经网络需要理解代码、文本以及对应图像之间的关联。

Beltramelli还表示，在未来，他们可能会用生成对抗网络（GANs）对pix2code进行进一步的完善。GANs已经证明了自己在生成序列和图像时的优势，但因为这一领域内的研究还处于相对初步的阶段，要对神经网络进行训练仍然需要花费大量的时间。

附paper地址：

https://arxiv.org/abs/1705.07962

GitHub地址：

https://github.com/tonybeltramelli/pix2code

此外，在GitHub上，Beltramelli对于pix2code相关的一些常见问题进行了解答。量子位将这一部分编译如下：

Q：数据集会在什么时候开放？

A：我们把论文投到了今年的NIPS，等他们给出采纳或拒绝的结果后，数据集将会开放，具体时间大概在九月。那时我们将会提供包含在数据集中的GUI截图、相关的DSL代码以及针对iOS、安卓和Web界面的三种目标代码。

Q：源代码什么时候开放？

A：原本如论文中所写，我们没有开放源代码的计划。但没想到这个项目吸引了如此多的关注，因此我们决定将论文中说的pix2code实现代码和数据集一起开源。

Q：pix2code会支持其他目标平台/语言吗？

A：不，pix2code只是一个研究项目，它将保持论文中所描述的状态。这个项目其实只是对我们在Uizard Technologies所做工作的一个小小展示。当然，我们欢迎你fork，自己在其他目标平台/语言上进行实验。

Q：我能在自己的前端项目中用上pix2code吗？

A：不，pix2code只是实验性的项目，目前还无法让你在特定案例上应用。但我们正在努力争取让它实现商业化。

Q：模型的表现是如何进行测量的？

A：论文中所报告的准确或是错误结果都是在DSL层次上，通过对生成的token和预期的token进行比较而得出的。如果二者存在任何长度上的差异，同样会被认定为错误。

Q：训练这个模型要花费多久？

A：在一块英伟达的Tesla K80 GPU上，要让一个数据集中包括的109 * 10^6条参数最优化，需要花费不到5个小时的时间。因此如果你想在三个目标平台上对这个模型进行训练的话，大概要花费15个小时。

Q：我是一名前端开发者？我是不是很快就要失业？（我非常真诚地问了这个问题好多遍了……）

A：AI并不会那么快就把前端工程师替代。

即便假定已经存在一个成熟的pix2code版本，在每种不同的平台/语言上生成的代码都能达到100%的准确率，好的前端仍然需要逻辑、互动、高级的图形和动画，以及其他所有用户喜欢的东西。

我们做这个东西的目的是填平UI/UX设计师与前端开发者之间的鸿沟，而不是去代替他们。我们希望能让设计者更好地创作，同时让开发人员将自己的时间更多地花费在那些核心功能上。

我们相信未来AI将与人类协作，而不是代替人类。

【完】

招聘

量子位正在招募编辑记者、运营、产品等岗位，工作地点在北京中关村。相关细节，请在公众号对话界面，回复：“招聘”。

One More Thing…

今天AI界还有哪些事值得关注？在量子位（QbitAI）公众号对话界面回复“今天”，看我们全网搜罗的AI行业和研究动态。笔芯~