前端如何快速训练一个表单识别模型？

文 / 阿里淘系 F(x) Team - 天可

本文将使用 Pipcook 快速训练一个表单识别模型，并用该模型去提高表单的开发效率。

痛点

在前端还原页面的过程当中，会遇到这样一个痛点：设计师在设计稿里画了一个表单，你去 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：

---

淘系前端-F-x-Team 开通微博 啦！（微博登陆后可见）

除文章外还有更多的团队内容等你解锁🔓