Web智能化：AI应用与开发指南

本书在介绍如何利用前端技术来实现深度学习的模型部署和预测的基础上，重点介绍了若干运用前端AI技术的典型场景。本书内容包括三大部分：前端与AI、引入新模型和Web AI进阶。本书重点讲解模型开发的“全链路”，从模型供给到业务实现，串联起前端AI开发的整个流程。读者可以根据定制化的需求利用Paddle.js前端推理引擎完成算子开发、精度对齐、业务场景接入等具体的研发工作。本书不仅可以使读者对前端AI的理论和技术体系有深入的了解，还能通过指导实现推理效果的验证，让前端开发和AI技术深入结合，实现理论和实践的统一。

本书适合对AI、深度学习和前端AI感兴趣的学生和从业者使用。

张静媛

毕业于西安电子科技大学。在百度参与了语音搜索、百度畅听、百度体育等产品的前端研发工作。目前主要参与 Paddle.js 移动 AI 开发和探索工作，以及搜索团队前端横向技术方向的工作，致力于提升搜索前端技术的基础设施建设。

岳双燕

毕业于山东大学。在百度参与了多模视觉搜索、百度搜索TOP1、泛娱乐、垂类等产品的前端研发工作，以及搜索团队前端性能及稳定性等技术方向的工作。目前主要参与 Paddle.js 移动 AI 开发和探索。

樊中恺

毕业于北京科技大学，前端架构师，Paddle.js负责人。2008年开始接触前端开发，并于2012年进入移动端开发领域。曾先后负责百度浏览器、百度文库、百度阅读、手百App的前端技术架构工作。目前工作的主要方向为AI-Native应用的研发。在端智能、工程化、前端架构等领域拥有丰富的经验。

百度专家联合创作！

借助开箱即用的Paddle.js等前端推理引擎实现AI应用与开发

详解如何借助ChatGPT、文心一言等大语言模型提升研发效率

本书以具体实践为主、以解决实战问题为目的，希望帮助读者达到以下四个目的。

第一，让前端工程师能够开箱即用前端推理引擎（Paddle.js）进行业务开发。

第二，让希望将自己的智力产出贡献到具体Web业务场景中的算法工程师，了解前端如何集成并使用AI能力。

第三，让前端工程师能够基于已有的推理引擎进行二次开发，引入新的模型，开发新的算子。

第四，让想要深入了解前端推理引擎的开发人员，了解计算方案、性能优化和与模型加密相关的高阶知识，并学以致用。

推荐序1

很多年前，当我们进行客户端开发时——无论是PC客户端还是移动客户端，我们要解决的问题绝大多数都是工程问题。面对一些需要技术攻坚才能处理的难题，如性能优化、信息提取加工、动画特效等，工程师通常会使用各种第三方库和算法，或者自研满足业务场景需求的解决方案。但是，无论哪种客户端，工程师都希望能够清晰明了地掌握其中的细节，因为客户端方面的技术脉络相通，除了知其然，还要知其所以然。

时过境迁，在客户端的开发过程中，我们有时并不需要深入了解其背后的开发过程。这并不是因为工程师的懈怠，而是因为一种新的技术出现——端AI。

当面临处理一个模式特别复杂的问题时，当我们遇到无法穷举的场景时，当我们面对的问题输入/输出错综复杂时，传统的技术手段往往显得捉襟见肘。正确的思路是尝试与公司内负责AI的团队进行深入探讨，看看他们是否有解决方案。但通常情况下，你需要的是一把“枪”，但他们给你的可能是一门“迫击炮”。特别是当以GPT为代表的大语言模型横空出世后，AI几乎可以端到端地解决开发者的各种问题。

你是如此兴奋，因为利用AI解决问题的效果是如此出色，它不仅帮助你解决了业务问题，还带来了意外收获，包括但不限于低网络延迟、减少对服务端的依赖和极致的用户体验。此外，基于大语言模型的开发工作也变得事半功倍。

