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

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