前端代码是怎样智能生成的 - 字段绑定篇

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

---

文/笑翟

概述

imgcook 是专一以各类图像（Sketch / PSD /静态图片）为原材料烹饪的匠心大厨，经过智能化手段将各类视觉稿一键生成可维护的前端代码，含视图代码、数据字段绑定、组件代码、部分业务逻辑代码。智能字段绑定是其中一部分，实现准确识别营销以及其余垂直业务视觉稿的可绑定数据字段，大幅提高模块研发效率，从而强化视觉稿还原结果，其拆分为数据类型规则、是否静态文案、图片绑定和文本字段绑定几个部分。

在 imgcook 大图位置

如图所示，服务位于字段绑定层，包括数据类型规则、是否静态文案、图片字段，文本字段等部分。

(D2C 技术能力分层)

预研

智能字段绑定依赖于语义化层，语义会依据经验为节点作类型标注，标记了这个节点“是什么”后，智能绑定将这个“什么”转为业务域中字段，为了提升准确度，将高置信度规则做为绑定条件。分析以下：

• 语义与字段绑定联系过深
  • 问题：致使的问题语义与字段绑定结果关联过紧，灵活度不够
  • 优化：语义与字段绑定 的断定流程分离，移除置信度概念
• 语义层规则层过硬
  • 问题：现有规则层过硬，以判断为主
  • 优化：硬规则使用分类算法，统必定性对标到w3c的节点标准上
• 语义层机器学习算法使用程度不足
  • 问题：仅使用了实体识别、句法分析和翻译
  • 优化：图像分类使用深度模型，文字分类使用传统机器学习
• 业务域字段频繁变动
  • 问题：映射的字段不一样业务域下不一样
  • 优化：提供不一样配置自身智能绑定映射关系的能力
• 硬规则层扩展
  • 问题：现有规则不够多
  • 优化：根据设计稿，提炼新的规则，扩充规则层

技术方案

字段绑定主要经过文本 NLP 识别和图片分类识别 vdom 中内容来决策映射到数据模型中的字段从而实现智能绑定字段，总体流程入下图

(字段绑定核心流程图)

在字段绑定中主要核心是文本 NLP 识别和图片分类模型，下面着重介绍下。

文本 NLP 识别

调研

淘系设计稿文字全部动态部分分类分析：
业务域下常见的字段和设计稿文字的关系，下面举几个例子

商品名称/标题（itemTitle）
**

• 设计稿文字：产品产品名称最多十二个字、产品名称十二个字、商品名超过十个字显示
• 真实意图文字：Nike AF1 JESTER XX、海蓝之谜睡眠面膜保湿补水神器饱满焕发、Galanz/格兰仕G80F23CN3XL、德国双立人Specials30cm中立炒锅套装、SOPOR/苏泊尔CFXB40FC8028

(商品名称/标题设计稿)

店铺名称（shopName）

• 设计稿文字：店铺名最多八个字、店铺名称店铺、店铺名能够八个字、店铺名称店铺名称最多放十五个字
• 真实意图文字：优衣库体验温馨人生、NIKE海淘精品、匡威官方旗舰店、ZARA服饰旗舰店、Mays官方海外旗舰店

（店铺名称设计稿）
店铺利益点（shopDesc）

• 设计稿文字：店铺利益点八字内、利益点超过十个字显示、利益点仅七个字、利益点能够两条利益点文案最多十个字
• 真实意图文字：满199返19九、进店可享满5折优惠、进店可享满199送19九、冬新品第二件满减包邮、全场满1999送199

（店铺利益点设计稿）

技术选型

朴素贝叶斯

咱们在字段绑定中进行 NLP 识别的一个问题是样本量不够。尤为咱们依赖于租户上传本身的样本对他们特定的业务进行训练，每每租户并无特别大量的数据，在这种状况下，咱们考虑选择朴素本叶斯分类器来进行分类，缘由是朴素贝叶斯公式源于古典数学，其对于后验几率的得出源于先验几率和调整因子，并不依赖于数据量，对小数据和噪声点很是健壮。核心算法是这个贝叶斯公式：

换个形式表达就清楚多了，以下：

最终求 P(类别|特征)便可。

分词

对于每条样本，咱们在分类前须要首先进行特征点提取，在这个问题中也就是对样本进行分词，在机器学习平台中默认使用了 AliWS 来进行分词，AliWS( Alibaba Word Segmenter 的简称)是服务于整个阿里巴巴集团的词法分析系统。被普遍应用于集团的各项业务中。AliWS 的主要主要功能包括：歧义切分，多粒度切分，命名实体识别，词性标注，语义标注，支持用户本身维护用户词典，支持用户干预或纠正分词错误。其中，在咱们的项目中，命名实体识别包括：简单实体，电话号码，时间， 日期等。

模型搭建

咱们主要是使用了机器学习平台的能力进行了快速模型链路的搭建，机器学习平台对于 ALiWS 的分词算法和朴素贝叶斯多分类进行了很好的组件封装，下图是咱们的模型搭建

（文本 NLP 模型训练链路）

