移動AI系列-百度Paddle.js在Web前端中的探索和實踐

1、背景

隨着百度AI戰略的逐步深刻，百度AI能力正在積極地佈局和滲透在更多的應用領域，對於不一樣的應用場景有着不一樣的AI能力解決方案，爲了在瀏覽器等Web前端場景中應用百度AI能力，百度相關技術團隊孵化出百度Paddle.js 用於幫助前端工程師更加簡單地將智能化因素引入網頁中，讓Web前端能夠實現更多的能力。

2、爲何要在前端引入AI能力

經過瀏覽器來訪問網頁應用瀏覽內容具備更低的門檻和更普遍的傳播度，可以在網頁中融入智能化因素將會爲用戶體驗插上一對騰飛的翅膀。傳統的智能化效果因爲模型大小、設備機器算力的問題，多數是放在服務端實現的，可是這須要屢次與服務器進行網絡上的信息交互，用戶體驗被打折。Web前端做爲互聯網中離用戶最近的一環，也但願藉助 AI 的能力，給用戶建立更好的體驗。隨着硬件設備的快速更新換代，直接在網頁中實現的智能化效果逐漸進入人們的視線，相比雲端智能，端智能具備低延時、保護數據隱私、節省雲端計算資源等優點，端智能的實時性優點更加凸顯。

對於Web前端而言，算力的穩步加強、算法逐步成熟以及創新驅動的應用場景都在影響着端智能演進，而瀏覽器等載體的自身能力無疑是影響Web前端創新場景的最重要的因素。

其中WebRTC使得Web上支持原生的視頻通話能力，視頻流實時獲取成爲可能；WebXR能夠利用 GPU 能力處理複雜和 3D 圖形 ；Web Assembly能夠將其它語言生態引入 Web，Service Workers經過後臺任務來支持離線以及提高性能。這些瀏覽器等載體對於設備底層能力的極大化擴展和對CPU、GPU甚至NPU的計算能力的合理調用都爲Web端實現複雜的創新應用提供了幫助。

W3C 也成立了機器學習的社區組，試圖提供原生的 Web 神經網絡 API，這是爲神經網絡理論硬件加速設計的底層接口，用例包括：人物識別、語義診斷、情緒分析、圖像自動分類等等，目標是能夠直接使用預訓練的深度神經網絡模型。

能夠預期的是，基於Web端也會出現愈來愈多有趣、好玩的一些創新應用，那麼什麼樣的場景適合使用Web AI呢？這裏有幾個案例與你們分享。

3、幾個Web前端案例

| 首先，用戶Web端計算不只能夠節省服務端的計算壓力，並且能夠提供很是快速的響應，好比這個咱們在網頁中實現的基於人臉跟蹤和表情識別的應用效果就很是適合這個場景，打開手機百度APP搜索「自拍測人設」就會發現這個應用，在這個網頁應用中要求必須在可以實時捕捉屏幕內容進行框選，須要極其快速的計算能力來識別和追蹤人臉。面向全網用戶使用，那麼瀏覽器內實現無疑是最佳方案，保證分享出去後其餘用戶也可以無差異的直接使用，而不須要安裝指定的應用。

| 其次， AI能力可以實現一系列複雜的交互，打造「神奇」的網頁，能夠說有了Web AI新技術，能夠創造全新的交互方式。這方面的例子有不少，好比這個肢體交互可以切換背景的場景就很是具備驚喜感，經過Web AI實如今網頁上人像分割的例子，可以將人像從複雜的場景中分離出來，結合肢體識別能力實現了非傳統的網頁交互效果。

| 不一樣於將用戶信息上傳到服務端作處理，Web AI可以很好的保護用戶的隱私性，它能夠在每一個用戶數據不離開手機的狀況下對數據進行推理預測計算，也可以有效的對用戶瀏覽的數據作出智能化的「控制」。例如，對於黃反圖片的在線斷定和過濾也能夠在用戶端實現。

