性能方面,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新技术主推淘内导购体验升级。基于人脸、姿态、手势等识别能力,可以创造出更丰富、更新奇的互动玩法,让买家边玩边买。
目前,购物小程序已经打通了店铺首页、商品详情、客服通道、直播、搜索等众多公私域渠道,并在不断加码。小程序插件体系使得外部优秀的算法供应商/引擎服务商可以快捷入淘,为淘内广大的商家群体和服务生态提供技术服务,在给商家创造增量价值的同时,也可以获得相应的商业收益。
详情请参阅招募通道:open.m.taobao.com。
舞台已备。天地广阔。踏南天,碎凌霄,当是吾辈中人。
花絮
在阿里内部的技术交流贴里,两个商业互吹两名技术小二对上了两段后浪:
那些口口声声 前端AI没有机会的人应该看着你们就像我一样我看着你们 满怀羡慕设备积攒了十几年的算能所有的分类、识别、分割和推荐像是专门为你们准备的礼物数据海量、算法繁荣、引擎强大深度学习的门槛 被逐步降低可以尽情地应用自由学习一类模型 挑选场景优化一处体验 在无尽的可能中探索
那些抱怨“前端不如原生”和“原生不如前端”的人应该看着你们就像我一样我看着你们 满怀敬意向你们的专业态度致敬你们正在把客户端的 变成前端的把前端的 变成客户端的把性能差的 变成性能好的码工与码工之间的壁垒被打破你们只凭相同的爱好 就能结交千万个商业互吹的朋友你们拥有了 我们曾经梦寐以求的权利跨栈写码的权利
我说前端会玩吧。
技术交流
MNN.js距离开源,还需要一定的打磨。欢迎有志于前端AI的你,加入MNN钉钉群,与我们交流。
链接:
-
https://zhuanlan.zhihu.com/p/104070435
-
https://github.com/tensorflow/tfjs
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
![](https://i-blog.csdnimg.cn/blog_migrate/79c8e2543ef77580141579c67518d82d.jpeg)
最后
技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。有需要面试题资料的朋友点击这里可以领取。
终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。有需要面试题资料的朋友点击这里可以领取。
[外链图片转存中…(img-iB0HcTh2-1712656663188)]