利用深度学习进行前端自动化开发

作者｜Ashwin Kumar

译者｜孙浩

为用户创建直观的、有吸引力的产品体验是所有大小公司的一个关键目标，对于大公司来说，这不算什么，因为他们有足够的资源投入，但是对于小公司来说就比较头疼了。有没有可以使产品设计自动化的方法呢？本文从图像字幕技术中得到启发，使用现代深度学习算法，做到了简化设计流程，并让所有业务能够快速创建网页并运行测试。

阿什温•库马尔 (Ashwin Kumar) 曾是 Sway Finance 的联合创始人，该公司是一家由 Y combinator 支持的初创公司，该公司利用机器学习来实现会计自动化。在 Insight 中，它开发了一个模型，可以让用户使用手绘线框创建 HTML 网站，这大大加速了设计过程。他现在是 Mythic 的深度学习科学家。

为用户创建直观的、有吸引力的产品体验是所有大小公司的一个关键目标，这是一个由原型设计、设计和用户测试快速周期驱动的过程。可能需要几个星期的时间，并且涉及多个利益相关者，像 Facebook 这样的大公司有足够的资源将整个团队投入到设计过程中；小型企业就没有这些资源优势，因此他们的用户界面开发势必会受到影响。

我的目标是使用现代深度学习算法，显著简化设计流程，并让所有业务能够快速创建和测试网页。

目前的设计工作流程

设计工作流涉及多个涉众

典型的设计工作流流程如下：

产品经理研究用户并产出产品功能列表。
设计师们利用这些需求，探索低精确度的原型，最终创造出高保真的模型。
工程师将这些设计用代码实现，最终将产品交付给用户。

较长的开发周期会变成产品设计的瓶颈，像 Airbnb 这样的公司已经开始使用机器学习来提高这个过程的效率了。

从图纸到代码的内部人工智能工具演示

尽管作为机器辅助设计的一个例子，我们还不清楚这个模型到底有多少是经过全面训练的，有多少是依赖于手工制作的图像特征。其实也没办法确定，因为它是公司专有的封闭源码解决方案。我想要创建一个开源版本的 drawing-to-code 技术，这是一个开发者和设计人员可以广泛参与的社区。

理想情况下，我们的模型能够使一个简单的手绘原型的网站设计，生成一个可运行的 HTML 网站：

模型将绘制线框图并生成 HTML 代码

上面的例子是用我的模型从一个测试集图像生成的一个真实网站。你可以在我的 Github 页面上查看代码。

从图像字幕中获取灵感

我所解决的问题属于一个应用更广泛的任务，即程序合成，自动生成源代码。虽然大部分程序合成都涉及自然语言规范或执行跟踪生成的代码，但在我的例子中，我可以使用我的源图像 (手工绘制的线框图)。

在机器学习中有一个很好的研究领域，叫做图像字幕，它试图通过学习将图像和文本结合在一起的模型，生成对源图像内容的描述。

图像字幕模型生成对源图像的描述

我从最近的一篇叫做 pix2code 的论文和 Emil Wallner 的相关项目中获得了灵感，我决定将我的任务重设为一个图像字幕，将绘制的网站线框作为输入图像，将相应的 HTML 代码作为输出文本。

获得正确的数据集

谈及图像字幕的方法，我理想的训练数据集将是成千上万对手绘线框图及它们的 HTML 代码。如之前预料的那样，我找不到确切的数据集，我必须为任务创建自己的数据。

我使用了 pix2code 文件的开源数据集，它包含了 1750 个综合网站生成的截屏及它们的相关源代码。

生成网站图像和源代码的 pix2code 数据集

这是一个很好的数据集，有几个需要注意的点:

数据集中的每个生成的网站都由几个简单的 Bootstrap 元素组合而成，例如按钮、文本框和 div。尽管这意味着我的模型将会局限于用这些少数元素作为它的“词汇表”——从生成网站中可选择的元素——这种方法很容易推广到更大的元素词汇表中。
每个示例的源代码由一个领域特定语言 (DSL) 的标记组成，这是论文的作者为该任务创建的。每个令牌对应于 HTML 和 CSS 的一个片段，而编译器则被用来将 DSL 转换为 HTML 代码。

将图像做成手绘样式

将彩色的网站图片变成手绘的样式

