机器学习：实现从UI设计草图生成HTML页面案例

最近我的团队在做一个项目MVP，需求分析和系统架构的初版完成了，UI设计也出来了，并且和客户做了review，现在就要开发一个Demo出来，这就要在UI设计的原型基础上开发出前端HTML，然后加上后端的数据库读写和简单业务逻辑。

但是，问题来了，从UI设计的原型出发，开发前端HTML需要4天时间，而且一堆技术问题才能做出UI设计的效果，因此，我就想到，是否可以直接将这个设计原型转化为HTML？如果可以，即时效果不怎么好，在此基础上也可以加快前端开发。

在互联网上搜索有没有可行的技术解决方案或者产品，发现果然是英雄所见略同，位于美国旧金山的Airbnb公司已经做了这一方面的研究，利用机器学习来将手绘的原型转化为HTML，大大地提高了Web前端开发的效率，从某种程度上而言，利用AI完成了需要大量初级前端工程师做的工作！

仔细研究了一番，这个Airbnb搞的是close-source的算法模型，而且申请了解决方案专利，不买Airbnb的产品和服务是用不了这个算法模型了。

查到有一个技术大牛AshwinKumar利用类似的原理开发的一个开源解决方案，将手绘原型转化为HTML，使前端开发者的工作大为简单！

从Github下到这位技术大牛的源代码（https://github.com/ashnkumar/sketch-code），经过认真的研究后，发现其实这个原理很简单，就是利用了机器学习领域的一种图像标注（image caption）的技术，把绘制的网站线框图作为输入图像，并将其相应的HTML代码作为其输出内容，然后，UI设计师的网站设计草图就直接转化成了此前需要前端工程师才能开发出的HTML代码了。

在这个Open Source的机器学习的Open Source案例中，用到了以下Python类库：

Keras==2.1.2：图像识别

tensorflow==1.4.0：Google机器学习Open Source框架

nltk==3.2.5

opencv-python==3.3.0.10：图像处理

numpy==1.13.1

h5py==2.7.1：就是这个类库生成了HTML5页面

matplotlib==2.0.2

Pillow==4.3.0

tqdm==4.17.1

scipy==1.0.0

直接上我写的一段代码，调用了Open Source框架的基本方法：

随手做了一个UI设计草图：

运行程序：

生成的HTML页面：

效果还可以，当然，客观地讲，并不完美，主要原因是训练数据太少，看了下大概用了1700个草图做训练，如果可以用17000个设计草图来训练呢？效果值得期待！

从这个案例可以知道，前端工程师，如果不学习新技术，或者是成为全栈工程师，或者是和UI设计师结合起来做创造性的前端开发，就要被人工智能给干掉了！

在这个人工智能技术快速发展的时代，如果不想被干掉，就得坚持学习，不断学习新技术，做有创造性的工作，而不是那些大量重复的规则明确的工作。

机器人写代码的时代已经到来了，再不Get一些新技能，就来不及了！