總的來講，在用戶Web端處理具備信息更好的隱私性，省去網絡交互的更快實時性計算，以及硬件飛速發展的更強計算能力是Web AI獨特的優點。

4、Paddle.js前端智能化介紹

在Web前端實現智能化，從整個鏈路上面看，會有數據採集和算法模型設計工做，在服務端訓練和產出模型。可是這種模型每每不可以直接被瀏覽器使用，還須要對模型進行壓縮、Web格式轉化和模型部署，最後前端經過各類方式請求獲取模型而且進行在線推理才能在具體的業務場景下使用。整個鏈路較長，涉及雲端和Web前端，離線處理和在線運行時，甚至須要算法工程師和移動開發工程師配合才能完成相關應用落地。

能不能對前端工程師更友好一些，能不能更加容易靈活的實現Web智能化應用？爲了在瀏覽器運行的網頁中實現AI效果，百度推出了本身研發的JavaScript實現的輕量級在線推理引擎Paddle.js，依靠強大豐富的百度Paddle模型庫，結合工具鏈和在線推理庫低成本地將模型轉化成Web可用格式，運行在瀏覽器等Web前端載體中，下降Web前端開發者在網頁中使用AI能力的門檻。受益於百度AI戰略的影響，百度Paddle.js逐漸發展成爲一個執行性能優秀、瀏覽器兼容性良好的內部網頁智能化標準，而且應用於多個在線項目，例如人臉檢測、手勢識別、人像分割、黃反檢測和Web AR的實踐中。

目前在網頁上實現AI的推理引擎很少。性能方面，百度Paddle.js藉助於GPU Backend可以在瀏覽器中使用硬件加速快速運行，並且還充分參與了Web NN標準化，在手機百度app提供的特殊加速支持得到更快的執行速度；代碼體積方面，Paddle.js的靜態代碼體積很是的小，僅有201KB；易用性方面，paddlejs是一個開箱即用的前端在線推理引擎，它提供了豐富的能力封裝，無需其餘依賴便可完成目標效果。

Paddle.js主要部分包括：模型工具鏈、推理先後處理、用戶工具鏈、測試框架和推理引擎自己。

|模型工具鏈：Paddle.js依靠與Paddle等訓練框架進行模型訓練，或者使用Paddle hub上豐富的模型庫，由於在瀏覽器中須要使用到瀏覽器友好的模型格式，經過Paddle.js提供的模型工具鏈對模型格式進行轉換和離線優化，一方面減小模型體積，一方面經過各類優化技術優化模型性能，從模型根本上優化神經網絡結構，進行算子替換、算子融合、網絡分塊、模型壓縮等初步數據優化處理。

|輸入輸出處理：也叫作推理先後處理，對於前端工程師來講，圖像、視頻流等數據處理是一件很麻煩的事情，知識專業度比較高，Paddle.js提供了強大的輸入輸出處理能力以減小這部分開發的成本，Web前端工程師能夠直接調用相應的推理先後處理方法將數據高效進行處理，使得工程師能夠專一於業務的開發。

|在線推理：在線推理部分包括神經網絡加載、神經網絡在線優化、算子分配與數據初始化、預熱與執行推理計算等部分。爲了保證在瀏覽器等Web前端環境下可以應用在視頻級的場景下，藉助於硬件加速技術，結合模型量化壓縮方案，代碼深度精簡，而且在線推理部分採用了多種技術手段針對神經網絡執行效率和算子計算性能進行了系統性的優化，保證達到在瀏覽器上實時執行效果絲滑流暢。

5、AI能力的簡單使用

不一樣於其餘的實現方式，在網頁中實現AI能力其實能夠作到很是的簡單，不依賴於發佈版本，能夠知足高速迭代產品常常更新的特色。並且不須要集成、編譯等複雜的開發形式，只須要引入Paddle.js就可讓你的網頁擁有AI能力，經過網絡加載AI模型，簡單的進行輸入和輸出的業務開發就能夠實現很是智能化的效果。接下來，咱們一塊兒在網頁上實現一個具備AI能力的頁面應用。

