EASY AI

1. EASY AI —— 具体业务中的端侧 AI 创新张静媛百度资深研发工程师

2. • Paddle.js 2.0 • Web 视频会议背景替换 • 开放平台 • 未来展望

3. Web AI 发展趋势 & 优势算力增强 Ø 发展趋势 üCPU/GPU通用计 1. 算力增强算力稳步增强 2. 模型优化 Web 能力扩大 3. Web 能力扩大 ü WebRTC ü WebGL Ø 优势 ü 低延迟 ü 低成本 ü 隐私保护 ü WebGPU ü WebAssembly 模型优化 ü 轻量模型 ü 模型量化

4. Paddle.js 落地场景 Ø运营创新双旦猜丁壳 Ø商业类六一美妆（探索） Ø智能办公 WEB 视频会议背景替换

5. Paddle.js 落地场景 Ø第三方能力输出江小白 Ø工具类小视科技（待上线）文本检测 Ø学习案例图像识别黄反暴恐识别

6. Paddle.js 一个高性能、轻量级、灵活性强且易于扩展的前端深度学习推理框架图像分类人像分割 PaddlePaddle OCR 面部识别 TensorFlow 目标检测肢体预测 ONNX Caffe Paddle.js 浏览器小程序 CPU Node.js GPU

7. Paddle.js 2.0 全新升级 paddlejs-core 推理引擎的核心部分，负责整个引擎的推理流程运行，提供计算方案注册、环境变量注册 paddlejs-mediapipe 数据流出理工具库 ü Camera ü Opencv ü DataProcessor paddlejs-models 封装好的模型 SDK，提供开箱即用的 AI 能力 ü Humanseg 人像分割 ü Mobilenet 物品分类 ü OcrDetection 文本检测 ü Gesture 手势识别 paddlejs-converter 模型转换工具，将 paddle 模型转化为 Paddle.js 模型文件 model.json chunk.dat；支持模型量化和模型融合

8. paddlejs-core init Loader Graph predict Preheat MediaProcessor ExecuteOp Read preTransform model.json 网络生成资源分配 image Graph chunk_*.dat op program 缓存数据/纹理缓存着色器 media stream transform postTransform

9. backend OP 运算实现

10. Paddle.js 2.0 核心模块

11. Paddle.js 2.0 核心指标高性能易用性通用性/兼容性 OP 融合封装 model sdk，提供开箱即用的支持主流轻量模型结构 FP16 量化 AI 能力覆盖所有浏览器 WEBGL_PACK 提供 paddlejs-mediapipe 数据流 MediaPipe 工具 sdk

12. 高性能视频流场景图优化 op 融合、FP 16量化推理优化 WebGL Pack、Half Float 渲染优化 MediaPipe

13. 高性能 OP 融合 FP16 量化减少 I/O、简化图结构 conv2d reshape2 FP32 精度模型量化为 FP16 精度模型 batch norm transpose2 relu reshape2 conv2d shuffle_channel 减小模型体积，参数文件 -50% 降低模型加载耗时加快模型推理

14. 高性能 GPU 加速 ü 并行计算 WebGL PACK webgl_pack_channel webgl_pack_output ü CPU迁移 GPU webgl_feed_process ü 半浮点计算 webgl_force_half_float_texture

15. 高性能 webgl_pack_channel webgl_pack_output mobilenet WebGL 2.0 预测性能提升 39.6% humanseg_398x224 WebGL 2.0 性能提升 9.6% humanseg_mobile WebGL 2.0 性能提升 15% c3 [n, c, h, w] -> [ 1, 1, nh / 4, cw ] c3 c2 c2 c1 c3 c2 c3 c0 c1 c1 c0 c2 c1 c0 c0 单通道数据排布 c0 c1 c0 c1 c2 c3 c2 c3 c0 c1 c0 c1 c2 c3 c2 c3 4 通道数据排布 d0 d1 d2 d0 d1 d4 d5 d3 d4 d5 原始输出 [1, 1, 2, 3] d2 d3 pack 输出 [1, 1, 1, 3]

16. 高性能 MediaPipe Media Input data process Media Data NCHWData Float32Array Float32Array render process Ø render process pipeline Media Texture Feed Texture Output Texture Custom Texture

17. 易用性 —— paddlejs-models

18. 易用性 —— paddlejs-mediapipe

19. 易用性 —— Env Flag Ø webgl_pack_channel Ø webgl_pack_output Ø webgl_feed_process Ø webgl_force_half_float_texture

20. 通用性 / 兼容性模型结构 backend 兼容性 MobileNetV1、MobileNetV2、 WebGL 1.0 / 2.0、WebGPU Chrome、Edge、Safari、Firefox MobileNetV3、MobileNetV3-SSD、 PLain JS、WASM 百度App、Safari、Chrome、UC … GhostNet、ShuffleNetV2 NodeGL 百度智能小程序、微信小程序主流轻量模型结构 HRNet_w18_small

21. • Paddle.js 2.0 • Web 视频会议背景替换 • 开放平台 • 未来展望

22. WEB 视频会议背景替换

23. 技术方案 media stream Bilateral Filter Video Input Canvas frame 398x224 Foreground Background 2X398x224 + Foreground Canvas Origin Size or Origin Input Canvas Humanseg Canvas Gaussian Input Canvas Background Canvas

24. 核心代码

25. 模型迭代—— PaddleSeg 1 数据合成问题：场景不够丰富，特征场景数据较少 Github Repo: https://github.com/PaddlePaddle/PaddleSeg 解决方案：数据合成产生大量训练样本精度提升曲线 2 网络优化 +损失函数优化 +网络优化问题：反卷积操作存在棋盘效应 92.0 解决方案：使用卷积+双线性插值替代 3 损失函数优化解决方案：采用Lovasz loss监督网络训练解决类别不平衡问题增强网络解码能力 +数据合成 90.1 Trail 1 问题：前景、背景类别占比不均衡 93.4 93.6 提升泛化能力 Trail 2 Trail 3 mIoU Trail 4

26. 模型降级方案 Chrome、Edge、Firefox 398x224 23.49ms 288x160 15.62ms predict time 小型测速模型（10ms） AMD Radeon Pro 5300M 4 GB

27. • Paddle.js 2.0 • Web 视频会议背景替换 • 开放平台 • 未来展望

28. EASYAI

29. • Paddle.js 2.0 • Web 视频会议背景替换 • 开放平台 • 未来展望

30. 未来展望调优效率行业解决方案调优方式：手动行业智能化解决方案全链路 AI 编译器

31. Q&A Paddle.js 微信技术交流群 Paddle.js Github 联系邮箱： zhangjingyuan02@baidu.com

32.