const config = {
  backend: 'wasm',
  modelBasePath: 'https://cdn.jsdelivr.net/npm/@vladmandic/human/models',
  // ...
};

// 配置
{
  backend: 'wasm',
  modelBasePath: 'https://cdn.jsdelivr.net/npm/@vladmandic/human/models',
  face: {
    enabled: true,
    emotion: { enabled: false },
    age: { enabled: false },
    gender: { enabled: false },
    iris: { enabled: false },
  },
  body: { enabled: false },
  hand: { enabled: false },
  object: { enabled: false },
  gesture: { enabled: false },
  segmentation: { enabled: false },
}

// User-Agent 偵測 + 動態關閉 worker
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
const useWorker = !isIOS;  // iOS 不用 worker

// 開發時看 memory
const used = performance.memory?.usedJSHeapSize;
console.log(`Heap: ${(used / 1024 / 1024).toFixed(2)} MB`);

'use client';
import { useState, useEffect, useRef } from 'react';
import Human from '@vladmandic/human';

const config = {
  backend: 'wasm' as const,
  modelBasePath: 'https://cdn.jsdelivr.net/npm/@vladmandic/human/models',
  face: { enabled: true },
  body: { enabled: false },
  hand: { enabled: false },
  // ...
};

export default function FaceDetect() {
  const [human, setHuman] = useState<Human | null>(null);
  const [result, setResult] = useState<any>(null);

  useEffect(() => {
    const init = async () => {
      const h = new Human(config);
      await h.load();
      await h.warmup();
      setHuman(h);
    };
    init();
  }, []);

  const handleImage = async (file: File) => {
    if (!human) return;
    const img = await loadImage(file);
    const r = await human.detect(img);
    setResult(r);
  };

  return (
    <input
      type="file"
      accept="image/*"
      onChange={(e) => e.target.files?.[0] && handleImage(e.target.files[0])}
    />
  );
}

async function loadImage(file: File): Promise<HTMLImageElement> {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.src = URL.createObjectURL(file);
  });
}

// human.worker.ts
import Human from '@vladmandic/human';

const human = new Human({ /* config */ });
await human.load();

self.onmessage = async (e: MessageEvent) => {
  const { imageData } = e.data;
  const result = await human.detect(imageData);
  self.postMessage(result);
};

{
  backend: 'wasm',  // ⭐ 切到 WASM 就好
}

const config: Partial<Config> = {
  backend: 'wasm',                    // 'humangl' | 'webgl' | 'wasm' | 'cpu'
  modelBasePath: 'https://cdn.jsdelivr.net/npm/@vladmandic/human/models',
  debug: false,                       // 開了會 console.log 詳細資訊
  cacheSensitivity: 0.7,              // 0~1,高 = 跳過更多幀(效能 vs 即時性)
  face: {
    enabled: true,
    detector: { rotation: false, maxDetected: 10 },
    mesh: { enabled: false },         // 468 點面網,吃資源
    iris: { enabled: false },         // 虹膜偵測
    description: { enabled: false },  // 人臉特徵向量
    emotion: { enabled: false },      // 情緒
    age: { enabled: false },
    gender: { enabled: false },
  },
};