tensorflow賦能前端

第一部分俺附、引言

一肥卡、閱讀本篇文章你能得到什么

1、了解tensorflow及關鍵社區(qū)資源事镣；
2步鉴、能夠自主訓練和應用自己想要的模型（主要）；
3璃哟、開闊前端智能化的思考與認知氛琢；

二、什么是對象識別

簡單來說随闪，在圖片或視頻識別出你關注的對象類別阳似、坐標就是對象識別，你可以通過以下視頻加深認知：
1铐伴、Ai采摘機器人：
https://www.bilibili.com/video/BV1YE41147iV/?spm_id_from=333.788.videocard.2
2撮奏、英雄聯盟血條識別：
https://www.bilibili.com/s/video/BV1gs411V7B5
3、車輛識別：
https://www.bilibili.com/video/BV1si4y1b7RP/?spm_id_from=333.788.videocard.6
4当宴、人物識別：
https://www.bilibili.com/video/BV1Es411K7CQ/?spm_id_from=333.788.videocard.11
5畜吊、衛(wèi)星船舶檢測
https://www.bilibili.com/s/video/BV1QC4y187Yx

三、前端為什么需要對象識別能力

D2C

1即供、通過對象識別可以做到D2C定拟，也就是設計稿識別產出代碼；
2逗嫡、他帶給了前端更多可能性青自、效率提升、可控能力驱证；

四延窜、帶著目標看流程

ui-識別.jpg

我簡單訓練了一個antd ui識別模型，可以將圖片中的ui組件坐標和類別識別出來抹锄，同時附帶識別的分數逆瑞，下面將詳細為大家介紹如何訓練一個自己的object_detection模型。

第二部分伙单、object_detection完整實踐

分為以下幾個環(huán)節(jié)：
1获高、搭建環(huán)境；
2吻育、創(chuàng)建數據集念秧；
3、選擇預訓練算法模型布疼；
4摊趾、調整參數開始訓練币狠；
5、驗證訓練成果砾层；
6漩绵、導出并轉換模型給前端使用（瀏覽器/node環(huán)境）；

一肛炮、搭建環(huán)境

參考：https://www.tensorflow.org/install
1止吐、準備最新python環(huán)境；
2铸董、安裝tensorflow2祟印；
3、通過pip安裝tensorflowjs（這個主要用于轉換最終導出的模型供js環(huán)境使用）粟害；
4蕴忆、注意Python Package Installation這一步：https://github.com/tensorflow/models/blob/master/research/object_detection/g3doc/tf2.md
5、可通過conda做環(huán)境管理（可選）悲幅；

注意：直接使用tensorflow2就行了套鹅，沒有太多必要使用tensorflow1；安裝和使用過程中應該會遇到一些pip包缺失的問題汰具，這個需要自己看提示解決卓鹿，其實跟npm類似。建議用主機進行環(huán)境搭建及訓練留荔，配置當然越高越好吟孙。

二、創(chuàng)建數據集

tensorflow對象識別需要使用tfrecord格式數據集
推薦的標注平臺：https://app.labelbox.com/
推薦的制作導出平臺：https://app.roboflow.com/
創(chuàng)建數據集的方式有很多種聚蝶，可以通過python語言創(chuàng)建自定義tfrecords數據集杰妓，也可以通過各類數據集標注平臺；

注：
1碘勉、tfrecords是tensorflow定義的一種數據格式巷挥，直接用于數據訓練；
2验靡、通過收集大量訓練圖片進行人工標注（也有半自動標注倍宾、自動標注，如通過UI組件生產頁面進行自動標注）胜嗓；
3高职、標注的分類數量需要盡可能均勻一些，減少準確性偏差辞州；

這里簡單介紹一下通過平臺標注流程（labelbox+roboflow）：

labelbox 部分

1怔锌、準備一些含ui的圖片，尺寸和名稱沒有特別要求，可以直接截圖保存产禾；
2、在labelbox新建項目并批量上傳圖片牵啦；
3亚情、編輯分類

編輯分類

添加ui分類

4、開始標注（start labeling）

image.png

image.png

image.png

roboflow 部分

1、創(chuàng)建數據集

image.png

2裳瘪、按提示上傳剛剛導出的json文件土浸，根據提示繼續(xù)操作
3、在導入數據集基礎上彭羹，進行自定義圖片處理

image.png

image.png

注意：上文提到過，盡量不要讓標注的分類數量相差太多帕膜。
5枣氧、下載數據集

image.png

三、選擇預訓練算法模型

tensorflow擁有很完善的文檔淫茵，大家直接在對應的官網或github尋找即可途凫！
https://github.com/tensorflow/models/blob/master/research/object_detection/g3doc/tf2_detection_zoo.md

image.png

注意：多數模型都提供了入參（處理后的圖片）和出參（一個tensor格式的數組），不同模型最終產出的結果是不一樣的踢械，但一般都包含對象分數score酗电、對象尺寸及位置boxes、數量等内列，這些需要自行判斷撵术。

四、調整參數開始訓練

image.png

