工具與資源中心

幫助開發者更加高效的工作，提供圍繞開發者全生命週期的工具與資源

https://developer.aliyun.com/tool/?spm=a1z389.11499242.0.0.65452413nT70Mi&utm_content=g_1000295017

疫情時期的前端AI

AI在大前端領域已經火爆了兩三年了。隨著裝置算能的躍升和端側模型的演化，越來越多的AI場景開始湧現。從最初的圖片分類，到而今基於人體的百變特效、嵌入日常的語音識別、大眾津津樂道的自動駕駛，AI已經開始進入我們生活的方方面面。

疫情期間，AI更是頻頻進入我們的視野 —— 從病毒宿主研究，到病例追蹤防控。而我們前端，也不甘寂寞，給人臉照片戴上口罩的WebApp，就在知乎和朋友圈火了一把。網友Random Forest基於faceapi實現了人臉的檢測，而後，在口罩素材庫裡選擇口罩混合渲染生成最終的圖片。

類似這樣的趣味WebApp，還有許多，前端從來不缺點子。 那為什麼前端的智慧化，沒有隔壁端側智慧看起來熱鬧呢？

狂歡下的落寞

2017年之後，為Mobile App提供底層加速能力的框架，如雨後春筍般湧現。BAT、小米、華為各自推出了端側的深度學習框架，連曠世都要擼起袖子進場。但前端這就要冷清上許多了，除了 TensorFlow JS 之外，沒有太多選擇。

ONNX JS ？除開最近的兩次依賴升級，對框架主體的升級，要整整回推到一年多以前了。很難說是一個讓人安心的選擇。

WebNN 的提交則穩定上許多。WebNN會優先選擇平臺提供的加速方案，如DirectML、NNAPI；若無，則退而求其次，嘗試WebGL、WebGPU或WebAssembly。WebNN如果可以成為瀏覽器們的標準實現，則可以以低成本實現計算加速；但相應的，依賴平臺眾多，也導致支援的特性往往只能選取共性子集。標準推進，前路漫漫。

那麼，TensorFlow JS是不是足夠滿足業務的需求呢？早些時間，筆者參與了淘寶的AR小程式專案，小程式環境類似於瀏覽器，可以使用WebGL和WebAssembly加速推理。但即使友軍WebGL的效能相比於微信已經有不小的改進，也沒能挽救Mate 30、iPhone 7這樣中端機型明顯示卡頓的局面。最終，我們選擇橋接到Native的 MNN 實現了加速，效果顯著，基本全線裝置都有4倍以上的幀率，也更節約記憶體。

小程式幀率30封頂，中端以上裝置，Native MNN的幀率就達到上限了。

MNN再快，也需要有Native的支援。在瀏覽器和小程式上，有既跨平臺，又能跑得流暢的解決方案麼？

前端武器庫

先盤點盤點前端武器庫裡，可以用於推理加速的裝備們 —— 跨平臺主要考量覆蓋率，流暢度則主要考量效能。

▐ JavaScript

覆蓋率100%。可以透過 asmjs 這樣的工具，將C/C++的實現方案轉到JavaScript上，是實現成本較低的方案。但效能就不要太指望了，同平臺下，比Native方案慢上幾十倍是再正常不過的事。

▐ WebGL / WebGL2

覆蓋率方面，WebGL和WebGL2在瀏覽器上分別有97%和74%，Mobile和Desktop的差距不大，小程式的覆蓋率應當也相近。但再考慮到推理加速所必須的color_buffer_float擴充，實際情況並沒有沒有這麼樂觀。相當比例的中低端Android裝置WebGL支援不佳。因此，僅支援WebGL的話，就需要放棄相當一部分使用者。

效能方面，WebGL和WebGL2是tfjs和onnxjs的效能擔當，就現階段而言，比JavaScript和WebAssembly都要快上許多。

▐ WebAssembly

覆蓋率方面，WASM在瀏覽器上為91%，但微信、淘寶、支付寶小程式則都支援WASM。

效能方面，參考 mozilla的規劃介紹，由於當前缺少多執行緒、SIMD、64位等的支援，WASM的效能還很難與Native看齊。Android V8引擎下，可以透過JIT找回一些場子；但iOS下，就回天乏術了。

▐ WebGPU

覆蓋率一片紅…效能再好也指望不上哎。

小結一下，結合WebGL和WebAssembly，可以實現對大部分瀏覽器和主流小程式的覆蓋，也可以實現相對較好的效能。

磨一把更快的刀

我們結合了我們在小程式上的最佳化經驗和MNN GPU最佳化經驗，基於MNN模型基礎設施，實現了全新的MNN.js。效能上有相當明顯的提升，影片場景下的幀率抖動基本消失，記憶體上也有一定的節省。

▐ 效果

測試版本：tfjs@1.7.0 + mnn.js@0.0.3。測試方法：Warm Up 1次，後續推理50次。MBP直接測試，iOS/Android重啟測試（避免Shader快取）。測試環境：

Desktop：MBP 18年中款，GPU = Radeon Pro 555X + Intel UHD Graphics 630

iOS：iPhone X

Android：小米9

上資料。效能部分，首次推理上，相較於tfjs節約約70%的耗時；後50次平均上，則節約了35%以上的耗時。相容性部分，瀏覽器上，我們測試了Chrome、Safari和眾多手機的自帶瀏覽器；小程式上，我們測試了淘寶、支付寶、釘釘、微信小程式。具體測試的資料就不再陳列，WebGL效能表現上與上述基本相近。

MNN.js當前支援了38個運算元，除了MobileNet這樣的簡單模型，在多達數百個運算元的內部模型上，我們也有近似的效能領先。

▐ 框架

在設計上，我們複用了MNN的模型格式。一來，可以實現對Caffe、TensorFlow、PyTorch模型的轉換支援；二來，MNN的運算元替換、層融合等模型最佳化，也可以延續到MNN.js上。

模型載入後，有WebGL、WebAssembly、JavaScript三種計算後端可供選擇。JavaScript一般不單獨使用，WebAssembly一般在WebGL不支援的情況下使用。

▐ 示例

介面上，我們延續了MNN小程式外掛的動態圖設計，並提供了影像前處理能力，即使是在影片場景爭搶資源的情況下，也不至讓效能過分下滑。

本文轉自：

https://developer.aliyun.com/article/791506?spm=a2c6h.12873581.0.0.6b4c767d3b83zM&groupCode=othertech

告訴世界，前端也能做 AI