VI.7 前端 AI/ML 集成：浏览器内机器学习

目的：直接在浏览器中运行机器学习模型，实现实时推理、增强用户体验和保护隐私的 AI。

• TensorFlow.js：用于机器学习的 JavaScript 库，允许直接在浏览器或 Node.js 中开发和使用 ML 模型。支持运行现有模型、重新训练和开发新模型。
• ONNX Runtime Web：用于在浏览器和 Node.js 中运行 ONNX（开放神经网络交换）模型，支持 WebAssembly、WebGPU 等不同执行后端。
• MediaPipe：一套库和工具，用于在包括 Web 在内的平台上应用 AI/ML 技术（例如，对象检测、手势识别等计算机视觉任务）。
• LLM/RAG 集成：
  • LangChain：提供用于管理和优化应用程序中大型语言模型 (LLM) 的模块。
  • Pinecone：高性能矢量数据库，与 LangChain 结合使用，通过检索增强生成 (RAG) 为 LLM 添加知识。
  • LlamaIndex：用于将各种数据源连接到 LLM 的框架，专注于 RAG 应用程序。

将 AI/ML 直接集成到前端的趋势 是由对实时交互性、降低服务器成本和增强隐私（数据保留在设备上）的需求驱动的。这有效地带来了更丰富、更个性化的用户体验。LLM/RAG 集成到前端应用程序中标志着动态内容生成和智能辅助的新前沿。

VI.7.0 2026 年的新变化：浏览器开始内建 AI 能力

除了 TensorFlow.js、MediaPipe、ONNX Runtime Web 这类“你自己带模型进浏览器”的路线之外，2026 年另一个值得关注的变化是：浏览器本身开始提供内建 AI API。
这意味着有些文本处理和轻量生成任务，不再一定要由开发者自己托管模型或完全依赖远端 API。

以 Chrome 当前推进的 Built-in AI 能力为例，浏览器开始围绕本地模型提供一组更高层的任务 API。其中一部分已经可以让开发者试验，另一部分仍处于预览或逐步开放阶段，例如：

• Prompt API：执行通用提示式任务
• Summarizer API：生成摘要
• Translator API：本地翻译文本
• Language Detector API：识别语言
• Writer / Rewriter API：生成或改写文本

这类 API 的价值在于：

• 某些任务可以在设备端完成，减少数据离开本地的范围
• 浏览器帮助你管理模型下载、更新和生命周期
• 对“翻译、总结、改写、校对”这类高频产品能力来说，接入门槛更低

但它们也有明显边界：

• 浏览器支持度、可用性阶段和权限模型仍在演进
• 目前主要由 Chrome 生态率先推进，不同浏览器之间并没有完全等价的统一实现
• 更复杂的推理任务仍然常常需要云端模型或混合架构

因此，浏览器内建 AI 更适合被理解为：Web 平台新增的一组 AI 原语，它会改变很多产品能力的实现方式，但不会替代所有前端 AI/ML 路线。

VI.7.1 浏览器端与服务器端 ML 对比

浏览器端（客户端）ML：

• 优点：
  • 增强隐私：输入数据（如本地图像或视频流）保留在浏览器沙箱内，无需发送到远程服务器，从而增强了隐私保护。
  • 低延迟：本地处理使得对低延迟有要求的 ML 用例成为可能，例如沉浸式 Web 体验中的实时对象检测。
  • 去中心化：无需云基础设施投资即可大规模部署 ML 系统，符合去中心化 Web 架构的理念，减少了单点故障和控制。
  • 渐进式增强：通过将计算密集型 ML 任务卸载到设备硬件上，任何 Web 应用程序都可以通过 ML 功能得到丰富，现有 Web 内容也可以逐步增强。
• 缺点：
  • 硬件加速受限：浏览器中的 ML 推理目前使用 WebGL 图形 API，但缺乏对 ML 专用硬件加速器的访问，这限制了体验范围并导致在现代硬件上效率低下。
  • 性能不均：不同地区互联网连接速度的差异以及生产级模型的大尺寸，意味着设备端推理的用户体验可能不均等。
  • 功耗与环境成本：Web ML 应用计算和能源密集，广泛采用会加剧环境问题。将大型 ML 模型分发到每个客户端会增加环境成本。
  • 模型大小与复杂性：大型或复杂模型可能难以在浏览器中高效运行，可能导致浏览器响应缓慢甚至无响应。
  • 数据丢失与不准确：客户端跟踪容易受到广告拦截器、浏览器设置和网络连接问题的影响，导致数据丢失或不准确。

服务器端 ML：

• 优点：
  • 数据准确性提高：服务器端跟踪不受客户端问题（如浏览器特定问题、广告拦截器和 JavaScript 错误）的影响，数据收集更可靠。
  • 广告拦截器影响降低：服务器端跟踪绕过了广告拦截器和隐私扩展的限制。
  • 数据安全性增强：敏感数据可以在传输到分析平台之前进行处理和匿名化，有助于避免个人身份信息（PII）泄露并符合数据保护法律。
  • 更可靠的跟踪：无论互联网连接状态如何或用户是否关闭浏览器，服务器都能正确跟踪数据。
  • 更好的性能和速度：减少了客户端的负载，使页面加载更快，用户体验更流畅。
  • 更全面的数据收集：可以捕获客户端跟踪可能遗漏的幕后交互。
