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

大家好，使用深度学习自动生成HTML 代码相信很多的网友都不是很明白，包括也是一样，不过没有关系，接下来就来为大家分享关于使用深度学习自动生成HTML 代码和的一些知识点，大家可以关注收藏，免得下次来找不到哦，下面我们开始吧！

项目链接：github.com/emilwallner.

未来三年，深度学习将改变前端开发。它将加快原型设计速度并降低开发软件的门槛。

Tony Beltramelli 去年发布了论文《pix2code: Generating Code from a Graphical User Interface Screenshot》，Airbnb 也发布了Sketch2code（airbnb.design/sketching-i.）。

1）将设计图输入到训练好的神经网络中

2）神经网络将图像转换为HTML标记语言

3）渲染输出

我们将分三步从简单到困难构建三种不同的模型。首先，我们将构建最简单的版本来捕获移动部件。 HTML 的第二个版本侧重于自动化所有步骤并简要解释神经网络层。在Bootstrap 的最终版本中，我们将创建一个模型来思考和探索LSTM 层。

代码地址：

github.com/emilwallner. www.floydhub.com/emilwallner. 所有FloydHub笔记本都在floydhub目录中，本地笔记本都在本地目录中。

核心逻辑

我们的目标是构建一个能够生成与屏幕截图相对应的HTML/CSS 标记的神经网络。

训练神经网络时，您首先需要提供几个屏幕截图和相应的HTML 代码。网络通过一一预测所有匹配的HTML 标签来学习。当预测下一个标记语言的标签时，网络会接收屏幕截图和所有先前的正确标签。

这是一个简单的训练数据示例：docs.google.com/spreadsheet.

创建逐词预测的模型是当今最常见的方法，也是本教程中使用的方法。

注意：神经网络每次进行预测时都会收到相同的屏幕截图。这意味着，如果网络需要预测20 个单词，它将获得20 次相同的设计屏幕截图。现在，忘记神经网络是如何工作的，只关注神经网络的输入和输出。

我们先看一下之前的标记。假设训练神经网络的目的是预测句子“我可以编码”。当网络收到“I”时，它会预测“can”。下一次，网络收到“我可以”并预测“代码”。它接受所有先前的单词，但仅预测下一个单词。

神经网络从数据中创建特征。神经网络构建连接输入和输出数据的功能。它必须创建表示来理解每个屏幕截图的内容以及需要预测的HTML 语法，这就是构建知识以预测下一个标记所需的全部内容。将训练好的模型应用到现实世界与模型训练过程类似。

我们不必输入正确的HTML 标签，网络会采用迄今为止生成的标签并预测下一个标签。预测从“开始标记”（start tag）开始，到“结束标记”（end tag）结束，或者达到最大限制时结束。

你好世界版

现在让我们构建Hello World 实现。我们将提供带有“Hello World！”字样的屏幕截图。进入神经网络并训练它生成相应的标记语言。

首先，神经网络将原型设计转换为一组像素值。并且每个像素有3个RGB通道，每个通道的值在0-255之间。

为了以神经网络可以理解的方式表示这些标记，我使用了one-hot 编码。因此，句子“我可以编码”可以映射为以下形式。

在上图中，我们的编码包括开始和结束标签。这些标签为神经网络提供有关从何处开始和结束预测的信息。下面是这些标签的各种组合及其相应的one-hot 编码。

我们将使每个单词在每轮训练中改变位置，因此这允许模型学习序列而不是记住单词的位置。下图中有四个预测，每一行一个。左边代表RGB三色通道和之前的单词，右边代表预测结果和红色结束标签。

10 epochs: start start start100 epochs: start HTMLcenterH1Hello World!/H1/center/HTML HTMLcenterH1Hello World!/H1/center/HTML300 epochs: start HTMLcenterH1Hello World!/H1/center/HTML end 我经历过的陷阱：

在收集数据之前构建第一个版本。在该项目的早期阶段，我设法获得了Geocities 托管站点的遗留档案，其中包含3800 万个站点。但我忽略了减少100K 大小的词汇量所需的巨大工作量。对TB 数据进行训练需要出色的硬件或极大的耐心。在我的Mac 遇到一些问题后，我最终使用了功能强大的远程服务器。我预计租用8 个现代CPU 和1 个GPS 内部链路来运行我的工作流程。在了解输入输出数据之前，其他部分还不清楚。输入X是屏幕截图和前一个标记的标签，输出Y是下一个标记的标签。当我明白了这一点后，其他问题就变得容易弄清楚了。另外，尝试其他不同的架构也会更容易。图像到代码网络实际上是一个自动描述图像的模型。尽管我意识到了这一点，但我仍然错过了很多关于自动图像摘要的论文，因为它们看起来不够酷。一旦我意识到这一点，我对问题空间的理解就变得更加深刻。在FloydHub 上运行代码

FloydHub是我从学习深度学习开始就知道的一个深度学习训练平台。我还经常使用它来训练和管理深度学习实验。我们能够在10 分钟内安装并运行我们的第一个模型，它是在云GPU 上训练模型的最佳选择。如果读者从未使用过FloydHub，可以花10分钟左右安装并了解它。

