Guide de configuration pour le Web

Cette page explique comment configurer votre environnement de développement pour utiliser MediaPipe Tasks dans vos applications Web JavaScript.

Plates-formes et versions compatibles

Pour créer des applications Web avec MediaPipe Tasks, votre environnement de développement nécessite les éléments suivants:

  • Navigateur Chrome ou Safari
  • Une application Web qui utilise Node.js et NPM Vous pouvez également utiliser des tags de script pour accéder aux tâches MediaPipe via un réseau de diffusion de contenu (CDN).

Dépendances MediaPipe Tasks

MediaPipe Tasks fournit trois bibliothèques prédéfinies pour la vision, le texte et l'audio. En fonction de la tâche MediaPipe utilisée par l'application, importez la bibliothèque de vision, de texte ou audio dans votre projet de développement.

Tâches d'IA générative

Le module MediaPipe Tasks d'IA générative contient des tâches qui gèrent la génération d'images ou de texte. Pour importer les bibliothèques d'IA générative de tâches MediaPipe, importez les dépendances suivantes dans votre projet de développement.

API LLM Inference

La tâche d'inférence LLM MediaPipe est contenue dans la bibliothèque tasks-genai.

npm install @mediapipe/tasks-genai

Si vous souhaitez effectuer un déploiement sur un serveur, vous pouvez utiliser un service de réseau de diffusion de contenu (CDN, Content Delivery Network), tel que jsDelivr, pour ajouter du code directement à votre page HTML.

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

Tâches visuelles

Le module de vision MediaPipe Tasks contient des tâches qui traitent des entrées d'image ou de vidéo. Pour importer la bibliothèque Vision de MediaPipe Tasks, importez la dépendance suivante dans votre projet de développement.

npm install @mediapipe/tasks-vision

Si vous souhaitez effectuer un déploiement sur un serveur, vous pouvez utiliser un service de réseau de diffusion de contenu (CDN, Content Delivery Network), tel que jsDelivr, pour ajouter du code directement à votre page HTML.

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

Tâches liées au texte

Le module de texte "Tâches" MediaPipe contient des tâches qui gèrent les entrées de chaîne. Pour importer la bibliothèque de texte MediaPipe Tasks, importez la dépendance suivante dans votre projet de développement.

npm install @mediapipe/tasks-text

Si vous souhaitez effectuer un déploiement sur un serveur, vous pouvez utiliser un service de réseau de diffusion de contenu (CDN, Content Delivery Network), tel que jsDelivr, pour ajouter du code directement à votre page HTML.

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

Tâches audio

Le module audio MediaPipe Tasks contient des tâches qui gèrent les entrées audio. Pour importer la bibliothèque audio MediaPipe Tasks, importez la dépendance suivante dans votre projet de développement.

npm install @mediapipe/tasks-audio

Si vous souhaitez effectuer un déploiement sur un serveur, vous pouvez utiliser un service de réseau de diffusion de contenu (CDN, Content Delivery Network), tel que jsDelivr, pour ajouter du code directement à votre page HTML.

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

Configuration de BaseOptions

BaseOptions permet la configuration générale des API MediaPipe Task.

Nom de l'option Description Valeurs acceptées
modelAssetBuffer Le contenu du fichier d'éléments du modèle se présente sous la forme d'un tableau de type Uint8Array. Uint8Array
modelAssetPath Chemin de l'élément de modèle à ouvrir et à mapper en mémoire. TrustedResourceUrl
Delegate Active l'accélération matérielle via un délégué d'appareil afin d'exécuter le pipeline MediaPipe. Valeur par défaut : CPU [CPU,
GPU]

Dépannage

Pour obtenir de l'aide concernant des questions techniques concernant MediaPipe, consultez le groupe de discussion ou Stack Overflow afin d'obtenir l'aide de la communauté. Pour signaler des bugs ou demander des fonctionnalités, signalez un problème sur GitHub.