辣眼睛，前端已经这么逆天啦？web前端智能化在线推理的应用场景和实现原理

作者：王群 赵辉 刘东东

随着AI能力从实验室逐渐走向市场，需要在特定应用场景下将神经网络模型执行预测到相应的结果。针对不同业务背景，云端智能化方案和用户端智能化法案也都处于快速发展的阶段。想要在网页上实现智能化的能力，达到特别效果，你会发现浏览器等载体下实现本地智能化实时预测是非常必要的。很多业界一线公司也都在布局web智能化，比如Google的TensorFlow.js，百度的paddle.js以及阿里淘系技术团队正在酝酿MNN.js，W3C也开始联合各大公司深入讨论WebNN规范的设计，未来AI能力将会渗透在更多的应用领域。作为国内第一个开源的web前端智能化开源方案paddle.js的发起人和设计者，王老师非常荣幸与大家一起分享web前端机器学习引擎的应用场景和实现原理。

对于实现人工智能有很多方式实现，如机器学习就是一种特别接近于人的认知方式，就像田老师所描述的，“神经网络Neural Network，是最接近于人脑工作机制的算法，我们的人脑里有上百亿个神经元，单个神经元的表达能力很有限，但大量的神经元组合到一起，就产生了丰富的表达和和推理能力。我们看到什么，听到什么，都是输入，然后经由这么多神经元层层运算，输出我们的决策结果。神经网络，其实就是在模拟人脑的这套机制，从输入到最终的输出，中间还有很多层隐层，每层都有多个计算单元（神经元），这些计算单元层层紧密连接在一起就构成了网络。你可以认为一个计算单元就是一个简单的小函数，那这么多计算单元组合到一起之后，就形成了一个复杂的不可解释的函数。所谓深度神经网络Deep Neural Network，就是有很多层隐层的神经网络，隐层越多，就能表达越复杂的函数，也就越逼近于人脑。”

图：CNN神经网络

从人脑的识别过程，我们很容易发现三个重要的环节，即输入，输出，映射过程。抽象来看，整个过程就是给一个输入X，经过映射过程F，输出Y。

图：抽象表示过程

知道其中两个变量从理论上是可以推导出来另外一个。即给出X和Y，推出F。可以重复很多样本进行计算，得到F’（n）。标注的越准确、样本越多，机器大脑F’（n）就越接近人脑F，我们把这个寻找F‘的过程神经网络训练。

图：神经网络训练和预测推理

那么，形成神经网络的过程就是训练，使用神经网络的过程就是预测推理。

Web端智能是什么？

通过了解了机器学习的基础知识，端智能也就不再难以理解了。如果在云端进行训练和推理将结果呈现出来的就是云智能或者服务端智能，在客户端（Native / web）进行训练或者在线推理预测将结果呈现出来的过程就是端智能。

图：智能化的服务端实现与客户端实现

这个时候大家可能觉得在前端使用神经网络进行计算需要占用大量的计算资源，前端是否能够运行起来如此的庞然大物。其实，随着PC和移动设备上算力的稳步增强、算法逐步成熟以及各种创新需求的不断催生，在浏览器中实现端智能已经具备了良好的基础条件。

Web端智能可以做什么？

为什么会出现端智能，以及他底层演化逻辑是什么？这两年有一个明显趋势就是机器学习从实验室往产业落地方向演进，海量终端设备成为落地最佳载体。对于web前端使用智能化的场景一般具有实时性强、数据隐私性、创新交互和有效降低server压力等特点，比如人脸实时美颜、目标实时跟随与识别、AR、数据实时检测、media pipe、实时人像分割等场景都有着大量的应用。web方案能够面向全网用户使用，浏览器内实现是不错的一种方案，保证分享出去后其他用户也能够无差别的直接使用，不需要安装指定的应用APP，而且实现热更新，更新迭代不需要发版。

人脸关键点

手势识别

实时识别

实时Hair Segmentation

肢体识别

物体实时跟随识别场景

AR场景

很多业界一线公司也都在布局web智能化，比如Google的TensorFlow.js，百度的paddle.js以及阿里淘系技术团队正在酝酿的MNN.js，W3C也开始联合各大公司深入讨论WebNN规范的设计，Intel在API规范化上也做出了大量贡献。

实现web端智能落地需要做什么？

