浏览器端基于face-api.js的多人脸识别系统构建与优化

Swapface人脸交换

一款创建逼真人脸交换的ai换脸工具

45

查看详情

import * as faceapi from 'face-api.js'; import { onMount, onDestroy } from 'svelte';  // ... (其他变量定义)  const detectionOptions = {   withLandmarks: true,   withDescriptors: true,   minConfidence: 0.5,   MODEL_URLS: {     Mobilenetv1Model: "https://raw.githubusercontent.com/ml5js/ml5-data-and-models/main/models/faceapi/ssd_mobilenetv1_model-weights_manifest.json",     FaceLandmarkModel: "https://raw.githubusercontent.com/ml5js/ml5-data-and-models/main/models/faceapi/face_landmark_68_model-weights_manifest.json",     FaceRecognitionModel: "https://raw.githubusercontent.com/ml5js/ml5-data-and-models/main/models/faceapi/face_recognition_model-weights_manifest.json",   }, };  // ... (onMount, onDestroy)  async function make() {   video = await getVideo(); // 获取视频流   canvas = createCanvas(width, height);   ctx = canvas.getContext("2d");    // 并行加载所有模型   await Promise.all([     faceapi.nets.ssdMobilenetv1.loadFromUri(detectionOptions.MODEL_URLS.Mobilenetv1Model),     faceapi.nets.faceRecognitionNet.loadFromUri(detectionOptions.MODEL_URLS.FaceRecognitionModel),     faceapi.nets.faceLandmark68Net.loadFromUri(detectionOptions.MODEL_URLS.FaceLandmarkModel),   ]);   console.log("Models loaded!");   modelReady(); // 模型加载完成后调用 }

let labeledFaceDescriptors = []; // 存储所有客户的 LabeledFaceDescriptors    async function getLabeledFaceDescriptions() {     const descriptorsPromises = $customers.map(async (customer) => {       if (customer.image_url == null) return;        const descriptorsForThisCustomer = []; // 为每个客户初始化一个独立的描述符数组       // 尝试从同一图片获取多个描述符，增加鲁棒性       for (let i = 0; i < 2; i++) { // 循环次数可调整         try {           const img = await faceapi.fetchImage($baseURL + customer.image_url);           const face_detection = await faceapi             .detectSingleFace(img)             .withFaceLandmarks()             .withFaceDescriptor();            if (face_detection && face_detection.descriptor) {             descriptorsForThisCustomer.push(face_detection.descriptor);           }         } catch (error) {           console.warn(`Failed to process image for ${customer.name}:`, error);         }       }        if (descriptorsForThisCustomer.length > 0) {         // 使用独立的描述符数组创建 LabeledFaceDescriptors         return new faceapi.LabeledFaceDescriptors(customer.name, descriptorsForThisCustomer);       }       return undefined; // 如果没有找到描述符，则返回undefined     });      // 等待所有客户的描述符生成完毕，并过滤掉undefined项     labeledFaceDescriptors = (await Promise.all(descriptorsPromises)).filter(d => d !== undefined);     console.log("Labeled Face Descriptors loaded:", labeledFaceDescriptors);   }

async function modelReady() {     await getLabeledFaceDescriptions(); // 确保加载了标签化人脸描述符      if (labeledFaceDescriptors.length === 0) {       console.warn("No labeled face descriptors found. Recognition will not work.");       return;     }      // 使用所有标签化人脸描述符初始化 FaceMatcher     const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6); // 0.6是匹配阈值，可根据需求调整      const displaySize = {       width: video.width,       height: video.height     };      setInterval(async () => {       // 检测视频流中的所有人脸       const detections = await faceapi         .detectAllFaces(video) // 使用 detectAllFaces         .withFaceLandmarks()         .withFaceDescriptors();        // 调整检测结果的大小以适应显示尺寸       const resizedDetections = faceapi.resizeResults(detections, displaySize);        // 对每张检测到的人脸进行匹配       const results = resizedDetections.map((d) =>         faceMatcher.findBestMatch(d.descriptor)       );        // 绘制结果       drawResults(resizedDetections, results);     }, 100); // 每100毫秒检测一次   }

function drawResults(detections, results) {     // 清空Canvas并绘制视频帧     ctx.clearRect(0, 0, width, height);     ctx.drawImage(video, 0, 0, width, height);      if (detections && detections.length > 0) {       for (let i = 0; i < detections.length; i++) {         const detection = detections[i];         const bestMatch = results[i];          // 绘制人脸边界框         const box = detection.detection.box; // 获取边界框信息         ctx.beginPath();         ctx.rect(box.x, box.y, box.width, box.height);         ctx.strokeStyle = "#a15ffb";         ctx.lineWidth = 2;         ctx.stroke();         ctx.closePath();          // 绘制识别出的姓名         const label = bestMatch.label; // 获取匹配到的标签（姓名）         const distance = Math.round(bestMatch.distance * 100) / 100; // 匹配距离         const displayText = `${label} (${distance})`;          const textHeight = 16;         ctx.font = `${textHeight}px Arial`;         const textWidth = ctx.measureText(displayText).width;          ctx.fillStyle = "#a15ffb";         ctx.fillRect(box.x, box.y - textHeight - 8, textWidth + 8, textHeight + 8); // 绘制背景框         ctx.fillStyle = "#000000";         ctx.fillText(displayText, box.x + 4, box.y - 4); // 绘制文本          // 处理匹配到的客户信息         if (label !== "unknown") { // face-api.js默认使用"unknown"           const matchedCustomer = $customers.find(             (customer) => customer.name === label           );           if (matchedCustomer) {             // 这里可以触发业务逻辑，例如调用外部函数显示客户详情             // 注意：频繁调用 view_sales_function 可能会导致性能问题或重复操作，             // 实际应用中可能需要加入去抖动 (debounce) 或只在首次识别时触发。             // view_sales_function(matchedCustomer);            }         }       }     }   }

<script>   import * as faceapi from 'face-api.js';   import { onMount, onDestroy } from 'svelte';   // 假设 $customers 和 $baseURL 是 Svelte stores，用于获取客户数据和基础URL   // import { customers, baseURL } from './stores'; // 示例导入，实际项目中可能不同   // 模拟 Svelte stores，实际项目中应从 store.js 等文件导入   let $customers = [{ name: 'Alice', image_url: 'https://i.pravatar.cc/150?img=1' }, { name: 'Bob', image_url: 'https://i.pravatar.cc/150?img=2' }];   let $baseURL = ''; // 假设图片是绝对路径或相对路径，这里可留空或设置    let video;   let width = 640; // 调整视频宽度   let height = 480; // 调整视频高度   let canvas, ctx;   let container;   let labeledFaceDescriptors = []; // 存储所有客户的 LabeledFaceDescriptors    const detectionOptions = {     withLandmarks: true,     withDescriptors: true,     minConfidence: 0.5,     MODEL_URLS: {       Mobilenetv1Model: "https://raw.githubusercontent.com