(Keras)基于深度学习SketchCode将线框原型图转换成HTML代码

摘要: 本文主要讲述如何使用现代深度学习算法来简化设计工作流程,并使任何人都能够快速创建和测试网页。如何使用SketchCode五秒钟将线框原型图转换成HTML代码。

(Keras)基于深度学习SketchCode将线框原型图转换成HTML代码

Ashwin Kumar在Insight中开发了一个模型——允许用户将手绘线框转换为HTML页面,这明显加快了设计过程。

为用户创造直观且引人入胜的体验是各个公司的重要目标,而这是一个由原型设计、设计和用户测试组成的快速循环的过程。像Facebook这样的大公司足够将整个团队投入到设计流程中,但是这可能需要几星期的时间,并且涉及多个利益相关者。然而小型企业没有这些资源,因此他们的用户界面可能会因此减少

我的目标是使用现代深度学习算法来简化设计工作流程,并使任何人都能够快速创建和测试网页。

现在的设计工作流程

(Keras)基于深度学习SketchCode将线框原型图转换成HTML代码

设计工作流经过多个利益相关者

典型的设计工作流程可能如下所示:

·产品经理根据用户调查表生成规格列表。

·设计师们根据这些要求探索出低精确度的原型,最终创造出高保真的模型。

·工程师将这些设计应用到代码中,最终将产品交给用户。

开发周期的长短很快就会变成一个瓶颈,像Airbnb这样的公司已经开始使用机器学习来提高这个过程的效率了。

(Keras)基于深度学习SketchCode将线框原型图转换成HTML代码

用Airbnb的内部AI工具演示从图纸到代码

虽然该模型有望成为机器辅助设计的一个例子,但是我们还不清楚这个模型有多少是经过端对端训练的,以及多少依赖于手工制作的图像特征,因为它是公司专有的封闭源码解决方案。所以,我想创建一个开源版本的原型图到代码的技术,以供更广泛的开发人员和设计人员使用。

理想情况下,我的模型能够将手绘的线框原型图立即转换成一个工作的HTML网站。

(Keras)基于深度学习SketchCode将线框原型图转换成HTML代码

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

实际上,上面的例子是从我的测试集图像模型中生成的一个实际网站!可以在我的GitHub上查看代码。

从图像字幕中汲取灵感

我所解决的问题属于一个更广泛的任务:程序合成,即自动生成源代码。尽管大部分的程序合成是根据自然语言规范或者执行轨迹生成代码,但是在我的模型中能够利用源图像(手绘线框图)开始生成代码。

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

(Keras)基于深度学习SketchCode将线框原型图转换成HTML代码

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

我从一篇名为pix2code的论文和Emily Wallner的相关项目中获得灵感,决定将任务重设为一个图像字幕,手绘的网站线框图作为输入图像,而相应的HTML代码作为输出文本。

获得正确的数据集

考虑到图像字幕的方法,我理想的数据集应该包含成千上万对的手绘线框图和对应的HTML代码。然而找不到,所以我不得不为这个任务创建自己的数据集。

首先从pix2code文件中获取一个开源数据集,该数据集包含1750个综合生成网站的截屏和相应的源代码。

(Keras)基于深度学习SketchCode将线框原型图转换成HTML代码

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

这是一个很好的数据集,包括以下几点:

·数据集中的每个生成网页都由几个简单的引导元素组成,比如按钮、文本框和div。尽管这意味着我的模型将仅限于在这些少数元素中选择来生成网站,但也更容易推广到更大的元素列表。

·每个样本的源代码由来自特定领域语言(DSL)的标识组成,论文的作者为其任务创建了标识。每个标识对应HTML和CSS的一个片段,而编译器则被用来将DSL转换为工作的HTML代码。

使图像看起来像手绘

(Keras)基于深度学习SketchCode将线框原型图转换成HTML代码

将丰富多彩的网站图像变成手绘版本

为了修改任务的数据集,我需要让网站的图像看起来像手工绘制的一样。我探索使用过OpenCV和Python中的PIL library这样的工具对每个图像进行修改,比如灰度转换和轮廓检测。

