大海無量編輯部
百度近期開源了國內首個以JavaScript實現的Web端推理引擎 Paddle.js。Paddle.js用于幫助前端工程師更加簡單地將智能化因素引入網頁中，讓Web前端可以實現更多的能力。
通過瀏覽器來訪問網頁應用瀏覽內容具有更低的門檻和更廣泛的傳播度，能夠在網頁中融入智能化因素將會為用戶體驗插上一對騰飛的翅膀。傳統的智能化效果由于模型大小、設備機器算力的問題，多數是放在服務端實現的，但是這需要多次與服務器進行網絡上的信息交互，用戶體驗被打折。Web前端作為互聯網中離用戶最近的一環，也希望借助 AI 的能力，給用戶創建更好的體驗。隨著硬件設備的快速更新換代，直接在網頁中實現的智能化效果逐漸進入人們的視線，相比云端智能，端智能具有低延時、保護數據隱私、節省云端計算資源等優勢，端智能的實時性優勢更加凸顯。對于Web前端而言，算力的穩步增強、算法逐步成熟以及創新驅動的應用場景都在影響著端智能演進，而瀏覽器等載體的自身能力無疑是影響Web前端創新場景的最重要的因素。其中WebRTC使得Web上支持原生的視頻通話能力，視頻流實時獲取成為可能；WebXR可以利用 GPU 能力處理復雜和3D圖形；Web Assembly可以將其它語言生態引入Web，Service Workers通過后臺任務來支持離線以及提升性能。這些瀏覽器等載體對于設備底層能力的極大化擴展和對CPU、GPU甚至NPU的計算能力的合理調用都為Web端實現復雜的創新應用提供了幫助。W3C 也成立了機器學習的社區組，試圖提供原生的 Web 神網絡 API，這是為神經網絡理論硬件加速設計的底層接口，用例包括：人物識別、語義診斷、情緒分析、圖像自動分類等等，目標是可以直接使用預訓練的深度神經網絡模型。可以預期的是，基于Web端也會出現越來越多有趣、好玩的一些創新應用，那么什么樣的場景適合使用Web AI呢？這里有幾個案例與大家分享。
首先，用戶Web端計算不僅可以節省服務端的計算壓力，而且可以提供非常快速的響應，比如這個我們在網頁中實現的基于人臉跟蹤和表情識別的應用效果就非常適合這個場景，打開手機百度APP搜索“自拍測人設”就會發現這個應用，在這個網頁應用中要求必須在能夠實時捕捉屏幕內容進行框選，需要極其快速的計算能力來識別和追蹤人臉。面向全網用戶使用，那么瀏覽器內實現無疑是最佳方案，保證分享出去后其他用戶也能夠無差別的直接使用，而不需要安裝指定的應用。其次， AI能力能夠實現一系列復雜的交互，打造“神奇”的網頁，可以說有了Web AI新技術，可以創造全新的交互方式。這方面的例子有很多，比如這個肢體交互能夠切換背景的場景就非常具有驚喜感，通過Web AI實現在網頁上人像分割的例子，能夠將人像從復雜的場景中分離出來，結合肢體識別能力實現了非傳統的網頁交互效果。不同于將用戶信息上傳到服務端做處理，Web AI能夠很好的保護用戶的隱私性，它可以在每個用戶數據不離開手機的情況下對數據進行推理預測計算，也能夠有效的對用戶瀏覽的數據做出智能化的“控制”。例如，對于黃反圖片的在線判定和過濾也可以在用戶端實現。總的來說，在用戶Web端處理具有信息更好的隱私性，省去網絡交互的更快實時性計算，以及硬件飛速發展的更強計算能力是Web AI獨特的優勢。
在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前端環境下能夠應用在視頻級的場景下，借助于硬件加速技術，結合模型量化壓縮方案，代碼深度精簡，并且在線推理部分采用了多種技術手段針對神經網絡執行效率和算子計算性能進行了系統性的優化，保證達到在瀏覽器上實時執行效果絲滑流暢。
不同于其他的實現方式，在網頁中實現AI能力其實可以做到非常的簡單，不依賴于發布版本，可以滿足高速迭代產品經常更新的特點。而且不需要集成、編譯等復雜的開發形式，只需要引入Paddle.js就可以讓你的網頁擁有AI能力，通過網絡加載AI模型，簡單的進行輸入和輸出的業務開發就可以實現非常智能化的效果。接下來，我們一起在網頁上實現一個具有AI能力的頁面應用。
通過npm i 安裝Paddle.js代碼庫，在代碼中import引入即可，也可以直接通過script的src引用Paddle.js，在你的應用中創建Paddle對象實例后你的代碼就可以使用AI能力了。import Paddle from paddlejsconst paddle = new Paddle();
模型是AI能力最重要的部分之一，通過加載模型使得網頁應用可以執行相應的AI能力，不同的模型體積不同，為了能夠較快的加載模型，Paddle.js 支持模型的分片并行化加載和利于網絡傳輸的數據壓縮能力。對于在網頁上進行在線推理預測需要一般需要設置輸入內容，后續的交互依靠于輸入處理的結果，特別是實時場景需要將輸入內容處理成符合要求的標準輸入數據并控制傳入節奏，這些對于業務開發都是非常具有挑戰的，Paddle.js提供了對于輸入數據的處理的封裝，將這部分工作簡單化，甚至對于業務開發來說只是簡單的傳入數據獲取結果就可以，提升了易用性。const input = io.process({});
將輸入傳入并執行Paddle對象的execute方法解可以很快地得到執行結果，而且開發者根本不需要人為地去設定使用具體的backend去進行計算，在線推理部分會自動根據用戶場景選擇最快的方式進行計算。將計算結果放入相應的推理后處理方法就會很容易地得到目標效果，在瀏覽器網頁中實現智能化的能力只需要這幾個步驟，使用門檻非常的低。具體的完整詳細的應用開發可以訪問paddle.js項目，上面有很多JavaScript實現智能化的例子。
對于未來的發展，隨著硬件設備的性能大幅提升，瀏覽器內的智能化效果將會越來越流暢，能夠完成的效果也會越來越復雜，Paddle.js的后續發展也會主要立足于三個方面點來看。
最后，Web AI勢必會對web發展產生深遠的影響，期待能和大家一起打造功能完善，性能極致，簡單易用的web端在線推理引擎，歡迎訪問Paddle.js開源項目，多提寶貴意見。https://www.paddlepaddle.org.cn/paddle/paddlejshttps://github.com/PaddlePaddle/Paddle.jshttps://www.paddlepaddle.org.cnhttps://github.com/PaddlePaddle/Paddlehttps://gitee.com/paddlepaddle/Paddle
