点击这里，查看样本构造、数据增强、算法与模型等重要内容

简介：作为阿里经济体前端委员会四大技术方向之一，前端智能化项目经历了 2019 双十一的阶段性考验，交出了不错的答卷，天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成。在此期间研发小组经历了许多困难与思考，本次 《前端代码是怎样智能生成的》 系列分享，将与大家分享前端智能化项目中技术与思考的点点滴滴。

作为阿里经济体前端委员会四大技术方向之一，前端智能化项目经历了 2019 双十一的阶段性考验，交出了不错的答卷，天猫淘宝双十一会场新增模块 79.34% 的线上代码由前端智能化项目自动生成。在此期间研发小组经历了许多困难与思考，本次 《前端代码是怎样智能生成的》 系列分享，将与大家分享前端智能化项目中技术与思考的点点滴滴。

概述

无线大促页面的前端代码中，存在大量的业务模块或业务组件（下文统称业务模块），即具有一定业务功能的代码单位。获取页面中业务模块的信息之后，可以用于复用代码、绑定业务字段等后续功能。因此从视觉稿识别出业务模块，在前端智能化领域中成为用途广泛的功能环节。

与面向中后台的基础组件识别和表单识别功能不同，业务模块识别主要面向无线端页面，并且来源主要是视觉稿。相对的，业务模块 UI 结构更加复杂，并且视觉稿提供的内容已经有较多可辨别的信息（如文本内容、图片尺寸等），因此我们没有直接使用图片深度学习的方案，而是从视觉稿产出的 DSL 中提取预定义的特征值，用传统学习多分类的方法来实现模块识别。本识别功能最终返回业务模块的类别、视觉稿中的位置等信息。

总体功能如下图所示。包括：

• 样本构造，根据用户配置和自定义的数据增强规则对视觉稿进行 UI 层的增强，以得到视觉多样化的样本。然后在定义好业务字段的基础上，进行特征值抽取并存储。
• 算法选择，目前提供的都是传统机器学习方法中的多分类算法。
• 模型实现，基于集团机器学习平台实现模型搭建及相关算法工程，做到自动化训练与部署。
• 接口提供，模型对外提供预测识别服务以及结果反馈服务。

（总体功能）

所在分层

如下图所示，我们的业务模块识别服务位于物料识别层，为视觉稿导出的 DSL 提供进一步的业务定制化的识别能力，在后续代码生成的过程中渗透到字段绑定、业务逻辑等功能之中。

（D2C 功能分层）

样本构造

关键字：机器学习/深度学习 存储 JSON 分布式计算 算法 前端开发 双11 MaxCompute 计算机视觉 数据格式