作为客户端研发部门的负责人，我亲眼见证了端AI和客户端开发的融合过程，也目睹了Paddle Lite和Paddle.js等端侧推理框架是如何助力业务成长的，当然也包括ChatGPT、文心一言等大语言模型为团队开发模式带来的巨大变化。

回顾历史，当下端AI的需求升级正朝着以下方向发展。

更好的性能：端AI的本质是对传统模型进行移动化改造。随着需求升级，开发者对模型的要求是，既要小，又要快。如此一来，如何优化模型结构，让复杂的模型能够在客户端离线运行，成了开发者共同关注的话题。

平台化、基础化：端AI的能力以基础SDK的方式集成在App内部，涉及的业务领域包括视觉、语音和智能推荐等。要想让开发者能够“想当然”地把端AI作为“常规武器库”来使用，还需要建立良好的平台化和基础化。

动态化：无论是端AI还是服务端的AI，都依赖大量的样本和特征来提升预测效果。如何在端内构建实时、全面的特征工程方案，并通过这些方案动态地影响产品效果和用户体验，是一个新的课题。

全链路：理想的解决方案是端到端的，即从离线的模型训练到端侧模型预测的持续集成和持续部署，只有这样，AI开发才能与客户端开发的快速迭代节奏相适应。

以上四个方向是层层递进的，面对的挑战也是巨大的。开发者已经习惯了云端、架构侧的AI生态，幸运的是，为了打破这一局面，负责研发的前端工程师撰写了本书，而我也提了以下三点要求。

（1）不要“掉书袋”，要弄明白原理，更重要的是要知道如何用。

（2）场景化，针对一些常见场景，给出解决方案。

（3）实现二次开发，需要读者了解如何将自由模型部署成Web AI。

目前看来，对于这三点要求，本书的作者都做到了，并且额外介绍了大语言模型给前端开发带来了怎样的变化。希望这本书能成为各位读者在Web端实践AI能力的指导手册，并且由此激发大家对端AI的热情，一起构建更加繁荣的Web AI生态圈，让所有客户端和前端开发者都能享受到新技术带来的红利。

王磊

百度App移动研发部总监

推荐序2

了解我的人都知道，我的职业生涯是从一名前端工程师开始的。

我曾醉心于前端的“奇技淫巧”，也曾与志同道合的朋友们一起为前端工程化时代的到来做出了努力。

回顾前端的发展史，我会将其分成三个阶段：原型和Ajax发挥“神力”的时代、jQuery独领风骚的时代和三大框架格局形成的时代。

然而，如果从信息和算法的角度来看，前端的历史也可以划分为以下三个阶段。

第一个阶段的关键词是闭包、模块和动画。在这个阶段，前端开发者们追求业务逻辑的分治和前卫的动画效果，各种编辑器、树状图、动画库应运而生。借助异步能力的提升和浏览器的发展，Web端逐渐成为开发的主流。

第二个阶段的关键词是数据流、开发模式和技术框架。在第一个阶段的基础上，第二个阶段开始应对更加复杂的业务场景，需要处理和同步大量的数据。响应式编程、单向数据流、状态管理和不可变数据等技术应运而生，它们的核心目标是简化业务逻辑的方式。而前端组件化的发展也催生出了一批技术框架，使开发者能够更加专注于业务开发，把底层复杂的处理交给选择的框架。

第三个阶段的关键词是端智能和智能化。如果说第一个阶段到第二个阶段是研发模式的更新，那么第二个阶段到第三个阶段则是开发范式的变革。

端智能充分调动了客户端的算力，特别是在浏览器中，我们能够做更多的事情。从最初的tfjs和Paddle.js等前端AI框架的出现，到如今WebNN、WebXR等标准的建立和发展，我们看到了利用浏览器进行AI和AR开发的诸多可能性。

智能化也为我一直关注的前端工程化插上了AI的翅膀。从最初的D2C（Design to Code）到更为激进的NL2Code（自然语言到代码生成），前端领域正在与AI深度融合，从而提升开发效率和开发体验。

