文 / 阿里淘系 F(x) Team - 天可
注：目前 pipcook 2.0 已发布，请翻阅 20秒完成机器学习模型训练和部署? 说说 Pipcook 2.0
本文将使用 Pipcook 1.0 版本快速训练一个表单识别模型，并用该模型去提升表单的开发效率。
痛点
在前端还原页面的过程中，会遇到这样一个痛点：设计师在设计稿里画了一个表单，你去 AntD 或者 Fusion 库里找了一个差不多的表单，把代码拷贝过来改改。这样不仅效率低，而且很麻烦。
那么能不能快捷一点，截图就可以生成表单代码呢？答案是 Yes。
解法
我们可以训练一个目标检测模型，模型输入是表单截图，输出是所有表单项的类型和坐标。这样只需要将设计稿中的表单截图，就可以拿到它里面所有的表单项，配合文字识别出的 Label，就可以生成表单代码了。比如，笔者之前就实现了这样的功能：截图生成表单代码。
图中的红框是目标检测模型检测出的表单项，绿框是文字识别接口识别出的文字。两者结合，经过一些计算，就可以生成表单协议或者代码了。
文字识别是通用的，我们就不介绍了。那么表单项检测功能是怎么做出来的呢？下面就是总体步骤：
- 样本：收集成千上万张表单图片，并对里面的表单项进行打标。
- 训练：将样本喂给机器去学习。
- 预测：训练好之后，将一张新的表单图片传给模型，模型就可以预测出标签了。
下面会详细介绍每一步怎么做。
样本
这里的表单识别样本是通用的目标检测样本，打标方法请参考前面的章节。为了方便，这里为大家提供一份表单识别样本数据集。
http://ai-sample.oss-cn-hangzhou.aliyuncs.com/pipcook/datasets/mid/mid_base.zip
训练
接下来我会演示，如何使用 Pipcook 运行样本页生成海量样本，并进行目标检测模型训练。
介绍下Pipcook
Pipcook 是淘系技术部 D2C 团队研发的一款面向前端开发者的机器学习应用框架，我们希望 Pipcook 能成为前端人员学习和实践机器学习的一个平台，从而推进前端智能化。 Pipcook（ github.com/alibaba/pip… ） 是个开源的框架，欢迎大家一起来共建。
安装
确保你的 node 在 12 版本及以上。然后执行：
// 同时安装 cnpm 主要是为了加速
npm i @pipcook/pipcook-cli cnpm -g --registry=https://registry.npm.taobao.org
接下来初始化：
pipcook init --tuna -c cnpm
pipcook daemon start
配置
表单识别就是个目标检测任务，那么你可以新建一个这样的配置文件，格式是个json文件。不用担心，这个配置文件大多参数都不需要改，只需要修改极少数参数即可。
form.json
{
"plugins": {
"dataCollect": {
"package": "@pipcook/plugins-object-detection-pascalvoc-data-collect",
"params": {
"url": "http://ai-sample.oss-cn-hangzhou.aliyuncs.com/pipcook/datasets/mid/mid_base.zip"
}
},
"dataAccess": {
"package": "@pipcook/plugins-coco-data-access"
},
"modelDefine": {
"package": "@pipcook/plugins-detectron-fasterrcnn-model-define"
},
"modelTrain": {
"package": "@pipcook/plugins-detectron-model-train",
"params": {
"steps": 20000
}
},
"modelEvaluate": {
"package": "@pipcook/plugins-detectron-model-evaluate"
}
}
}
需要设置一下 dataCollect.params 里的参数：
url：你的样本地址。
当然你也可以直接运行这个配置文件，可以训练出一个表单检测模型。
运行
由于目标检测模型计算量巨大，所以你可能需要一个 GPU 机器，否则训练时间将会是好几周……
pipcook run form.json --tuna
训练时间可能有点长，去吃个午饭或者去写点业务代码吧！
训练完成后，会生成一个模型在 output 目录里。
预测
训练完成后，会在当前目录生成 output，这是一个全新的 npm 包，那么我们首先安装依赖：
cd output
// BOA_TUNA=1 主要是为了国内加速
BOA_TUNA=1 npm install
安装好环境之后，回到根目录，并下载一张测试图片为 test.jpg
cd ..
curl https://img.alicdn.com/tfs/TB1bWO6b7Y2gK0jSZFgXXc5OFXa-1570-522.jpg --output test.jpg
最后我们就可以开始预测了：
const predict = require('./output');
(async () => {
const v1 = await predict('./test.jpg');
console.log(v1);
// {
// boxes: [
// [83, 31, 146, 71], // xmin, ymin, xmax, ymax
// [210, 48, 256, 78],
// [403, 30, 653, 72],
// [717, 41, 966, 83]
// ],
// classes: [
// 0, 1, 2, 2 // class index
// ],
// scores: [
// 0.95, 0.93, 0.96, 0.99 // scores
// ]
// }
})();
注意，给出的结果包含三个部分：
- boxes: 此属性是一个数组，每个元素是另一个包含四个元素的数组，分别是 xmin, xmax, ymin, ymax
- scores：此属性是一个数组，每个元素是对应的预测结果的置信度
- classes：此属性是一个数组，每个元素是对应的预测出来的类别
可视化后的 boxes、scores、classes：