一般情况下，从实验室模型训练到实际应用落地有非常悠长的链路要完成，应用智能全链路核心流程包括数据采集、算法设计、模型训练、模型优化量化、模型部署、输入层处理、推理预测执行、输出层结果处理以及业务化等环节。无论是云端进行还是客户端（Native / web）端进行业务落地，这些环节都是不能缺少的。

图：智能化全链路

因为存在技术边界，算法工程师和工程研发工程师的协同就变得异常的复杂，所以出现了各种自动化的平台在淡化边界、将人工操作的距离缩短，减少全链路中的人为问题出现。例如，AI中台就建设了专业化的平台集合，例如专业化的标注平台vegas、计算资源调度与模型训练平台Axer、数据审核管理平台Guardian、AI能力接入平台Paas等。

图：在线推理部分

不同于服务端智能化应用，web端侧环境复杂性与用户设备息息相关，用户机器浏览器对于WebGL版本支持不同、操作系统的不同、webAssembly支持情况不同、webRTC支持情况不同、浏览器的不同都有可能造成web端智能化兼容实现的问题，而且工程师的技术能力也对业务落地效果有着一定的影响。因此，要实现web端侧在线推理不仅需要高性能、易用的端侧在线推理库，也需要有业务框架加持。比如对于实时视频流场景的实时在线推理预测就需要有相应的输入处理、分帧优化以、并行化计算和输出处理的通用业务封装，其实media pipe也就是针对这中场景下产生的web端智能业务框架。

Web端智能的实现原理是什么？

Web端侧智能化的实现方案主要包括离线工具部分、在线推理部分以及模型集。那么，为什么会有这些部分呢？我来一一跟大家分享一下这其中的“奥妙”。

图：web智能化解决方案设计

离线部分主要工作就是神经网络模型的处理，这部分放在离线处理具有更多的优势，比如模型的优化、剪枝、精度量化以及模型格式的转换在离线时处理能够保证运行时不去做额外的资源开销。Web运行的主要载体是浏览器，在浏览器中能够解码的数据有限，所以需要把模型转换成web友好的格式是web端智能化的需要特意强调的，而且模型要尽可能的小，减少计算成本和网络加载负载成本。

在线部分主要包括在线推理库和业务框架两大部分。在线推理库主要作用是进行神经网络模型加载（网络加载 / 本地加载）、神经网络在运行时重建以及神经网络计算等，通过将输入数据（图像、语音、本文等）进行输入层计算，再到神经网络各个隐藏层的计算，直到输出结果的输出层的计算最终给业务呈现效果。这其中每层都需要有相应的算子来完成相应的计算，以CNN卷积神经网络为例，需要卷积、池化、全连接以及激活函数等算子的实现，而这些算子的实现又要考虑性能的极致性。

图：在线部分结构设计

实现方式不同性能效果也有显著的差异，比如使用webGL利用GPU进行计算可以利用材质单一像素进行4通道的并行计算，这种方案速度能够满足视频实时场景需求；不同于webGL的方式，WASM是一种快速移植的方式，是能够将其他平台的代码编译到浏览器可用方案，但是计算性能相比webGL以Face Detector模型为例要有将近2倍左右的性能劣势，纯JavaScript利用CPU进行计算的性能就更加相差悬殊，所以在兼容性等基础上一般优选webGL方案。不过W3C也正在积极商讨webGPU的draft，更加快速的计算方案正在路上。

图：backends性能对比情况

在线部分的另一个重要部分就是业务框架，业务方往往更加专注于业务，很难有精力去处理性能问题和使用调试，对于视频流场景、语音场景、文本场景更加希望“拿来即用，用之有效”，所以对于相应的场景在业内目前较为优秀的方案就是封装成不同场景的业务抽象框架，让业务研发更加专注于业务实现。

小结

本期的Web前端智能化在线推理的应用场景和实现原理就先介绍到这里吧，也欢迎关注我的后续更新。帮助web智能化不断成长的，除了在性能上的不断压榨，还有众多场景的哺育。众多的人工智能应用必将在web端落地，通过人工智能来提升工作能效、优化用户体验，在你我不经意之间，改变了我们的生活。

如果你对AI及AI工程化有着浓厚的兴趣，想要和我们一起探索，欢迎加入AI中台-产研中心，让我们一起通过AI改变世界~！

【简历投递邮箱：[e-mail]】