Web 设置指南

本页介绍了如何设置开发环境以使用 MediaPipe JavaScript Web 应用中的任务。

支持的平台和版本

如需使用 MediaPipe Tasks 创建 Web 应用，您的开发环境 需要满足以下条件：

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

MediaPipe Tasks 依赖项

MediaPipe Tasks 提供了三个预构建的视觉、文本和音频库。 根据应用使用的 MediaPipe Task，导入视觉、文本或 集成到您的开发项目中。

<ph type="x-smartling-placeholder">

生成式 AI 任务

MediaPipe Tasks 生成式 AI 模块包含用于处理图片或文本的 生成文本。如需导入 MediaPipe Tasks 生成式 AI 库，请导入 导入您的开发项目

LLM Inference API

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

npm install @mediapipe/tasks-genai

如果要部署到服务器，您可以使用内容分发网络 (CDN) 服务（例如 jsDelivr），将代码直接添加到 。

<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），将代码直接添加到 。

<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），将代码直接添加到 。

<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），将代码直接添加到 。

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

BaseOptions 配置

BaseOptions 支持对 MediaPipe Task API 进行常规配置。

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

问题排查

如需有关 MediaPipe 的技术问题方面的帮助，请访问 群组或堆栈 用于寻求支持的其他人员 社区。要报告错误或提出功能请求，请在以下位置提交问题： GitHub。