作家
登录

如何用深度学习将前端设计模型自动转换为代码?

作者: 来源: 2018-03-24 18:30:12 阅读 我要评论

全平易近充电节 | 3月26日~30日 2000位IT行业拭魅战专家邀请你一路充电进修!


若何用深度进修将前端设计模型主动转换为代码?

今朝,主动化前端开辟的最大年夜障碍是计算才能。不过,我们可以应用当前的深度进修算法和人造的练习数据来摸索人工前端主动化。

1)为神经收集供给的设计图

3)衬着输出

我们精晓过三次迭代来构建神经收集。

第一次迭代获得的是最基本的版本,先懂得图样中的晃荡部件。第二次迭代获得的是 HTML 代码,将侧重于主动化所有步调,并解释神经收集层。最后一次迭代获得的是 bootstrap 版本,我们将创建一个模许可用于泛化和摸索 LSTM 层。

所有的代码都放在了 Github 和 FloydHub 上。

这些模型是基于 Beltramelli 的 pix2code 论文和 Jason Brownlee 的图像天然说话描述教程而构建的,代码应用 Python 和 Keras(一个基于 Tensorflow 的框架)编写。

核心逻辑   

让我们再简明扼要地复述下我们的目标。我们想构建一个神经收集,生成与屏幕截图对应的 HTML/CSS 代码。

在练习神经收集时,你可以给它几个截图和与之对应的 HTML 代码。

在进修过程中,它会一一猜测所有匹配的 HTML 标签。在猜测下一?标签时,它会接收到屏幕截图以及在那一个点上所有匹配的标签。

这个 Google Sheet 包含了一个简单的练习数据样本。

创建一个可以或许逐字猜测的模型是如今最常见的方法,也是我们在这个教程中将会应用的方法,固然还有其他的方法。

 图像特点

请留意,对于每次猜测,神经收集获得的都是雷同的截图。也就是说,如不雅要猜测 20 个单词典话,它将会收到雷同的图样 20 次。在如今这个阶段,请不要担心神经收集的工作道理,而是侧重存眷神经收集的输入输出。

让我们看下之前的标签。假设我们要练习收集来猜测“I can code”这句话。当它收到“I”的时刻,它能猜测到“can”。下一次,它将收到“I can”,并且猜测到“code”。每次它会收到之前所有的悼?船并且只需猜测接下来的一个单词。

A

神经收集大年夜数据中创建出不合的特点,用于连接输入和输出数据,创建模型,以便懂得每张截图中所包含的内容和 HTML 语法,这就获得了猜测下一?标签所须要的常识。

在将练习过的模型用在实际傍边时,情况跟练习模型时差不多。每次应用雷同的屏幕截图逐平生成文本。不合的是,如今它不会直接收到精确的 HTML 标签,而是会收到它迄今为止已经生成的标签,然后去猜测下一?标签。全部猜测的过程会大年夜“肇端标签”开端,在猜测到“停止标签”或达到最大年夜限度时终止。

 1/11    1 2 3 4 5 6 下一页 尾页

  推荐阅读

  北京市为自动驾驶开绿灯,向百度发放首批自动驾驶路测号牌

全平易近充电节 | 3月26日~30日 2000位IT行业拭魅战专家邀请你一路充电进修!根据筹划,北京市组织扶植了首个占地200余亩的海淀主动驾驶封闭测试场地,测试场包含城市、村庄的多种门路类型,具有丰富的测>>>详细阅读


本文标题:如何用深度学习将前端设计模型自动转换为代码?

地址:http://www.17bianji.com/lsqh/40844.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)