前言AI在不断拓展前端的技术边界，算法的加持也为前端研发注入了新的力量。本文介绍什么是端到端智能，端到端智能的应用场景，以及在Web上实现AI的基本原理和概念。什么是终端智能首先回顾一个AI应用的开发过程。具体步骤包括数据收集和预处理模型选择以及训练模型评估模型服务部署。模型训练的中间产物是模型文件。通过加载模型文件，部署为可调用服务，然后可以调用它进行推理预测。传统流程中，模型服务部署在高性能的服务器上，客户端发起请求，服务器端进行推理，并将预测结果返回给客户端，而终端智能则是在终端上完成推理的过程客户。端到端智能的应用场景端到端智能现在有很多应用场景，涵盖视觉AR、互动游戏、基于推荐的信息流推荐、基于触摸的智能推送等，基于语音的直播、智能降噪等领域。算法从服务器端逐步覆盖到用户实时感知能力更强的移动端。典型应用包括AR应用和游戏。AI提供理解视觉信息的能力，AR基于视觉信息实现虚实交互，带来更加身临其境的购物和交互体验。例如，美颜相机、虚拟试妆等，利用AR通过检测面部关键点，对特定区域的妆容进行增强和渲染。互动游戏。飞猪的双十一互动游戏《找吧》是一款运行在h5页面的图片分类应用，通过摄像头实时抓拍图片，使用分类模型进行分类，当游戏设定的目标出现时得分。端到端重排。通过实时的用户意识识别，对服务器推荐算法下发的feed流进行重新排列，做出更精准的内容推荐。智能推送。在终端端感知用户状态，决定是否介入用户推送Push，选择合适的时机主动触达用户，而不是服务端定时批量推送，带来更精准的营销和更好的用户体验。终端智能的优势从常见的应用场景，我们可以看到终端智能的明显优势，包括低延迟的实时计算，为网络请求节省时间。对于帧率要求高的应用，比如每秒请求一次服务器的美颜相机，高延迟是用户绝对不能接受的。对于游戏等高频交互场景，低时延变得更加重要。本地计算服务成本低，节省服务器资源。现在发布的新手机都强调手机芯片的AI计算能力。日益强大的终端性能使得在设备上使用更多的人工智能应用成为可能。保护隐私如今，数据隐私的话题变得越来越重要。通过在终端侧进行模型推理，用户数据无需上传至服务器，保障用户隐私安全。终端智能的局限同时，终端智能也有一个最明显的局限，就是计算能力低。虽然终端端的性能越来越强，但还是远远落后于服务器端。为了用有限的资源做复杂的算法，需要对硬件平台进行适配，优化指令级，使模型能够在终端设备上运行。同时需要对模型进行压缩，减少时间和空间。消耗。现在有一些比较成熟的端侧推理引擎。这些框架和引擎对终端设备进行了优化，充分发挥了设备的计算能力。比如TensorflowLite、Pytorchmobile、阿里的MNN、百度飞桨PaddlePaddle。在web端，web端也有end-sideAI的优点和局限性。作为用户在PC端访问互联网内容和服务的主要手段，移动端的很多APP也会嵌入网页，但浏览器内存和存储配额有限。让人工智能应用程序在网络上运行看起来更不可能。然而，2015年出现了一个ConvNetJS库，它可以使用卷积神经网络在浏览器中进行分类和回归任务。虽然不再维护了，但是2018年学习，深度学习框架涌现了很多JS机器。如Tensorflow.js、Synaptic、Brain.js、Mind、Keras.js、WebDNN等。受限于浏览器的计算能力，一些框架如keras.js和WebDNN框架只支持加载模型进行推理，而无法在浏览器中训练。此外，一些框架并不适合一般的深度学习任务，它们支持的网络类型也各不相同。例如，TensorFlow.js、Keras.js和WebDNN支持DNN、CNN和RNN。ConvNetJS主要支持CNN任务，不支持RNN。Brain.js和synaptic主要支持RNN任务，不支持CNN网络中使用的卷积和池化操作。Mind仅支持基本的DNN。选择框架时，需要看它是否支持特定的需求。Web端架构Web端如何利用有限的算力？典型的JavaScript机器学习框架如图所示。从下往上依次是驱动硬件、使用硬件的浏览器界面、各种机器学习框架、图形处理库，最后是我们的应用程序。CPUvsGPU在网络浏览器中运行机器学习模型的先决条件是通过GPU加速获得足够的计算能力。在机器学习中，尤其是深度网络模型中，一个广泛使用的操作是将一个大矩阵乘以一个向量，然后将其与另一个向量相加。这种类型的典型运算涉及数千或数百万个浮点运算，但它们通常是可并行化的。以一个简单的向量加法为例，两个向量相加可以分解成很多更小的操作，每个索引位置相加。这些较小的操作彼此不依赖。虽然CPU通常需要更少的时间来处理每个单独的加法，但随着计算规模的扩大，并发性将逐渐显示出优势。WebGPU/WebGLvsWebAssembly有了硬件后，需要充分利用硬件。WebGLWebGL是目前性能最高的GPU利用率解决方案。WebGL旨在加速浏览器中的2D和3D图形渲染，但它可以用于神经网络的并行计算，以加速推理过程并实现速度的数量级提升。WebGPU随着Web应用对可编程3D图形、图像处理、GPU访问的要求不断提高，为在WEB中引入GPU加速的科学计算性能，W3C于2017年提出WebGPU作为下一代WEB的API标准图形。它具有更低的驱动开销，更好地支持多线程，并使用GPU进行计算。WebAssembly当终端设备不支持WebGL或者性能较弱时，一般使用CPU的计算方案是WebAssembly。WebAssembly是一种可以在现代网络浏览器中运行的新编码方式。它是一种低级类汇编语言，具有紧凑的二进制格式，可以以接近本机的性能运行，并提供对C/C++等语言的支持，提供编译目标以便它们可以运行在网上。Tensorflow.js以Tensorflow.js为例。为了在不同的环境下运行，tensorflow支持不同的backend，并根据设备情况自动选择对应的backend。当然，它也支持手动更改。tf.setBackend('cpu');console.log(tf.getBackend());测试一些常见模型，WebGL比常见CPU后端计算快100倍，WebAssembly比常见JSCPU后端快10倍-30倍.同时tensorflow还提供了tfjs-node版本，通过C++和CUDA代码编译的原生编译库驱动CPU和GPU进行计算。训练速度堪比Python版Keras。不需要切换常用语言，可以直接将AI模块添加到nodejs服务中，而不用另起python服务。模型压缩既然框架适配了硬件设备，那么压缩模型是很有必要的。复杂模型虽然有较好的预测精度，但在大多数情况下存储空间大、计算资源消耗大、推理速度过长。在移动场景下还是不能接受的。模型的复杂性在于模型结构的复杂性和海量的参数。模型文件中通常存储两部分信息：结构和参数。如下图简化的神经网络所示，每个块对应一个神经元，每个神经元和神经元中的连接都是参数。该模型的推理是从左侧输入，与神经元一起计算，然后将连接和权重传递给下一层进行计算，最终在最后一层得到预测输出。节点和连接越多，计算量越大。模型剪枝是一种常用的模型压缩方法，用于修剪训练好的模型。网络模型中存在大量冗余参数，大量神经元的激活值趋于零。切割节点可以减少模型的冗余。最简单粗暴的剪枝是DropOut，它在训练过程中随机丢弃神经元。大多数剪枝方法都是计算重要性因子，计算神经元节点对最终结果的重要性，剪掉不太重要的节点。模型剪枝的过程是迭代和重复的。剪枝后不直接用于推理。剪枝后通过训练恢复模型的准确率。模型的压缩过程是精度和压缩比之间不断的权衡。在精度损失范围内选择最好的压缩效果。模型量化为了保证更高的精度，大部分科学运算都使用浮点型进行计算，常见的有32位浮点型和64位浮点型，即float32和double64。量化就是将高精度值转化为低精度值。比如二进制量化（1bit量化）会将Float32/float64的值直接映射到1bit，存储空间会直接压缩32倍/64倍，计算时加载需要的内存也会更小，以及更小的模型尺寸带来更低的功耗和更快的计算速度。此外，还有8bit量化和任意bit量化。Knowledgedistillation知识蒸馏就是把在深层网络中学到的知识转移到另一个相对简单的网络中，先训练一个教师网络，然后利用教师网络的输出和数据的真实标签来训练学生网络。工具模型压缩的实现比较复杂。如果只是面向应用，只需要了解它的工作原理，就可以直接使用打包好的工具。例如，TensorflowModelOptimizationToolkit提供了量化功能。它的官方压缩测试是在一些常见的模型上进行的。如下表可以看出，对于mobilenet模型，模型大小从10M+压缩到3、4M，模型的精度损失非常小。百度飞桨提供的PaddleSlim提供了以上三种压缩方式。总结起来，在Web上开发一个AI应用的过程就是针对特定场景设计算法、训练模型、压缩模型、转换为推理引擎需要的格式、加载模型进行推理和预测。对于算法，它是通用的。深度学习框架已经提供了几个通用的预训练模型，可以直接用于推理，也可以基于它们训练自己的数据集。模型压缩和推理也可以使用现有工具。参考文献[1]https://tech.taobao.org/news/2021-1-7-32.html[2]https://juejin.cn/post/684490...[3]马Y，向D，郑S，等。将深度学习移动到网络浏览器中：我们能走多远？[C]//万维网会议。2019:1234-1244.[4]WebGPU：https://www.w3.org/TR/webgpu/[5]Tensorflow.js：https://www.tensorflow.org/js...[6]WebAssembly：https://developer.mozilla.org...[7]DeepLearningwithJavaScripthttps://www.manning.com/books...欢迎关注傲兔实验室博客：aotu.io或关注傲兔实验室公众号（AOTULabs），不定期推送文章。
