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

หน้านี้แสดงวิธีตั้งค่าสภาพแวดล้อมการพัฒนาเพื่อใช้ 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

<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

<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

<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