第一步，引入代碼庫

經過npm i 安裝Paddle.js代碼庫，在代碼中import引入便可，也能夠直接經過script的src引用Paddle.js，在你的應用中建立Paddle對象實例後你的代碼就可使用AI能力了。

import Paddle from paddlejs
const paddle = new Paddle();

第二步，加載模型

模型是AI能力最重要的部分之一，經過加載模型使得網頁應用能夠執行相應的AI能力，不一樣的模型體積不一樣，爲了可以較快的加載模型，Paddle.js 支持模型的分片並行化加載和利於網絡傳輸的數據壓縮能力。

paddle.load()

第三步，設置輸入

對於在網頁上進行在線推理預測須要通常須要設置輸入內容，後續的交互依靠於輸入處理的結果，特別是實時場景須要將輸入內容處理成符合要求的標準輸入數據並控制傳入節奏，這些對於業務開發都是很是具備挑戰的，Paddle.js提供了對於輸入數據的處理的封裝，將這部分工做簡單化，甚至對於業務開發來講只是簡單的傳入數據獲取結果就能夠，提高了易用性。

const input = io.process({});

第四步，執行並輸出效果

將輸入傳入並執行Paddle對象的execute方法解能夠很快地獲得執行結果，並且開發者根本不須要人爲地去設定使用具體的backend去進行計算，在線推理部分會自動根據用戶場景選擇最快的方式進行計算。

paddle.execute(input);

將計算結果放入相應的推理後處理方法就會很容易地獲得目標效果，在瀏覽器網頁中實現智能化的能力只須要這幾個步驟，使用門檻很是的低。具體的完整詳細的應用開發能夠訪問paddle.js項目，上面有不少JavaScript實現智能化的例子。

6、將來展望

對於將來的發展，隨着硬件設備的性能大幅提高，瀏覽器內的智能化效果將會愈來愈流暢，可以完成的效果也會愈來愈複雜，Paddle.js的後續發展也會主要立足於三個方面點來看。

• 第一，繼續優化瀏覽器內執行速度，增長算子覆蓋，能力延伸到更加複雜的多模型執行場景；
• 第二，提供更加完善的用戶工具鏈，繼續下降用戶的使用成本；
• 第三，把握將來的趨勢，面向將來作技術佈局。

最後，Web AI勢必會對web發展產生深遠的影響，期待能和你們一塊兒打造功能完善，性能極致，簡單易用的web端在線推理引擎，歡迎訪問Paddle.js開源項目（https://github.com/PaddlePadd...），多提寶貴意見。

Release Note

Paddle.js是百度Paddle的web方向子項目，是一個運行在瀏覽器中的開源深度學習框架。Paddle.js能夠加載訓練好Paddle.js模型，或者將Paddle.fluid模型經過Paddle.js的模型轉換工具變成瀏覽器友好的模型進行在線預測使用。

兼容性

• 支持在webGL2.0和webGL1.0的瀏覽器上運行。例如chrome, firefox, safari以及移動端的Baidu App, QQ瀏覽器等。
• 支持NCHW與NHWC格式的模型數據計算。

詳細請參考：https://github.com/PaddlePadd...

插播小廣告~~~

百度APP端研發團隊招人啦，簡歷直推老闆！🎉🎉🎉

歡迎同窗們加入百度app團隊，咱們崇尚務實、自由、開放的技術文化。這裏基礎能力完善，大牛帶路、專家雲集。加入咱們吧！！一塊兒成長，影響行業生態！！

目前有Android/iOS/FE北上深各級別崗位，能夠經過百度招聘官網查詢相關職位，或直接發簡歷到xiatian05@baidu.com

---

本文做者：
wangqun

---

在微信-搜索頁面中輸入「百度App技術」，便可關注微信官方帳號；或使用微信識別如下二維碼，亦可關注。