• 缺点：
  • 实现复杂：服务器端跟踪的实现通常比客户端跟踪更复杂。
  • 用户交互细节不足：难以捕获详细的客户端交互，如点击或鼠标移动，通常需要额外的客户端工具来弥补。
  • 隐私风险：如果数据在离开设备后未得到妥善处理，可能存在隐私问题。

前端 AI/ML 的实现需要在隐私与性能之间取得平衡。浏览器端 ML 的优势在于数据保留在本地，从而增强了用户隐私，并能实现低延迟的实时应用。然而，它受限于浏览器对专用 ML 硬件加速器的访问，可能导致效率低下，并可能因设备性能差异而导致用户体验不均。相比之下，服务器端 ML 在数据准确性、安全性、处理大型模型和性能方面表现出色，但可能引入数据传输延迟和隐私担忧。这种权衡需要开发者根据应用对数据敏感性、实时性要求和目标用户设备能力的具体需求做出关键设计决策。

VI.7.2 应用示例与框架

前端 AI/ML 的实际应用日益增多，得益于 MediaPipe 和 TensorFlow.js 等强大框架的出现。

• MediaPipe Solutions：这是一套库和工具，使用户能够快速在其应用程序中应用人工智能和机器学习技术。这些解决方案可以立即集成到应用程序中，根据需要进行定制，并跨多个开发平台使用。MediaPipe Solutions 包括：
  • MediaPipe Tasks：用于部署解决方案的跨平台 API 和库。
  • MediaPipe Models：预训练的、可直接用于每个解决方案的模型。
  • MediaPipe Model Maker：允许用户使用自己的数据定制解决方案模型。
  • MediaPipe Studio：用于在浏览器中可视化、评估和基准测试解决方案。

其中，手势识别器 (Gesture Recognizer) 任务允许实时识别手势，并提供识别结果以及检测到的手部地标。这使得应用程序能够根据用户特定手势调用相应的功能。该任务在图像数据上使用机器学习模型，接受静态数据或连续流。它输出图像坐标中的手部地标、世界坐标中的手部地标、惯用手（左/右手）以及多只手的手势类别。手势识别器使用包含手部地标模型和手势分类模型的模型包，并且可以通过 Model Maker 进行定制，以识别更多手势。MediaPipe 还提供其他视觉任务，如对象检测、图像分类、图像分割、面部检测和姿态地标检测。例如，ModiFace 利用 TensorFlow.js 的 FaceMesh 模型识别关键面部特征，并结合 WebGL 着色器，使用户能够数字试妆，同时保护隐私。

• TensorFlow.js：用于在浏览器和 Node.js 中进行机器学习的 JavaScript 库。
  • 实际应用示例：TensorFlow.js 在现实世界中有广泛应用，包括在线聊天中的实时毒性过滤器（InSpace 通过在客户端执行所有推理来检测有毒评论，无需将文本发送到第三方服务器进行分类）。其他示例包括 YouTube 的口型同步评分（使用 FaceMesh 模型估计唇部关键点）、表情符号寻宝、网络摄像头控制器、可教学机器（无需编码即可识别图像和播放声音）、动作镜像、实时钢琴演奏（由神经网络生成）、Node.js 中的棒球投球类型预测，以及训练可视化等。

这些框架通过提供预训练模型与定制化的双重策略，极大地推动了前端 AI/ML 的发展。MediaPipe 等框架提供了开箱即用的预训练模型，方便开发者快速集成 AI 功能。同时，它们也提供了 Model Maker 等工具，允许开发者使用自己的数据集对模型进行定制，以满足特定的应用需求。这种方法兼顾了快速原型开发和专业化应用的需求，使得 AI/ML 在前端的普及成为可能。

值得注意的是，到 2026 年，前端 ML 的底层执行后端已经不再只有 WebGL。
WebAssembly 仍是最稳妥的通用回退路径，WebGPU 正在成为高性能浏览器推理的重要后端，WebNN 则代表更贴近系统级 AI/ML 加速能力的方向。
这说明前端 AI/ML 的关键问题，已经不只是“浏览器里能不能跑模型”，而是“在不同设备和浏览器条件下，应该选择哪种执行路径，才能在性能、功耗、兼容性和体验之间取得平衡”。

VI.7.3 混合架构：设备端 AI 与云端 AI 协同

在真实产品里，前端 AI/ML 很少是“纯本地”或“纯云端”的二选一。
更常见的是混合模式：

• 本地模型负责低延迟、隐私敏感、轻量任务
• 云端模型负责复杂推理、长文本生成、多轮上下文处理
• 当前端检测到设备能力不足或浏览器不支持时，再优雅地回退到服务端

这种设计比单纯讨论“浏览器能不能跑模型”更重要，因为它直接决定：

• 成本
• 首次使用体验
• 隐私边界
• 离线能力
• 全球不同设备条件下的可用性

因此，到 2026 年讨论前端 AI/ML 时，核心问题已经不只是“模型放在哪里跑”，而是如何设计一个面向真实用户设备差异的混合 AI 系统。