疫情時期的前端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。性能上有相當明顯的提升，視頻場景下的幀率抖動基本消失，內存上也有一定的節省。

▐   效果

測試版本：[email protected] + [email protected]。

測試方法：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不支持的情況下使用。

▐   示例 

async function loadModel() {
  let compiled = await MNN.WasmBuilder.compile(fetch('/path/to/mnn.wasm'));
  let wasm = await MNN.WasmBuilder.create(compiled);
  let js = MNN.JSBuilder.create();
 
  let builders = [webgl, wasm, js];
  let result = await fetch(url)
  let model = await result.arrayBuffer();
  return MNN.loader.loadMNN(new Uint8Array(model), builders);
}
 
async function run(webcam) {
  let width = webcam.videoWidth;
  let height = webcam.videoHeight;
  let preprocess = {
    sourceFormat: 'rgba',
    destFormat: 'bgr',
    filterType: 'nearest',
    wrapType: 'zero',
    cropAndResize: [[0, 0, width, height], [0, 0, 224, 224]],
    means: [103.94, 116.78, 123.68],
    norms: [1 / 127.5]
  };
 
  let rgba = capture(webcam);
  await model['data'].setData(rgba, "uint8", [1, height, width, 4], "NHWC", preprocess);
  let result = await model['prob'].getData("NHWC");
  let values = new Float32Array(result.data);
  let sorted = values.slice().sort((a, b) => b - a);
}

接口上，我們延續了MNN小程序插件的動態圖設計，並提供了圖像前處理能力，即使是在視頻場景爭搶資源的情況下，也不至讓性能過分下滑。

前端AI去哪兒

深度學習三要素：數據、算法、算能。數據在不斷積累，模型在不斷翻新，算能也跟上了，AI應用是不是就水到渠成了？並不是。 算法是AI應用的筋骨，場景纔是AI應用的靈魂。 誰最熟悉業務困境？誰最瞭解用戶痛點？誰能跨出那一步，去了解算法的邊界，點亮創意，連接算法和業務，爲AI應用填充血肉？

而今，隨着小程序基礎設施的建設和跨端互通互投戰略的推進，App不再是束縛內容的孤島，每一個業務都可以小程序化，從而有更多機會觸達更多的用戶。

淘寶購物小程序作爲淘寶開放最重要的陣地，承擔着提升購物樂趣、讓商家自由經營的重要使命。小程序平臺通過AI/AR新技術主推淘內導購體驗升級。基於人臉、姿態、手勢等識別能力，可以創造出更豐富、更新奇的互動玩法，讓買家邊玩邊買。

目前，購物小程序已經打通了店鋪首頁、商品詳情、客服通道、直播、搜索等衆多公私域渠道，並在不斷加碼。小程序插件體系使得外部優秀的算法供應商/引擎服務商可以快捷入淘，爲淘內廣大的商家羣體和服務生態提供技術服務，在給商家創造增量價值的同時，也可以獲得相應的商業收益。

詳情請參閱招募通道：open.m.taobao.com。

舞臺已備。天地廣闊。踏南天，碎凌霄，當是吾輩中人。

花絮

在阿里內部的技術交流貼裏， 兩個商業互吹 兩名技術小二對上了兩段後浪：    

那些口口聲聲 前端AI沒有機會的人
應該看着你們
就像我一樣
我看着你們 滿懷羨慕
設備積攢了十幾年的算能
所有的分類、識別、分割和推薦
像是專門爲你們準備的禮物
數據海量、算法繁榮、引擎強大
深度學習的門檻 被逐步降低
可以盡情地應用
自由學習一類模型 挑選場景
優化一處體驗 在無盡的可能中探索

那些抱怨“前端不如原生”和“原生不如前端”的人
應該看着你們
就像我一樣
我看着你們 滿懷敬意
向你們的專業態度致敬
你們正在把客戶端的 變成前端的
把前端的 變成客戶端的
把性能差的 變成性能好的
碼工與碼工之間的壁壘被打破
你們只憑相同的愛好 就能結交千萬個商業互吹的朋友
你們擁有了 我們曾經夢寐以求的權利
跨棧寫碼的權利

我說前端會玩吧。

技術交流

MNN.js距離開源，還需要一定的打磨。歡迎有志於前端AI的你，加入MNN釘釘羣，與我們交流。

鏈接：

  • https://zhuanlan.zhihu.com/p/104070435

  • https://github.com/tensorflow/tfjs

  • https://github.com/microsoft/onnxjs

  • https://webmachinelearning.github.io/webnn/

  • https://github.com/alibaba/mnn

  • http://asmjs.org/

✿  拓展閱讀

作者| 離青

編輯| 橙子君

出品| 阿里巴巴新零售淘系技術

相關文章