告诉世界，前端也能做 AI，赶快收藏备战金九银十_前端ai

作者：木道寻08 | 2024-07-16 21:20:17

踩

前端ai

性能方面，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不再是束缚内容的孤岛，每一个业务都可以小程序化，从而有更多机会触达更多的用户。