资讯专栏INFORMATION COLUMN

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

shery / 2703人阅读

摘要:运用深度学习,这个系统能够根据输入的图形用户界面截图直接输出对应的代码,从而省去前端手动编写代码的过程。如果二者存在任何长度上的差异,同样会被认定为错误。我们相信未来将与人类协作,而不是代替人类。

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

欢迎加入本站公开兴趣群

商业智能与数据分析群

兴趣范围包括各种让数据产生价值的办法,实际应用案例分享与讨论,分析工具,ETL工具,数据仓库,数据挖掘工具,报表系统等全方位知识

QQ群:81035754

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/4549.html

相关文章

  • Android实用库和项目 - 收藏集 - 掘金

    摘要:高仿微信融云版掘金一简述本项目由个人独立开发。项目博客地址高仿微信融云版项目源码地址码云最新最全的开源项目合集掘金是由整理并维护的安卓相关开源项目库集合。 Android 高仿微信图片查看花式效果 - Android - 掘金图片查看器,为各位追求用户体验的daLao提供更优质的服务 它能够 1、点击图片时以一种无缝顺畅的动画切换到图片查看的界面,同样以一种无缝顺畅的动画退出图片查看界...

    darkbaby123 评论0 收藏0
  • 前端学习资源

    摘要:掘金日报第四期使用怎么能不知道这些插件合集掘金日报主打分享优质深度技术内容,技术内容分前端后端产品设计工具资源和一些有趣的东西。目前已经涵盖了的相关资源链接,供大家参考与学习。 【掘金日报】第四期 使用Sublime?怎么能不知道这些 Sublime 插件合集! 掘金日报主打分享优质深度技术内容,技术内容分:前端、后端、Android、iOS、产品设计、工具资源和一些有趣的东西。 前端...

    xzavier 评论0 收藏0
  • 前端学习资源

    摘要:掘金日报第四期使用怎么能不知道这些插件合集掘金日报主打分享优质深度技术内容,技术内容分前端后端产品设计工具资源和一些有趣的东西。目前已经涵盖了的相关资源链接,供大家参考与学习。 【掘金日报】第四期 使用Sublime?怎么能不知道这些 Sublime 插件合集! 掘金日报主打分享优质深度技术内容,技术内容分:前端、后端、Android、iOS、产品设计、工具资源和一些有趣的东西。 前端...

    weij 评论0 收藏0
  • 让我为你介绍一个神器:Chimee,一套可扩展的 H5 视频播放器解决方案

    摘要:读奇米是由奇舞团开源的一套视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造。 Chimee(读奇米, [tʃɪmɪ:])是由奇舞团开源的一套 H5 视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造。 showImg(https://segmentfault.com/img/bVX8GW?w=640&h=364)...

    miya 评论0 收藏0
  • 让我为你介绍一个神器:Chimee,一套可扩展的 H5 视频播放器解决方案

    摘要:读奇米是由奇舞团开源的一套视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造。 Chimee(读奇米, [tʃɪmɪ:])是由奇舞团开源的一套 H5 视频播放器解决方案,由奇舞团视频云前端团队结合在业务和视频编解码方向的沉淀积累倾心打造。 showImg(https://segmentfault.com/img/bVX8GW?w=640&h=364)...

    qiangdada 评论0 收藏0

发表评论

0条评论

shery

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<