告诉世界，前端也能做人工智能 AI

疫情时期的前端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不支持的情况下使用。

▐  示例

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新技术主推淘内导购体验升级。基于人脸、姿态、手势等识别能力，可以创造出更丰富、更新奇的互动玩法，让买家边玩边买。

目前，购物小程序已经打通了店铺首页、商品详情、客服通道、直播、搜索等众多公私域渠道，并在不断加码。小程序插件体系使得外部优秀的算法供应商/引擎服务商可以快捷入淘，为淘内广大的商家群体和服务生态提供技术服务，在给商家创造增量价值的同时，也可以获得相应的商业收益。

 

 

作者：离青

来源：微信公众号-淘系技术