ขอแนะนำ LiteRT: รันไทม์ประสิทธิภาพสูงของ Google สำหรับ AI ในอุปกรณ์ หรือที่รู้จักกันในชื่อ TensorFlow Lite

หน้านี้ได้รับการแปลโดย Cloud Translation API

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

งานการตรวจจับใบหน้าของ MediaPipe ช่วยให้คุณตรวจจับใบหน้าในรูปภาพหรือวิดีโอได้ คุณสามารถใช้ งานนี้เพื่อค้นหาใบหน้าและลักษณะใบหน้าภายในเฟรม งานนี้ใช้ โมเดลแมชชีนเลิร์นนิง (ML) ที่ทำงานกับรูปภาพเดี่ยวหรือภาพต่อเนื่อง รูปภาพ เอาต์พุตของงานจะแสดงตำแหน่งใบหน้าพร้อมด้วยรายการต่อไปนี้ ประเด็นสำคัญของใบหน้า ได้แก่ ตาซ้าย ตาขวา ปลายจมูก ปาก โศกนาฏกรรมที่ตาซ้าย และ การปวดตาข้างขวา

วิธีการเหล่านี้แสดงวิธีใช้ตัวตรวจจับใบหน้าสำหรับเว็บและ JavaScript แอป สำหรับข้อมูลเพิ่มเติมเกี่ยวกับความสามารถ โมเดล และการกำหนดค่า ตัวเลือกของงานนี้ โปรดดูภาพรวม

ตัวอย่างโค้ด

โค้ดตัวอย่างสำหรับตัวตรวจจับใบหน้าช่วยให้สามารถติดตั้งใช้งานได้อย่างสมบูรณ์ ใน JavaScript เพื่อเป็นข้อมูลอ้างอิง โค้ดนี้จะช่วยคุณทดสอบงานนี้และรับ เริ่มสร้างแอปตรวจจับใบหน้าของคุณเอง คุณสามารถดู เรียกใช้ และ แก้ไขโค้ดตัวอย่างของอุปกรณ์ตรวจจับใบหน้า โดยใช้แค่เว็บเบราว์เซอร์

ตั้งค่า

ส่วนนี้จะอธิบายขั้นตอนสำคัญในการตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์ สำหรับใช้ตรวจจับใบหน้าโดยเฉพาะ สำหรับข้อมูลทั่วไปเกี่ยวกับ การตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์เว็บและ JavaScript รวมถึง โปรดดูข้อกำหนดเวอร์ชันของแพลตฟอร์ม คู่มือการตั้งค่าสำหรับเว็บ

แพ็กเกจ JavaScript

โค้ดตัวตรวจจับใบหน้ามีให้บริการผ่าน MediaPipe @mediapipe/tasks-vision แพ็กเกจ NPM คุณสามารถ ให้ค้นหาและดาวน์โหลดไลบรารีเหล่านี้โดยทำตามวิธีการในแพลตฟอร์ม คู่มือการตั้งค่า

คุณสามารถติดตั้งแพ็กเกจที่จำเป็นผ่าน NPM โดยใช้คำสั่งต่อไปนี้

npm install @mediapipe/tasks-vision

หากต้องการนำเข้ารหัสงานผ่านเครือข่ายนำส่งข้อมูล (CDN) ให้เพิ่มโค้ดต่อไปนี้ใน <head> ในไฟล์ HTML ของคุณ

<!-- You can replace JSDeliver with another CDN if you prefer to -->
<head>
  <script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
    crossorigin="anonymous"></script>
</head>

รุ่น

งานตัวตรวจจับใบหน้าของ MediaPipe ต้องการโมเดลที่ผ่านการฝึกซึ่งสามารถทำงานร่วมกับ งาน ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ผ่านการฝึกสำหรับอุปกรณ์ตรวจจับใบหน้าได้ที่ ภาพรวมงานส่วนโมเดล

เลือกและดาวน์โหลดโมเดล แล้วเก็บไว้ในไดเรกทอรีโปรเจ็กต์ของคุณ:

<dev-project-root>/app/shared/models/

สร้างงาน

ใช้ฟังก์ชันใดฟังก์ชันหนึ่งของการตรวจจับใบหน้า createFrom...() เพื่อ เตรียมงานสำหรับการเรียกใช้การอนุมาน ใช้ createFromModelPath() ที่มีเส้นทางแบบสัมพัทธ์หรือสัมบูรณ์ไปยังไฟล์โมเดลที่ฝึก หากโมเดลโหลดลงในหน่วยความจำแล้ว คุณสามารถใช้ createFromModelBuffer() วิธี

ตัวอย่างโค้ดด้านล่างสาธิตการใช้ฟังก์ชัน createFromOptions() เพื่อ ตั้งค่างาน ฟังก์ชัน createFromOptions จะช่วยให้คุณสามารถกำหนดค่า เครื่องตรวจจับใบหน้าพร้อมตัวเลือกการกำหนดค่า ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดค่า โปรดดูตัวเลือกที่หัวข้อตัวเลือกการกำหนดค่า

โค้ดต่อไปนี้แสดงวิธีสร้างและกำหนดค่างานด้วย ตัวเลือก:

const vision = await FilesetResolver.forVisionTasks(
  // path/to/wasm/root
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const facedetector = await FaceDetector.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

ตัวเลือกการกำหนดค่า

งานนี้มีตัวเลือกการกำหนดค่าต่อไปนี้สำหรับเว็บและ JavaScript แอปพลิเคชัน:

ชื่อตัวเลือก	คำอธิบาย	ช่วงค่า	ค่าเริ่มต้น
`option_var_1_web_js`	ตั้งค่าโหมดการทำงานสำหรับงาน มี 2 แบบ โหมด: รูปภาพ: โหมดสำหรับอินพุตรูปภาพเดียว วิดีโอ: โหมดสำหรับเฟรมที่ถอดรหัสของ วิดีโอหรือสตรีมแบบสดของข้อมูลอินพุต เช่น จากกล้อง	{`IMAGE, VIDEO`}	`IMAGE`
`minDetectionConfidence`	คะแนนความเชื่อมั่นขั้นต่ำสำหรับการตรวจจับใบหน้าจะถือว่าสำเร็จ	`Float [0,1]`	`0.5`
`minSuppressionThreshold`	เกณฑ์การระงับที่ไม่ใช่สูงสุดขั้นต่ำสำหรับการตรวจจับใบหน้าที่จะถือว่าซ้อนทับกัน	`Float [0,1]`	`0.3`

เตรียมข้อมูล

ตัวตรวจจับใบหน้าสามารถตรวจจับใบหน้าในรูปภาพในรูปแบบใดก็ได้ที่ เบราว์เซอร์โฮสต์ งานนี้ยังจัดการการประมวลผลอินพุตข้อมูลล่วงหน้าด้วย ซึ่งรวมถึง การปรับขนาด การหมุนเวียน และการปรับค่าให้เป็นมาตรฐาน วิธีตรวจจับใบหน้าในวิดีโอ คุณสามารถใช้ API เพื่อประมวลผลทีละเฟรมอย่างรวดเร็ว โดยใช้การประทับเวลา ของเฟรมเพื่อกำหนดว่าเมื่อใดที่ใบหน้าจะเกิดขึ้นในวิดีโอ

เรียกใช้งาน

เครื่องตรวจจับใบหน้าใช้ detect() (ในโหมดทำงาน image) และ detectForVideo() (โดยมี video ในโหมดทำงาน) เมธอดเพื่อทริกเกอร์ การอนุมาน งานนี้จะประมวลผลข้อมูล พยายามตรวจจับใบหน้า และ จากนั้นรายงานผลลัพธ์

การเรียกใช้เครื่องตรวจจับใบหน้า detect() และ detectForVideo() วิธีการเรียกใช้ พร้อมกันและบล็อกชุดข้อความของอินเทอร์เฟซผู้ใช้ หากตรวจจับใบหน้า ในเฟรมวิดีโอจากกล้องของอุปกรณ์ การตรวจหาแต่ละครั้งจะบล็อก ชุดข้อความ คุณสามารถป้องกันปัญหานี้ได้โดยให้ผู้ปฏิบัติงานบนเว็บเรียกใช้ detect() และ detectForVideo() เมธอดในชุดข้อความอื่น

โค้ดต่อไปนี้แสดงวิธีดำเนินการประมวลผลด้วยโมเดลงาน

รูปภาพ

const image = document.getElementById("image") as HTMLImageElement;
const faceDetectorResult = faceDetector.detect(image);

วิดีโอ

await faceDetector.setOptions({ runningMode: "video" });

let lastVideoTime = -1;
function renderLoop(): void {
  const video = document.getElementById("video");

  if (video.currentTime !== lastVideoTime) {
    const detections = faceDetector.detectForVideo(video);
    processResults(detections);
    lastVideoTime = video.currentTime;
  }

  requestAnimationFrame(() => {
    renderLoop();
  });
}

สำหรับการติดตั้งใช้งานโปรแกรมตรวจจับใบหน้าที่สมบูรณ์มากขึ้น โปรดดูที่ ตัวอย่างโค้ด

จัดการและแสดงผลลัพธ์

ตัวตรวจจับใบหน้าจะสร้างออบเจ็กต์ผลลัพธ์ของตัวตรวจจับใบหน้าสำหรับการตรวจจับแต่ละรายการ วิ่งได้ วัตถุผลลัพธ์มีใบหน้าในพิกัดรูปภาพและใบหน้าในโลก พิกัด

ตัวอย่างต่อไปนี้แสดงตัวอย่างข้อมูลเอาต์พุตจากงานนี้

FaceDetectionResult:
  Detections:
    Detection #0:
      BoundingBox:
        origin_x: 126
        origin_y: 100
        width: 463
        height: 463
      Categories:
        Category #0:
          index: 0
          score: 0.9729152917861938
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.18298381567001343
          y: 0.2961040139198303
        NormalizedKeypoint #1:
          x: 0.3302789330482483
          y: 0.29289937019348145
        ... (6 keypoints for each face)
    Detection #1:
      BoundingBox:
        origin_x: 616
        origin_y: 193
        width: 430
        height: 430
      Categories:
        Category #0:
          index: 0
          score: 0.9251380562782288
      NormalizedKeypoints:
        NormalizedKeypoint #0:
          x: 0.6151331663131714
          y: 0.3713381886482239
        NormalizedKeypoint #1:
          x: 0.7460576295852661
          y: 0.38825345039367676
        ... (6 keypoints for each face)

รูปภาพต่อไปนี้แสดงการแสดงภาพเอาต์พุตของงาน

สำหรับรูปภาพที่ไม่มีกรอบล้อมรอบ โปรดดูรูปภาพต้นฉบับ

โค้ดตัวอย่างตัวตรวจจับใบหน้าแสดงวิธีการแสดง ผลลัพธ์ที่ส่งคืนจากงาน โปรดดู ตัวอย่างโค้ด