在前端智能化的今天，不仅是大型公司，创业团队也能享受Web AI带来的红利。以前，当我们想要在客户端或浏览器中开发OCR、图形图像处理等涉及AI能力的功能时，通常需要自己部署一套在线服务，或者从第三方AI API市场中寻找满足需求的按次或按时付费的服务，这在人力和成本上都是一笔不小的开销。然而，借助Web AI，我们可以轻量级地实现所需的功能。当然，从效果上看，Web AI仍然有待改进，但只要我们做好效果评估，充分平衡技术和用户体验，仍然能满足绝大多数业务场景的需求。

“纸上得来终觉浅，绝知此事要躬行。”好在你已经翻开了这本书。

本书着重介绍了如何在Web环境中提供AI推理能力，枚举了许多案例来讲解如何通过Paddle.js完成与AI相关的业务开发。本书后面的章节还介绍了算子开发和前端计算方案的相关知识，使读者能够了解Web AI的实现原理及如何集成现有模型，这部分内容对读者来说非常值得深入了解。

此外，本书还介绍了与Web AI应用安全相关的内容，其采用的技术手段不仅在模型执行加密领域提供了开创性的方案，在前端其他涉及业务逻辑加密的场景下也提供了指导性的建议。

当Web丰富的能力和AI的想象力充分结合时，会产生有趣的应用。本书只是尝试把读者“领进门”。如果你是一位前端工程师，也曾怀疑AI是否真的“深不可测”，那么本书一定会让你由衷发出一声“原来如此”的感叹。

还等什么？快来阅读吧！

张云龙

上海巧子科技有限公司创始人，上海皓鹿科技有限公司创始人，前端工程化先驱

推荐序3

接触Paddle.js是在2020年GMTC全球大前端技术大会（北京站）上，当时我听了百度工程师针对前端推理引擎的分享，受益匪浅。后来，在2021年年底的GMTC深圳站，我参与了前端智能化专场的分享，对Paddle.js的了解更深入了一些。

作为前端技术团队的管理者，我鼓励团队成员接触新的技术，将其运用在具体的业务研发中，并且关注如何在团队内部进行推广。

秘诀无非三点：优秀的封装、极易上手的开发体验和完备的功能。

对于前端AI的应用落地，尤其如此。

首先是优秀的封装。前端AI落地的难点在于业务接入，传统的Web开发工程师会认为涉足这一领域需要专业的机器学习和深度学习知识，在利用神经网络进行预测推理时，数据的前后处理和性能调优往往最耗人力。如果前端推理引擎本身能暴露面向业务的SDK，并且从模型引入推理运算能提供丰富的工具，那么对业务开发人员来说，必然事半功倍。

其次是极易上手的开发体验。有了完备的SDK，还需要具备基于SDK二次开发的可能性。除了能够对推理流程进行扩展，还需要能够引入新的模型。好的参照库和可供工程师进行模型精度调整、量化的工具同样是必需的。

最后是完备的功能。对于图像、视频、文字要有通用的解决方案，可以针对浏览器、小程序、服务端等场景提供支持，并且覆盖尽可能多的计算方案。

在阅读本书时，我再次审视了前端AI开发的现状。Paddle.js虽然在模型和业务场景的覆盖方面还有很长的路要走，但一直在努力尝试直接对接业务开发场景，并提供低代码的接入方案和较为完备的工具链。

Paddle.js作为国产深度学习框架PaddlePaddle在前端部署方面较为成熟的解决方案，值得我们深入研究和学习。同时，希望前端AI的初学者能以本书为阶梯，跨越通往Web与AI融合的时代之门。

井铎铎

58同城、转转大前端研发总监

前言

如何将机器学习与具体业务集成，是从业者正在探索的热门方向。评估一种模型和算法价值高低的重要标准之一是其是否有具体的应用场景。因此，在整个人工智能（AI）产业链中，有大量的开发者致力于将AI和业务场景进行深入结合，他们可能与算法工程师和策略工程师一起合作，为第三方提供AI服务，也可能只是因为传统的基于有限策略的开发方式无法解决所有问题而诉诸与AI相关的解决方案。但不管研发人员的动机如何，AI已经从潜藏在云端的触不可及的神秘武器，变成了直达客户端且可与用户直接交互的具有丰富功能和体验的利器。

