sketch-code，让草图秒变HTML

最近发现了一个很有意思的新工具，叫作 sketch-code。

它可以将手稿草图直接变为html网页，产生相应的前端代码。

sketch-code，是由微软推出的基于机器学习、使用Bootstrap框架的开源工具。

实现效果

微软sketch-code的官网上的例子就很有意思，见如下：

可以看见，在草图中的形状，经由机器识别等过程，变成了由bootstrap网格系统所构成的html前端页面。
文字变成了文本行，小方框变成了按钮，文本与图片的组织方式变成了bootstrap的栅格系统。大体上页面的形状已经出来了。
即使这个页面距离我们理想中的前端页面，仍然有所差距，也无可否认，这是一个很有意思的工具，甚至可以在一定程度上减轻前端开发者的工作负担，或者帮助无前端经验的开发者进行快速开发（当然，静态页面）。

技术简介

这里有一篇原作者的技术博客，知乎专栏上有他的翻译版。
有兴趣的读者可以扫描二维码阅读。

这里简要介绍一下它所使用的的技术：
图像识别：对手绘图片的支持，得益于 OpenCV 和 PIL library 的灰度转换和轮廓检测功能。
深度学习框架：keras。
卷积神经网络训练示例：

如何使用

环境支持：python3环境，需要具有macOS、linux系统支持
步骤较为复杂，具体请浏览：

用处与缺点

专业的前端开发人员是用不着这东西的，他们更倾向于手建网页前端代码，熟悉和了解每一行代码的设计与开发过程。这我们应该了解。
然而，在一定程度上，快速的bootstrap可以减轻工作量，这需要承认。快速开发，快速部署。
这是一个实验性的工具，它的更大用处，是用来给前端经验缺乏的网站开发者，快速构建相应的简单网站（比如简单的陈列文本和图片信息）。其实很多网站用不着JavaScript的，我们要知道。
如果你只是需要一个个人网页，来放置你或者公司的自我介绍，等等信息，不需要后台逻辑，快速构建简单的网站就已经足够了。