天花板級(jí)前端工程師才能玩轉(zhuǎn)的工具？前端AI應(yīng)用集合重磅開(kāi)源

【導(dǎo)讀】

在前端應(yīng)用人臉識(shí)別、人像分割等 AI 能力已經(jīng)廣泛分布于各類場(chǎng)景中，其在低延遲、數(shù)據(jù)隱私保護(hù)、服務(wù)資源節(jié)省等方面都有明顯的應(yīng)用優(yōu)勢(shì)。隨著人工智能技術(shù)的不斷發(fā)展，越來(lái)越多的深度學(xué)習(xí)模型在保持超輕量的同時(shí)也擁有高精度的特點(diǎn)，使得前端可實(shí)現(xiàn)的 AI 應(yīng)用范圍不斷擴(kuò)大。

近期，百度飛槳團(tuán)隊(duì)聯(lián)合飛槳開(kāi)發(fā)者專家（PPDE） 陳千鶴，發(fā)布了支持一站式 AI 能力的前端應(yīng)用集合，大幅提升了 AI 模型的易用性和可移植性。主要特色包括：

• 提供視覺(jué)模型7種、web 端 demo 和小程序端 demo 共計(jì)6個(gè)，覆蓋人臉檢測(cè)、文字識(shí)別等經(jīng)典計(jì)算機(jī)視覺(jué)技術(shù)應(yīng)用方向；

• 提供開(kāi)箱即用 demo 和 npm 包調(diào)用兩種方式，靈活易用；

• 支持自定義修改前后處理參數(shù)、更換模型等定制化需求。

話不多說(shuō)，先看 demo！

web 前端應(yīng)用集合：包括人臉檢測(cè)、人像分割、手勢(shì)識(shí)別、1000種物品識(shí)別。

人臉檢測(cè)

OCR 文字檢測(cè)與識(shí)別動(dòng)圖

小程序應(yīng)用：

圖像識(shí)別小游戲

demo 傳送門：

https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/

 詳細(xì)的使用流程 

■ demo 使用

整體優(yōu)化后的計(jì)算機(jī)視覺(jué)網(wǎng)頁(yè)端 demo 體驗(yàn)步驟十分簡(jiǎn)單。

■ 進(jìn)階使用

以 PP-OCR js 模型為例，只需要通過(guò)指令 npm install@paddle-js-models/ocr，使用方式如下：

其中，ocr.recognize()函數(shù)的輸入?yún)?shù) img 是 HTML ImageElement 格式的數(shù)據(jù)。

如果要在前端項(xiàng)目中直接使用其他 demo 中的 AI 能力，只需要在 https://www.npmjs.com/search?q=paddle-js-models 中選擇相應(yīng)的包，通過(guò)指令 npm install 包名即可完成安裝。

>> 更換模型

參考如下步驟：

步驟1：將模型轉(zhuǎn)成 js 格式，參考如下命令：

步驟2：修改代碼替換默認(rèn)的模型。以 OCR demo 為例：

注：

OCR 文本識(shí)別 demo 模型部署的源代碼鏈接：

https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/web_demo/demo/src/pages/cv/ocr/TextRecognition/

ocr.init()函數(shù)有兩個(gè)參數(shù)，分別為檢測(cè)模型參數(shù)和識(shí)別模型參數(shù)，源碼參考：

https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/web_demo/packages/paddlejs-models/ocr/src/index.ts#L52

>> 自定義前后處理參數(shù)

以 OCR 文本檢測(cè) demo 為例，期望修改文本檢測(cè)后處理的參數(shù)實(shí)現(xiàn)擴(kuò)大文本檢測(cè)框的效果。

修改前：

參數(shù)調(diào)整前，文本檢測(cè)效果如下：

通過(guò)給 detect()函數(shù)傳入文本檢測(cè)的后處理參數(shù)，修改后代碼如下：

注：

OCR 文本檢測(cè) demo 模型部署的源代碼鏈接：

https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/web_demo/demo/src/pages/cv/ocr/TextDetection/

擴(kuò)大檢測(cè)框后，重新運(yùn)行 demo，文本檢測(cè)效果如下：

有關(guān) PP-OCR js 模型預(yù)測(cè)的細(xì)節(jié)，參考以下鏈接。

https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js/web_demo/packages/paddlejs-models/ocr

更多 demo 應(yīng)用方法可以在 FastDeploy 中查閱。

https://github.com/PaddlePaddle/FastDeploy/tree/develop/examples/application/js

FastDeploy 簡(jiǎn)介

FastDeploy 是一款易用高效的推理部署工具箱。已支持 TensorRT、Paddle Inference、OpenVINO、ONNX Runtime、Paddle.js 等（Paddle Lite、RKNN等開(kāi)發(fā)中），多硬件統(tǒng)一 API 部署體驗(yàn)；覆蓋業(yè)界 CV、NLP、Speech 等熱門 AI 模型60+，提供開(kāi)箱即用的部署體驗(yàn)。

 深度學(xué)習(xí)模型優(yōu)化經(jīng)驗(yàn)揭秘 

由于前端環(huán)境和計(jì)算資源限制，在前端部署深度學(xué)習(xí)模型時(shí)，我們對(duì)模型的性能有著更嚴(yán)格的要求，簡(jiǎn)單來(lái)說(shuō)，模型需要足夠輕量化。理論上模型的輸入 shape 越小、模型大小越小，則對(duì)應(yīng)的模型的 flops 越小，在前端運(yùn)行也能更流暢。經(jīng)驗(yàn)總結(jié)，使用 Paddle.js 部署的模型存儲(chǔ)盡量不超過(guò)5M。

本次發(fā)布的 demo 中的模型性能數(shù)據(jù)如下表所示。其中，主要針對(duì) PP-OCRv3 模型進(jìn)行了優(yōu)化，因其涉及多個(gè)模型的串聯(lián)（文本檢測(cè)和文本識(shí)別），對(duì)單個(gè)模型的性能要求更嚴(yán)格，通過(guò)通道裁剪、知識(shí)蒸餾等技術(shù)進(jìn)一步進(jìn)行模型輕量化后，整體系統(tǒng)存儲(chǔ)從 12.3M 壓縮至4.3M，在 Mac M1 機(jī)器上使用 Google Chrome 測(cè)試推理速度僅需350ms，流暢度顯著升級(jí)，相比舊版本模型壓縮65%，預(yù)測(cè)速度提升87.5%。

注：flops 統(tǒng)計(jì)不包含前后處理

 加入 FastDeploy js 技術(shù)交流群 

入群福利

• 第一時(shí)間獲取 FastDeploy 產(chǎn)品最新信息及學(xué)習(xí)資料

• 近距離與各企業(yè)部署大佬互動(dòng)交流

• 近距離與 FastDeploy 研發(fā)同學(xué)交流討論

入群方式

微信掃描下方二維碼，關(guān)注公眾號(hào)，填寫問(wèn)卷后進(jìn)入微信群

▎更多閱讀

飛槳官網(wǎng)：

https://www.paddlepaddle.org.cn

FastDeploy 項(xiàng)目地址：

https://github.com/PaddlePaddle/FastDeploy

PaddleOCR 項(xiàng)目地址：

GitHub: https://github.com/PaddlePaddle/PaddleOCR

Gitee: https://gitee.com/paddlepaddle/PaddleOCR