Web里的AI

Web和AI，就在几年前，二者的结合会被人当成尝鲜的玩具，而现在，它们却实实在在地影响着用户体验和产品功能。

对于端侧工程师，AI浪潮的来临适逢其时。不妨来总结互联网的发展历程：按照信息交互和人机交互划分，互联网走过了Web 1.0、Web 2.0和Web 3.0，数据和用户信息真正做到了互联互通；按照内容划分，互联网经历了文本时代、图文时代和点播时代，一直到现在的直播时代……这一切都说明了端侧工程师作为直接与用户打交道的人，其运用复杂技术的舞台在无限拓宽。

在Web端集成AI的能力，是无数前端工程师的愿望或所面临的技术挑战。与传统的Web开发者不同，前端工程师的角色从单纯的“需求实现方”，变成了拥有“需求提出方+需求实现方”双重身份的开发者，成了衔接业务场景和AI能力的枢纽。其中，对于AI功能的需求，包括但不限于丰富的模型底座、优秀的执行效率、通用的环境支持及流畅的研发体验。

应用趋势

目前，随着终端算力的日趋增强，开发者对其也是应用尽用。此外，由于信息孤岛的存在，为了保护用户隐私数据，谷歌公司也提出了基于个人终端设备的“联邦学习”框架，让AI系统能够更加高效、准确地共同使用各自的数据。而各大手机厂商和应用提供商也在积极地探索端侧智能的解决方案。例如，商业运营、互动游戏、内容推荐和智能信息推送等。比起传统的基于云端的AI方案，端侧智能在实时性上有非常显著的优势，这里总结了以下几个相关的应用方向。

l 互动游戏：这也许是大家能最直接感知到AI的应用场景，特别是在抖音、快手等短视频分享平台，通过对摄像头捕捉的实时视频流进行加工，提供丰富的渲染效果和用户交互的实时响应。

l 增强现实应用：通过AI提取关键信息，同增强现实技术结合达到虚实结合的交互效果，如视频会议的背景替换、文字公式识别、虚拟试妆，分别利用人像分割模型、OCR 模型和人脸关键点检测，实现对视频流的局部或全局修改，以带来更为沉浸式的交互体验。

l 多模态交互：事实上，无论是互动游戏还是增强现实应用，都涉及多模态交互。多模态交互指的是通过声音、摄像头、图文视频信息载体等通道与计算机进行交流，充分模拟人与人之间的交互方式。多模态交互经常被提及的应用场景包括语音和视觉搜索、智能硬件和智能驾驶等。

l 信息优化：信息优化方向包含很多落地场景，如Feed流重排，即将服务端下放的推荐内容列表在端侧基于用户的行为意图进行重新排序，以实现更好的信息分发效果；再如通过对用户行为和状态的跟踪，非定时地向用户推送消息，或者屏蔽可能的作弊行为。

当然，随着技术的不断发展、虚拟现实眼镜等新交互终端的普及，端侧工程师在AI场景应用中所能支持的功能绝不限于上述几个方向。特别是前端工程师，当浏览器和原生App的边界越来越模糊时，当跨端融合技术（React Native、Flutter）越来越普及时，当Node.js等技术让前端的触手伸向传统服务端开发领域时，前端工程师可以驾驭的技术栈将越来越丰富，从而能打造出更多同AI结合的产品功能。对标模型训练侧TensorFlow、PyTorch和PaddlePaddle 等成熟的框架，从2014年ConvNetJS诞生到现在，前端开发领域涌现出了一批可以在浏览器端运行神经网络、执行分类和识别等任务的前端机器学习、深度学习框架。

本书主要介绍的Paddle.js就是其中一员。

前端推理引擎

