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

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

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

【完】

本文作者:唐旭 
原文发布时间: 2017-06-03
相关文章
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
伪类:伪类这个叫法源自于它们跟类相似,但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器): UI伪类:会在HTML元素处于某种状态时(例如:鼠标指针位于连接上),为该元素应用CSS样式。 :hover 结构化伪类:会在标记中存在某种结构上的关系时 例如: 某元素是一组元素中的第一个或最后一个,为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
189 1
|
5月前
|
机器学习/深度学习 算法 定位技术
Baumer工业相机堡盟工业相机如何通过YoloV8深度学习模型实现裂缝的检测识别(C#代码UI界面版)
本项目基于YOLOv8模型与C#界面,结合Baumer工业相机,实现裂缝的高效检测识别。支持图像、视频及摄像头输入,具备高精度与实时性,适用于桥梁、路面、隧道等多种工业场景。
610 27
|
3月前
|
机器学习/深度学习 数据采集 编解码
基于深度学习分类的时相关MIMO信道的递归CSI量化(Matlab代码实现)
基于深度学习分类的时相关MIMO信道的递归CSI量化(Matlab代码实现)
181 1
|
3月前
|
机器学习/深度学习 算法 vr&ar
【深度学习】基于最小误差法的胸片分割系统(Matlab代码实现)
【深度学习】基于最小误差法的胸片分割系统(Matlab代码实现)
101 0
|
8月前
|
人工智能 自然语言处理 前端开发
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
DeepSite是基于DeepSeek-V3模型的在线开发工具,无需配置环境即可通过自然语言描述快速生成游戏、网页和应用代码,并支持实时预览效果,显著降低开发门槛。
1604 93
DeepSite:基于DeepSeek的开源AI前端开发神器,一键生成游戏/网页代码
|
10月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
678 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
5月前
|
人工智能 JSON 前端开发
如何解决后端Agent和前端UI之间的交互问题?——解析AG-UI协议的神奇作用
三桥君指出AG-UI协议通过SSE技术实现智能体与前端UI的标准化交互,解决流式传输、实时进度显示、数据同步等开发痛点。其核心功能包括结构化事件流、多Agent任务交接和用户中断处理,具有"一次开发到处兼容"、"UI灵活可扩展"等优势。智能体专家三桥君认为协议将AI应用从聊天工具升级为实用软件,适用于代码生成、多步骤工作流等场景,显著提升开发效率和用户体验。
1250 0
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。
|
7月前
|
自然语言处理 前端开发 IDE
用通义灵码全新智能体+MCP实现从设计稿到前端代码,个人免费用
通义灵码全新升级,发布国内首个支持“自主决策+工具链闭环”的编程智能体,面向个人免费!新增功能包括智能体模式、混合推理模型Qwen3支持、全面集成MCP中文社区(涵盖2400+服务)及长期记忆能力。用户可通过IDE插件使用,兼容主流开发环境如JetBrains、VS Code和Visual Studio。教程展示如何将MasterGo设计稿转化为前端代码,简化开发流程。探索链接:[通义灵码官网](https://lingma.aliyun.com/)。
|
8月前
|
前端开发 JavaScript 安全

热门文章

最新文章