文/仝辉
图片生成代码是什么
Imgcook 中的图片生成代码服务，能够将图片转换成 Flutter、H5 等代码，能够获取元素的位置和属性等内容，具体如下图所示。
图片生成代码怎么做
图片生成代码，具体步骤可以分为如下几步：
版面分析：提取轮廓和元素
属性提取：获取文字、图片、轮廓等的属性
布局推导：获取重复布局、GridView、ListView等布局类型
代码生成：代码翻译生成对应的Flutter、H5等代码
本文会介绍版面分析模块的一些难点和思考。
技术难点和思考
迭代1：传统图像处理
第一版我们自然想到了先利用机器视觉的方法来做边缘检测和行列投影的方式去获取对应的轮廓和元素。
但是这一版本存在很明显的问题：
- 1）前后景颜色接近会导致无法召回
- 2）元素叠加时会丢失叠加的元素
例如下图的播放按钮
迭代2：引入深度学习
第一版存在不理解语义的问题，我们在第二版引入深度学习去尝试理解语义。
深度学习，故名思义存在很深的网络，每一层的卷积网络都能获取不同的特征图，多层融合可以很好地提取特征信息，使得机器“理解”语义信息。
迭代3：深度学习融合传统图像处理算法
目标检测方法，无论是一阶段还是二阶段的模式都存在位置定位不准的问题，如下图所示。我们尝试将迭代1和迭代2的方法融合，结合深度学习的语义理解能力和传统图像处理精度高的优点，迭代了第三个版本
分析结果
版面分析结合深度学习的语义理解能力和传统图像处理精度高的优点，可以得到很高的精确率和召回率，闲鱼千余张版面分析结果如下：
