迭代前端智能化：视觉稿图像识别技术难点和思考
Imgcook 中的图片生成代码服务 ， 能够将图片转换成 Flutter、H5 等代码 ， 能够获取元素的位置和属性等内容 ， 具体如下图所示 。
本文插图
图片生成代码怎么做
图片生成代码 ， 具体步骤可以分为如下几步：版面分析：提取轮廓和元素属性提取：获取文字、图片、轮廓等的属性布局推导：获取重复布局、GridView、ListView等布局类型代码生成：代码翻译生成对应的Flutter、H5等代码复制代码
本文会介绍版面分析模块的一些难点和思考 。
本文插图
技术难点和思考
迭代1：传统图像处理
第一版我们自然想到了先利用机器视觉的方法来做边缘检测和行列投影的方式去获取对应的轮廓和元素 。
本文插图
但是这一版本存在很明显的问题：
1）前后景颜色接近会导致无法召回
2）元素叠加时会丢失叠加的元素
例如下图的播放按钮
本文插图
迭代2：引入深度学习
第一版存在不理解语义的问题 ， 我们在第二版引入深度学习去尝试理解语义 。 深度学习 ， 故名思义存在很深的网络 ， 每一层的卷积网络都能获取不同的特征图 ， 多层融合可以很好地提取特征信息 ， 使得机器“理解”语义信息 。
本文插图
迭代3：深度学习融合传统图像处理算法
目标检测方法 ， 无论是一阶段还是二阶段的模式都存在位置定位不准的问题 ， 如下图所示 。 我们尝试将迭代1和迭代2的方法融合 ， 结合深度学习的语义理解能力和传统图像处理精度高的优点 ， 迭代了第三个版本
本文插图
分析结果
版面分析结合深度学习的语义理解能力和传统图像处理精度高的优点 ， 可以得到很高的精确率和召回率 ， 闲鱼千余张版面分析结果如下：
本文插图
【迭代前端智能化：视觉稿图像识别技术难点和思考】
推荐阅读
- 北京商报|供应链金融新画像：主体扩容 向智能化演进
- 风电没有完美，只有迭代，“平价时代”下的风电行业发展路径
- 消防车鹰驾科技打造智能化全景驾驶方案，让消防车智慧出行
- 出前一丁微波炉|老话题：究竟iPhone 11是不是XR的迭代产品，苹果如何定位它们？
- 南康|甘博士：南康家具产业一定要坚持走“智能化”路线
- 科技小数据|基于jQuery+Bootstrap前端框架的.Net快速开发平台
- 笔记印象笔记思维导图功能迭代：新增大纲模式 支持导出图片
- 【苹果】原创 老话题：究竟iPhone 11是不是XR的迭代产品，苹果如何定位它们？
- 『』小米上新79元人气单品，这款颠覆业界的产品，迎来更快的迭代
- 「」数知梦·公交云：从杭州到全国服务公共交通数字化智能化转型升级