前两天在刷微博时,看到有人说国外有人通过人工智能,使用深度学习自动将手绘图变成html网页的事情。我这种菜鸟是无法理解AI技术的强大。

通过人工智能将手绘图变成html网页.png

一、SketchCode介绍

SketchCode是一种深度学习模型,它采用手绘Web模型并将其转换为可用的HTML代码。它是从名为image captioning(图像字幕)结构中获取灵感,可以从网站手绘图自动生成HTML标记。
什么是image captioning?它是旨在学习将图像和文本联系在一起的模型,特别是生成源图像内容的描述。如下图所示:
SketchCode通过人工智能将手绘图变成html网页.png

二、一张图生成多种样式

由于模型只生成页面的框架(html标记),可以在编译过程中添加一个自定义的CSS层,并使生成的页面可以有不同的样式。
将样式与模型生成过程分离后,使用该模型有一些很大的优势:

  • 希望将SketchCode模型整合到自己公司产品中的前端工程师可以不用更改模型,只需更改单个CSS文件即可做出符合其所需样式;
  • 内置可扩展性 - 通过单个源图像,模型可以立即生成为5、10或50种不同的自定义样式,因此用户可以多个版本的可视化样式。

三、未来方向

通过利用image captioning的研究,SketchCode能够在几秒钟内采用手绘网站线框并将其转换为可用的HTML网站。但是,目前也存在一些缺陷,例如,由于该模型仅使用16个元素的词汇表进行训练,因此无法在数据中看到它之外的标记。下一步可能是使用更多元素生成其他网站示例,例如图像,下拉菜单和表单。

四、项目代码

想了解更多的童鞋,可以看看作者的测试项目。
github项目地址

文章目录