设置服务器

设置HTML

获取实时视频源

使用face-api.js进行预测

将代码放在一起

测试结果

下一步是什么？

下载源-10.6 MB

面部表情识别是图像识别中关注的关键领域之一，一直都在更新中，但是训练步骤对于使其能够投入生产是一个很大的障碍。为了克服这一障碍，让我向您介绍face-api.js，这是在TensorFlow.js之上实现的基于JavaScript的人脸识别库。

Face-api.js功能强大且易于使用，仅使您了解配置所需的内容。它实现了多个卷积神经网络（CNN），但隐藏了编写神经网络的所有底层，以解决人脸检测、识别和特征点检测。您可以在此处获取库和模型。

设置服务器

在深入研究任何代码之前，我们需要设置服务器。

如果您一直在看本系列文章，您会发现我们通过直接使用浏览器而不是设置服务器来使事情变得简单。到目前为止，这种方法已经奏效，但是如果我们尝试将face-api.js模型直接提供给浏览器，则会遇到错误，因为HTML5要求我们提供来自Web服务器的网页和图像。

设置服务器的一种简单方法是为Chrome设置Web服务器。启动服务器并进行如下设置

现在，您可以访问http://127.0.0.1:8887来访问您的应用程序。

设置HTML

设置服务器后，创建一个HTML文档并导入face-api库：

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script type="application/x-javascript" src="face-api.js"></script>

我们还需要包含一个视频标签和JavaScript文件来处理我们应用的逻辑。这是文档的最终外观：

<!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>Real-Time grumpiness Detection using face-api.js</h1><video autoplay muted id="video" width="224" height="224" style=" margin: auto;"></video><div id="prediction">Loading</div><script type="text/javascript" defer src="index.js"></script></body>
</html>

获取实时视频源

让我们转到我们的JavaScript文件并定义一些重要的变量：

const video = document.getElementById("video");
const text = document.getElementById("prediction");

现在，我们设置函数以开始播放视频：

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");}
}

使用face-api.js进行预测

您可以像这样从URI加载它们，而不是下载所有模型：

let url = "https://raw.githubusercontent.com/justadudewhohacks/face-api.js/master/weights/";faceapi.nets.tinyFaceDetector.loadFromUri(url + 'tiny_face_detector_model-weights_manifest.json'),faceapi.nets.faceLandmark68Net.loadFromUri(url + 'face_landmark_68_model-weights_manifest.json'),faceapi.nets.faceRecognitionNet.loadFromUri(url + 'face_recognition_model-weights_manifest.json'),faceapi.nets.faceExpressionNet.loadFromUri(url + 'face_expression_model-weights_manifest.json')

Face-api.js将情绪分为七个类别：快乐、悲伤、愤怒、恶心、恐惧、中立和惊讶。由于我们对两个主要类别（中性和脾气暴躁）感兴趣，因此我们将设置top_prediction为中性。一个人在悲伤、生气或厌恶时通常被认为是脾气暴躁的，因此，如果这些情绪中任何一种的预测得分大于中性情绪的预测得分，那么我们会将预测的情绪显示为脾气暴躁。让我们以字符串格式获得最重要的预测：

function prediction_string(obj) {let top_prediction = "neutral";let maxVal = 0;var str = top_prediction;if (!obj) return str;obj = obj.expressions;for (var p in obj) {if (obj.hasOwnProperty(p)) {if (obj[p] > maxVal) {maxVal = obj[p];top_prediction = p;if (p===obj.sad || obj.disgusted || obj.angry){top_prediction="grumpy"}}}}return  top_prediction;
}

最后，我们需要实际从face-api模型获得预测：

const predictions = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions();

将代码放在一起

最终代码如下所示：

