opencv人臉特征提取與檢測，使用face-api和Tensorflow.js在瀏覽器中進行AI年齡估計

2023-10-01 阅读 29 评论 0

摘要：目錄性別和年齡檢測下一步是什么？下載源-10.6 MB 在上一篇文章中，我們學習了如何使用face-api.js和Tensorflow.js在瀏覽器中對人的情緒進行分類。如果您尚未閱讀該文章，我建議您首先閱讀，因為我們將假設您對face-api.js有所了解，并且我

性別和年齡檢測

下一步是什么？

下載源-10.6 MB

在上一篇文章中，我們學習了如何使用face-api.js和Tensorflow.js在瀏覽器中對人的情緒進行分類。

如果您尚未閱讀該文章，我建議您首先閱讀，因為我們將假設您對face-api.js有所了解，并且我們將基于為情感創建的代碼為基礎檢測。

性別和年齡檢測

我們已經看到使用face-api.js預測人的面部表情有多么容易。但是我們還能做什么呢？讓我們學習預測某人的性別和年齡。

我們將對之前的代碼進行一些更改。在HTML文件中，我們更改了視頻代碼的尺寸，因為我們需要一些額外的空間才能顯示圖形：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><script src="https://webrtc.github.io/adapter/adapter-latest.js"></script><script type="application/x-javascript" src="face-api.js"></script>    </head><body><h1>Emotions, Age & gender Detection using face-api.js</h1><video autoplay muted id="video" width="400" height="400" style=" margin: auto;"></video><div id="prediction">Loading</div><script type="text/javascript" defer src="index.js"></script></body>
</html>

我們還需要在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模型并將其導入瀏覽器。可以在任何示例的基礎上隨意構建或創建自己感興趣的東西。不要忘記分享您的想法！

原文链接：https://hbdhgg.com/1/107914.html

上一篇：linux生成core文件的指令，使用.NET Core進行Linux編程3：簡介和第2章

下一篇：前端面試被問到項目中難點，了解JavaScript中的循環缺點和迭代協議