網頁版設定指南

本頁面說明如何設定使用 MediaPipe 的開發環境 JavaScript 網頁應用程式的工作。

支援的平台和版本

如要使用 MediaPipe Tasks 建立網頁應用程式，您的開發環境 要求下列項目：

  • Chrome 或 Safari 瀏覽器
  • 使用 Node.js 和 NPM 的網頁應用程式。另外，您也可以使用 指令碼標記，以透過內容傳遞網路存取 MediaPipe Tasks (CDN)。

MediaPipe 工作依附元件

MediaPipe Tasks 提供三個預建程式庫，適用於視覺、文字和音訊。 根據應用程式使用的 MediaPipe 工作，匯入視覺、文字或 新增至開發專案中。

生成式 AI 工作

MediaPipe Tasks 生成式 AI 模組包含處理圖片 像是生成文字、圖片、文字如要匯入 MediaPipe Tasks 生成式 AI 程式庫，請匯入 導入以下依附元件

大型語言模型推論 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 Tasks 視覺模組包含處理圖片或影片的工作 輸入內容如要匯入 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 相關技術問題的說明，請前往討論區 群組或 Stack 向支援團隊尋求協助 社群如要回報錯誤或提出功能要求，請在 GitHub。