案例分享 | 前端代码是怎样智能生成的 - 字段绑定篇

文 / 笑翟 阿里巴巴

原文：

概述

imgcook 是专注以各种图像（Sketch / PSD / 静态图片）为原材料烹饪的匠心大厨，通过智能化手段将各种视觉稿一键生成可维护的前端代码，含视图代码、数据字段绑定、组件代码、部分业务逻辑代码。

智能字段绑定是其中一部分，实现准确识别营销以及其他垂直业务视觉稿的可绑定数据字段，大幅提升模块研发效率，从而强化视觉稿还原结果，其拆分为数据类型规则、是否静态文案、图片绑定和文本字段绑定几个部分。

在 imgcook 大图位置

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

D2C 技术能力分层

预研

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

语义层规则层过硬

语义层机器学习算法使用程度不足

业务域字段频繁变更

硬规则层扩展

技术方案

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

字段绑定核心流程图

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

文本 NLP 识别

调研

淘系设计稿文字所有动态部分分类分析：

业务域下常见的字段和设计稿文字的关系，下面举几个例子。

1. 商品名称/标题（itemTitle）

商品名称/标题设计稿

2. 店铺名称 (shopName)

店铺名称设计稿

3. 店铺利益点 (shopDesc)

店铺利益点设计稿

技术选型

1. 朴素贝叶斯

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

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

最终求 P（类别 | 特征）即可。

2. 分词

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

模型搭建

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

文本 NLP 模型训练链路

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

图片分类模型

调研

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

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

技术选型

1. CNN 网络

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

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

人类的视觉原理

深度学习的许多研究成果，离不开对大脑认知原理的研究，尤其是视觉原理的研究。

1981 年的诺贝尔医学奖，颁发给了 David Hubel（出生于加拿大的美国神经生物学家） 和TorstenWiesel，以及 Roger Sperry。前两位的主要贡献，是“发现了视觉系统的信息处理”，可视皮层是分级的。

人类的视觉原理如下：

人类的视觉原理

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

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

人类视觉对不同物体逐层分级，图片来自网络

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

那么我们可以很自然的想到：可不可以模仿人类大脑的这个特点，构造多层的神经网络，较低层的识别初级的图像特征，若干底层特征组成更上一层特征，最终通过多个层级的组合链接放在图片上层代码，最终在顶层做出分类呢？答案是肯定的，这也是许多深度学习算法（包括CNN）的灵感来源。

卷积神经网络(CNN)的基本原理

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

CNN的基本原理

2. 迁移学习

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

3. ResNet

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

4. TensorFlow 和 机器学习平台

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

模型搭建

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

1. 模型构建

迁移训练模型建立

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

2. 模型训练

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

3. 模型预测

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

实际上可以看到模型保存时会生成相当多的信息，而其中的很多信息其实在使用模型进行预测时并不是必须的，那么我们就需要对导出的记录信息进行优化，实现高性能的预测。

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

产品方案

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

流程图

产品流程图

还原模块自动绑定效果

字段绑定效果

未来展望