Guida alla configurazione per il web

Questa pagina mostra come configurare l'ambiente di sviluppo per utilizzare MediaPipe Attività nelle tue applicazioni web JavaScript.

Piattaforme e versioni supportate

Per creare applicazioni web con MediaPipe Tasks, il tuo ambiente di sviluppo richiede quanto segue:

  • Browser Chrome o Safari
  • Un'applicazione web che utilizza Node.js e NPM. In alternativa, puoi utilizzare tag di script per accedere alle attività di MediaPipe attraverso una rete CDN (Content Delivery Network) (CDN).

Dipendenze attività MediaPipe

MediaPipe Tasks fornisce tre librerie predefinite per visione artificiale, testo e audio. A seconda dell'attività MediaPipe utilizzata dall'app, importa la visione artificiale, il testo nel tuo progetto di sviluppo.

Attività dell'IA generativa

Il modulo di IA generativa delle attività di MediaPipe contiene attività che gestiscono immagini la generazione di testo. Per importare le librerie di AI generativa di Attività di MediaPipe, importa il le dipendenze successive nel progetto di sviluppo.

API di inferenza LLM

L'attività di inferenza LLM MediaPipe è contenuta all'interno della libreria tasks-genai.

npm install @mediapipe/tasks-genai

Se vuoi eseguire il deployment su un server, puoi utilizzare una rete CDN (Content Delivery Network) come jsDelivr, per aggiungere il codice direttamente la tua pagina HTML.

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

Attività relative alla vista

Il modulo di visione delle attività di MediaPipe contiene attività che gestiscono immagini o video di input. Per importare la libreria MediaPipe Tasks Vision, importa quanto segue per il tuo progetto di sviluppo.

npm install @mediapipe/tasks-vision

Se vuoi eseguire il deployment su un server, puoi utilizzare una rete CDN (Content Delivery Network) come jsDelivr, per aggiungere il codice direttamente la tua pagina HTML.

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

Attività di testo

Il modulo di testo Attività di MediaPipe contiene attività che gestiscono gli input di stringa. A importa la libreria di testo delle attività di MediaPipe, importa la seguente dipendenza nel tuo progetto di sviluppo.

npm install @mediapipe/tasks-text

Se vuoi eseguire il deployment su un server, puoi utilizzare una rete CDN (Content Delivery Network) come jsDelivr, per aggiungere il codice direttamente la tua pagina HTML.

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

Attività audio

Il modulo audio Attività di MediaPipe contiene attività che gestiscono gli input audio. A importa la libreria audio di MediaPipe Tasks, importa la seguente dipendenza nel tuo progetto di sviluppo.

npm install @mediapipe/tasks-audio

Se vuoi eseguire il deployment su un server, puoi utilizzare una rete CDN (Content Delivery Network) come jsDelivr, per aggiungere il codice direttamente la tua pagina HTML.

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

Configurazione BaseOptions

BaseOptions consente la configurazione generale delle API MediaPipe Tasks.

Nome opzione Descrizione Valori accettati
modelAssetBuffer I contenuti del file dell'asset del modello come array di tipo Uint8Array. Uint8Array
modelAssetPath Il percorso dell'asset del modello da aprire e mappare in memoria. TrustedResourceUrl
Delegate Abilita l'accelerazione hardware attraverso il delegato di un dispositivo per eseguire la pipeline MediaPipe. Valore predefinito: CPU. [CPU,
GPU]

Risoluzione dei problemi

Per ricevere assistenza in merito a domande tecniche relative a MediaPipe, leggi la Discussione gruppo o Impila Overflow per ricevere assistenza da la comunità. Per segnalare bug o richiedere funzionalità, segnala un problema su GitHub.