งาน MediaPipe Face Stylizer ช่วยให้คุณสามารถใช้การจัดรูปแบบใบหน้ากับใบหน้าในรูปภาพ คุณใช้งานนี้เพื่อสร้างรูปโปรไฟล์เสมือนในรูปแบบต่างๆ ได้
ตัวอย่างโค้ดที่อธิบายในวิธีการเหล่านี้จะดูได้ใน GitHub ดูข้อมูลเพิ่มเติมเกี่ยวกับความสามารถ โมเดล และตัวเลือกการกำหนดค่าของงานนี้ได้ที่ภาพรวม
ตัวอย่างโค้ด
โค้ดตัวอย่างสำหรับ Face Stylizer จะแสดงการใช้งานที่สมบูรณ์ของงานนี้ใน 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 -->
<head>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"></script>
</head>
รุ่น
งาน MediaPipe Face Stylizer ต้องใช้โมเดลที่ผ่านการฝึกซึ่งเข้ากันได้กับงานนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับโมเดลที่ผ่านการฝึกแล้วสำหรับสไตไลเซอร์ใบหน้าได้ที่ภาพรวมงานส่วนโมเดล
เลือกและดาวน์โหลดโมเดล แล้วจัดเก็บไว้ในไดเรกทอรีโปรเจ็กต์ โดยทำดังนี้
<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 facestylizer = await FaceStylizer.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "https://storage.googleapis.com/mediapipe-models/face_stylizer/blaze_face_stylizer/float32/latest/face_stylizer_color_sketch.task"
},
});
เตรียมข้อมูล
สไตไลเซอร์ใบหน้าสามารถสไตไลซ์ใบหน้าในรูปภาพได้ทุกรูปแบบที่เบราว์เซอร์โฮสต์รองรับ งานนี้ยังจัดการการประมวลผลอินพุตข้อมูลล่วงหน้า ซึ่งรวมถึงการปรับขนาด การหมุนเวียน และการปรับค่าให้เป็นมาตรฐานด้วย
เรียกใช้งาน
สไตไลเซอร์ใบหน้าใช้เมธอด stylize() เพื่อกระตุ้นให้เกิดการอนุมาน งานนี้จะประมวลผลข้อมูล พยายามจัดรูปแบบใบหน้า แล้วรายงานผลลัพธ์
การเรียกใช้เมธอด stylize() ของสไตไลเซอร์ใบหน้าจะทำงานแบบพร้อมกันและบล็อกชุดข้อความของอินเทอร์เฟซผู้ใช้
โค้ดต่อไปนี้แสดงวิธีเรียกใช้การประมวลผลด้วยโมเดลงาน
const image = document.getElementById("image") as HTMLImageElement;
const faceStylizerResult = faceStylizer.stylize(image);
แฮนเดิลและแสดงผลลัพธ์
สไตไลเซอร์ใบหน้าจะแสดงออบเจ็กต์ MPImage ที่มีการจัดรูปแบบใบหน้าที่โดดเด่นที่สุดภายในรูปภาพอินพุต
ตัวอย่างต่อไปนี้แสดงตัวอย่างข้อมูลเอาต์พุตจากงานนี้
เอาต์พุตด้านบนสร้างขึ้นโดยใช้โมเดลภาพร่างสีกับรูปภาพอินพุตต่อไปนี้
