Web 设置指南

本页介绍了如何设置开发环境,以便在 JavaScript Web 应用中使用 MediaPipe Tasks。

支持的平台和版本

如需使用 MediaPipe Tasks 创建 Web 应用,您的开发环境需要满足以下要求:

  • Chrome 或 Safari 浏览器
  • 使用 Node.js 和 NPM 的 Web 应用。或者,您也可以使用脚本标记通过内容分发网络 (CDN) 访问 MediaPipe 任务。

MediaPipe Tasks 依赖项

MediaPipe Tasks 提供了三个预构建的视觉、文本和音频库。根据应用使用的 MediaPipe 任务,将视觉、文本或音频库导入您的开发项目。

生成式 AI 任务

MediaPipe Tasks 生成式 AI 模块包含用于处理图片或文本生成的任务。如需导入 MediaPipe Tasks Generative AI 库,请将以下依赖项导入到您的开发项目中。

LLM 推断 API

MediaPipe LLM 推断任务包含在 tasks-genai 库中。

npm install @mediapipe/tasks-genai

如果要部署到服务器,您可以使用内容分发网络 (CDN) 服务(如 jsDelivr),直接向 HTML 页面添加代码。

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai/genai_bundle.cjs"
    crossorigin="anonymous"></script>
</head>

视觉任务

MediaPipe Tasks 视觉模块包含用于处理图片或视频输入的任务。如需导入 MediaPipe Tasks 视觉库,请将以下依赖项导入您的开发项目中。

npm install @mediapipe/tasks-vision

如果要部署到服务器,您可以使用内容分发网络 (CDN) 服务(如 jsDelivr),直接向 HTML 页面添加代码。

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

文本任务

MediaPipe Tasks 文本模块包含用于处理字符串输入的任务。如需导入 MediaPipe Tasks 文本库,请将以下依赖项导入您的开发项目中。

npm install @mediapipe/tasks-text

如果要部署到服务器,您可以使用内容分发网络 (CDN) 服务(如 jsDelivr),直接向 HTML 页面添加代码。

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text/text_bundle.js"
    crossorigin="anonymous"></script>
</head>

音频任务

MediaPipe Tasks 音频模块包含用于处理声音输入的任务。如需导入 MediaPipe Tasks 音频库,请将以下依赖项导入您的开发项目中。

npm install @mediapipe/tasks-audio

如果要部署到服务器,您可以使用内容分发网络 (CDN) 服务(如 jsDelivr),直接向 HTML 页面添加代码。

<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-audio/audio_bundle.js"
    crossorigin="anonymous"></script>
</head>

BaseOptions 配置

BaseOptions 允许对 MediaPipe 任务 API 进行常规配置。

选项名称 说明 已接受的值
modelAssetBuffer 采用 Uint8Array 类型数组的模型资源文件内容。 Uint8Array
modelAssetPath 要打开并映射到内存中的模型资源的路径。 TrustedResourceUrl
Delegate 通过设备委托启用硬件加速,以运行 MediaPipe 流水线。默认值为 CPU [CPU,
GPU]

问题排查

如需有关 MediaPipe 的技术问题方面的帮助,请访问论坛Stack Overflow 以获取社区支持。如需报告 bug 或提出功能请求,请在 GitHub 上提交问题