无论是大公司还是小公司，为用户创造情感参与体验是一个重要目标，而这个过程往往是通过原型设计、编程和用户测试之间的快速循环来完成的。
对于小公司，比如Facebook，他们有足够的专用带宽供整个团队设计上述流程，这通常需要几周的时间； 而大公司往往会因为没有这样的资源支持而得到非常不满意的用户。 界面。
在本文中，我将分享如何使用深度学习算法来极大地简化设计工作流程，从而允许任何规模的公司快速创建测试网页。
（项目代码地址在文末）
//
当前的设计工作流程
//
当前典型的设计工作流程可能如下所示：
参与设计工作流程的利益相关者
这些繁琐的开发流程往往成为阻碍企业发展的障碍。 因此，一些公司，例如Airbnb，已经开始使用机器学习来使开发过程更加高效。
Airbnb 内部人工智能工具演示，可将设计草图转化为代码
不过，这些公司所采用的手段html文本代码，外界并不知晓。 为此，我决定研究一个开源版本的手动Web开发技术，让开发者和设计者都能从中受益。
理想情况下，我的模型还能够根据网站设计的简单手绘图立即生成一个可用的 HTML 网站：
模型立即将设计草图转换为 HTML 代码
事实上，前面的反例是我的模型根据测试照片实际生成的一个网站。 生成该网站的代码可以在我的 GitHub 上查看：
//
//
我要解决的问题可以从大的方向归为一个叫“程序综合”的任务，就是手动生成可以运行的源代码。 事实上，大多数程序都会综合自然语言指令或从执行跟踪生成的代码，但我的模型可以从源图像（手绘原理图）开始。
机器学习中有一个经过深入研究的领域，称为图像描述。 这些方法学习将图像与文本匹配的模型，特别是生成源图像中内容的文本描述。
图像描述模型生成源图像的文本描述
我观察并研究了最近发表的一篇名为 pix2code 的论文 (arxiv.org/abs/1705.07962) 和 Emil Wallner 的相关项目 (blog.floydhub.com/turning-design-mockups-into-code-with-deep-learning/? source= techstories.org），我得到了一些启发，决定将我的任务归类为图像描述，即将手绘的网站图作为输入图像，相应的HTML代码相当于图像。 输出文本。
//
获取正确的数据集
//
如果用图像来描述这些方法，我理想的训练数据集应该是数千张手绘的网站设计图及其相应的 HTML 代码。 果然，这些刚刚满足要求的数据集根本没有找到，所以我只能自己创建任务所需的数据集。
我首先使用了 pix2code 论文 (github.com/tonybeltramelli/pix2code) 中的开源数据集，其中包含 1750 个全面生成的网站截图及其相关源代码。
pix2code数据集
对于我的项目的开始阶段，这是一个很好的数据集，有一些有趣的亮点：
//
让图像具有设计草图的效果
//
将彩色网站图像变成手绘设计草图
为了修改数据集以更好地适合我的任务，我需要使网站图像看起来像是手工绘制的。 我使用了一些工具html文本代码，例如OpenCV和Python库PIL，来改变每张图像的信息，例如灰度转换、轮廓检查等。
最终我决定直接更改初始网站的CSS样式表，并进行了一系列操作：
//
使用图形来描述模型架构
//
现在，所需的数据已经准备好了，终于可以将数据输入到模型中了！
我采用了应用于图像描述部分的模型框架，主要由3个主要部分组成：
使用一系列标记作为输入来训练模型
为了训练模型，我将源代码拆分为一系列标记。 模型的每个输入都是一个token序列，并配有与该序列对应的源图像，其标签是文件中的下一个token。 该模型使用交叉熵成本函数作为其损失函数，该函数将模型预测的下一个标记与实际的下一个标记进行比较。
在推理阶段，当模型从头开始生成代码时，过程是不同的。 该图像已通过 CNN 神经网络进行处理，但仅使用起始序列进行文本处理。 模型对序列中下一个标记的预测会在每一步添加到当前输入序列中，并作为新的输入序列输入到模型中。 将重复此过程，直到模型预测出一个令牌或耗尽文件中每位的令牌数量。
//
使用 BLEU 分数评估模型
//
我决定用 BLEU 分数来评估模型。 BLEU 分数是机器翻译任务中常用的指标。 用于在输入相同的情况下判断机器生成文本和人类生成文本的接近程度。
基本上，BLEU 会比较生成文本和参考文本的 N-Gram 序列，以改进的方式表示模型的准确性。 这对于该项目来说是完美的，因为它考虑了生成的 HTML 中的实际元素以及它们之间的关系。
更好的是，我可以通过检查生成的网站来检查 BLEU 分数。
可视化 BLEU 分数
BLEU 得分最高为 1.0，表明模型能够根据源图像生成正确的网页元素，并且每个元素都处于正确的位置。 BLEU 分数较低意味着模型未正确生成元素，或将元素放置在错误的位置。 当模型最终在评估数据集上进行评估时，结果表明该模型的 BLEU 得分为 0.76。 换句话说，我构建的模型可以在短短几秒钟内将 76% 的设计草图正确转换为 HTML 代码。
//
额外好处 - 定制网站风格
//
后来我意识到还有一个额外的好处。 因为模型只生成网页的框架（文件的token），所以我可以在编译过程中添加自定义的CSS层，这样模型就可以瞬间让生成的网站拥有多种不同的风格。
一张设计草图同时生成多种风格
将网站样式与模型生成过程分开可以在使用模型时提供几个巨大的优势：
//
结论和未来展望
//
通过使用图像描述领域的研究方法，我建立了一个深度学习模型，可以在几秒钟内将手绘的网站设计图转换为可运行的 HTML 网站。
事实上，该模型也存在一定的局限性。 未来我可能会从以下几个方面进行优化：
该项目的所有代码都可以在我的GitHub存储库中找到：
参考：
086e82
-数据城堡-