const video = document.getElementById("video");
const canvas = document.getElementById("canvas");
const text = document.getElementById("prediction");Promise.all([faceapi.nets.tinyFaceDetector.loadFromUri('/models'),faceapi.nets.faceLandmark68Net.loadFromUri('/models'),faceapi.nets.faceRecognitionNet.loadFromUri('/models'),faceapi.nets.faceExpressionNet.loadFromUri('/models'),
]).then(startVideo);function prediction_string(obj) {let top_prediction = "neutral";let maxVal = 0;var str = top_prediction;if (!obj) return str;obj = obj.expressions;for (var p in obj) {if (obj.hasOwnProperty(p)) {if (obj[p] > maxVal) {maxVal = obj[p];top_prediction = p;if (p===obj.sad || obj.disgusted || obj.angry){top_prediction="grumpy"}}}}return  top_prediction;
}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", () => {let visitedMsg = true;setInterval(async () => {const predictions = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceExpressions();if (visitedMsg) {text.innerText = "Your expression";visitedMsg = false;}text.innerHTML = prediction_string(predictions[0]);}, 100);
});

测试结果

现在，在Chrome Web服务器（或您选择的任何其他网络服务器）中运行您的应用。对于Chrome Web Server，请访问http://127.0.0.1:8887以查看您的应用程序的运行情况。

下一步是什么？

既然我们已经看到使用face-api.js预测人的面部表情有多么容易，我们可以做更多的事情吗？在下一篇文章中，我们将在浏览器中预测某人的性别和年龄。

使用face-api和Tensorflow.js进行预训练的AI情绪检测相关推荐

使用迁移学习和TensorFlow.js在浏览器中进行AI情感检测
目录 KNN分类器迁移学习我们的技术栈配置使用KNN分类器将代码放在一起测试结果下一步是什么? 下载源-10.6 MB 在上一篇文章中,我们已经看到了加载预训练模型有多么容易.在本文中, ...
tensorflow 实现打印预训练的模型中的变量名和变量值
tensorflow保存的预训练的模型包含3个文件: model_name.data-00000-of-00001 (保存网络中每个变量值,包括所有的weights.biases.gradients等 ...
多模态学习研讨会：预训练是AI未来所需要的全部吗？
编者按:文字.图片.语音.视频--我们的日常生活充满了不同模态的数据,涉及不同模态数据交互的任务也越发普遍.最近,微软亚洲研究院举办了一场多模态表征学习与应用研讨会,与来自亚太高校的多位学者深度探讨了 ...
预训练是 AI 未来所需要的全部吗？
预训练是 AI 未来所需要的全部吗? 计算和存储能力的挑战是一个普遍存在的问题,即使对于业界公司来说,足够的计算和存储资源也是重大瓶颈. 我们一致认为, 预训练将是未来 AI 的非常重要的组成部分,但 ...
预训练是AI未来所需要的全部吗？
2019-12-30 10:16:55 今天,我们生活在一个由大量不同模态内容(文本.图像.视频.音频.传感器数据.3D 等)构建而成的多媒体世界中,这些不同模态的内容在具体事件和应用中具有高度相关性 ...
使用face-api和Tensorflow.js在浏览器中进行AI年龄估计
目录性别和年龄检测下一步是什么? 下载源-10.6 MB 在上一篇文章中,我们学习了如何使用face-api.js和Tensorflow.js在浏览器中对人的情绪进行分类. 如果您尚未阅读该文章, ...
tensorflow.js在nodejs训练猫狗分类模型在浏览器上使用
目录本人系统环境注意事项前言数据集准备处理数据集数据集初步处理将每一张图片数据转换成张量数据(tensor) 将图片转换成张量数组的代码和运行效果将图片的标注转换成张量数据(tenso ...
tensorflow加载预训练好的模型图(.pb文件）
千万不要试图在jupyter notebook中打开.pb模型文件,否则你会得到: 这时候我以为shi编码的问题,开始转换编码,转换完成后发现shi乱ma. 后来网上查了,.pb文件里面存储的shi模 ...
MICCAI 2020 | 基于3D监督预训练的全身病灶检测SOTA（预训练代码和模型已公开）...
关注公众号,发现CV技术之美 ▊ 研究背景介绍由于深度学习任务往往依赖于大量的标注数据,医疗图像的样本标注又会涉及到较多的专业知识,标注人员需要对病灶的大小.形状.边缘等信息进行准确的判断,甚至需要 ...

使用face-api和Tensorflow.js进行预训练的AI情绪检测

设置服务器

设置HTML

获取实时视频源

使用face-api.js进行预测

将代码放在一起

测试结果

下一步是什么？

使用face-api和Tensorflow.js进行预训练的AI情绪检测相关推荐

最新文章

热门文章