image.png

主要有以下幾個參數需要調整：
1话瞧、num_classes 代表數據集的分類數量嫩与；
2、fine_tune_checkpoint 指向下載預訓練模型中的checkpoint（根據這個文件的model_checkpoint_path來就行）交排；
3划滋、fine_tune_checkpoint_type 改成detection（實際分類模型tf2也有提供，如不改容易出現內存問題中斷訓練）埃篓；
4处坪、label_map_path 都指向導出tfrecords里面生成的就行（其實就是標注的分類）；
5架专、tf_record_input_reader 分別對應train/test目錄的tfrecord文件稻薇；
6、關鍵點train_config配置胶征，batch_size訓練批次（即一次訓練所抓取的數據樣本數量）塞椎、total_steps、num_steps調整睛低，這部分既要考慮機器性能又要考慮數據量案狠，需要根據自己的實際情況而定（位數的調整可能引起成倍的訓練時間）；

注意：
1钱雷、建議找個性能不錯的主機進行訓練骂铁，用自己的mac大概率會失敗（下一步驗證訓練結果會提及）罩抗。
2拉庵、批次大小機器允許的情況可以設置大一些，但也不是越大越好哈套蒂，可以自己另外了解一下钞支；
3、total step根據loss曲線做調整操刀；
4烁挟、二次訓練場景（有了一個訓練好的優(yōu)質模型，里面已經儲備了大量知識骨坑，當前訓練的數據比較少撼嗓，可以嘗試在已有模型基礎上二次訓練），如果不確定建議都從0開始；
5且警、訓練時長受數據粉捻、算法模型、批次斑芜、step杀迹、機器效率等影響，可以通過本地編譯押搪、使用gpu加速等方式減少訓練時間；

五浅碾、驗證訓練成果

執(zhí)行：tensorboard --logdir model_dir
打開啟動的地址：http://localhost:6006/
1大州、觀察loss曲線，判斷step設置是否合理

image.png

image.png

注意：通過以上2點基本可以確定模型是否可用厦画，大家也可以學習一下其他分析技巧，互相分享滥朱。

六根暑、導出并轉換模型給前端使用（瀏覽器/node環(huán)境）

1、exporter_main_v2.py 導出saved_model徙邻；
2排嫌、記得pip install tensorflowjs，然后使用tensorflowjs_converter轉換成前端可用模型
3缰犁、參考coco-ssd的模型導入與識別：https://github.com/tensorflow/tfjs-models/tree/master/coco-ssd

注意：后面其實就是通過@tensorflow/tfjs-core等庫進行模型加載和圖片識別了淳地，也可以參考我這個庫https://github.com/aisriver/tf-ui-detection，里面包括了一些訓練代碼和使用示例帅容。

image.png

第三部分颇象、結合tensorflow的其他前端實踐

可直接投入前端使用的模型和演示：https://github.com/tensorflow/tfjs-models
其他能力：圖像分類、文本識別并徘、語音識別遣钳、視頻識別，并可以直接在社區(qū)找到對應資源麦乞；

前端應用：
組件識別/D2C（如imgcook：https://www.imgcook.com/）蕴茴、
圖表庫識別（大屏設計稿識別）、搜圖（antd的圖表搜索）姐直、
手勢識別（大屏手勢交互：https://www.bilibili.com/video/BV1ET4y1j7SL/?spm_id_from=333.788.videocard.2）荐开、語言指令、惡意評論檢測简肴、敏感圖片/視頻識別晃听、智能家居、物聯領域的環(huán)境安全檢測等

大屏通過手勢進行互動，想想都覺得很酷能扒，而且實現起來也沒有那么難佣渴。

推薦一個直接可用的文本ocr識別

ocr識別比訓練一個對象識別模型更加復雜，需要考慮語言初斑、字體等因素辛润，所以我沒有選擇自己訓練，太麻煩见秤。
推薦使用：https://www.npmjs.com/package/tesseract.js
支持多國家語言

image.png

智能化讓前端擁有更多可能性砂竖！

最后，幫大家整合一下社區(qū)資源

1鹃答、官網：https://tensorflow.google.cn/
2乎澄、模型庫可數據集（重要）：https://www.tensorflow.org/resources/models-datasets?
3、對象識別github（核心）：https://github.com/tensorflow/models/tree/master/research/object_detection?
4测摔、訓練和評估（重要）：https://github.com/tensorflow/models/blob/master/research/object_detection/g3doc/tf2_training_and_evaluation.md?
5置济、js相關已有模型庫及應用（參考）：https://github.com/tensorflow/tfjs-models
6、數據標注平臺（重要）：https://app.labelbox.com/
7锋八、數據集訂制與導出平臺（重要）：https://app.roboflow.com/
8浙于、模型分析工具（了解就行）：https://github.com/lutzroeder/netron
9、tflite在node環(huán)境下使用（我沒有試過）：https://www.npmjs.com/package/node-tflite
10挟纱、文本OCR識別（推薦）：https://www.npmjs.com/package/tesseract.js

github

https://github.com/aisriver