怕了么？三年后，人工智能将彻底改变前端开发？

https://www.toutiao.com/a6697803854785806862/

2019-06-02 13:39:42

程序猿（ID：OpenSourceTop）猿妹 编译
原文：https://github.com/emilwallner/Screenshot-to-code-in-Keras、https://blog.floydhub.com/Turning-design-mockups-into-code-with-deep-learning/

近日，阮一峰@ruanyf 发了一条微博：Github 排行榜第一名，是一个梦幻项目。神经网络通过深度学习，自动把设计稿变成 HTML 代码。作者号称三年后，人工智能彻底改变前端开发。

该项目作者Emil Wallner表示：三年后，人工智能将彻底改变前端开发，提高原型设计的速度，降低构建软件的障碍。

Tony Beltramelli去年发布了pix2code，Airbnb推出了sketch2code。目前，自动化前端开发的最大障碍是计算能力。但是，我们现在可以使用当前的深度学习算法，以及合成的训练数据来探索人工智能前端构建。

在这篇文章中，我们将讲述一个神经网络如何基于设计模型的图片来编写一个基本的HTML和CSS网站。以下为构建过程：

构建过程

给训练的神经网络提供设计图像

神经网络将图像转换成HTML标记

渲染输出

我们分为三步迭代来构建神经网络：

在第一个版本中，我们将构建最低版本来控制移动部件的一个组件。第二个版本HTML将着重于自动执行所有步骤并解释神经网络层。在最终版本Bootstrap中，我们将创建一个可以概括和探索LSTM层的模型。

所有的代码都在Github和FloydHub上。其中，floydhub目录中，本地notebook在local目录下。

代码地址如下：https://github.com/emilwallner/Screenshot-to-code-in-Keras

https://www.floydhub.com/emilwallner/projects/picturetocode

核心逻辑

我们旨在建立一个神经网络，够生成与截图对应的 HTML/CSS 标记语言。

训练神经网络时，你先给它提供几个截图以及相对应HTML代码，它通过逐个预测所有匹配的 HTML 标记来学习。当它预测下一个标记语言的标签时，就会接收到截图和之前所有正确的标记。

这里提供一个简单的训练数据示例：https://docs.google.com/spreadsheets/d/1xXwarcQZAHluorveZsACtXRdmNFbwGtN3WMNhcTdEyQ/edit?usp=sharing

创建一个逐词预测模型是当今最常见的方法，本文将在整个教程中使用此方法。

注意：每次预测时，神经网络接收的是同样的截图。也就是说如果网络需要预测 20 个单词，它就会得到 20 次同样的设计截图。现在，不用管神经网络的工作原理，只需要专注于神经网络的输入和输出。

让我们把重点放在以前的标记上。假设我们训练网络来预测“I can code”的句子。当它收到“I”，那么它预测“can”。下一次它会收到“I can”并预测“code”。它收到所有以前的单词，只需要预测下一个单词。

神经网络从数据中创建特征。神经网络构建了链接数据输入和输出的功能。它必须创建特征来了解它预测的每个屏幕截图中的内容（HTML语法）。这都是为了预测下一个标签的构建。

我们无需输入正确的 HTML 标记，网络会接收它目前生成的标记，然后预测下一个标记。预测从「起始标签」（start tag）开始，到「结束标签」（end tag）终止，或者达到最大限制时终止。

安装方法

FloydHub

FloydHub是在云GPU上运行模型的最佳选择：https://www.floydhub.com/

本地

文件夹结构

Hello World 版本

HTML

Bootstrap

前端开发是深度学习应用的理想空间。数据容易生成，并且当前深度学习算法可以映射大部分逻辑。

一个最让人激动的领域是专注于在 LSTM 上的应用。这不仅会提升精确度，还可以使我们直观的感受到 CNN 在生成标记时所聚焦的地方。注意力一样是标记、样式表、脚本和终端之间通信的关键。注意力层可以追踪变量，使网络可以在编程语言之间进行通信。

但以后，最大的影响将会来自建立综合数据的可扩展方式。然后一步步添加字体、颜色和动画。目前为止，大多数进步发生在草图（sketches）转化为模版应用。在不到两年的时间里，我们将创建一个草图，它会在一秒之内找到相应的前端。

目前，Airbnb 设计团队与 Uizard 已经创建了两个正在使用的原型。

怕了么？三年后，人工智能将彻底改变前端开发？相关推荐

三年后，人工智能将彻底改变前端开发？
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 近几天,因为阮一峰老师的一条微博,我们看到了这样一个项目:https://weibo.com ...
php会不会被人工智能取代,人工智能真的会取代前端开发吗？
原标题:人工智能真的会取代前端开发吗? 相信不少人看过一篇人工智能已经能实现自动编写HTML,CSS的文章,人工智能开始取代前端的一部分工作.消息一出便激起了很多前端工程师的恐慌和讨论,很多刚刚准备学 ...
三年前，故事这样开始三年后，故事这样延续---2015年终总结
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 含苞待 ...
你想三年后过上什么样的生活？
这文是转的,但写得挺好,个人奋斗的故事总是很有趣,这位还是一位女程序员,也是转行学习编程,挺好的,编程能让人立起腰杆子! 我在北京这几年(一) 2015年 4月6号我买了张硬座来北京面试实习,面试时提 ...
x86服务器排名第二之后，三年后的新华三将站在哪里？
作者:小葳导读:3年前"吹过的牛"都提前实现了,新华三又立了新的Flag:不求最大,但求最强. "Veni, vidi, vici." 这句犹太语是凯撒大帝的 ...
特斯拉AI高管都推荐的张量工具，开源了三年后终于中顶会了！ | ICLR 2022 Oral
博雯发自凹非寺量子位 | 公众号 QbitAI 那个在GitHub标星4.3k的张量操作工具Einops,在开源三年后终于中了顶会! 这是一个统一的.通用的操作张量结构的方法,基于爱因斯坦求和约 ...
离职阿里三年后，他又回来了
11月22日,马辉从黄龙体育中心附近的办公室开车来到阿里园区北2门,离开阿里三年后,马辉和1000多名已经毕业的"校友"又回到了这个梦想启程的地方. 在校友会现场,马辉分享了自己的 ...
6. 第三次人工智能浪潮，有何不同？
作者 | Harper 审核 | gongyouliu 编辑 | auroral-L 我们之前从各个方位解读了人工智能的定义,相信大家肯定已经对人工智能有了初步的见解.那我们再次回到之前讲到过的人工智 ...
三年后见！雷军透露年轻人的第一台汽车售价......
4月6日,是小米每年的米粉节.当天晚间,小米董事长兼CEO雷军在抖音开启了第三次直播. 在直播中,雷军谈及了小米新logo.小米汽车等相关话题. 值得注意的是,直播前,雷军在微博上发起了多项关于小米汽 ...

怕了么？三年后，人工智能将彻底改变前端开发？

怕了么？三年后，人工智能将彻底改变前端开发？相关推荐

最新文章

热门文章