其他
告诉世界,前端也能做 AI
狂欢下的落寞
小程序帧率30封顶,中端以上设备,Native MNN的帧率就达到上限了。
前端武器库
▐ JavaScript
▐ WebGL / WebGL2
▐ WebAssembly
▐ WebGPU
磨一把更快的刀
▐ 效果
测试版本: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
▐ 框架
▐ 示例
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);
}
前端AI去哪儿
花絮
在阿里内部的技术交流贴里,两个商业互吹两名技术小二对上了两段后浪:
那些口口声声 前端AI没有机会的人
应该看着你们
就像我一样
我看着你们 满怀羡慕
设备积攒了十几年的算能
所有的分类、识别、分割和推荐
像是专门为你们准备的礼物
数据海量、算法繁荣、引擎强大
深度学习的门槛 被逐步降低
可以尽情地应用
自由学习一类模型 挑选场景
优化一处体验 在无尽的可能中探索
那些抱怨“前端不如原生”和“原生不如前端”的人
应该看着你们
就像我一样
我看着你们 满怀敬意
向你们的专业态度致敬
你们正在把客户端的 变成前端的
把前端的 变成客户端的
把性能差的 变成性能好的
码工与码工之间的壁垒被打破
你们只凭相同的爱好 就能结交千万个商业互吹的朋友
你们拥有了 我们曾经梦寐以求的权利
跨栈写码的权利
我说前端会玩吧。
技术交流
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/