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

简介:
本文来自AI新媒体量子位(QbitAI)

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

640?wx_fmt=png&wxfrom=5&wx_lazy=1

近日,位于哥本哈根的一家创业公司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

640?wx_fmt=png&wxfrom=5&wx_lazy=1

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

【完】

本文作者:唐旭 
原文发布时间: 2017-06-03
相关文章
|
12天前
|
前端开发 小程序 Java
uniapp上传图片 前端以及java后端代码实现
uniapp上传图片 前端以及java后端代码实现
28 0
|
15天前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
35 4
|
29天前
|
JSON 前端开发 Java
layui上传图片,前端直接拷代码,后端……
layui上传图片,前端直接拷代码,后端……
26 0
|
1月前
|
缓存 前端开发 JavaScript
揭秘前端性能优化:从代码到用户体验的全面升级
揭秘前端性能优化:从代码到用户体验的全面升级
19 0
|
2月前
|
机器学习/深度学习 算法 计算机视觉
基于深度学习的停车位关键点检测系统(代码+原理)
基于深度学习的停车位关键点检测系统(代码+原理)
103 0
|
2月前
|
机器学习/深度学习 数据采集 PyTorch
图像分类保姆级教程-深度学习入门教程(附全部代码)
图像分类保姆级教程-深度学习入门教程(附全部代码)
44 1
|
2月前
|
机器学习/深度学习 编解码 API
深度学习+不良身体姿势检测+警报系统+代码+部署(姿态识别矫正系统)
深度学习+不良身体姿势检测+警报系统+代码+部署(姿态识别矫正系统)
52 0
|
2月前
|
前端开发 JavaScript 安全
从前端性能优化角度谈JavaScript代码压缩与混淆
本文从前端性能优化的角度出发,探讨了JavaScript代码压缩与混淆的重要性及实现方式,通过分析不同压缩混淆工具的特点和效果,为开发者提供了实用的指导和建议。
|
2月前
|
机器学习/深度学习 算法 数据可视化
计算机视觉+深度学习+机器学习+opencv+目标检测跟踪+一站式学习(代码+视频+PPT)-2
计算机视觉+深度学习+机器学习+opencv+目标检测跟踪+一站式学习(代码+视频+PPT)
96 0
|
2月前
|
机器学习/深度学习 Ubuntu Linux
计算机视觉+深度学习+机器学习+opencv+目标检测跟踪+一站式学习(代码+视频+PPT)-1
计算机视觉+深度学习+机器学习+opencv+目标检测跟踪+一站式学习(代码+视频+PPT)
55 1

热门文章

最新文章