用深度学习自动生成HTML代码

本文摘要：用深度学习自动生成HTML代码选自Floydhub作者：Emil Wallner机械之心编译如何用前端页面原型生成对应的代码一直是我们关注的问题，本文作者凭据 pix2code 等论文构建了一个强大的前端代码生成模型，并详细解释了如何使用 LSTM 与 CNN 将设计原型编写为 HTML 和 CSS 网站。项目链接：github.com/emilwallner…在未来三年内，深度学习将改变前端开发。它将会加速原型设计速度，拉低开发软件的门槛。

用深度学习自动生成HTML代码选自Floydhub作者：Emil Wallner机械之心编译如何用前端页面原型生成对应的代码一直是我们关注的问题，本文作者凭据 pix2code 等论文构建了一个强大的前端代码生成模型，并详细解释了如何使用 LSTM 与 CNN 将设计原型编写为 HTML 和 CSS 网站。项目链接：github.com/emilwallner…在未来三年内，深度学习将改变前端开发。它将会加速原型设计速度，拉低开发软件的门槛。Tony Beltramelli 在去年公布了论文《pix2code: Generating Code from a Graphical User Interface Screenshot》，Airbnb 也公布Sketch2code（airbnb.design/sketching-i…）。

现在，自动化前端开发的最大阻碍是盘算能力。但我们已经可以使用现在的深度学习算法，以及合成训练数据来探索人工智能自动构建前端的方法。在本文中，作者将教神经网络学习基于一张图片和一个设计模板来编写一个 HTML 和 CSS 网站。

以下是该历程的简要概述：1）向训练过的神经网络输入一个设计图2）神经网络将图片转化为 HTML 标志语言3）渲染输出我们将分三步从易到难构建三个差别的模型，首先，我们构建最简朴地版原来掌握移动部件。第二个版本 HTML 专注于自动化所有步骤，并简要解释神经网络层。在最后一个版本 Bootstrap 中，我们将建立一个模型来思考和探索 LSTM 层。

代码地址：github.com/emilwallner…www.floydhub.com/emilwallner…所有 FloydHub notebook 都在 floydhub 目录中，当地 notebook 在 local 目录中。本文中的模型构建基于 Beltramelli 的论文《pix2code: Generating Code from a Graphical User Interface Screenshot》和 Jason Brownlee 的图像形貌生成教程，并使用 Python 和 Keras 完成。焦点逻辑我们的目的是构建一个神经网络，能够生成与截图对应的 HTML/CSS 标志语言。

训练神经网络时，你先提供几个截图和对应的 HTML 代码。网络通过逐个预测所有匹配的 HTML 标志语言来学习。

预测下一个标志语言的标签时，网络吸收到截图和之前所有正确的标志。这里是一个简朴的训练数据示例：docs.google.com/spreadsheet…。建立逐词预测的模型是现在最常用的方法，也是本教程使用的方法。

注意：每次预测时，神经网络吸收的是同样的截图。也就是说如果网络需要预测 20 个单词，它就会获得 20 次同样的设计截图。

现在，不用管神经网络的事情原理，只需要专注于神经网络的输入和输出。我们先来看前面的标志（markup）。

如果我们训练神经网络的目的是预测句子「I can code」。当网络吸收「I」时，预测「can」。

下一次时，网络吸收「I can」，预测「code」。它吸收所有之前单词，但只预测下一个单词。

神经网络凭据数据建立特征。神经网络构建特征以毗连输入数据和输出数据。它必须建立表征来明白每个截图的内容和它所需要预测的 HTML 语法，这些都是为预测下一个标志构建知识。

把训练好的模型应用到真实世界中和模型训练历程差不多。我们无需输入正确的 HTML 标志，网络会吸收它现在生成的标志，然后预测下一个标志。

预测从「起始标签」（start tag）开始，到「竣事标签」（end tag）终止，或者到达最大限制时终止。Hello World 版现在让我们构建 Hello World 版实现。我们将馈送一张带有「Hello World！」字样的截屏到神经网络中，并训练它生成对应的标志语言。首先，神经网络将原型设计转换为一组像素值。

且每一个像素点有 RGB 三个通道，每个通道的值都在 0-255 之间。为了以神经网络能明白的方式表征这些标志，我使用了 one-hot 编码。因此句子「I can code」可以映射为以下形式。

在上图中，我们的编码包罗了开始和竣事的标签。这些标签能为神经网络提供开始预测和竣事预测的位置信息。

以下是这些标签的种种组合以及对应 one-hot 编码的情况。我们会使每个单词在每一轮训练中改变位置，因此这允许模型学习序列而不是影象词的位置。

在下图中有四个预测，每一行是一个预测。且左边代表 RGB 三色通道和之前的词，右边代表预测效果和红色的竣事标签。#Length of longest sentence max_caption_len = 3#Size of vocabulary vocab_size = 3# Load one screenshot for each word and turn them into digits images = []for i in range(2): images.append(img_to_array(load_img('screenshot.jpg', target_size=(224, 224)))) images = np.array(images, dtype=float)# Preprocess input for the VGG16 model images = prepro。

本文关键词：用,深度,学习,自动生成,HTML,代码,用,深度,华体会体育官网

本文来源：华体会体育-www.zjgbltm.com