前端福利!这项黑科技直接从图片生成代码

来源: 投稿
作者: 两味真火
2017-05-30

相信前端同学在被频繁变化的UI设计折磨的时候,当你揪着头发不停微调想让界面看起来与设计图一致的时候,你们一定有过直接从图片生成代码的美好设想。现在,这样的黑科技终于出现了!

一个名叫pix2code的项目,就是通过经训练的深度神经网络,从截图直接生成 UI 代码。

pix2code 是由一家名为UIzard的哥本哈根创业公司开发的,神经网络现在可以保证约77%的代码正确,但随着数据的增多,准确率应该越来越高。

UIzard的开发者和创始人Tony Beltramelli在研究论文中写道:“我们推断,以这种方式使用的深度学习最终可能会终止手动编程[图形用户界面(GUI)的需要。”

可以说,随着大量的软件被取代,这一创新至少可以允许一些人在更酷的领域进行工作。在研究论文中,Beltramelli表示,它解放了开发人员,使能够专注于他们正在构建的实际功能,而不是摆弄几个小时的用户界面。

Pix2Code中的神经网络是一种卷积神经网络,一种能够同时以许多不同尺度观看图像的网络。这允许网络通过检查用户界面和底层代码来学习,从而查看每行代码对设计的每个元素的影响。

为了促进未来的研究,Pix2Code的数据集和代码将在今年晚些时候开源。Beltramelli表示,系统会在抓取网页以建立一个截图和HTML / CSS代码的数据库方面,越来越准确。 一旦实现的话,不久后,你就可以绘制你的网站,并让神经网络直接生成它。

稿源:1024深度学习

>>>【全民狂欢,评论有礼】5月15日-31日评论每日更新的“新闻资讯和软件更新资讯”,评论点赞数超过 20 的可登上每周更新的“源资讯”和“软件周刊”两大栏目,点赞数超过 50 的还将获得 5 活跃积分奖励和开源中国定制好礼。详情

展开阅读全文
48 收藏
分享
加载中
精彩评论
PhotoShop一直有一个导出成HTML的功能,你敢用?
JS交互怎么在图片里描述?响应式布局怎么在图片里描述?
洗洗睡吧.
2017-05-30 11:31
5
举报
不管...,先吹了再说.
2017-05-30 11:21
2
举报
最新评论 (13)

引用来自“eechen”的评论

PhotoShop一直有一个导出成HTML的功能,你敢用?
JS交互怎么在图片里描述?响应式布局怎么在图片里描述?
洗洗睡吧.
就国内的程序员来说,可以代替 80% ,因为大多数的人都是网上搜搜复制复制黏贴黏贴调试调试修改修改。。。
你抄我我抄他。。。大家都差不多。
——就这种水平,人家那机器学习可以到77%的准确率,放到国内来,铁定88%!
2017-05-31 19:35
0
回复
举报
程序员何必致力淘汰程序,应该想法干设计师和产品经理。
2017-05-31 09:45
0
回复
举报
好像没什么用。。
2017-05-30 21:41
0
回复
举报
这个无疑可以减轻很多前端工作
2017-05-30 14:01
0
回复
举报
前端工程师会消失么?
2017-05-30 13:47
0
回复
举报
PhotoShop一直有一个导出成HTML的功能,你敢用?
JS交互怎么在图片里描述?响应式布局怎么在图片里描述?
洗洗睡吧.
2017-05-30 11:31
5
回复
举报
突然神经一紧张
2017-05-30 11:26
0
回复
举报
不管...,先吹了再说.
2017-05-30 11:21
2
回复
举报
前端要下岗了?
2017-05-30 10:50
0
回复
举报

引用来自“小百雨”的评论

有个蛋用,仿页面有个锤子麻烦的,麻烦的是那张设计图,这玩意生成的东西会轮播?会下拉?元素会运动?代码符合搜索引擎喜好?能跟后端完美对接?能实现主题化?能自适应?总监能通过?
看它的解释是使用卷积神经网络的,看页面对比代码,它也不知道这样生成会是什么,绝大多数人需要这样的代码,它就生成了,至于特殊需求,那就自己改改憋~
2017-05-30 10:49
0
回复
举报
更多评论
13 评论
48 收藏
分享
返回顶部
顶部