Hướng dẫn thiết lập dành cho web

Trang này cho bạn biết cách thiết lập môi trường phát triển để sử dụng MediaPipe Tác vụ trong ứng dụng web JavaScript của bạn.

Nền tảng và phiên bản được hỗ trợ

Để tạo ứng dụng web bằng MediaPipe Tasks, môi trường phát triển của bạn yêu cầu những điều sau:

  • Trình duyệt Chrome hoặc Safari
  • Ứng dụng web sử dụng Node.js và TLD. Ngoài ra, bạn có thể sử dụng các thẻ tập lệnh để truy cập MediaPipe Tasks thông qua mạng phân phối nội dung (CDN).

Các phần phụ thuộc MediaPipe Tasks

MediaPipe Tasks cung cấp 3 thư viện tạo sẵn cho hình ảnh, văn bản và âm thanh. Tuỳ thuộc vào tác vụ MediaPipe mà ứng dụng sử dụng, hãy nhập tầm nhìn, văn bản hoặc vào dự án phát triển của mình.

Nhiệm vụ dựa trên AI tạo sinh

Mô-đun AI tạo sinh MediaPipe Tasks chứa các nhiệm vụ xử lý hình ảnh hoặc tạo văn bản. Để nhập thư viện AI tạo sinh MediaPipe Tasks, hãy nhập các phần phụ thuộc sau đây vào dự án phát triển của bạn.

API suy luận LLM

Nhiệm vụ Suy luận LLM MediaPipe nằm trong thư viện tasks-genai.

npm install @mediapipe/tasks-genai

Nếu muốn triển khai tới máy chủ, bạn có thể dùng mạng phân phối nội dung (CDN) của Google, chẳng hạn như jsDelivr, để thêm mã trực tiếp vào trang HTML của bạn.

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

Nhiệm vụ liên quan đến thị giác

Mô-đun tầm nhìn MediaPipe Tasks chứa các nhiệm vụ xử lý hình ảnh hoặc video đầu vào. Để nhập thư viện tầm nhìn MediaPipe Tasks, hãy nhập vào dự án phát triển của bạn.

npm install @mediapipe/tasks-vision

Nếu muốn triển khai tới máy chủ, bạn có thể dùng mạng phân phối nội dung (CDN) của Google, chẳng hạn như jsDelivr, để thêm mã trực tiếp vào trang HTML của bạn.

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

Việc cần làm qua tin nhắn

Mô-đun văn bản MediaPipe Tasks chứa các tác vụ xử lý dữ liệu đầu vào dạng chuỗi. Người nhận nhập thư viện văn bản MediaPipe Tasks, hãy nhập phần phụ thuộc sau vào vào dự án phát triển của bạn.

npm install @mediapipe/tasks-text

Nếu muốn triển khai tới máy chủ, bạn có thể dùng mạng phân phối nội dung (CDN) của Google, chẳng hạn như jsDelivr, để thêm mã trực tiếp vào trang HTML của bạn.

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

Tác vụ âm thanh

Mô-đun âm thanh MediaPipe Tasks chứa các tác vụ xử lý đầu vào âm thanh. Người nhận nhập thư viện âm thanh MediaPipe Tasks, nhập phần phụ thuộc sau vào vào dự án phát triển của bạn.

npm install @mediapipe/tasks-audio

Nếu muốn triển khai tới máy chủ, bạn có thể dùng mạng phân phối nội dung (CDN) của Google, chẳng hạn như jsDelivr, để thêm mã trực tiếp vào trang HTML của bạn.

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

Cấu hình BaseOptions

BaseOptions cho phép định cấu hình chung của các API tác vụ MediaPipe.

Tên tùy chọn Mô tả Giá trị được chấp nhận
modelAssetBuffer Nội dung tệp thành phần mô hình dưới dạng một mảng được nhập Uint8Array. Uint8Array
modelAssetPath Đường dẫn của nội dung mô hình sẽ mở và ánh xạ vào bộ nhớ. TrustedResourceUrl
Delegate Bật tính năng tăng tốc phần cứng thông qua việc uỷ quyền thiết bị để chạy quy trình MediaPipe. Giá trị mặc định: CPU. [CPU,
GPU]

Khắc phục sự cố

Để được trợ giúp các câu hỏi kỹ thuật liên quan đến MediaPipe, hãy truy cập cuộc thảo luận nhóm hoặc Nhóm ảnh Cơ hội bổ sung hỗ trợ từ cộng đồng. Để báo cáo lỗi hoặc đưa ra yêu cầu về tính năng, hãy gửi vấn đề lên GitHub.