资源 | 深度学习自动前端开发：从草图到HTML只需5秒（附代码）

机器之心编译

参与：乾树、李泽南

在人们的不断探索下，「使用人工智能自动生成网页」的方法已经变得越来越接近实用化了。本文介绍的这种名为 SketchCode 的卷积神经网络能够把网站图形用户界面的设计草图直接转译成代码行，为前端开发者们分担部分设计流程。目前，该模型在训练后的 BLEU 得分已达 0.76。

你可以在 GitHub 上找到这个项目的代码：

为用户创造直观、富有吸引力的网站是各家公司的重要目标，而且这是个快速进行原型、设计、用户测试循环的过程。像 Facebook 这样的大公司有着让整个团队专注于设计流程的人力，改动可能需要几周的时间，并涉及到多种利益相关者；而小型企业就没有这样的资源，因此其用户界面可能受到一些影响。

我在 Insight 当中的目标是使用现代深度学习算法大大简化设计工作流程，并使得任何规模的公司都能快速地创造并测试网页。

现有的设计工作流程

现有工作流程涉及多个利益相关者

一个典型的设计工作流程如下所示：

开发周期的时间长度很快就会变成瓶颈，像 Airbnb 这样的公司已经开始使用机器学习来提高这个过程的效率了。（参见：）

Airbnb 内部 AI 工具演示：从草图到代码

虽然这种工具很有希望成为机器辅助设计的例子，但是尚不清楚这种模型在端到端的情况下能完全训练到什么程度，也不清楚它在多大程度上依赖于手工制作的图像特征。这肯定是无法知道的，因为它目前还是 Airbnb 专有的非开源方案。我想创造一个「从绘图到代码」技术的开源版本，可供更多开发者和设计者使用。

理想情况下，我的模型可以采用简单的网站设计手绘原型，并立即从该图像生成一个可用的 HTML 网站：

SketchCode 模型需要绘制好的网站线框图并能生成 HTML 代码

实际上，上面的例子是一个从我模型测试集图像生成的实际网站！你可以在我的 Github 页面中查看它：

从图像标注中获取灵感

我正在解决的问题属于程序综合（）这个广义任务范畴，即工作源代码的自动生成。尽管很多程序综合能处理从自然语言要求或执行轨迹所生成的代码，但在我这个案例中，我可以从一个源图像（手绘线框图）开始，自动获得想要的代码。

机器学习领域中，有一个名为图像字幕生成的领域（），该领域有着充分的研究，旨在学习将图像和文本相连的模型，特别是生成关于源图片内容的描述。

图像标注模型生成源图片的描述

我从最近一篇名为 的论文和 Emil Wallner 使用该方法的一个相关项目获得了灵感（参见：），并决定将我的任务重构成图像字幕生成问题的一部分，即将线框图作为输入图像，将对应的 HTML 代码作为输出文本。

获取正确的数据集

考虑到图像标注的方法，我心中理想的训练数据集是成千上万对手绘线框图和它们 HTML 代码的等价物。不出所料，我无法找到这种数据集，因此我不得不为该任务创建自己的数据。

我从 pix2code 论文中提到的一个开源数据集（）入手，它由 1750 张人工生成的网页截图和其对应源代码构成。

pix2code 中生成的网站图像及其源代码数据集

这个数据集对我而言是个很好的开始，其中有一些有趣的地方：

让图片更「手绘化」

将网站的多彩主题切换成手写主题。

为了调整数据集以适应我的任务，我得把网站的图片弄得像是手绘的。对图片的手绘化都得益于 OpenCV 和 PIL library 的灰度转换和轮廓检测功能。

最终，我决定直接通过一系列操作来直接修改原网站的 CSS 样式表：

我的最终版本又增加了一个步骤，通过加入倾斜，偏移和旋转来进行数据增强，以模仿实际绘制的素描的不确定性。

使用图像标注模型架构

现在我已经准备好我的数据了，我可以把它输入模型进行训练了！

我用的这个用于图像标注的模型包括三个主要部分：

使用标记序列作为输入来训练模型

为了训练这个模型，我把源代码分成标记序列。其中一个序列及其源图像是模型的单个输入，其标签是文档中的下一个标记。该模型使用交叉熵成本（cross-entropy cost）作为其损失函数，将模型预测的下一个标记与实际的标记进行比较。

在模型从头开始生成代码的推理阶段，该过程稍有不同。该图像仍然通过 CNN 网络进行处理，但文本处理仅提供一个开始序列。在每一步中，模型对序列中下一个标记的预测将返回到当前输入序列，同时作为新的输入序列输入到模型中。重复此操作直到模型预测出 标记或进程达到每个文档的标记数的预定义上限。

一旦从模型中生成了一组预测标记，编译器就会将 DSL 标记转换为 HTML，这些 HTML 可以在任何浏览器中展示出来。

用 BLEU 得分评估模型

我决定用 BLEU 评分（）来评估模型。这是机器翻译任务中经常会用到的评估标准，它试图在给定相同输入的情况下，评估机器生成的文本与人类可能写的文本的近似程度。

实质上，BLEU 通过比较生成文本和参考文本的 n-元 序列，生成精修改后的文本。它非常适合这个项目，因为它会影响生成的 HTML 中的实际元素，以及它们之间的相互关系。

然后这是最棒的——我完全可以通过检查生成的网站来理解 BLEU 得分！

BLEU 得分可视化

一个完美的 1.0 的 BLEU 分数将在正确的位置生成源图像的正确元素，而较低的得分可以预测错误的元素和/或将它们放在相对于彼此错误的位置。最终我的模型能够在测试集上得到 0.76 的 BLEU 分数。

福利 - 定制样式

我觉察到的一个额外福利是，由于模型只生成页面的骨架（文档的标记），我可以在编译过程中添加一个自定义的 CSS 层，并且可以即时看到网站的不同风格。

一次转换 => 同时生成多种样式

将样式与模型生成过程分离，给使用模型带来了很多好处：

总结与展望

通过利用图像标注的研究成果，SketchCode 能够在几秒钟内将手绘网站线框图转换为可用的 HTML 网站。

该模型有些局限性，大概包括以下几点：

我很期待看到项目的进一步发展！

原文链接：