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

 

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

概述

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

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

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

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

 

（总体功能）

所在分层

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

 

（D2C 功能分层）

样本构造

机器学习是基于大量真实数据的训练过程，一个好的样本库可以让你的模型训练事半功倍。我们的样本来源是视觉稿（Sketch），但同一个模块的 Sketch 视觉稿可能只有寥寥几张，可获取的样本数量过少。因此首先要解决量的问题。

数据增强

为解决样本数量问题，我们采用了数据增强的方法。数据增强有一套默认的规则，同时也是可配置的。用户可自行根据视觉稿上各个元素在真实场景中可能发生的变化，如“是否可隐藏”，“文本字数可变范围”等维度来调整属性，产出自定义的配置项。因此样本制作者可以清晰的知道自己所造样本侧重的差异点在哪里。

我们根据这些配置项对属性进行发散、组合，生成大量不同的视觉稿 DSL。这些 DSL 之间随机而有规律地彼此相异，据此我们可以获得大数量的样本。

增强配置的界面如下图所示，左侧与中部是 DSL 树及渲染区域，右侧就是增强配置的区域。配置项由以下 2 部分组成：

• 增强属性：尺寸、位置、隐藏、前景背景色、内容
• 增强方式：连续范围、指定枚举值

 

（样本生成的界面）

文章进行了部分删减，完整内容请点击：https://developer.aliyun.com/article/742060?utm_content=g_1000099387

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