从上图看第一步会执行 SQL 脚本从数据库拉取训练样本，而后对样本进行分词操做处理。以后会按找必定比例将样本拆分为训练集和测试集，对于训练集的样本，进行朴素贝叶斯分类器，对于测试集，则是拿到分类器的结果进行预测和评估，最后会把模型结果经过 odps cmd 指令上传存储到 oss。

图片分类模型

调研

从业务场景中，咱们总结出经常使用的八种分类，分别是标、icon、头像、店铺 logo、场景图、白底图、氛围图、高斯模糊图。

• 标:  label 为矩形小图，背景纯色，上有白色短文字点名心智
• icon: ** icon** 大几率圆形。一般是抽象化的符号，
• 头像: ** avator** 一般圆形，中心为人物面部
• 店铺logo: logo 一般用于突出性展现一个概念，文字或抽象化的图片做为主体
• 场景图: picture 最多见的商品图，内容较多，主体一般不为一个。突出商品或人物在真实环境中的表现。
• 白底图: purePicture 主体单一，背景纯白。突出主体自身。
• 氛围图: pureBackground 有明显色系，形状构成的背景图
• 高斯模糊: blurBackground 高斯模糊效果的背景图

在以前的模式下，咱们主要是根据图片大小和图片位置等相关信息经过一些规则来进行图片识别。但这种模式下的识别存在不许和不灵活的问题，好比不一样业务下可能 icon 的大小不尽相同，以及位置等信息存在极大的不肯定性，同时因为基于这些类别进行分析，发现图片自己的内容已经足够区分开来，因此咱们考虑使用深度学习模型进行图片分类识别。

技术选型

CNN 网络

图片分类问题，咱们首选是当前图像处理最热门的 CNN 网络，卷积神经网络的想法来源于人类的视觉原理，而这种经过卷积核分析图片相较于传统的神经网络极大的下降了待训练参数数量。同时，相较于传统的机器学习模型，CNN 在特征提取上表现出了极高的优点。

简单介绍下 CNN 网络如何实现的，在介绍卷积神经网络络前，咱们先看看人类的视觉原理

人类的视觉原理
**

深度学习的许多研究成果，离不开对大脑认知原理的研究，尤为是视觉原理的研究。 1981 年的诺贝尔医学奖，颁发给了 David Hubel（出生于加拿大的美国神经生物学家） 和TorstenWiesel，以及 Roger Sperry。前两位的主要贡献，是“发现了视觉系统的信息处理”，可视皮层是分级的。

人类的视觉原理以下：

(人类的视觉原理)

（人脑进行人脸识别示例，图片来自网络）

对于不一样的物体，人类视觉也是经过这样逐层分级，来进行认知的：

（人类视觉对不一样物体逐层分级，图片来自网络）

咱们能够看到，在最底层特征基本上是相似的，就是各类边缘，越往上，越能提取出此类物体的一些特征（轮子、眼睛、躯干等），到最上层，不一样的高级特征最终组合成相应的图像，从而可以让人类准确的区分不一样的物体。

那么咱们能够很天然的想到：可不能够模仿人类大脑的这个特色，构造多层的神经网络，较低层的识别初级的图像特征，若干底层特征组成更上一层特征，最终经过多个层级的组合，最终在顶层作出分类呢？答案是确定的，这也是许多深度学习算法（包括CNN）的灵感来源。

卷积神经网络(CNN)的基本原理
**
卷积神经网络包括输入层、隐含层、输出层，其中隐含层包括卷积层、池化层和全链接层3类常见构筑，这3类分别负责的分工是卷积层对输入数据进行特征提取，池化层用来大幅下降参数量级(降维、防止过拟合)，全链接层相似传统神经网络的部分，用来输出想要的结果。

（CNN的基本原理）

迁移学习

因为咱们的图片数据主要来自于内部网络，同时受制于计算资源的问题，咱们须要选择一种训练方式来尽量的适应数据量少和计算资源少的问题，因而咱们考虑使用迁移训练。迁移训练是一种基于其余已经训练好的模型进行再训练的技术，基于诸如 ImageNet 等数据集通过大量运算训练出的如 VGG, Resnet 或 MobileNet 等模型自己已经具有了很好的提取图像特征和输出信息的能力，这就比如站在前人的基础上作事情，只须要再这基础上让模型适应咱们的数据就好，这会大大节省训练的成本。

ResNet

在咱们的项目中，咱们考虑在使用 Resnet 的基础上来进行迁移学习。ResNet 最根本的动机就是所谓的“退化”问题，即当模型的层次加深时，错误率却提升了，这是因为深度加深致使的优化变的苦难的问题，残差网络经过短路链接，在网络向后传播梯度的时候，永远不会出现梯度消失的状况，很好的解决了网络过深带来的问题。

Tensorflow 和 机器学习平台

机器学习平台，为传统机器学习和深度学习提供了从数据处理、模型训练、服务部署到预测的一站式服务。机器学习平台底层支持 Tensorflow 框架，同时支持 CPU/GPU 混合调度和高效的资源复用，咱们将借机器学习平台的计算能力和 GPU 资源进行训练，同时将 inference 模型部署至 机器学习平台的在线预测服务 EAS。

