告诉世界，前端也能做 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节约约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/

✿  拓展阅读

作者| 离青

编辑| 橙子君

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