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

作者简介

张静媛毕业于西安电子科技大学。在百度参与了语音搜索、百度畅听、百度体育等产品的前端研发工作。目前主要参与 Paddle.js 移动 AI 开发和探索工作，以及搜索团队前端横向技术方向的工作，致力于提升搜索前端技术的基础设施建设。岳双燕毕业于山东大学。在百度参与了多模视觉搜索、百度搜索TOP1、泛娱乐、垂类等产品的前端研发工作，以及搜索团队前端性能及稳定性等技术方向的工作。目前主要参与 Paddle.js 移动 AI 开发和探索。樊中恺毕业于北京科技大学，前端架构师，Paddle.js负责人。2008年开始接触前端开发，并于2012年进入移动端开发领域。曾先后负责百度浏览器、百度文库、百度阅读、手百App的前端技术架构工作。目前工作的主要方向为AI-Native应用的研发。在端智能、工程化、前端架构等领域拥有丰富的经验。

内容简介

推荐序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同城、转转大前端研发总监 百度专家联合创作！ 借助开箱即用的Paddle.js等前端推理引擎实现AI应用与开发 详解如何借助ChatGPT、文心一言等大语言模型提升研发效率 本书以具体实践为主、以解决实战问题为目的，希望帮助读者达到以下四个目的。 第一，让前端工程师能够开箱即用前端推理引擎（Paddle.js）进行业务开发。 第二，让希望将自己的智力产出贡献到具体Web业务场景中的算法工程师，了解前端如何集成并使用AI能力。 第三，让前端工程师能够基于已有的推理引擎进行二次开发，引入新的模型，开发新的算子。 第四，让想要深入了解前端推理引擎的开发人员，了解计算方案、性能优化和与模型加密相关的高阶知识，并学以致用。