百度Paddle.js在Web前端中的探索和实践-InfoQ



 写点什么

一、背景

随着百度 AI 战略的逐步深入，百度 AI 能力正在积极地布局和渗透在更多的应用领域，对于不同的应用场景有着不同的 AI 能力解决方案，为了在浏览器等 Web 前端场景中应用百度 AI 能力，百度相关技术团队孵化出百度 Paddle.js 用于帮助前端工程师更加简单地将智能化因素引入网页中，让 Web 前端可以实现更多的能力。

二、为什么要在前端引入 AI 能力

通过浏览器来访问网页应用浏览内容具有更低的门槛和更广泛的传播度，能够在网页中融入智能化因素将会为用户体验插上一对腾飞的翅膀。传统的智能化效果由于模型大小、设备机器算力的问题，多数是放在服务端实现的，但是这需要多次与服务器进行网络上的信息交互，用户体验被打折。Web 前端作为互联网中离用户最近的一环，也希望借助 AI 的能力，给用户创建更好的体验。随着硬件设备的快速更新换代，直接在网页中实现的智能化效果逐渐进入人们的视线，相比云端智能，端智能具有低延时、保护数据隐私、节省云端计算资源等优势，端智能的实时性优势更加凸显。

对于 Web 前端而言，算力的稳步增强、算法逐步成熟以及创新驱动的应用场景都在影响着端智能演进，而浏览器等载体的自身能力无疑是影响 Web 前端创新场景的最重要的因素。

其中 WebRTC 使得 Web 上支持原生的视频通话能力，视频流实时获取成为可能；WebXR 可以利用 GPU 能力处理复杂和 3D 图形；Web Assembly 可以将其它语言生态引入 Web，Service Workers 通过后台任务来支持离线以及提升性能。这些浏览器等载体对于设备底层能力的极大化扩展和对 CPU、GPU 甚至 NPU 的计算能力的合理调用都为 Web 端实现复杂的创新应用提供了帮助。

W3C 也成立了机器学习的社区组，试图提供原生的 Web 神经网络 API，这是为神经网络理论硬件加速设计的底层接口，用例包括：人物识别、语义诊断、情绪分析、图像自动分类等等，目标是可以直接使用预训练的深度神经网络模型。

可以预期的是，基于 Web 端也会出现越来越多有趣、好玩的一些创新应用，那么什么样的场景适合使用 Web AI 呢？这里有几个案例与大家分享。

三、几个 Web 前端案例

l 首先，用户 Web 端计算不仅 可以节省服务端的计算压力 ，而且可以 提供非常快速的响应 ，比如这个我们在网页中实现的基于人脸跟踪和表情识别的应用效果就非常适合这个场景，打开手机百度 APP 搜索“自拍测人设”就会发现这个应用，在这个网页应用中要求必须在能够实时捕捉屏幕内容进行框选，需要极其快速的计算能力来识别和追踪人脸。面向全网用户使用，那么浏览器内实现无疑是最佳方案，保证分享出去后其他用户也能够无差别的直接使用，而不需要安装指定的应用。

00:00 / 00:00

1.0x

2.0x
1.5x
1.25x
1.0x
0.5x

网页全屏

全屏

00:00

l 其次， AI 能力能够实现一系列复杂的交互，打造“神奇”的网页，可以说有了 Web AI 新技术，可以创造全新的交互方式。 这方面的例子有很多，比如这个肢体交互能够切换背景的场景就非常具有惊喜感，通过 Web AI 实现在网页上人像分割的例子，能够将人像从复杂的场景中分离出来，结合肢体识别能力实现了非传统的网页交互效果。

不同于将用户信息上传到服务端做处理， Web AI 能够很好的保护用户的隐私性 ，它可以在每个用户数据不离开手机的情况下对数据进行推理预测计算，也能够有效的对用户浏览的数据做出智能化的“控制”。例如，对于黄反图片的在线判定和过滤也可以在用户端实现。

00:00 / 00:00

1.0x

2.0x
1.5x
1.25x
1.0x
0.5x

网页全屏

全屏

00:00

总的来说，在用户 Web 端处理具有信息更好的隐私性，省去网络交互的更快实时性计算，以及硬件飞速发展的更强计算能力是 Web AI 独特的优势。

四、Paddle.js 前端智能化介绍

在 Web 前端实现智能化，从整个链路上面看，会有数据采集和算法模型设计工作，在服务端训练和产出模型。但是这种模型往往不能够直接被浏览器使用，还需要对模型进行压缩、Web 格式转化和模型部署，最后前端通过各种方式请求获取模型并且进行在线推理才能在具体的业务场景下使用。整个链路较长，涉及云端和 Web 前端，离线处理和在线运行时，甚至需要算法工程师和移动开发工程师配合才能完成相关应用落地。

