📘 指南 / Guide
✅ Working model URL (CDN):
✅ 可用的模型地址 (CDN)：
const MODEL_URL = 'https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.js@master/weights';
📁 Sketch 1 – 仅镜像 / Mirror only
Access webcam with createCapture(VIDEO), flip horizontally using
translate(width,0); scale(-1,1); → real mirror effect. No AI, no server needed. Works
by double‑clicking the file.
用 createCapture(VIDEO) 获取摄像头，通过
translate(width,0); scale(-1,1); 水平翻转 → 真实镜像效果。无 AI，无需服务器。直接双击文件即可运行。
push();
translate(width, 0);
scale(-1, 1);
image(video, 0, 0, width, height);
pop();
📁 Sketch 2 – 人脸检测 + 边界框 / Face detection + bounding box
Loads TinyFaceDetector. Runs faceapi.detectAllFaces()
every 120ms. Returns an array of faces. Each face contains a box (x, y, width, height)
and a score (confidence). Draws a cyan bounding box (mirror‑aware).
加载 TinyFaceDetector。每120毫秒运行
faceapi.detectAllFaces()，返回人脸数组。每个人脸包含 box（x, y, 宽, 高）和
score（置信度）。绘制青色边界框（镜像感知）。
// Example output of detectAllFaces()
[
{
box: { x: 142, y: 85, width: 198, height: 198 },
score: 0.94
}
]
🔍 Inspect in console: Add console.log(detections);
inside the detectFaces() function. Open browser console (F12) to see the array.
🔍 在控制台查看： 在 detectFaces() 函数内添加
console.log(detections);，打开浏览器控制台（F12）即可看到数组。
⚠️ Sketch 2 & 3 must be served via a local web server because fetch()
loads model files.
Run: python -m http.server 8000 then open
http://localhost:8000/index2.html
⚠️ 图2 和图3 必须使用本地网页服务器，因为需要通过 fetch() 加载模型文件。
运行：python -m http.server 8000 然后访问 http://localhost:8000/index2.html
📁 Sketch 3 – 情绪识别 + 标签 / Emotion recognition + label
Loads three models: TinyFaceDetector + FaceLandmark68 + FaceExpressionNet. For each
face, gets 7 emotion scores: happy, sad, angry, fearful, disgusted, surprised, neutral.
Shows dominant emotion, confidence percentage, and an emoji inside the bounding box.
加载三个模型：TinyFaceDetector + FaceLandmark68 +
FaceExpressionNet。对每张脸获得7种情绪分数：开心、悲伤、生气、害怕、厌恶、惊讶、中性。在边界框内显示主要情绪、置信百分比和表情符号。
// Example emotion output
{
expressions: {
happy: 0.92,
sad: 0.03,
angry: 0.01,
fearful: 0.01,
disgusted: 0.00,
surprised: 0.02,
neutral: 0.01
}
}
Use getDominantEmotion() to find the highest score, then display the
label and emoji.
用 getDominantEmotion() 找出最高分的情绪，然后显示标签和表情符号。
🧠 为什么需要库和权重？ / Why both library and weights?
face-api.min.js → JavaScript functions (the engine).
Model weights
(.shard files) → trained neural network numbers (the fuel).
Both are essential
– the library loads the weights and then runs detection.
face-api.min.js → JavaScript 函数（引擎）。
模型权重 (.shard 文件) →
训练好的神经网络数值（燃料）。
两者缺一不可 – 库加载权重后才能进行检测。
📌 快速总结 / Quick summary
• Sketch 1: 镜像 – 无需服务器，无AI。
• Sketch 2: 人脸+边界框 – 需要本地服务器。
• Sketch 3: 情绪+标签 – 需要本地服务器。
• 模型权重使用 https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.js@master/weights (感谢
justadudewhohacks)。