为了修改我自己任务的数据集，我需要将网站的图像做成像手工绘制的一样。我使用了 OpenCV 和 python 中的 PIL library 等工具对每个图像进行修改，比如灰度转换和轮廓检测。

最终，我决定直接修改原始网站的 CSS 样式表，一系列操作如下:

更改页面上元素的边框半径，以绘制按钮和 div 的角。
调整边框的厚度以模拟绘制的草图，并添加阴影。
把字体改成看起来像手写的字体。
我最后还通过添加倾斜、移位和旋转来模拟实际绘制草图的变化，以增强图像效果。

使用图像字幕模型架构

现在已经准备好了数据，可以把它输入模型了!

我利用了在图像字幕中使用的模型架构，它由三个主要部分组成:

利用卷积神经网络 (CNN) 从源图像中提取图像特征的计算机视觉模型。
一种语言模型，由一个门控的周期性单元 (GRU) 组成，它编码了一系列的源代码令牌。
一个解码器模型 (也是一个 GRU)，它将前两个步骤的输出作为输入，并预测序列中的下一个标记。

使用令牌的序列作为输入来训练模型

为了训练模型，我将源代码拆分为令牌序列。模型的单个输入是其中一个序列及其源图像，它的标签是文档中的下一个标记。该模型使用交叉熵代价函数作为其损失函数，将模型的下一个标记预测与实际的下一个令牌进行比较。

在推理时，模型的任务是从头开始生成代码，过程略有不同。该图像仍然通过 CNN 网络进行处理，但文本进程仅用一个开始序列进行处理。在每个步骤中，模型对序列中的下一个令牌的预测被追加到当前的输入序列中，并作为一个新的输入序列输入到模型中。这是重复的，直到模型预测到一个令牌或过程达到每个文档令牌数的预定义限制为止。

一旦从模型中生成了预期的标记集，编译器就会将 DSL 令牌转换成 HTML，之后便可用任何浏览器进行访问了。

用 BLEU 评估模型

我决定用 BLEU 评分来评估模型。这是机器翻译任务中常用的一个度量标准，它试图测量一个机器生成的文本与一个人在相同的输入下所生成的内容的相近度。

实际上，BLEU 会将生成的文本和引用文本的 n-gram 序列进行比较，得到一份精确的对比表格。它非常适合这个项目，因为它会考虑到生成的 HTML 中的实际元素，以及它们之间的关系。

还有个很重要的功能，我还可以通过检查生成的网站看到 BLEU 评分!

可视化 BLEU 分数

在给定源图像的情况下，BLEU 评分为完美的 1.0 时，说明恰当的元素被放在了正确的位置，较低的分数则表明产生了错误元素或者元素被放到了错误的位置上。最终模型在评价集上得到了 0.76 的 BLEU 评分。

意外惊喜——自定义样式

我发现了一个意外的惊喜，因为模型只生成页面的骨架 (文档的标记)，所以我可以在编译过程中添加一个自定义的 CSS 层，这样就可以立即生成不同风格的结果网站了。

一份手稿 =>同时生成多种风格

将样式与模型生成过程分离开来，这给模型使用带来了一些巨大的好处:

如果前端工程师希望将 SketchCode 模型合并到他们自己的公司产品中，使用现有的模型，只需修改一个 CSS 文件，就能与他们公司的风格吻合。
内置了可伸缩性——用一个单一的源图像，模型输出可以立即被编译成 5、10 或 50 个不同的预定义样式，因此用户可以可视化他们多个版本的网站，并在浏览器中浏览这些网站。

结论和未来的发展方向

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

该模型也有一些局限性:

由于该模型只在有 16 个元素的词汇表上进行了训练，所以它不能预测数据之外的标记。下一步可能是使用更多的元素生成额外的网站示例，比如图像、下拉菜单和表单——Bootstrap 组件是一个很好的选择。
真实的网站产品有很多变种。创建训练数据集的一个很好的方法是收集实际的网站，捕捉他们的 HTML/CSS 代码以及网站内容的截屏。
绘图也有很多变种，以致 CSS 技巧修改不能被完全捕获。在手绘草图数据中产生更多变种的一个很好的方法是使用生成的 Adversarial 网络来创建逼真的绘制网站图像。

你可以在我的 GitHub 页面上找到这个项目所使用的代码，希望这个项目能继续发展下去!