Icon 如何在设计稿生成代码中被识别？- Imgcook 3.0 系列

背景介绍

前端页面的设计与展示都离不开图片，在 imgcook 中，许多图片的 icon 更图片中非常重要的一环。icon 往往由简单的线条组成，并有鲜明的含义，因此它被广泛用于通用行动点的表述 —— 主页、搜索、设置、返回、用户，等等。除此以外，icon 既能化抽象为具象，解决文字表达的枯燥性；又能因为它高度规范化的设计获得较强的语义性。

在 imgcook 全链路中，我们统计到平均每个月都有约 6,156 个 icon 被检测出；平均每个新增模块都使用了约 2.67 个 icon。因此，了解设计稿中用了哪些 icon，某种程度上就知晓了此 icon 范围内的语义信息，由此可以帮助 imgcook 做更多的智能化判断。基于这一点，icon 语义化这一步骤就显得十分重要了。

问题分析

在以往的 imgcook 链路中，我们已经采用了 resnet 对约 80+ 的 icon 进行分类识别和语义信息的提取；我们也通过图片聚类的方式将相似的图片归为一组从而根据相似性推测 icon 的语义信息。不过，在线上验证后效果并不是特别可观：

首先，icon 的类别很多，数量也很庞大，使用模型直接训练的效果不会特别理想，因此需要一个科学的分类与样本管理方法从而提升分类与样本的质量。

其次，虽然绝大多数 icon 都遵循一定的设计原则（简单、直观），但 icon 设计依旧是个极富设计性的过程，所以 icon 的样式也在不断地升级。因此，我们需要我们的数据与模型能具备更强的覆盖面与泛化能力。

综上，icon 的识别与语义化是 imgcook 整个链路中不可或缺的一环，而对于 icon 识别的优化不仅仅优化模型，更要从数据源头和可迭代性入手，我们需要让模型具有自我迭代能力，所以对 icon 识别模型进行了从 L3 到 L4 的能力升级。