Paddle.js作为一款前端推理引擎，与其他同类框架一样，不但要支持前端工程师能够基于已有模型在业务中快速集成，还要满足二次开发要求——引入新的模型、添加新的算子、支持动态的模型加密。这背后涉及的技术栈和开发流程烦冗复杂：该如何接入媒体流？如何下载模型文件？如何生成神经网络？如何执行后处理任务……这些零散的问题可能成为前端工程师接入AI能力的阻碍，需要给出最佳实践和自动化的解决方案。

尽管未来无限光明，但是受限于浏览器环境，前端工程师要想充分应用终端算力，还需要使用WebGL、WebGPU及WebAssembly等技术提升前端的推理效率。那么，如何对这些底层API进行封装，并且提供模型级别的应用接口，则是前端推理引擎需要解决的首要问题。本书将以Paddle.js为例，展现如何通过前端推理引擎充分调用浏览器的开放能力来实现AI的应用开发。另外，本书还会介绍如何引入新模型来扩充应用场景。

对于一门新技术，作者的观念一直都是先触达再深究。即便之前对这个领域只是一知半解，但是当通过本书丰富的案例了解AI可以给前端工程师带来怎样的体验提升之后，说不定你会燃起在这条赛道上持续奔跑的热情。

在这种背景下，我们撰写了本书。

写作目的

通过本书，我们希望达到以下四个目的。

第一，让前端工程师能够开箱即用前端推理引擎（Paddle.js）进行业务开发。

第二，让希望将自己的智力产出贡献到具体Web业务场景中的算法工程师，了解前端如何集成并使用AI能力。

第三，让前端工程师能够基于已有的推理引擎进行二次开发，引入新的模型，开发新的算子。

第四，让想要深入了解前端推理引擎的开发人员，了解计算方案、性能优化和与模型加密相关的高阶知识，并学以致用。

这四个目的代表了本书的定位：这不是一本市面上你所能经常遇到的将重心放在原理介绍和模型训练方向的深度学习和机器学习图书，而是一本以具体实践为主、以解决实战问题为目的的AI应用图书。

因此，阅读本书最好的方式是配合paddle.js源码（在GitHub中搜索“paddlepaddle/ paddle.js”）进行学习。

在paddle.js源码中，我们针对若干模型进行了高阶封装，提供了低代码的模型接入方式，读者可以通过访问源码内的“/packages/paddlejs-models”和“/packages/paddlejs- examples”目录，了解不同模型的集成方案，以及如何同具体的宿主环境相结合。未来，我们也会不断扩展用例库来引入更多的模型，同时欢迎工程师根据本书的内容添加新的模型并贡献新的模型用例。

值得注意的是，在本书付梓之前，ChatGPT、文心一言等大语言模型正如火如荼地革新着软件研发领域，我们在本书的最后介绍了如何借助GPT这一利器提升研发效率，希望能带给读者启发。

致谢

本书的出版需要感谢百度内部参与移动AI建设的各位研发工程师，感谢PaddlePaddle提供的丰富的模型库和基础能力，感谢移动AI方向的研发负责人吴萍前瞻性的技术规划（包括Paddle.js），感谢为本书写作提供宝贵意见的工程师们（排名不分先后）：褚芦涛、邓宇光、高文灵、王超和谢柏渊。大家的共同努力促成了本书的诞生，也催生了一个新的前端推理引擎解决方案。同时，感谢电子工业出版社的宋亚东编辑，本书的撰写都是通过我们高效的在线协同完成的，编辑对于技术细节和遣词造句的要求，也体现出了他的专业严谨和知识素养。

最后，希望读者能通过提Issue或参与Discussion的方式贡献宝贵的意见。

话不多说，让我们马上开启Web AI之旅吧！

张静媛 岳双燕 樊中恺 @ 百度

2022.3

第1部分 前端与AI

第1章 Web AI 2

1.1 Web AI的特点 3

1.2 Web AI的发展历程 5

1.3 总结 8

第2章 神经网络和前端推理引擎 9

