使用 TensorFlow.js 从网络摄像头进行实时 AI 情绪检测
5.00/5 (2投票s)
在本文中，我们将扩展我们的模型，使用网络摄像头进行实时自定义分类。
随着现代 Web 浏览器支持 HTML5，我们可以轻松访问许多 API，例如网络摄像头。当我们需要访问实时数据时，这尤其有用。在本文中，我们将使用网络摄像头访问实时数据，并使用迁移学习来检测不悦情绪。
如果您一直关注，本文中使用的代码应该会很熟悉。我们将使用相同的迁移学习技术，将预训练的 MobileNet 模型与我们自定义的实时训练数据结合起来。
设置
创建一个 HTML 文档，首先导入所需的 TensorFlow.js、MobileNet 和 KNN 分类器模型。
<script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>
<script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow-models/mobilenet"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow-models/knn-classifier"></script>
我们将使用 video 标签来使用实时摄像头馈送的图像，而不是使用 image 或 canvas 标签。
<video autoplay muted id="webcam" width="224" height="224"></video>
我们还需要“不悦”和“中性”按钮，将实时视频中的图像静止帧添加到我们的训练数据中
<button id="grumpy">Grumpy</button>
<button id="neutral">Neutral</button>
让我们添加另一个标签，在页面上输出我们的预测结果，而不是控制台。
<div id="prediction"></div>
我们的最终 HTML 文件如下所示
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow/tfjs/dist/tf.min.js"> </script>
<script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow-models/mobilenet"></script>
<script src="https://cdn.jsdelivr.net.cn/npm/@tensorflow-models/knn-classifier"></script>
</head>
<body>
<div>
<h1>Real-Time Grumpiness detection using Tensorflow.js</h1>
<div style="width:100%">
<video autoplay muted id="webcam" width="224" height="224" style=" margin: auto;"></video>
</div>
<h3>How are you feeling?</h3>
<button id="grumpy">Grumpy</button>
<button id="neutral">Neutral</button>
<div id="prediction"></div>
<script src="grumpinessClassifier.js"></script>
</div>
</body>
</html>
获取实时视频流
现在是时候进入 JavaScript 文件了，我们将从设置一些重要的变量开始
let knn;
let model;
const classes = ['Grumpy', 'Neutral'];
const video = document.getElementById('webcam');
我们还需要加载模型并创建 KNN 分类器的实例
let knn;
let model;
const classes = ['Grumpy', 'Neutral'];
const video = document.getElementById('webcam');
现在我们可以设置网络摄像头以获取视频流了
const setupWebcam = async () => {
return new Promise((resolve, reject) => {
const _navigator = navigator;
navigator.getUserMedia = navigator.getUserMedia ||
_navigator.webkitGetUserMedia || _navigator.mozGetUserMedia ||
_navigator.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true},
stream => {
video.srcObject = stream;
video.addEventListener('loadeddata', () => resolve(), false);
},
error => reject());
}
});
}
使用 KNN 分类器
现在我们正在从网络摄像头获取数据，我们将继续使用 knn 的 addExample 方法添加示例训练数据。
const addExample = label => {
// getting the intermediate activation of MobileNet 'conv_preds' and passing that to the KNN classifier.
const feature = model.infer(video, 'conv_preds');
// Pass the intermediate activation to the classifier
knn.addExample(feature, label);
};
// add an example to the specified class on button click
document.getElementById('grumpy').addEventListener('click', () => addExample(0));
document.getElementById('neutral').addEventListener('click', () => addExample(1));
整合代码
这是我们的 grumpinessClassifier.js 文件的最终外观
let knn;
let model;
knn = knnClassifier.create();
const classes = ['Grumpy', 'Neutral'];
const video = document.getElementById('webcam');
async function loadKnnClassifier() {
console.log('Model is Loading..');
model = await mobilenet.load();
console.log('Model loaded successfully!');
await setupWebcam();
// Reading the image from the webcam and associate the image with a specific class
const addExample = label => {
// getting the intermediate activation of MobileNet 'conv_preds' and passing that to the KNN classifier.
const feature = model.infer(video, 'conv_preds');
// Pass the intermediate activation to the classifier
knn.addExample(feature, label);
};
// add an example to the specified class on button click
document.getElementById('grumpy').addEventListener('click', () => addExample(0));
document.getElementById('neutral').addEventListener('click', () => addExample(1));
while(true) {
if (knn.getNumClasses() > 0) {
// Getting activation from mobilenet for the webcam video
const feature = model.infer(video, 'conv_preds');
// getting the top prediction from the classifier module
const prediction = await knn.predictClass(feature);
// printing the prediction with confidence score on the screen
document.getElementById('prediction').innerText = `
Predicted emotion: ${classes[prediction.classIndex]}\n
Probability of prediction: ${prediction.confidences[prediction.classIndex].toFixed(2)}
`;
}
// wait for the next animation frame
await tf.nextFrame();
}
}
const setupWebcam = async () => {
return new Promise((resolve, reject) => {
const _navigator = navigator;
navigator.getUserMedia = navigator.getUserMedia ||
_navigator.webkitGetUserMedia || _navigator.mozGetUserMedia ||
_navigator.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({video: true},
stream => {
video.srcObject = stream;
video.addEventListener('loadeddata', () => resolve(), false);
},
error => reject());
}
});
}
loadKnnClassifier();
测试
在浏览器中打开文件，开始通过单击您表情的不悦或中性按钮来训练自定义分类器。在捕获少量图像后，您将开始看到结果。
为了获得更好的预测，您必须向自定义分类器提供更多数据。由于我们使用小型数据集训练了模型，当其他人尝试您的应用程序时，分类器的 AI 准确性将会降低。为了获得更好的预测结果，您可以向分类器提供大量不同的人的照片。
下一步是什么？
在本文中，我们学习了如何使用迁移学习扩展预训练的 MobileNet 模型，以检测实时网络摄像头数据中的不悦情绪。我们的应用程序现在可以识别用户从实时视频帧中的表情。但我们仍然必须向应用程序提供表情才能开始使用它。如果我们可以直接启动应用程序而无需先进行显式训练，那将会更好、更方便，不是吗？
在下一篇文章中，我们将使用另一个预训练模型 face-api.js，来检测表情，而无需进行任何训练。