使用深度学习自动化前端开发 SketchCode:5秒钟内从想法转到HTML

原创
2018/06/09 13:42
阅读数 12
作者:Ashwin Kumar
来源:Insight

编辑:代码医生团队

Ashwin Kumar之前是Sway Finance的联合创始人,Sway Finance是一家Y Combinator支持的创业公司,使用机器学习实现会计自动化。在Insight中,他开发了一个模型,允许用户从手绘线框创建工作的HTML网站,显着加快了设计过程。他现在是神话的深度学习科学家。


今天的设计工作流程 

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


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

 

  • 产品经理执行用户研究以生成规格列表

  • 设计师将这些要求和探索低保真原型,最终创建高保真模型

  • 工程师将这些设计实现为代码,并最终将产品交付给用户


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

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


虽然很有希望成为机器辅助设计的一个例子,但尚不清楚该模型的端到端全面培训的多少,以及多少依赖手工制作的图像功能。无法确切知道,因为它是公司专有的封闭源解决方案。我想创建一个开源版本的绘图到代码技术,可供更广泛的开发人员和设计人员使用。

 

理想情况下,我的模型可以采用简单的网站设计手绘原型,并立即从该图像生成一个可用的HTML网站:

SketchCode模型需要绘制线框并生成HTML代码


实际上,上面的例子是一个从我的模型生成的测试集映像上的实际网站!您可以查看我的Github页面上的代码。https://github.com/ashnkumar/sketch-code


从图像字幕中汲取灵感

我正在解决的问题属于更广泛的任务,称为程序合成,即自动生成工作源代码。尽管很多程序综合处理从自然语言规范或执行轨迹生成的代码,但在我的情况下,我可以利用事实,即我有一个源图像(手绘线框)开始。

 

在机器学习中有一个被广泛研究的领域,称为图像字幕,旨在学习将图像和文本连接在一起的模型,特别是生成源图像内容的描述。

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


从最近的一篇名为pix2code的文章和Emil Wallner的一个相关项目中吸取灵感,我使用这种方法,决定将我的任务重新组合为图像字幕,将绘制的网站线框图作为输入图像,并将其相应的HTML代码作为其输出文本。

 

获取正确的数据集

鉴于图像字幕的方法,我理想的训练数据集将会有成千上万对手绘线框草图和它们的HTML代码等价物。不出所料,我找不到那个确切的数据集,我不得不为这个任务创建自己的数据。

 

我开始使用来自pix2code论文的开源数据集,该论文由1,750张合成生成的网站截图及其相关源代码组成。

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


这是一个很好的数据集,有一些有趣的地方: 


  • 数据集中的每个生成的网站都由几个简单的Bootstrap元素(如按钮,文本框和div)组成。尽管这意味着我的模型将被限制在这些少数元素作为它的词汇” - 它可以选择生成网站的元素 - 这种方法应该很容易地推广到更大的元素词汇表

  • 每个样本的源代码都由来自特定领域语言(DSL)的令牌组成,该论文的作者为其任务创建了令牌。每个标记对应于HTMLCSS的片段,并且使用编译器将DSLDSL转换为正在工作的HTML代码


使图像看起来手绘

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


为了修改我自己的任务数据集,我需要使网站图像看起来像他们手工绘制。我探讨了如何使用OpenCVPython中的PIL库等工具对每个图像进行修改,例如灰度转换和轮廓检测。

 

最终,我决定直接修改原始网站的CSS样式表,执行一系列操作:

 

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

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

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


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

 

使用图像字幕模型架构

现在我已经准备好了数据,我终于可以将它提供给模型了!

 

我利用了图像字幕中使用的模型架构,该架构由三个主要部分组成:

 

  • 一种使用卷积神经网络(CNN)从源图像提取图像特征的计算机视觉模型

  • 一种语言模型,由编码源代码标记序列的门控循环单元(GRU)组成

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

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


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

 

在模型的任务是从头开始生成代码的推理时,该过程稍有不同。该图像仍然通过CNN网络进行处理,但文本处理仅采用开始序列播种。在每个步骤中,模型对序列中下一个标记的预测将附加到当前输入序列,并作为新的输入序列输入到模型中。重复此操作直到模型预测<END>标记或进程达到每个文档的标记数的预定义限制。

 

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

 

BLEU评分评估模型

我决定使用BLEU评分来评估模型。这是机器翻译任务中常用的度量标准,它试图在给定相同输入的情况下,测量机器生成的文本与人类可能产生的内容的近似程度。

 

实质上,BLEU比较生成的文本和参考文本的n-gram序列,以创建修改后的精度形式。它非常适合这个项目,因为它会影响生成的HTML中的实际元素,以及它们之间的相互关系。

 

最好的部分 - 我可以通过检查生成的网站实际看到 BLEU分数!

可视化BLEU评分


一个完美的BLEU分数为1.0将在正确的位置给出源图像的正确元素,而较低的分数可以预测错误的元素和/或将它们放在相对于彼此的错误位置。最终的模型能够 在评估集上得到0.76BLEU得分。

 

奖金 - 自定义样式

我意识到一个额外的好处是,由于该模型只生成页面的骨架(文档的标记),所以我可以在编译过程中添加一个自定义CSS层,并立即拥有不同样式的网站可能会看到的内容喜欢。

一个绘图=>同时生成多种样式


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

 

  • 想要将SketchCode模型应用到自己公司产品中的前端工程师可以按原样使用该模型,只需更改一个CSS文件以符合其公司的样式指南

  • 可扩展性内置 - 通过单一源图像,模型输出可以立即编译为5,1050种不同的预定义样式,因此用户可以将多个版本的网站可能看起来像,并在这些网站中浏览浏览器


结论和未来的方向

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

 

该模型有一些局限性,这些局限性可能会提示下一步的可能性

 

  • 由于这个模型是用一个只有16个元素的词汇进行训练的,它不能预测数据之外的令牌。下一步可能是使用更多元素(如图像,下拉菜单和表单)生成其他网站示例 -  引导程序组件是启动的好地方

  • 实际生产网站中有很多变化。创建一个更能反映这种变化的训练数据集的好方法是去除实际的网站,捕获他们的HTML / CSS代码以及网站内容的屏幕截图

  • 图纸也有很多变化,CSS修改技巧没有完全捕捉。在手绘草图数据中生成更多变化的一种好方法是使用生成敌对网络来创建逼真的绘制网站图像


你可以找到一个用于这个项目我的GitHub页面上的代码

https://github.com/ashnkumar/sketch-code


代码医生出品


  让Ai学习

  变得简单


点击“阅读原文”京东购买图书

本文分享自微信公众号 - 相约机器人(xiangyuejiqiren)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部