หน้านี้แสดงวิธีตั้งค่าสภาพแวดล้อมการพัฒนาเพื่อใช้ MediaPipe Tasks ในเว็บแอปพลิเคชัน JavaScript
แพลตฟอร์มและเวอร์ชันที่รองรับ
ในการสร้างเว็บแอปพลิเคชันด้วย MediaPipe Tasks สภาพแวดล้อมในการพัฒนาซอฟต์แวร์ของคุณจำเป็นต้องมีสิ่งต่อไปนี้
- เบราว์เซอร์ Chrome หรือ Safari
- เว็บแอปพลิเคชันที่ใช้ Node.js และ NPM หรือคุณอาจใช้แท็กสคริปต์เพื่อเข้าถึงงาน MediaPipe ผ่านเครือข่ายนำส่งข้อมูล (CDN) ก็ได้
ทรัพยากร Dependency ของงาน MediaPipe
MediaPipe Tasks มีไลบรารีที่สร้างไว้ล่วงหน้า 3 รายการสำหรับการมองเห็น ข้อความ และเสียง นำเข้าคลังภาพ ข้อความ หรือไลบรารีเสียงไปยังโปรเจ็กต์การพัฒนาของคุณ ทั้งนี้ขึ้นอยู่กับงาน MediaPipe ที่แอปใช้
งาน Generative AI
โมดูล MediaPipe Tasks Generative AI มีงานที่จัดการการสร้างรูปภาพหรือข้อความ หากต้องการนำเข้าไลบรารี MediaPipe Tasks Generative AI ให้นำเข้าทรัพยากร Dependency ต่อไปนี้ไปยังโปรเจ็กต์การพัฒนาของคุณ
API การอนุมาน LLM
งานการอนุมาน 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 ให้นำเข้าทรัพยากร Dependency ต่อไปนี้ไปยังโปรเจ็กต์การพัฒนาของคุณ
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 ให้นำเข้าทรัพยากร Dependency ต่อไปนี้ไปยังโปรเจ็กต์การพัฒนาของคุณ
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 ให้นำเข้าทรัพยากร Dependency ต่อไปนี้ไปยังโปรเจ็กต์การพัฒนาของคุณ
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 ช่วยให้กำหนดค่าทั่วไปของ API งาน MediaPipe
ชื่อตัวเลือก | คำอธิบาย | ค่าที่ยอมรับ |
---|---|---|
modelAssetBuffer |
เนื้อหาไฟล์ชิ้นงานโมเดลเป็นอาร์เรย์ประเภท Uint8Array |
Uint8Array |
modelAssetPath |
เส้นทางของเนื้อหารูปแบบที่จะเปิดและแมปในหน่วยความจำ | TrustedResourceUrl |
Delegate |
เปิดใช้การเร่งฮาร์ดแวร์ผ่านมอบสิทธิ์อุปกรณ์เพื่อเรียกใช้ไปป์ไลน์ MediaPipe ค่าเริ่มต้น: CPU |
[CPU ,GPU ] |
การแก้ปัญหา
สำหรับความช่วยเหลือเกี่ยวกับคำถามทางเทคนิคที่เกี่ยวข้องกับ MediaPipe โปรดไปที่กลุ่มสนทนาหรือ Stack Overflow เพื่อรับการสนับสนุนจากชุมชน หากต้องการรายงานข้อบกพร่องหรือส่งคำขอฟีเจอร์ ให้แจ้งปัญหาใน GitHub