FloydHub地址：www.floydhub.com/

HTML版本

在此版本中，我们将专注于创建可扩展的神经网络模型。该版本并不直接从随机网页中预测HTML，但它是探索动态问题不可或缺的一步。

概述

如果我们将之前的架构扩展为如下右图所示的结构，那么它可以更有效地处理识别和转换过程。

该架构主要有两部分，即编码器和解码器。编码器是我们创建图像特征和先前标记特征的部分。功能是网络原型和标记语言之间链接的构建块。在编码器的末尾，我们将图像特征传递给每个先前标记的单词。然后，解码器将结合原型特征和标记特征来创建下一个标签特征，该特征可用于通过全连接层预测下一个标签。

设计原型的特点

因为我们需要为每个单词插入屏幕截图，这将成为训练神经网络的瓶颈。因此，我们提取生成标记语言所需的信息，而不是直接使用图像。这些提取的信息将通过预训练的CNN 编码为图像特征，我们将使用分类层之前的层的输出来提取特征。

我们最终得到了1536 个8*8 的特征图，虽然我们很难直观地理解它，但神经网络能够从这些特征中提取出元素的对象和位置。

标记特点

在Hello World 版本中，我们使用one-hot 编码来表征标记。在此版本中，我们将使用词嵌入来表示输入，并使用one-hot 编码来表示输出。我们构建每个句子的方式保持不变，但映射每个符号的方式将会改变。 One-hot 编码将每个单词视为一个独立的单元，而单词嵌入将输入数据表示为表示标签标签之间关系的实数列表。

上面的词嵌入的维数是8，但是一般词嵌入的维数会根据词汇量的大小在50到500之间变化。每个单词的上述八个值类似于神经网络中的权重，它们倾向于表征单词之间的联系（Mikolov alt el.2013）。这就是我们开始部署标记功能的方式，标记功能是将输入数据连接到输出数据的神经网络训练功能。

编码器

现在，我们将词嵌入输入LSTM 中，并期望它返回一系列带标签的特征。然后将这些标记的特征输入到时间分布式密集层中，该密集层可以被视为具有多个输入和输出的全连接层。

与嵌入层和LSTM 层并行的是另一个过程，其中图像特征首先扩展为向量，然后馈送到全连接层以提取高级特征。然后将这些图像特征与标签特征连接起来作为编码器的输出。

标记特点

如下图所示，现在我们将词嵌入放入LSTM 层，所有句子都会用零填充以获得相同的向量长度。

为了混合信号并找到高级模式，我们应用TimeDistributed 密集层来提取标记特征。 TimeDistributed 密集层与一般的全连接层非常相似，它具有多个输入和输出。

图像特征

对于另一个并行过程，我们需要将图像的所有像素值展开为向量，因此信息没有改变，它们仅用于识别。

如上所述，我们将混合信号并通过全连接层提取更高层次的概念。因为我们不只是处理一个输入值，所以我们可以使用通用的全连接层。

级联图像特征和标签特征

填充所有语句以创建三个标记特征。由于我们已经对图像特征进行了预处理，因此我们可以将图像特征添加到每个标记特征中。

解码器

现在，我们使用图像标签特征来预测下一个标签。

在下面的情况下，我们使用三个图像标签特征对来输出下一个标签特征。注意，LSTM层不应该返回长度等于输入序列的向量，而只需要预测一个特征。在我们的例子中，此功能将预测下一个标签，其中包含最后预测的信息。

最终预测

各轮训练生成的网站地址：

250 纪元：emilwallner.github.io/html/250_ep… 350 纪元：emilwallner.github.io/html/350_ep… 450 纪元：emilwallner.github.io/html/450_ep… 550 纪元：emilwallner.github.io/html/550_ep…我走过的陷阱：

我认为理解LSTM 比CNN 难一点。当我展开LSTM 时，它们变得更容易理解了。此外，在尝试理解LSTM 之前，我们可以关注输入和输出特征。从头开始建立一个词汇表比压缩一个庞大的词汇表要容易得多。此类构造包括字体、div 标签大小、变量名称的十六进制颜色以及通用单词。我们可以从ImageNet 上预训练的模型中提取特征。然而，相对于从头开始训练的pix2code 模型，损失大约高出30%。此外，我有兴趣使用在网络屏幕截图上预先训练的inception-resnet 网络。引导版本

在最终版本中，我们使用pix2code 论文中的数据集来生成引导网站。使用Twitter 的Bootstrap 库(getbootstrap.com/)，我们可以结合HTML 和CSS 来减少词汇量。

我们将使用此版本为以前未见过的屏幕截图生成标记。我们还深入研究了它如何构建屏幕截图和标记的先验知识。

我们没有使用bootstrap token 进行训练，而是使用17 个简化的token，编译成HTML 和CSS。数据集（github.com/tonybeltram.）包括1500 个测试屏幕截图和250 个验证屏幕截图。平均每张截图有65 个token，总共有96925 个训练样本。

