你能够在 GitHub 上找到这个项目的代码：https://github.com/ashnkumar/sketch-codepython
为用户创造直观、富有吸引力的网站是各家公司的重要目标，并且这是个快速进行原型、设计、用户测试循环的过程。像 Facebook 这样的大公司有着让整个团队专一于设计流程的人力，改动可能须要几周的时间，并涉及到多种利益相关者；而小型企业就没有这样的资源，所以其用户界面可能受到一些影响。git
我在 Insight 当中的目标是使用现代深度学习算法大大简化设计工做流程，并使得任何规模的公司都能快速地创造并测试网页。github
现有的设计工做流程算法
现有工做流程涉及多个利益相关者bootstrap
一个典型的设计工做流程以下所示：浏览器
-
产品经理进行用户研究，从而制定技术参数表网络
-
设计人员将接受这些要求并尝试建立低保真原型，最终建立高保真原型前端工程师
-
工程师将这些设计转化为代码并最终将产品交付给用户架构
开发周期的时间长度很快就会变成瓶颈，像 Airbnb 这样的公司已经开始使用机器学习来提升这个过程的效率了。（参见：https://airbnb.design/sketching-interfaces/）
Airbnb 内部 AI 工具演示：从草图到代码
虽然这种工具颇有但愿成为机器辅助设计的例子，可是尚不清楚这种模型在端到端的状况下能彻底训练到什么程度，也不清楚它在多大程度上依赖于手工制做的图像特征。这确定是没法知道的，由于它目前仍是 Airbnb 专有的非开源方案。我想创造一个「从绘图到代码」技术的开源版本，可供更多开发者和设计者使用。
理想状况下，个人模型能够采用简单的网站设计手绘原型，并当即从该图像生成一个可用的 HTML 网站：
SketchCode 模型须要绘制好的网站线框图并能生成 HTML 代码
实际上，上面的例子是一个从我模型测试集图像生成的实际网站！你能够在个人 Github 页面中查看它：https://github.com/ashnkumar/sketch-code
从图像标注中获取灵感
我正在解决的问题属于程序综合（https://en.wikipedia.org/wiki/Program_synthesis）这个广义任务范畴，即工做源代码的自动生成。尽管不少程序综合能处理从天然语言要求或执行轨迹所生成的代码，但在我这个案例中，我能够从一个源图像（手绘线框图）开始，自动得到想要的代码。
机器学习领域中，有一个名为图像字幕生成的领域（https://cs.stanford.edu/people/karpathy/deepimagesent/），该领域有着充分的研究，旨在学习将图像和文本相连的模型，特别是生成关于源图片内容的描述。
图像标注模型生成源图片的描述
我从最近一篇名为 pix2code 的论文和 Emil Wallner 使用该方法的一个相关项目得到了灵感（参见：前端慌不慌？用深度学习自动生成 HTML 代码），并决定将个人任务重构成图像字幕生成问题的一部分，即将线框图做为输入图像，将对应的 HTML 代码做为输出文本。
获取正确的数据集
考虑到图像标注的方法，我心中理想的训练数据集是成千上万对手绘线框图和它们 HTML 代码的等价物。不出所料，我没法找到这种数据集，所以我不得不为该任务建立本身的数据。
我从 pix2code 论文中提到的一个开源数据集（https://github.com/tonybeltramelli/pix2code）入手，它由 1750 张人工生成的网页截图和其对应源代码构成。
pix2code 中生成的网站图像及其源代码数据集
这个数据集对我而言是个很好的开始，其中有一些有趣的地方：
-
数据集中每一个生成的网站都包含几个简单的 Bootstrap 元素例如按钮、文本框和 DIV。虽然这意味着个人模型将会因把这几个元素做为「词汇」（模型可选择用于生成网站的元素）而受限制，这种方法应该很容易推广到更大的元素词汇表中。
-
每一个示例的源代码包含领域专用语言（DSL）的标记，这些符号是由论文做者建立的。每一个标记对应于 HTML 和 CSS 的片断，且有一个编译器将 DSL 转化为工做使用的 HTML 代码。
让图片更像手绘的
将网站的多彩主题切换成手写主题。
为了调整数据集以适应个人任务，我得把网站的图片弄得像是手绘的。对图片的手绘化都得益于 OpenCV 和 PIL library 的灰度转换和轮廓检测功能。
最终，我决定直接经过一系列操做来直接修改原网站的 CSS 样式表：
-
经过改变页面元素的边框半径实现按钮和 div 的圆润化
-
调整边框的粗细以模仿手绘素描，并添加阴影
-
将字体改成类手写字体
个人最终版本又增长了一个步骤，经过加入倾斜，偏移和旋转来进行数据加强，以模仿实际绘制的素描的不肯定性。
使用图像标注模型架构
如今我已经准备好个人数据了，我能够把它输入模型进行训练了！
我用的这个用于图像标注的模型包括三个主要部分：
-
一个卷积神经网路（CNN）视觉模型用于提取源图片特征
-
一种由编码源代码标记序列的门控循环单元（GRU）组成的语言模型
-
一个解码器模型（也是一个 GRU），它之前两个步的输出做为输入，预测序列中的下一个标记
使用标记序列做为输入来训练模型
为了训练这个模型，我把源代码分红标记序列。其中一个序列及其源图像是模型的单个输入，其标签是文档中的下一个标记。该模型使用交叉熵成本（cross-entropy cost）做为其损失函数，将模型预测的下一个标记与实际的标记进行比较。
在模型从头开始生成代码的推理阶段，该过程稍有不一样。该图像仍然经过 CNN 网络进行处理，但文本处理仅提供一个开始序列。在每一步中，模型对序列中下一个标记的预测将返回到当前输入序列，同时做为新的输入序列输入到模型中。重复此操做直到模型预测出 <END> 标记或进程达到每一个文档的标记数的预约义上限。
一旦从模型中生成了一组预测标记，编译器就会将 DSL 标记转换为 HTML，这些 HTML 能够在任何浏览器中展现出来。
用 BLEU 得分评估模型
我决定用 BLEU 评分（https://machinelearningmastery.com/calculate-bleu-score-for-text-python/）来评估模型。这是机器翻译任务中常常会用到的评估标准，它试图在给定相同输入的状况下，评估机器生成的文本与人类可能写的文本的近似程度。
实质上，BLEU 经过比较生成文本和参考文本的 n-元 序列，生成精修改后的文本。它很是适合这个项目，由于它会影响生成的 HTML 中的实际元素，以及它们之间的相互关系。
而后这是最棒的——我彻底能够经过检查生成的网站来理解 BLEU 得分！
BLEU 得分可视化
一个完美的 1.0 的 BLEU 分数将在正确的位置生成源图像的正确元素，而较低的得分能够预测错误的元素和/或将它们放在相对于彼此错误的位置。最终个人模型可以在测试集上获得 0.76 的 BLEU 分数。
福利 - 定制样式
我觉察到的一个额外福利是，因为模型只生成页面的骨架（文档的标记），我能够在编译过程当中添加一个自定义的 CSS 层，而且能够即时看到网站的不一样风格。
一次转换 => 同时生成多种样式
将样式与模型生成过程分离，给使用模型带来了不少好处：
-
想要将 SketchCode 模型应用到本身公司产品中的前端工程师能够按原样使用该模型，只需更改一个 CSS 文件以符合其公司的样式要求
-
可扩展性已内置 - 使用一张源图像，模型输出可当即编译为 五、10 或 50 种不一样的预约义样式，所以用户能够看到他们网站的多个版本，并在浏览器中浏览这些网站
总结与展望
经过利用图像标注的研究成果，SketchCode 可以在几秒钟内将手绘网站线框图转换为可用的 HTML 网站。
该模型有些局限性，大概包括如下几点：
-
因为这个模型是用一个只有 16 个元素的词汇进行训练的，它不能预测训练数据以外的标记。下一步多是使用更多元素（如图像，下拉菜单和表单）生成其余样例网站——Bootstrap components 是个练手的好网站：https://getbootstrap.com/docs/4.0/components/buttons/
-
实际生产环境中，网站有不少变化。建立一个更能反映这种变化的训练数据集的好方法是去爬取实际的网站，捕获他们的 HTML / CSS 代码以及网站内容的截图
-
手绘素描也有不少变化，CSS 修改技巧没有被模型彻底学会。在手绘素描上生成更多变化的一种好方法是使用生成对抗网络来建立逼真的绘制网站图像
我很期待看到项目的进一步发展！
转载自：https://www.jiqizhixin.com/articles/automated-front-end-development-using-keras