Guía de configuración para la Web

En esta página, se muestra cómo configurar tu entorno de desarrollo para usar MediaPipe Tareas en tus aplicaciones web de JavaScript.

Plataformas y versiones compatibles

Para crear aplicaciones web con MediaPipe Tasks, tu entorno de desarrollo requiere lo siguiente:

  • Navegador Chrome o Safari
  • Una aplicación web que usa Node.js y NPM. Como alternativa, puedes usar Etiquetas de secuencia de comandos para acceder a tareas de MediaPipe a través de una red de distribución de contenidos (CDN).

Dependencias de las tareas de MediaPipe

MediaPipe Tasks proporciona tres bibliotecas previamente compiladas para visión, texto y audio. Según la tarea de MediaPipe que use la app, importa la visión, el texto o biblioteca de audio en tu proyecto de desarrollo.

Tareas de IA generativa

El módulo de IA generativa de MediaPipe Tasks contiene tareas que controlan imágenes o la generación de texto. Para importar las bibliotecas de IA generativa de MediaPipe Tasks, las siguientes dependencias en tu proyecto de desarrollo.

API de inferencia de LLM

La tarea de inferencia de MediaPipe LLM se encuentra en la biblioteca tasks-genai.

npm install @mediapipe/tasks-genai

Si quieres realizar la implementación en un servidor, puedes usar una red de distribución de contenidos (CDN) como jsDelivr, para agregar código directamente a tu página HTML.

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

Tareas de visión

El módulo de visión de MediaPipe Tasks contiene tareas que controlan imágenes o videos de datos. Para importar la biblioteca de visión de MediaPipe Tasks, importa lo siguiente dependencia a tu proyecto de desarrollo.

npm install @mediapipe/tasks-vision

Si quieres realizar la implementación en un servidor, puedes usar una red de distribución de contenidos (CDN) como jsDelivr, para agregar código directamente a tu página HTML.

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

Tareas de texto

El módulo de texto de MediaPipe Tasks contiene tareas que controlan entradas de cadenas. Para importa la biblioteca de texto MediaPipe Tasks y la siguiente dependencia a tu en tu proyecto de desarrollo.

npm install @mediapipe/tasks-text

Si quieres realizar la implementación en un servidor, puedes usar una red de distribución de contenidos (CDN) como jsDelivr, para agregar código directamente a tu página HTML.

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

Tareas de audio

El módulo de audio de MediaPipe Tasks contiene tareas que controlan las entradas de sonido. Para importa la biblioteca de audio MediaPipe Tasks, importa la siguiente dependencia a en tu proyecto de desarrollo.

npm install @mediapipe/tasks-audio

Si quieres realizar la implementación en un servidor, puedes usar una red de distribución de contenidos (CDN) como jsDelivr, para agregar código directamente a tu página HTML.

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

Configuración de BaseOptions

Las BaseOptions permiten la configuración general de las APIs de MediaPipe Task.

Nombre de la opción Descripción Valores aceptados
modelAssetBuffer El archivo de recursos del modelo se incluye como un array de tipo Uint8Array. Uint8Array
modelAssetPath La ruta del recurso del modelo que se abrirá y se asignará a la memoria. TrustedResourceUrl
Delegate Permite la aceleración de hardware mediante un delegado de dispositivo para ejecutar la canalización de MediaPipe. Valor predeterminado: CPU. [CPU,
GPU]

Soluciona problemas

Para obtener ayuda con preguntas técnicas relacionadas con MediaPipe, visita la discusión group o Stack Menú ampliado para obtener asistencia de la comunidad. Para informar errores o solicitar funciones, informa un problema en GitHub.