我们对pix2code 论文中的模型进行了轻微修改，以97% 的准确率预测网络组件。

端到端方法

从预先训练的模型中提取特征在图像标题生成模型中效果很好。但经过多次实验，我发现pix2code的端到端方式效果更好。在我们的模型中，我们用轻量级卷积神经网络替换预先训练的图像特征。我们不使用最大池化来增加信息密度，而是增加步幅。这保持了前端元素的位置和颜色。

了解LSTM 中的时间步长

LSTM 更难理解的是时间步长。我们最初的神经网络有两个时间步长，如果你给它“Hello”，它就会预测“World”。但它会尝试预测更多的时间步长。在下面的示例中，输入有四个时间步长，每个时间步长一个。

LSTM适合时间序列数据的输入。它是一种适合顺序信息的神经网络。模型展开图如下所示。对于循环的每一步，您需要保持相同的权重。

加权后的输入输出特征级联后输入到激活函数中，作为当前时间步的输出。因为我们重复使用相同的权重，所以它们将从某些输入中获取信息并构建序列知识。以下是每个时间步长的LSTM 过程的简化版本：

了解LSTM 层次结构中的单元

每层LSTM单元的总数决定了其记忆容量，这也对应于每个输出特征的维数。 LSTM 层次结构中的每个单元将学习如何跟踪语法的不同方面。下面是LSTM 单元跟踪标签行信息的可视化，这是我们用来训练引导模型的简单标记语言。

找到衡量准确性的好方法是很棘手的。例如，逐个单词进行比较，如果您的预测中有一个单词没有进行比较，则准确度可能为0。如果删除100% 匹配的单词之一，则最终准确度可能为99/100。

我使用BLEU 分数，这对于机器翻译和图像描述模型来说都是实践中最好的。它将句子从1-4 个单词的序列中分成4 个n 元语法。在下面的预测中，“cat”应该是“code”。

为了得到最终的分数，每个分数需要乘以25%，(4/5)0.25+(2/4)0.25+(1/3)0.25+(0/2)0.25=0.2+ 0.125 + 0.083 + 0=0.408。然后将总和乘以句子长度的惩罚函数。由于我们的示例中的长度是正确的，因此它直接进入我们的最终得分。

链接到示例输出：

生成的网站1 – 原始1 (emilwallner.github.io/bootstrap/r…)生成的网站2 – 原始2 (emilwallner.github.io/bootstrap/r…)生成的网站3 – 原始3 (emilwallner.github.io/bootstrap) /r…)生成的网站4 – 原始4 (emilwallner.github.io/bootstrap/r…)生成的网站5 – 原始5 (emilwallner.github.io/bootstrap/r…) 我经历过的陷阱：

了解模型的弱点而不是测试随机模型。首先，我使用了随机的东西，例如批量归一化、双向网络，并尝试实现注意力机制。在查看了测试数据并知道它无法高精度预测颜色和位置后，我意识到CNN 有一个弱点。这导致我使用增加步幅而不是最大池化。验证损失从0.12 下降到0.02，BLEU 分数从85% 增加到97%。仅在相关时使用预训练模型。在小数据的情况下，我认为预训练的图像模型会提高性能。从我的实验来看，端到端的模型训练速度较慢，需要更多内存，但准确率会提高30%。当您在远程服务器上运行模型时，我们需要为一些差异做好准备。在我的Mac 上，它按字母顺序读取文档。但在服务器上它的位置是随机的。这会导致代码和屏幕截图之间不匹配。下一步

前端开发是深度学习应用的理想空间。数据很容易生成，当前的深度学习算法可以映射大多数逻辑。最令人兴奋的领域之一是将注意力机制应用于LSTM。这不仅提高了准确性，而且还使我们能够可视化CNN 在生成标记时关注的位置。注意力也是标记、可定义模板、脚本和终端之间通信的关键。注意力层跟踪变量，以便网络可以维持编程语言之间的通信。

但在不久的将来，最大的影响将来自可扩展的数据合成方法。然后您可以逐步添加字体、颜色和动画。到目前为止，大部分进展发生在绘制草图并将其转化为模板应用程序方面。在不到两年的时间里，我们将创建一个草图，可以在一秒钟内找到相应的前端。 Airbnb 设计团队和Uizard 创建了两个工作原型。以下是一些可能的测试程序：

实验

开始

运行所有模型尝试不同的超参数测试不同的CNN 架构添加双向LSTM 模型使用不同的数据集实现模型以进行进一步实验

使用相应的语法从草图到应用程序模型数据创建稳定的随机应用程序/网页生成器。自动将应用程序/网页屏幕截图转换为草图并使用GAN 创建多样性。应用注意力层来可视化每个预测的图像焦点，类似于此模型来创建模块化方法的框架。例如，拥有用于字体的编码器模型，一个用于颜色，另一个用于排版，并使用解码器来集成它们。稳定的图像特征是一个好的开始。将简单的HTML 组件输入神经网络并教它使用CSS 制作动画。使用注意力方法并将两个输入源的聚焦可视化将会很有趣。