能不能对前端工程师更友好一些，能不能更加容易灵活的实现 Web 智能化应用？ 为了在浏览器运行的网页中实现 AI 效果，百度推出了自己研发的 JavaScript 实现的轻量级在线推理引擎 Paddle.js，依靠强大丰富的百度 Paddle 模型库，结合工具链和在线推理库低成本地将模型转化成 Web 可用格式，运行在浏览器等 Web 前端载体中，降低 Web 前端开发者在网页中使用 AI 能力的门槛。受益于百度 AI 战略的影响，百度 Paddle.js 逐渐发展成为一个执行性能优秀、浏览器兼容性良好的内部网页智能化标准，并且应用于多个在线项目，例如人脸检测、手势识别、人像分割、黄反检测和 Web AR 的实践中。

目前在网页上实现 AI 的推理引擎不多。性能方面，百度 Paddle.js 借助于 GPU Backend 能够在浏览器中使用硬件加速快速运行，而且还充分参与了 Web NN 标准化，在手机百度 app 提供的特殊加速支持获得更快的执行速度；代码体积方面，Paddle.js 的静态代码体积非常的小，仅有 201KB ；易用性方面，paddlejs 是一个开箱即用的前端在线推理引擎，它提供了丰富的能力封装，无需其他依赖即可完成目标效果。

Paddle.js 主要部分包括：模型工具链、推理前后处理、用户工具链、测试框架和推理引擎本身。

模型工具链 ：Paddle.js 依靠与 Paddle 等训练框架进行模型训练，或者使用 Paddle hub 上丰富的模型库，因为在浏览器中需要使用到浏览器友好的模型格式，通过 Paddle.js 提供的模型工具链对模型格式进行转换和离线优化，一方面减少模型体积，一方面通过各种优化技术优化模型性能，从模型根本上优化神经网络结构，进行算子替换、算子融合、网络分块、模型压缩等初步数据优化处理。

输入输出处理 ：也叫做推理前后处理，对于前端工程师来说，图像、视频流等数据处理是一件很麻烦的事情，知识专业度比较高，Paddle.js 提供了强大的输入输出处理能力以减少这部分开发的成本，Web 前端工程师可以直接调用相应的推理前后处理方法将数据高效进行处理，使得工程师可以专注于业务的开发。
在线推理 ：在线推理部分包括神经网络加载、神经网络在线优化、算子分配与数据初始化、预热与执行推理计算等部分。为了保证在浏览器等 Web 前端环境下能够应用在视频级的场景下，借助于硬件加速技术，结合模型量化压缩方案，代码深度精简，并且在线推理部分采用了多种技术手段针对神经网络执行效率和算子计算性能进行了系统性的优化，保证达到在浏览器上实时执行效果丝滑流畅。

五、AI 能力的简单使用

不同于其他的实现方式，在网页中实现 AI 能力其实可以做到非常的简单，不依赖于发布版本，可以满足高速迭代产品经常更新的特点。而且不需要集成、编译等复杂的开发形式，只需要引入 Paddle.js 就可以让你的网页拥有 AI 能力，通过网络加载 AI 模型，简单的进行输入和输出的业务开发就可以实现非常智能化的效果。接下来，我们一起在网页上实现一个具有 AI 能力的页面应用。

第一步，引入代码库

通过 npm i 安装 Paddle.js 代码库，在代码中 import 引入即可，也可以直接通过 script 的 src 引用 Paddle.js，在你的应用中创建 Paddle 对象实例后你的代码就可以使用 AI 能力了。

import Paddle from paddlejsconst paddle = new Paddle();

复制代码

第二步，加载模型

模型是 AI 能力最重要的部分之一，通过加载模型使得网页应用可以执行相应的 AI 能力，不同的模型体积不同，为了能够较快的加载模型，Paddle.js 支持模型的分片并行化加载和利于网络传输的数据压缩能力。

paddle.load()

复制代码

第三步，设置输入

对于在网页上进行在线推理预测需要一般需要设置输入内容，后续的交互依靠于输入处理的结果，特别是实时场景需要将输入内容处理成符合要求的标准输入数据并控制传入节奏，这些对于业务开发都是非常具有挑战的，Paddle.js 提供了对于输入数据的处理的封装，将这部分工作简单化，甚至对于业务开发来说只是简单的传入数据获取结果就可以，提升了易用性。