คู่มือการตั้งค่าสำหรับเว็บ

หน้านี้แสดงวิธีตั้งค่าสภาพแวดล้อมการพัฒนาเพื่อใช้ MediaPipe Tasks ในเว็บแอปพลิเคชัน JavaScript

แพลตฟอร์มและเวอร์ชันที่รองรับ

ในการสร้างเว็บแอปพลิเคชันด้วย MediaPipe Tasks สภาพแวดล้อมในการพัฒนาซอฟต์แวร์ของคุณ ต้องการสิ่งต่อไปนี้

  • เบราว์เซอร์ Chrome หรือ Safari
  • เว็บแอปพลิเคชันที่ใช้ Node.js และ NPM อีกวิธีหนึ่งคือ แท็กสคริปต์เพื่อเข้าถึงงาน MediaPipe ผ่านเครือข่ายนำส่งข้อมูล (CDN)

ทรัพยากร Dependency ของ MediaPipe Tasks

MediaPipe Tasks มีไลบรารีที่สร้างไว้ล่วงหน้า 3 รายการสำหรับการมองเห็น ข้อความ และเสียง นำเข้าวิสัยทัศน์ ข้อความ หรือ คลังเพลงและเสียงลงในโปรเจ็กต์พัฒนา

งานของ Generative AI

โมดูล Generative AI ของ MediaPipe Tasks มีงานที่จัดการกับรูปภาพหรือ การสร้างข้อความ หากต้องการนำเข้าไลบรารี MediaPipe Tasks Generative AI ให้นำเข้าลิงก์ ทรัพยากร Dependency ต่อไปนี้ในโปรเจ็กต์การพัฒนาของคุณ

API การอนุมานของ LLM

งาน MediaPipe LLM Inference อยู่ในไลบรารี 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 Tasks มีงานที่จัดการอินพุตสตริง ถึง นำเข้าไลบรารีข้อความ 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 โปรดไปที่การอภิปราย group หรือ Stack รายการเพิ่มเติมสำหรับการสนับสนุนจาก กับชุมชน หากต้องการรายงานข้อบกพร่องหรือส่งคำขอฟีเจอร์ ให้แจ้งปัญหาใน GitHub