编写网页变得更容易！让AI基于手绘原型教程+代码生成HTML

2024-11-17 19:07:18 | 来源: 互联网整理

写一个网页能有多麻烦？在大多数公司中，这项工作分为三个步骤：

1、产品经理完成用户研究任务后，列出一系列技术要求；

2、设计师根据这些需求设计低保真原型，并逐步修改得到高保真原型和UI设计图；

3、工程师将这些设计图实现为代码，最终成为用户使用的产品。

环节太多，任何地方出现问题都会拉长开发周期。因此，许多公司，例如Airbnb，已经开始使用机器学习来提高这个过程的效率。

Airbnb内部AI工具，从画图到代码一步到位

看起来很棒，但Airbnb 尚未透露模型端到端训练的细节以及手工设计的图像特征对模型的贡献。这是该公司专利的专有闭源解决方案，不得公开。

幸运的是，一位名叫Ashwin Kumar 的程序员创建了一个开源版本，使开发人员/设计人员的生活更加轻松。

以下内容是从他的博客翻译过来的：

理想情况下，该模型可以基于简单的手绘网站设计原型快速生成可用的HTML 网站：

SketchCode模型使用手绘线框生成HTML网站

事实上，上面的例子是使用训练模型在测试集上生成的实际网站。代码请访问：https://github.com/ashnkumar/sketch-code。

从图像标注中获取灵感

正在解决的问题属于一个更广泛的任务，称为程序综合，即自动生成工作源代码。虽然许多程序综合研究通过自然语言规范或执行跟踪方法生成代码，但在当前任务中，我将充分利用源图像，即开始工作时给出的手绘线框。

机器学习中有一个非常热门的研究领域叫做图像字幕，其目的是建立一个连接图像和文本的模型，特别是生成源图像内容的描述。

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

我从一篇pix2code论文和另一个应用该方法的相关项目中得到启发，决定以图像标注的形式来实现我的任务，将绘制的网站线框作为输入图像，其相应的HTML代码作为其输出内容。

注：上一段提到的两个参考项目是

pix2code 论文：https://arxiv.org/abs/1705.07962

floydhub教程：https://blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/?source=techstories.org

获取合适的数据集

确定图像标注方法后，所使用的理想训练数据集包含数千个手绘线框和相应的HTML 输出代码。然而，我想要的相关数据集还没有，所以我必须为这个任务创建一个数据集。

最初，我尝试了pix2code论文中给出的开源数据集，该数据集由综合生成的网站的1750个屏幕截图及其相应的源代码组成。

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

这是一个很好的数据集，有几个有趣的方面：

此数据集中生成的每个网站都包含几个简单的辅助元素，例如按钮、文本框和DIV 对象。尽管这意味着模型仅限于这几个元素作为其输出，但可以通过选择生成网络来修改和扩展这些元素。这种方法应该很容易推广到更大的元素词汇表。

彩色网站图像变手绘图

为了修改我的任务数据集，我想让网站图像看起来像是手工绘制的。我尝试使用Python中的OpenCV库和PIL库等工具对每张图像进行修改，包括灰度转换和轮廓检测。

最终，我决定直接修改原始网站的CSS 样式表，方法如下：

1、改变页面元素的边框半径，使按钮、DIV对象的边缘平滑；

2、模仿画好的草图调整边框粗细，添加阴影；

3、将原来的字体改为类似手写的字体；

最终的实现还添加了一个步骤来增强图像，通过添加倾斜、移位和旋转来模拟实际草图的变化。

使用图像标注模型架构

现在我已经处理了数据集，下一步是构建模型。

我利用了图像注释中使用的模型架构，它由三个主要部分组成：

1. 使用卷积神经网络（CNN）从源图像中提取图像特征的计算机视觉模型；

2. 一种语言模型，包括对源代码标记序列进行编码的门控单元GRU；

3. 解码器模型，也是一个GRU 单元，将前两个步骤的输出作为输入，并预测序列中的下一个标记。

使用token 序列作为输入训练模型

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

当模型从头开始生成代码时，这种推理的工作原理略有不同。图像仍然通过CNN 网络进行处理，但文本处理仅从单个启动序列开始。在每一步中，模型在序列中输出的下一个预测标记被添加到当前输入序列中，并作为新的输入序列馈送到模型中；重复此操作，直到模型的预测标记为，或者过程达到每个文本中的标记数量的预定义值。

一旦模型生成一组预测标记，编译器就会将DSL 标记转换为可以在任何浏览器中运行的HTML 代码。

用BLEU分数评估模型

我决定使用BLEU 分数来评估模型。这是机器翻译任务中常用的一个指标，通过测量机器生成的文本与人类在给定相同输入时可能生成的文本的接近程度。

实际上，BLEU 会比较生成文本和参考文本的N 元语法序列，以创建修改后的准确版本。它非常适合这个项目，因为它会影响生成的HTML 代码中的实际元素以及它们之间的关系。

最重要的是，我还可以通过检查生成的网站来比较当前的实际BLEU 分数。

观察BLEU评分

BLEU 分数为1.0 表示模型能够将适当的元素放置在给定源图像的正确位置，而较低的BLEU 分数表示模型预测错误的元素或将它们放置在相对不合适的位置。我们的最终模型在评估数据集上的BLEU 得分为0.76。

后来我也想到，由于模型只生成当前页面的框架，也就是文本的token，所以我可以在编译过程中添加自定义的CSS层，立即得到不同风格的生成网站。

一张手绘生成各种风格的网页

使用模型时，将样式定制和模型生成两个过程分开可以带来很多好处：

1、如果您想将SketchCode模型应用到自己公司的产品中，前端工程师可以直接使用该模型，只需要改一个CSS文件即可符合公司的网页设计风格；

2.模型具有内置的可扩展性，即通过单个源图像，模型可以快速编译多种不同的预定义样式，因此用户可以想象多种可能的网站样式并在浏览器中浏览这些生成的网页。

总结和展望

受图像注释研究的启发，SketchCode 模型可以在几秒钟内将手绘网站线框转换为可用的HTML 网站。

不过这个模型还存在一些问题，这也是我接下来可能的工作方向：

1. 由于该模型仅使用16 个元素进行训练，因此它无法预测这些数据之外的标记。下一步可能是使用更多的元素来生成更多的网站样本，包括网站图像、下拉菜单和表单。您可以参考启动器组件（https://getbootstrap.com/docs/4.0/components/buttons/）的想法；

2、在实际网站建设中，有很多变化。创建更好地反映这种变化的训练集是提高生成效果的好方法，可以通过获取更多网站HTML/CSS 代码和内容截图来提高生成效果；

3.手绘图也有很多变化是CSS修改技术无法捕获的。解决这个问题的一个好方法是使用生成对抗网络（GAN）来创建更真实绘制的网站图像。

相关地址

代码：https://github.com/ashnkumar/sketch-code

原文：https://blog.insightdatascience.com/automated-front-end-development-using-deep-learning-3169dd086e82

- 超过-

诚意招聘