目录
性别和年龄检测
下一步是什么？
- 下载源-10.6 MB
在上一篇文章中，我们学习了如何使用face-api.js和Tensorflow.js在浏览器中对人的情绪进行分类。
如果您尚未阅读该文章，我建议您首先阅读，因为我们将假设您对face-api.js有所了解，并且我们将基于为情感创建的代码为基础检测。
性别和年龄检测我们已经看到使用face-api.js预测人的面部表情有多么容易。但是我们还能做什么呢？让我们学习预测某人的性别和年龄。
我们将对之前的代码进行一些更改。在HTML文件中，我们更改了视频代码的尺寸，因为我们需要一些额外的空间才能显示图形：
Emotions, Age & gender Detection using face-api.js
Loading
我们还需要在index.js文件中导入另一个模型：
faceapi.nets.ageGenderNet.loadFromUri('/models')同时将年龄和性别添加到预测中：
const detections = await faceapi
.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
.withFaceLandmarks()
.withFaceExpressions()
.withAgeAndGender();Face-api.js也具有一些绘图功能。让我们将绘图添加到画布中：
const resizedDetections = faceapi.resizeResults(detections, displaySize);
faceapi.draw.drawDetections(canvas, resizedDetections);
faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
faceapi.draw.drawFaceExpressions(canvas, resizedDetections);现在我们可以得到我们的预测了：
resizedDetections.forEach(result => {
const { age, gender, genderProbability } = result;
new faceapi.draw.DrawTextField(
[
`${faceapi.round(age, 0)} years`,
`${gender} (${faceapi.round(genderProbability)})`
],
result.detection.box.bottomRight
).draw(canvas);
});这是index.js文件的最终外观：
const video = document.getElementById('video');
Promise.all([
faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
faceapi.nets.faceExpressionNet.loadFromUri('/models'),
faceapi.nets.ageGenderNet.loadFromUri('/models')
]).then(startVideo);
function startVideo() {
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true },
function(stream) {
var video = document.querySelector('video');
video.srcObject = stream;
video.onloadedmetadata = function(e) {
video.play();
};
},
function(err) {
console.log(err.name);
}
);
} else {
document.body.innerText ="getUserMedia not supported";
console.log("getUserMedia not supported");
}
}
video.addEventListener('play', () => {
const canvas = faceapi.createCanvasFromMedia(video);
document.body.append(canvas);
const displaySize = { width: video.width, height: video.height };
faceapi.matchDimensions(canvas, displaySize);
setInterval(async () => {
const predictions = await faceapi
.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
.withFaceLandmarks()
.withFaceExpressions()
.withAgeAndGender();
const resizedDetections = faceapi.resizeResults(predictions, displaySize);
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
faceapi.draw.drawDetections(canvas, resizedDetections);
faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
resizedDetections.forEach(result => {
const { age, gender, genderProbability } = result;
new faceapi.draw.DrawTextField(
[
`${faceapi.round(age, 0)} years`,
`${gender} (${faceapi.round(genderProbability)})`
],
result.detection.box.bottomRight
).draw(canvas);
});
}, 100);
});
本系列文章向您介绍了TensorFlow.js，并帮助您开始在浏览器中进行机器学习。我们构建了一个项目，向您展示了如何直接在浏览器中开始训练自己的计算机视觉AI，并使它能够识别狗的品种、人的面部表情、年龄和性别。尽管它们本身已经令人印象深刻，但是本系列仅仅是一个起点。浏览器中存在AI和ML的无限可能。例如，在本系列中我们没有做的一件事是离线训练ML模型并将其导入浏览器。可以在任何示例的基础上随意构建或创建自己感兴趣的东西。不要忘记分享您的想法！
