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

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将与人类协作,而不是代替人类。

发表评论

邮箱地址不会被公开。 必填项已用*标注