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

简介:

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

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

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

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

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

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

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

本文来自开源中国社区 [http://www.oschina.net]

目录
相关文章
|
16天前
|
前端开发 小程序 Java
uniapp上传图片 前端以及java后端代码实现
uniapp上传图片 前端以及java后端代码实现
30 0
|
19天前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
37 4
|
1月前
|
JSON 前端开发 Java
layui上传图片,前端直接拷代码,后端……
layui上传图片,前端直接拷代码,后端……
26 0
|
1月前
|
缓存 前端开发 JavaScript
揭秘前端性能优化:从代码到用户体验的全面升级
揭秘前端性能优化:从代码到用户体验的全面升级
19 0
|
2月前
|
前端开发 JavaScript 安全
从前端性能优化角度谈JavaScript代码压缩与混淆
本文从前端性能优化的角度出发,探讨了JavaScript代码压缩与混淆的重要性及实现方式,通过分析不同压缩混淆工具的特点和效果,为开发者提供了实用的指导和建议。
|
3月前
|
前端开发
若依框架---如何使用多数据源?前端table中如何显示图片?
若依框架---如何使用多数据源?前端table中如何显示图片?
84 2
|
8天前
|
前端开发 JavaScript 算法
比较流行的前端代码书写规范都有哪些
【4月更文挑战第13天】前端代码规范增进代码可读性和团队协作,包括缩进(用2空格)、命名(变量 camelCase,常量 MY_CONSTANT,类 PascalCase)、注释、语句与表达式、错误处理、代码复用。文件命名规范涉及扩展名、目录结构、简洁文件名、入口文件和配置文件命名。遵循这些规范能提高代码一致性,但需按项目需求调整。不断学习新规范以适应前端技术发展。
12 1
|
10天前
|
监控 前端开发 JavaScript
如何使用浏览器调试前端代码?
【4月更文挑战第11天】前端开发中,浏览器调试是关键技能,能提升代码质量。本文介绍了如何使用浏览器的调试工具:1) 打开调试窗口(F12或右键检查);2) Elements标签页检查DOM结构和样式;3) Console调试JavaScript,查看日志和错误信息;4) Sources设置断点调试JS文件;5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题,提高开发效率。
22 7
|
1月前
|
前端开发
前端实现视频或者图片直链下载
前端实现视频或者图片直链下载
55 0
|
1月前
|
前端开发 开发者
React Hooks:提升前端开发效率和代码可维护性
传统的 React 类组件在处理状态管理和生命周期函数时存在一些限制,而引入的 React Hooks 技术可以帮助前端开发者更高效地管理组件状态和逻辑,提升代码的可读性和可维护性。本文将介绍 React Hooks 的基本用法及其在实际项目中的应用场景。