最近看了一下pix2codeAI生成前端页面的官方论文与github上面的pix2codeReimplement源码，虽然官方只提供了论文还没有公开源码与用户调用的入口，但也受到了一些启发，思考了下一利用机器学习生成h5静态页面的可行性。
一.pix2code论文
pix2code原理图
从原理图上看使用了三个神经网络分别为：视觉模型(用卷积神经网络cnn)、语言模型(长短记忆模型lstm)、复合模型(双层长短记忆模型lstm')
CNN处理输入的视觉稿，输出是一个符号标识、LSTM处理输入代码输出也是一个符号标识、lstm'用来关联匹配最终输出目标代码
虽然论文中有讲到三个神经网络的每个网络层具体如何构建，但是没有明确指出视觉稿的特征提取方法、DSL code如何转化target code，所以github上的pix2codeReimplement(这个重新实现是非官方的人实现的)运行起来并没有最终输出的效果
二.启发与思考
虽然pix2code我们直接按照论文做不出来，但是也受到一些启发，就是视觉稿的特征提取出，与特征匹配我们训练进去的代码，最终输出目标h5代码
接下来我们思考一下怎么具体实现这些步骤：
(1).特征提取：测量标识视觉稿
我们不妨回想一下前端h5做静态页面的时候人工操作是如何做的，假如设计师没有帮忙标识视觉稿上面的文本框长度、字体颜色等等，直接发了个ui图片过来，那开发人员就要用类似markman的测量软件来量文本框长度、字体颜色等等
这个过程其实是可以计算机实现的，例如用python读取视觉稿后转成二维数组，再顺时针遍历像素(输入的视觉稿要先做去背景图处理，不然遍历像素不容易)，遍历到连续色点的就可以确认为一个div框之类的，遇到嵌套的可以用递归的方法，还有遇到半框、文字下划线等特殊情况可以用cnn训练识别
页面特征提取像素遍历
遍历过程中记录各框体属性，例如框的颜色、厚度、宽度、高度、里面文字的行高、文字颜色、框角是直角还是圆角等等
最后输出一个向量：
属性与内嵌的框体可以自定义记录到向量的不同维度上
(可以简单理解为一个数组)
例如： [0,255,255,255,10,10,[...],[...],[..[..]]]
(2).训练数据集：特征对应代码
训练数据集我们就要准备一些训练的视觉稿与对应的代码块，例如一个只有一个输入框的视觉稿对应的代码块是<input type=text/>等
我们要准备尽可能多的训练数据集，而且覆盖的代码块粒度由少到多，比如训练覆盖完form表单的所有标签，可以再覆盖到两层嵌套的标签
训练的时候也是先在视觉稿转特征向量，特征向量放到神经网络里以有监督的学习方式告诉网络对应是哪个代码块的方式训练，官网要求这里是SLTM个人觉得DNN都可以了
(3).整合翻译出目标代码
做完上面的步骤，我们就直接拿视觉稿的特征向量来做翻译目标代码
遍历视觉稿的特征向量：
[0,255,255,255,10,10,[...],[...],[..[..]]]
遇到嵌套的可以用递归
参考NLP自然语言的最大匹配法，在遍历到底层框体之前就可以放到上一步训练的网络中匹配代码块出来用，若匹配不出来则再遍历更深层的做匹配代码块
最终整合代码块输出html文件
结语
或许有人会问这样如何分辨是输入框还是div，这个其实在训练网络的时候有涵盖到，比如输入框前面一般带文字的，那个输入框的相对父级元素的左侧明显有一定的距离，根据这个特征是可以匹配正确的代码块的。其它分辨情况也一样根据特征来的
还有这个输出的代码块是根据训练代码块的，例如你换了一个ui组件比如weui，那么训练特性对应weui代码块的网络就可以了
参考资料：
论文地址:
https://github.com/tonybeltramelli/pix2code
论文国内转载翻译地址：
http://www.sohu.com/a/149907332_465975
pix2codeReimplement源码github地址：
https://github.com/alifanov/pix2code-reimplement
您的意见是我改善的东西，欢迎评论提建议，如果对您有帮助，请点个赞，谢谢~~菲麦前端专题，汇聚前端好文，邀您关注！
网友评论