在数字时代，经常在社交媒体上看到各种各样的滤镜和特效，它们能够让照片和视频变得更加有趣。是否曾经想过如何从头开始创建这些滤镜？现在，有机会学习了，而且这一切都可以在网络浏览器中完成！在本系列文章中，将探讨如何在浏览器中创建类似Snapchat的滤镜，训练AI模型理解面部表情，甚至使用TensorFlow.js和面部追踪技术实现更多功能。
可以下载这个项目的演示版本。为了性能考虑，可能需要在网络浏览器中启用WebGL。还可以下载本系列文章的代码和文件。假设熟悉JavaScript和HTML，并且至少对神经网络有基本的理解。如果是TensorFlow.js的新手，建议先查看这个指南：在浏览器中使用TensorFlow.js开始深度学习。
如果想看到更多在浏览器中使用TensorFlow.js的可能性，可以查看这些AI系列：使用TensorFlow.js的计算机视觉和使用TensorFlow.js的聊天机器人。到目前为止，已经学会了如何在浏览器中实时追踪面部，并应用深度学习来检测和分类面部情绪。下一步，将尝试将这两者结合起来，看看否可以实时地使用网络摄像头进行情绪检测。让开始吧！
在这个项目中，将使用网络摄像头的实时视频来测试训练有素的面部情绪检测模型。将从面部追踪项目的最终代码的起始模板开始，并用面部情绪检测代码的部分进行修改。
首先，将定义一些全局变量用于情绪检测，就像之前做的那样：
const emotions = [
"angry",
"disgust",
"fear",
"happy",
"neutral",
"sad",
"surprise"
];
let emotionModel = null;
接下来，将在异步块中加载情绪检测模型：
(async () => {
// Load Face Landmarks Detection model
model = await faceLandmarksDetection.load(faceLandmarksDetection.SupportedPackages.mediapipeFacemesh);
// Load Emotion Detection model
emotionModel = await tf.loadLayersModel('web/model/facemo.json');
})();
然后，可以添加一个实用函数来运行模型预测，从关键面部点开始：
async function predictEmotion(points) {
let result = tf.tidy(() => {
const xs = tf.stack([tf.tensor1d(points)]);
return emotionModel.predict(xs);
});
let prediction = await result.data();
result.dispose();
// Get the index of the maximum value
let id = prediction.indexOf(Math.max(...prediction));
return emotions[id];
}
最后，需要从检测中获取关键面部点并在trackFace中传递给情绪预测器：
async function trackFace() {
// ...
let points = null;
faces.forEach(face => {
// Add just the nose, cheeks, eyes, eyebrows & mouth
const features = [
"noseTip",
"leftCheek",
"rightCheek",
"leftEyeLower1",
"leftEyeUpper1",
"rightEyeLower1",
"rightEyeUpper1",
"leftEyebrowLower",
"leftEyebrowUpper",
"rightEyebrowLower",
"rightEyebrowUpper",
"lipsLowerInner",
"lipsLowerOuter",
"lipsUpperInner",
"lipsUpperOuter",
];
points = [];
features.forEach(feature => {
face.annotations[feature].forEach(x => {
points.push((x[0] - x1) / bWidth);
points.push((x[1] - y1) / bHeight);
});
});
});
if (points) {
let emotion = await predictEmotion(points);
setText(`Detected: ${emotion}`);
} else {
setText("No Face");
}
requestAnimationFrame(trackFace);
}
这就是让这一切运行所需的全部。现在，当打开网页时，它应该能够检测到面部并识别不同的情绪。尝试使用它并享受乐趣！
为了完成这个项目，这是完整的代码：
<html>
<head>
<title>Real-Time Facial Emotion Detection</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.4.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/face-landmarks-detection@0.0.1/dist/face-landmarks-detection.js"></script>
</head>
<body>
<canvas id="output"></canvas>
<video id="webcam" playsinline style="visibility: hidden; width: auto; height: auto;"></video>
<h1 id="status">Loading...</h1>
<script>
// JavaScript code here...
</script>
</body>
</html>
接下来是什么？什么时候可以戴上虚拟眼镜？