|
|
|
|
移动端

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

目前,自动化前端开发的最大障碍是计算能力。不过,我们可以使用当前的深度学习算法和人造的训练数据来探索人工前端自动化。在这篇文章中,我们将教会一个神经网络如何基于一张设计原型图片来编写基本的 HTML 和 CSS 代码。

作者:深度学习来源:AI前线|2018-03-23 09:29

【新品产上线啦】51CTO播客,随时随地,碎片化学习

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

目前,自动化前端开发的最大障碍是计算能力。不过,我们可以使用当前的深度学习算法和人造的训练数据来探索人工前端自动化。

在这篇文章中,我们将教会一个神经网络如何基于一张设计原型图片来编写基本的 HTML 和 CSS 代码。以下是该过程的简要概述:

1)为神经网络提供的设计图

2)神经网络将图片转化成 HTML 代码

3)渲染输出

我们将通过三次迭代来构建神经网络。

第一次迭代得到的是最基础的版本,先了解图样中的活动部件。第二次迭代得到的是 HTML 代码,将着重于自动化所有步骤,并解释神经网络层。最后一次迭代得到的是 bootstrap 版本,我们将创建一个模型可用于