写一个网页能有多麻烦？ 在大多数公司中，这项工作分为三个步骤：
产品总监完成用户监督任务后，列出一系列技术要求；
设计师根据这个需求设计五保户的真实原型，并逐步修改，得到高保真的原型和UI设计图；
工程师将这个蓝图实现为代码，最终成为用户的产品。
这么多环节，如果哪里出了问题，开发周期就会拉长。 为此，许多公司，例如Airbnb，已经开始使用机器学习来提高这一过程的效率。
△Airbnb内部AI工具，从图纸到代码一步到位
看起来很棒，但 Airbnb 并未透露模型中端到端训练的细节，以及手工设计的图像特征对模型的贡献。 这是该公司专利的专有闭源解决方案，不得公开。
幸运的是，一位名叫 AshwinKumar 的程序员创建了一个开源版本，使开发人员/设计人员的工作变得更加轻松。
以下内容是从他的博客翻译过来的：
理想情况下，该模型将通过简单的手绘网站设计原型快速生成可用的 HTML 网站：
△SketchCode模型借助手绘线框，未来变成HTML网站
事实上，前面的反例是在训练模型的帮助下在测试集上生成的实际网站。 代码请访问：。
从图像中获取灵感
当前的问题属于一个更广泛的任务，称为程序综合，即手动生成工作源代码。 虽然许多程序综合研究通过自然语言规范或执行跟踪方法生成代码，但在当前任务中，我将充分利用源图像，即开始工作时给出的手绘线框。
机器学习中有一个非常流行的研究领域称为图像字幕，其目的是建立一个连接图像和文本的模型，特别是用于生成源图像内容的描述。
△图像标注模型生成源图像的文本描述
受到 pix2code 论文和另一个应用这些技术的相关项目的启发，我决定根据图像学来实现我的任务，将网站的草图线框作为输入，并将其相应的 HTML 代码作为输出。
注：上一段提到的两个参考项目是
pix2code论文：
弗洛伊德哈布教程：
获取合适的数据集
确定图像标记方法后，理想使用的训练数据队列包含数千对手绘线框和相应的 HTML 输出代码。 另外，没有我想要的相关数据集，因此我必须为此任务创建一个数据集。
首先，我尝试了pix2code论文给出的开源数据集，该数据集由综合生成的网站的1750张截图及其对应的源代码组成。
△ 在pix2code数据集中生成网站图片和源代码
这是一个非常好的数据集，具有几个有趣的功能：
将网站图像彩色化为手绘图
为了更改我的任务数据集，我想让网站图像看起来像是手工绘制的。 我尝试使用Python中的OpenCV库和PIL库等工具对每个图像进行更改，包括灰度转换和轮廓检查。
最终，我决定通过执行以下操作来直接更改原始站点的 CSS 样式表：
修改页面上元素的边框直径，使按钮、DIV对象的边缘平滑；
模仿画好的草图调整边框的粗细并添加阴影；
将原来的字体修改为类似手写的字体；
在最终的实现过程中还有一个步骤，即通过添加倾斜、移位和旋转来模拟实际草图的变化来实现图像增强。
使用图形表示模型架构
现在，我已经处理了数据集，下一步是构建模型。
我依赖于图像学中使用的模型框架，它由三个主要部分组成：
使用前馈神经网络（CNN）从源图像中提取图像特征的计算机视觉模型；
一种语言模型，包括对源代码标记序列进行编码的门控单元（GRU）；
解码器模型（也是 GRU 单元）将前两个步骤的输出作为输入，并预测序列中的下一个标记。
△ 以token序列作为输入训练模型
为了训练模型，我将源代码拆分为标记序列。 模型的输入是单个部分序列及其源图像，其标签是文本中的下一个标记。 该模型使用交叉熵函数作为损失函数，将模型预测的下一个标记与实际的下一个标记进行比较。
当模型从头开始生成代码时，这种推理的形式略有不同。 图像仍然通过 CNN 网络进行处理，但文本处理仅从一个启动序列开始。 在每一步中，将序列中模型对输出的下一个预测标记添加到当前输入序列中，并作为新的输入序列发送到模型； 重复此过程，直到模型的预测标记达到，或者过程达到每个文本位中的标记数量的预定义值。
模型生成一组预测标记后，编译器还将 DSL 标记转换为可以在任何浏览器中运行的 HTML 代码。
使用 BLEU 分数评估模型
我决定使用 BLEU 分数来评估模型。 这是机器翻译任务中常用的一种衡量方法，通过判断在相同输入的情况下机器生成的文本与人类可能形成的文本的接近程度。
实际上，BLEU 会比较生成文本和参考文本的 N 元语法序列，以创建更改后的精确版本。 它特别适合这个项目，因为它会影响生成的 HTML 代码中的实际元素以及它们之间的相互关系。
最重要的是，我还可以通过检测生成的网站来比较当前的实际 BLEU 分数。
△观察BLEU得分
当BLEU分数为1.0时，意味着模型能够将适当的元素放置在给定源图像的正确位置，较低的BLEU分数意味着模型预测错误的元素或将它们放置在相对不合适的位置。 。 我们的最终模型在评估数据集上的 BLEU 得分为 0.76。
奖励：自定义网页样式
后来我也想到，由于模型只生成当前页面的框架，即文本的token，所以我可以在编译过程中添加自定义的CSS层html自动生成，立即得到生成的网站的不同风格。
△一张手绘图即可生成多种风格的网页
在使用模型时html自动生成，将样式定制和模型生成这两个过程分开可以带来很多好处：
如果您想将SketchCode模型应用到您公司的产品中，后端工程师可以直接使用该模型，只需修改一个CSS文件以匹配公司的网页设计风格即可；
模型的可扩展性，即通过单个源图像，模型可以快速编译出多种不同的预定义样式，因此用户可以构思多种可能的网站样式，并在浏览器中浏览那些生成的网页。
总结与展望
受图像学研究的启发，SketchCode 模型还可以在几秒钟内将手绘网站线框转换为可用的 HTML 网站。
不过这个模型还存在一些问题，这也是我工作可能的方向：
由于模型仅使用 16 个元素进行训练，因此它无法预测超出此数据的标记。 下一步可能是使用更多的元素来生成更多的网站样本，包括网站图片、下拉菜单和表单。 可以参考启动程序组件()来获取思路；
在实际的网站建设中，有很多变化。 创建能够更好地反映这些变化的训练集是提高生成效率的好方法，可以通过获取更多的HTML/CSS代码和网站的内容截图来提高生成效率；
手绘图也有很多变化是很难通过CSS修改方法捕捉到的。 解决这个问题的一个好方法是使用生成对抗网络 GAN 来创建更真实的网站草图图像。
相关地址
结尾
”
全球专业人工智能实时资讯、大牛专栏、实用方法、论文指南、项目实战的工具支撑服务平台
飞行人工智能