2.1 感知机 10

2.2 从感知机到神经网络 12

2.3 前端推理引擎 15

2.4 总结 18

第3章 Paddle.js 初探 19

3.1 AI全链路 19

3.1.1 AI全链路基本介绍 20

3.1.2 前端推理引擎Paddle.js 21

3.2 模型和神经网络拓扑结构 24

3.2.1 模型结构文件与参数文件 25

3.2.2 神经网络拓扑结构 26

3.3 推理过程与运行环境 31

3.3.1 推理过程 31

3.3.2 运行环境 33

3.4 使用Paddle.js 33

3.5 总结 44

第4章 CV项目实战 46

4.1 paddlejs-models模型库 46

4.1.1 backend选择 47

4.1.2 引入模型 library 48

4.2 经典CV模型实战 50

4.2.1 图像分类 51

4.2.2 图像分割 56

4.2.3 目标检测 66

4.3 小程序CV项目 73

4.3.1 微信小程序插件paddlejsPlugin 73

4.3.2 百度智能小程序动态库paddlejs 76

4.4 总结 78

第2部分 引入新模型

第5章 模型准备 82

5.1 模型转换 82

5.1.1 转换工具使用 83

5.1.2 转换过程 87

5.2 模型算子 90

5.2.1 算子基本信息 90

5.2.2 算子计算规则 92

5.3 算子开发与测试 93

5.3.1 算子开发 93

5.3.2 算子测试 96

5.4 总结 99

第6章 模型前后处理 100

6.1 模型前处理 100

6.1.1 媒体资源获取 101

6.1.2 输入数据处理 107

6.2 模型后处理 114

6.2.1 目标分类 114

6.2.2 目标框选 115

6.2.3 目标分割 116

6.3 总结 117

第7章 图像处理 118

7.1 简单滤镜 118

7.1.1 灰度 119

7.1.2 色相旋转 121

7.2 美颜效果 125

7.2.1 美白滤镜 125

7.2.2 磨皮滤镜 129

7.2.3 瘦脸滤镜 134

7.2.4 大眼滤镜 139

7.3 总结 142

第3部分 Web AI进阶

第8章 计算方案 146

8.1 基本概念 146

8.1.1 多线程 147

8.1.2 SIMD 147

8.1.3 CPU与GPU 148

8.2 计算方案介绍 149

8.2.1 PlainJS计算方案 150

8.2.2 WebGL计算方案 151

8.2.3 WebGPU 计算方案 154

8.2.4 WebAssembly计算方案 159

8.2.5 NodeGL计算方案 161

8.2.6 Web Worker在Paddle.js上的应用 161

8.3 计算方案对比 168

8.4 总结 169

第9章 性能优化 170

9.1 算子融合 170

9.2 向量化计算 174

9.3 多线程 179

9.4 总结 186

第10章 Web AI应用安全 187

10.1 安全问题与安全目标 187

10.1.1 安全问题 188

10.1.2 安全目标 190

10.2 前端安全技术 191

10.2.1 加解密方案 191

10.2.2 代码安全 193

10.2.3 安全加固方案 196

10.3 安全方案 197

10.3.1 安全中心 198

10.3.2 离线部署 201

10.3.3 在线推理 202

10.4 总结 203

第11章 Web AI的发展趋势 205

11.1 Web AI的六大能力 205

11.2 技术展望 209

11.2.1 Web AI的标准 209

11.2.2 Web AI中的端云协同 210

11.3 总结 212

第12章 未来已来 213

12.1 大语言模型简介 215

12.1.1 什么是GPT 216

12.1.2 超大语言模型带来的能力跃升 219

12.1.3 GPT-4的又一次生长 221

12.1.4 回答准确性和可解释性 222

12.2 前端和大语言模型 223

12.2.1 提示语是一切的核心 224

12.2.2 学会如何与GPT交流 230

12.2.3 用GPT优化工作流 233

12.3 关于未来的畅想 242

12.4 给前端工程师的建议 246