告诉世界,前端也能做 AI-阿里云开发者社区

开发者社区> 新零售淘系技术> 正文
登录阅读全文

告诉世界,前端也能做 AI

简介: AI在大前端领域已经火爆了两三年了。随着设备算能的跃升和端侧模型的演化,越来越多的AI场景开始涌现。从最初的图片分类,到而今基于人体的百变特效、嵌入日常的语音识别、大众津津乐道的自动驾驶,AI已经开始进入我们生活的方方面面。

疫情时期的前端AI


AI在大前端领域已经火爆了两三年了。随着设备算能的跃升和端侧模型的演化,越来越多的AI场景开始涌现。从最初的图片分类,到而今基于人体的百变特效、嵌入日常的语音识别、大众津津乐道的自动驾驶,AI已经开始进入我们生活的方方面面。


疫情期间,AI更是频频进入我们的视野 —— 从病毒宿主研究,到病例追踪防控。而我们前端,也不甘寂寞,给人脸照片戴上口罩的WebApp,就在知乎和朋友圈火了一把。网友Random Forest基于faceapi实现了人脸的检测,而后,在口罩素材库里选择口罩混合渲染生成最终的图片。


image.png


类似这样的趣味WebApp,还有许多,前端从来不缺点子。那为什么前端的智能化,没有隔壁端侧智能看起来热闹呢?


狂欢下的落寞


2017年之后,为Mobile App提供底层加速能力的框架,如雨后春笋般涌现。BAT、小米、华为各自推出了端侧的深度学习框架,连旷世都要撸起袖子进场。但前端这就要冷清上许多了,除了TensorFlow JS之外,没有太多选择。


ONNX JS?除开最近的两次依赖升级,对框架主体的升级,要整整回推到一年多以前了。很难说是一个让人安心的选择。


image.png


WebNN的提交则稳定上许多。WebNN会优先选择平台提供的加速方案,如DirectML、NNAPI;若无,则退而求其次,尝试WebGL、WebGPU或WebAssembly。WebNN如果可以成为浏览器们的标准实现,则可以以低成本实现计算加速;但相应的,依赖平台众多,也导致支持的特性往往只能选取共性子集。标准推进,前路漫漫。


image.png


那么,TensorFlow JS是不是足够满足业务的需求呢?早些时间,笔者参与了淘宝的AR小程序项目,小程序环境类似于浏览器,可以使用WebGL和WebAssembly加速推理。但即使友军WebGL的性能相比于微信已经有不小的改进,也没能挽救Mate 30、iPhone 7这样中端机型明显卡顿的局面。最终,我们选择桥接到Native的MNN实现了加速,效果显著,基本全线设备都有4倍以上的帧率,也更节约内存。

小程序帧率30封顶,中端以上设备,Native MNN的帧率就达到上限了。image.png

image.png


MNN再快,也需要有Native的支持。在浏览器和小程序上,有既跨平台,又能跑得流畅的解决方案么?


前端武器库



先盘点盘点前端武器库里,可以用于推理加速的装备们 —— 跨平台主要考量覆盖率,流畅度则主要考量性能。


 JavaScript


覆盖率100%。可以通过asmjs这样的工具,将C/C++的实现方案转到JavaScript上,是实现成本较低的方案。但性能就不要太指望了,同平台下,比Native方案慢上几十倍是再正常不过的事。

 WebGL / WebGL2


image.png


覆盖率方面,WebGL和WebGL2在浏览器上分别有97%和74%,Mobile和Desktop的差距不大,小程序的覆盖率应当也相近。但再考虑到推理加速所必须的color_buffer_float拓展,实际情况并没有没有这么乐观。相当比例的中低端Android设备WebGL支持不佳。因此,仅支持WebGL的话,就需要放弃相当一部分用户。

性能方面,WebGL和WebGL2是tfjs和onnxjs的性能担当,就现阶段而言,比JavaScript和WebAssembly都要快上许多。

▐  WebAssembly


image.png

覆盖率方面,WASM在浏览器上为91%,但微信、淘宝、支付宝小程序则都支持WASM。

性能方面,参考mozilla的规划介绍,由于当前缺少多线程、SIMD、64位等的支持,WASM的性能还很难与Native看齐。Android V8引擎下,可以通过JIT找回一些场子;但iOS下,就回天乏术了。


▐  WebGPU


image

覆盖率一片红…性能再好也指望不上哎。

小结一下,结合WebGL和WebAssembly,可以实现对大部分浏览器和主流小程序的覆盖,也可以实现相对较好的性能。


磨一把更快的刀



我们结合了我们在小程序上的优化经验和MNN GPU优化经验,基于MNN模型基础设施,实现了全新的MNN.js。性能上有相当明显的提升,视频场景下的帧率抖动基本消失,内存上也有一定的节省。


▐  效果


image.png

测试版本: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这样的简单模型,在多达数百个算子的内部模型上,我们也有近似的性能领先。

▐  框架

                                               image.png

在设计上,我们复用了MNN的模型格式。一来,可以实现对Caffe、TensorFlow、PyTorch模型的转换支持;二来,MNN的算子替换、层融合等模型优化,也可以延续到MNN.js上。

模型加载后,有WebGL、WebAssembly、JavaScript三种计算后端可供选择。JavaScript一般不单独使用,WebAssembly一般在WebGL不支持的情况下使用。

▐  示例

image.png


接口上,我们延续了MNN小程序插件的动态图设计,并提供了图像前处理能力,即使是在视频场景争抢资源的情况下,也不至让性能过分下滑。


前端AI去哪儿



深度学习三要素:数据、算法、算能。数据在不断积累,模型在不断翻新,算能也跟上了,AI应用是不是就水到渠成了?并不是。算法是AI应用的筋骨,场景才是AI应用的灵魂。谁最熟悉业务困境?谁最了解用户痛点?谁能跨出那一步,去了解算法的边界,点亮创意,连接算法和业务,为AI应用填充血肉?


而今,随着小程序基础设施的建设和跨端互通互投战略的推进,App不再是束缚内容的孤岛,每一个业务都可以小程序化,从而有更多机会触达更多的用户。

image.png


淘宝购物小程序作为淘宝开放最重要的阵地,承担着提升购物乐趣、让商家自由经营的重要使命。小程序平台通过AI/AR新技术主推淘内导购体验升级。基于人脸、姿态、手势等识别能力,可以创造出更丰富、更新奇的互动玩法,让买家边玩边买。
目前,购物小程序已经打通了店铺首页、商品详情、客服通道、直播、搜索等众多公私域渠道,并在不断加码。小程序插件体系使得外部优秀的算法供应商/引擎服务商可以快捷入淘,为淘内广大的商家群体和服务生态提供技术服务,在给商家创造增量价值的同时,也可以获得相应的商业收益。


详情请参阅招募通道:open.m.taobao.com。


舞台已备。天地广阔。踏南天,碎凌霄,当是吾辈中人。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

淘系技术部隶旗下包含淘宝技术、天猫技术、农村淘宝技术、闲鱼、iHome等团队和业务,是一支是具有商业和技术双重基因的螺旋体。 我们致力于成为全球最懂商业的技术创新团队,打造消费者和商家一体化的新零售智能商业平台,创新商业赛道。随着新零售业务的持续探索与快速发展,我们不断吸引用户增长、机器学习、视觉算法、音视频通信、数字媒体、端侧智能等领域全球顶尖专业人才加入,让科技引领面向未来的商业创新和进步。欢迎投递简历至ruoqi.zlj@taobao.com

官方博客
最新文章
相关文章
淘系开源,欢迎star哟