最终,我决定直接修改原始网站的CSS样式表,对其进行以下操作:

·更改页面上元素的边框半径以弯曲按钮和div的边角。

·调整边框的粗细以模仿绘制的草图,并添加阴影。

·将字体更改为看起来像手写的字体。

我在最终的pipeline中又增加了一个步骤,通过添加倾斜移动和旋转来增强这些图像,以模仿实际绘制的草图中的变化。

使用图像字幕模型架构

数据已准备妥当,现在可以将它输入模型了。我使用了图像字幕中的模型架构,它由三个主要部分组成:

·计算机视觉模型,使用卷积神经网络(CNN)从源图像中提取图像特征。

·由编码了一系列源代码令牌的门控循环单元(GRU)组成的一种语言模型。

·解码器模型(也是GRU),它将前两个步骤的输出作为输入,并预测序列中的下一个标记。

(Keras)基于深度学习SketchCode将线框原型图转换成HTML代码

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

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

在推理过程中模型的任务是从头开始生成代码,这个过程比较困难。图像仍然通过CNN网络进行处理,但文本进程将以一个序列开始进行传递。在每个步骤中模型将对序列的下一个令牌进行预测,并将预测令牌作为输入序列输入到模型中,重复此步骤直到模型预测<END>标记或进程达到每个文档的预定义标记数。

一旦从模型中生成了一组预测令牌,编译器就会将DSL令牌转换成HTML,这些HTML可以在任何浏览器中呈现。

用BLEU评分评估模型

我选择用BLEU评分来评估模型。因为他是机器翻译任务中常用的一个度量标准。它用来衡量相同的输入下,机器生成的文本与人类生成内容的相似程度。实质上,BLEU会比较生成的文本和参考文本的n-gram序列,以生成修改后的精度样式。它非常适合这个项目,因为影响了生成的HTML中的实际元素以及它们之间的关系。它最大的优点是可以通过检查生成的网站看到BLEU的分数!

(Keras)基于深度学习SketchCode将线框原型图转换成HTML代码

可视化的BLEU分数

在给定源图像的情况下,当正确的元素都在正确的位置上时BLEU评分能达到1.0,当元素预测错误或者元素放在了错误的位置上时会得到较低的分数。最终模型在BLEU评分中得到了0.76的分数。

Bonus-Custom样式

该方法有一个额外的好处,因为模型只生成页面的骨架(文档的标记),所以可以在编译过程中添加自定义的CSS层,这可以立即改变网站的外观风格。

(Keras)基于深度学习SketchCode将线框原型图转换成HTML代码

一个绘图=>同时生成多种风格

将模型生成过程与样式分离能够给模型的使用带来很多好处:

·前端工程师想要将SketchCode模型融入到自己公司的产品中,可以使用现有的模型,只需要修改一个CSS文件就能符合公司的风格。

·可伸缩性内置一个源图像,模型输出可以立即被编译成5、10或50个不同的预定义样式,这样用户可以在浏览器中查看多个版本的网站可能的外观。

结论和未来的发展方向

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

但是该模型也有一些局限性,这也是未来的发展方向:

·由于该模型仅使用由16个元素组成的词汇表进行训练,所以它无法预测数据之外的令牌。下一步可能是使用更多的元素组成额外的网站示例——引导组件是一个很好的开始研究的方向。

·实际生成网站时会有很多的变化。所以要创建能够更好应对这些变化的训练数据集,而滤掉实际的网站,捕获它们的HTML/CSS代码以及网站的屏幕截图是一个好方法。

·绘图也有很多CSS修改技巧无法完全捕捉到的变化。在手绘草图数据中产生更多变化的一个好方法是使用生成的Adversarial网络来创建逼真的绘制网站图像。

该项目源代码请点击我的GitHub页面查看。

https://github.com/ashnkumar/sketch-code?spm=a2c4e.11153959.blogcont576211.20.74963708DO3Jj3

本文由阿里云云栖社区组织翻译。

文章原标题《Automated front-end development using deep learning》

作者:Ashwin Kumar

译者:奥特曼,审校:袁虎。

相关推荐