Panduan penyiapan untuk web

Halaman ini menunjukkan cara menyiapkan lingkungan pengembangan untuk menggunakan MediaPipe Tugas di aplikasi web JavaScript Anda.

Platform dan versi yang didukung

Untuk membuat aplikasi web dengan MediaPipe Tasks, lingkungan pengembangan Anda memerlukan hal berikut:

  • Browser Chrome atau Safari
  • Aplikasi web yang menggunakan Node.js dan NPM. Atau, Anda bisa menggunakan tag skrip untuk mengakses MediaPipe Tasks melalui jaringan penayangan konten (CDN) (CDN).

Dependensi Tugas MediaPipe

MediaPipe Tasks menyediakan tiga library bawaan untuk visi, teks, dan audio. Bergantung pada MediaPipe Task yang digunakan oleh aplikasi, impor visi, teks, atau koleksi audio ke dalam project pengembangan Anda.

Tugas AI generatif

Modul AI Generatif Tugas MediaPipe berisi tugas yang menangani pembuatan teks. Untuk mengimpor library AI Generatif Tugas MediaPipe, impor dependensi berikut ke dalam project pengembangan Anda.

LLM Inference API

Tugas Inferensi LLM MediaPipe dimuat dalam library tasks-genai.

npm install @mediapipe/tasks-genai

Jika ingin men-deploy ke server, Anda dapat menggunakan jaringan penayangan konten (CDN) layanan tambahan, seperti jsDelivr, untuk menambahkan kode secara langsung ke halaman HTML Anda.

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

Tugas penglihatan

Modul visi MediaPipe Tasks berisi tugas yang menangani gambar atau video input. Untuk mengimpor library MediaPipe Tasks vision, impor perintah berikut dependensi ke dalam project pengembangan Anda.

npm install @mediapipe/tasks-vision

Jika ingin men-deploy ke server, Anda dapat menggunakan jaringan penayangan konten (CDN) layanan tambahan, seperti jsDelivr, untuk menambahkan kode secara langsung ke halaman HTML Anda.

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

Tugas teks

Modul teks MediaPipe Tasks berisi tugas yang menangani input string. Kepada impor pustaka teks MediaPipe Tasks, impor dependensi berikut ke ke dalam proyek pengembangan.

npm install @mediapipe/tasks-text

Jika ingin men-deploy ke server, Anda dapat menggunakan jaringan penayangan konten (CDN) layanan tambahan, seperti jsDelivr, untuk menambahkan kode secara langsung ke halaman HTML Anda.

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

Tugas audio

Modul audio MediaPipe Tasks berisi tugas yang menangani input suara. Kepada impor library audio MediaPipe Tasks, impor dependensi berikut ke Anda ke dalam proyek pengembangan.

npm install @mediapipe/tasks-audio

Jika ingin men-deploy ke server, Anda dapat menggunakan jaringan penayangan konten (CDN) layanan tambahan, seperti jsDelivr, untuk menambahkan kode secara langsung ke halaman HTML Anda.

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

Konfigurasi BaseOptions

BaseOptions memungkinkan konfigurasi umum MediaPipe Task API.

Nama opsi Deskripsi Nilai yang diterima
modelAssetBuffer File aset model berisi array yang memiliki jenis Uint8Array. Uint8Array
modelAssetPath Jalur aset model yang akan dibuka dan dipetakan ke dalam memori. TrustedResourceUrl
Delegate Mengaktifkan akselerasi hardware melalui delegasi perangkat untuk menjalankan pipeline MediaPipe. Nilai default: CPU. [CPU,
GPU]

Pemecahan masalah

Untuk bantuan terkait pertanyaan teknis terkait MediaPipe, kunjungi diskusi group atau Stack Overflow untuk dukungan dari bagi masyarakat. Untuk melaporkan bug atau mengajukan permintaan fitur, ajukan masalah di GitHub.