模型搭建

• 数据清洗：经过 odps 的大促表爬取了每一个类别约 1000 张图片，可是其中不少图片因为是商家上传的，可能会有无效数据，丢失数据甚至是错误数据，好比咱们在处理这些图片的时候发现不少白底图和商品图是混淆的，咱们将会对这些数据首先进行一轮清理。
• 人工样本：在常见类别中，咱们发现诸如氛围图这类很难爬取到不少，同时这类样本具备明显的特征，因而咱们将根据这种特征进行样本制造。咱们使用了 node-canvas 人工制做了约 1000 张样本，同时，高斯模糊这一类别实际上每每就是一些商品图进行模糊以后的效果，因此咱们对爬取到的商品图使用 opencv 进行高斯模糊，获得样本。
• 数据加强：因为咱们场景的特殊性，咱们不能采用一些传统的数据加强的方式，好比高斯模糊（由于咱们有一类就是高斯模糊），可是咱们进行了一些简单的诸如位移和轻微旋转等数据加强方式。
• TFRecord 转化： TFRecord 是 Tensorflow 官方设计并推荐的一种数据存储格式，每一个 TFRecord 内部存储了多个 TF Example, 可能够想象每一个 TFExmaple 就是对应一组数据 （X，y)，TFExample 实际上是一种 谷歌官方开发的数据框架序列化格式，相似于Javascript 序列化输出的 JSON 或者 Python 序列化输出的 Pickle 等格式，可是 protobuf 体积更小，数据更快，效率更高，从 Tensorflow 源码中也能够随处可见这种数据格式。如下从咱们代码中截取的片断是针对一组数据建立 TfExample 。

其中咱们制定了三个 Feature 咱们以后再训练中将会用到的，image/encoded 就是图片的 bytes 流，label 是分类的类别，image/format 是图片类型，将会在以后 slim.tfexample_decoder.Image 函数解析 Tfrecord 中使用。

模型构建

迁移训练模型创建

TF-slim 是 Tensorflow 轻量级的高阶 API, 能够很方便的定义，训练和评估模型。TF-slim 官方提供了不少知名的CNN 网络的预训练模型。用户能够经过官方 Github 进行模型参数的下载，同时调用 tensorflow.contrib.slim.net 中的方法加载模型结构，如下是咱们定义的 predict 函数，此函数将在训练时和预测时提供定义流图中通过模型的部分。 注意预训练模型只提供了卷积层的实现，为符合咱们的分类问题，咱们还须要把输出的卷积结果压平，同时加一层全连接层加 softmax 函数进行预测。

模型训练

咱们经过 slim 提供的 assign_from_checkpoint_fn 函数加载下载的 mobileNet 预训练模型的参数，使用以前定义的数据流图进行训练，同时在训练的过程当中输出 checkPoint 和 相关 Log

模型预测

在模型训练期间，咱们会定时保存训练数据，保存数据主要经过 Tensorflow 的  tf.train.Saver 相关方法来实现的，Tensoflow 的保存会生成如下四种文件类型：

• .meta 文件：保存了模型的数据图
• .ckpt.data 文件：保存了模型变量的信息，包含 weights, bias 等信息
• .ckpt.index：描述了张量的 key 和 value 的对应信息
• .checkpoint：保存的模型和模型的相关信息

实际上能够看到模型保存时会生成至关多的信息，而其中的不少信息其实在使用模型进行预测时并非必须的，那么咱们就须要对导出的记录信息进行优化，实现高性能的预测。

首先，咱们将对保存的模型进行冻结，Tensorflow 模型冻结是指把计算图的定义和模型权重合并到同一个文件中, 而且只保留计算图中预测须要的部分，而再也不须要训练相关的部分，下面咱们的代码片断就是将计算图中全部的变量转化为常量。

产品方案

咱们考虑到不一样业务的数据模型和智能识别及绑定的字段不同，所以实现了一套能够在线新增分类并配置样本，在线训练模型生成服务，而后经过配置方式使用。

流程图

（产品流程图）

还原模块自动绑定效果

（字段绑定效果）

将来展望

• 对不一样场景静态文案分析，咱们分析影响绑定准确率的一个部分缘由是不一样设计和模块里的静态文案多样性，致使的识别出符合预期的结果，后面咱们会着重针对不一样业务场景静态文案梳理，识别前对静态文案过滤，同时完善通用配置及识别能力。
• 对 NLP 识别和图片分类识别模型优化，对识别绑定不许的数据进行反馈召回，再对反馈召回的数据分析从新优化识别模块和链路，最终提升绑定准确率。
• 字段标准化推动

---

更多推荐：

• imgcook 官网  体验一键智能生成代码
• imgcook 知乎专栏  为你带来前端智能化前沿资讯
• imgcook 掘金专栏  设计稿智能生成代码
• 钉钉交流

---

欢迎加入咱们： [社招/校招] [杭州] [阿里淘系技术部-频道与 D2C 智能] 前端招聘：此时此刻，非我莫属！