前端如何快速訓練一個表單識別模型？

文 / 阿里淘系 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 開通微博 啦！（微博登陸後可見）

除文章外還有更多的團隊內容等你解鎖🔓