本頁說明如何設定開發環境，以便在 JavaScript 網頁應用程式中使用 MediaPipe Tasks。
支援的平台和版本
如要使用 MediaPipe Tasks 建立網頁應用程式，您的開發環境必須具備下列項目：
- Chrome 或 Safari 瀏覽器
- 使用 Node.js 和 NPM 的網頁應用程式。或者，您也可以使用指令碼標記，透過內容傳遞網路 (CDN) 存取 MediaPipe 工作。
MediaPipe 工作依附元件
MediaPipe Tasks 提供三個預先建構的程式庫，適用於視覺、文字和音訊。根據應用程式使用的 MediaPipe 工作，將視覺、文字或音樂庫匯入您的開發專案。
生成式 AI 工作
MediaPipe Tasks Generative AI 模組包含處理圖片或文字生成的工作。如要匯入 MediaPipe Tasks Generative AI 程式庫，請將下列依附元件匯入您的開發專案中。
LLM 推論 API
MediaPipe LLM 推論工作包含在 tasks-genai 程式庫中。
npm install @mediapipe/tasks-genai
如要將程式碼部署至伺服器，您可以使用內容傳遞網路 (CDN) 服務 (例如 jsDelivr)，直接將程式碼加入 HTML 網頁。
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai/genai_bundle.cjs"
crossorigin="anonymous"></script>
</head>
視覺工作
MediaPipe 工作視覺模組包含處理圖片或影片輸入內容的工作。如要匯入 MediaPipe Tasks 工作視覺程式庫，請將下列依附元件匯入您的開發專案。
npm install @mediapipe/tasks-vision
如要將程式碼部署至伺服器，您可以使用內容傳遞網路 (CDN) 服務 (例如 jsDelivr)，直接將程式碼加入 HTML 網頁。
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
文字工作
MediaPipe 工作文字模組包含處理字串輸入內容的工作。如要匯入 MediaPipe Tasks 文字程式庫，請將以下依附元件匯入開發專案。
npm install @mediapipe/tasks-text
如要將程式碼部署至伺服器，您可以使用內容傳遞網路 (CDN) 服務 (例如 jsDelivr)，直接將程式碼加入 HTML 網頁。
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-text/text_bundle.js"
crossorigin="anonymous"></script>
</head>
音訊工作
MediaPipe Tasks 音訊模組包含處理音訊輸入的工作。如要匯入 MediaPipe Tasks 音樂庫，請將以下依附元件匯入您的開發專案中。
npm install @mediapipe/tasks-audio
如要將程式碼部署至伺服器，您可以使用內容傳遞網路 (CDN) 服務 (例如 jsDelivr)，直接將程式碼加入 HTML 網頁。
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-audio/audio_bundle.js"
crossorigin="anonymous"></script>
</head>
BaseOptions 設定
BaseOptions 允許 MediaPipe Task API 的一般設定。
| 選項名稱 | 說明 | 接受的值 |
|---|---|---|
modelAssetBuffer |
以 Uint8Array 型別陣列形式呈現模型資產檔案內容。 |
Uint8Array |
modelAssetPath |
要開啟並對應至記憶體的模型資產路徑。 | TrustedResourceUrl |
Delegate |
透過裝置委派項目啟用硬體加速功能，以執行 MediaPipe 管道。預設值為 CPU。 |
[CPU,GPU] |
疑難排解
如需 MediaPipe 相關技術問題的協助，請造訪討論群組或 StackOverflow 取得社群支援。如要回報錯誤或提出功能要求，請在 GitHub 上回報問題。