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

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

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

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

วิธีการเหล่านี้จะแสดงวิธีใช้เครื่องมือจุดสังเกตใบหน้าสำหรับเว็บและ 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 faceLandmarker = await faceLandmarker.createFromOptions(
    vision,
    {
      baseOptions: {
        modelAssetPath: "path/to/model"
      },
      runningMode: runningMode
    });

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

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

ชื่อตัวเลือก	คำอธิบาย	ช่วงค่า	ค่าเริ่มต้น
`running_mode`	ตั้งค่าโหมดการทำงานสำหรับงาน มี 2 แบบ โหมด: รูปภาพ: โหมดสำหรับอินพุตรูปภาพเดียว วิดีโอ: โหมดสำหรับเฟรมที่ถอดรหัสของ วิดีโอหรือสตรีมแบบสดของข้อมูลอินพุต เช่น จากกล้อง	{`IMAGE, VIDEO`}	`IMAGE`
`numFaces`	จำนวนใบหน้าสูงสุดที่แท็กสามารถตรวจจับได้ `FaceLandmarker` ใช้การปรับให้เรียบเฉพาะเมื่อ ตั้งค่า `num_faces` เป็น 1	`Integer > 0`	`1`
`minFaceDetectionConfidence`	คะแนนความเชื่อมั่นขั้นต่ำสำหรับการตรวจจับใบหน้า ถือว่าประสบความสำเร็จ	`Float [0.0,1.0]`	`0.5`
`minFacePresenceConfidence`	คะแนนความเชื่อมั่นขั้นต่ำในการแสดงใบหน้า ในการตรวจจับจุดสังเกตของใบหน้า	`Float [0.0,1.0]`	`0.5`
`minTrackingConfidence`	คะแนนความเชื่อมั่นขั้นต่ำสำหรับการติดตามใบหน้า จะถือว่าประสบความสำเร็จ	`Float [0.0,1.0]`	`0.5`
`outputFaceBlendshapes`	เครื่องมือทำเครื่องหมายใบหน้าจะแสดงการเบลนด์ภาพของใบหน้าหรือไม่ ใบหน้าเบลนด์ใช้สำหรับการแสดงภาพโมเดลใบหน้า 3 มิติ	`Boolean`	`False`
`outputFacialTransformationMatrixes`	FaceLandmarker แสดงเอาต์พุตใบหน้าหรือไม่ ของเมทริกซ์การเปลี่ยนรูปแบบ FaceLandmarker ใช้ เมทริกซ์ในการแปลงจุดสังเกตของใบหน้าจากรูปแบบใบหน้า Canonical เป็น ใบหน้าที่ตรวจพบ เพื่อให้ผู้ใช้สามารถใช้เอฟเฟกต์กับจุดสังเกตที่ตรวจพบ	`Boolean`	`False`

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

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

เรียกใช้งาน

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

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

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

รูปภาพ

const image = document.getElementById("image") as HTMLImageElement;
const faceLandmarkerResult = faceLandmarker.detect(image);

วิดีโอ

await faceLandmarker.setOptions({ runningMode: "VIDEO" });

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

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

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

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

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

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

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

FaceLandmarkerResult:
  face_landmarks:
    NormalizedLandmark #0:
      x: 0.5971359014511108
      y: 0.485361784696579
      z: -0.038440968841314316
    NormalizedLandmark #1:
      x: 0.3302789330482483
      y: 0.29289937019348145
      z: -0.09489090740680695
    ... (478 landmarks for each face)
  face_blendshapes:
    browDownLeft: 0.8296722769737244
    browDownRight: 0.8096957206726074
    browInnerUp: 0.00035583582939580083
    browOuterUpLeft: 0.00035752105759456754
    ... (52 blendshapes for each face)
  facial_transformation_matrixes:
    [9.99158978e-01, -1.23036895e-02, 3.91213447e-02, -3.70770246e-01]
    [1.66496094e-02,  9.93480563e-01, -1.12779640e-01, 2.27719707e+01]
    ...

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

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