目录

性别和年龄检测

下一步是什么？

  • 下载源-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模型并将其导入浏览器。可以在任何示例的基础上随意构建或创建自己感兴趣的东西。不要忘记分享您的想法！

使用face-api和Tensorflow.js在浏览器中进行AI年龄估计相关推荐

  1. 使用迁移学习和TensorFlow.js在浏览器中进行AI情感检测

    目录 KNN分类器 迁移学习 我们的技术栈 配置 使用KNN分类器 将代码放在一起 测试结果 下一步是什么? 下载源-10.6 MB 在上一篇文章中,我们已经看到了加载预训练模型有多么容易.在本文中, ...

  2. 狗和披萨：使用TensorFlow.js在浏览器中实现计算机视觉

    目录 起点 托管说明 MobileNet v1 运行物体识别 终点线 下一步是什么?绒毛动物? 下载TensorFlowJS示例-6.1 MB TensorFlow + JavaScript.现在,最 ...

  3. 使用TensorFlow.js在浏览器中进行深度学习入门

    目录 设置TensorFlow.js 创建训练数据 检查点 定义神经网络模型 训练AI 测试结果 终点线 内存使用注意事项 下一步是什么?狗和披萨? 下载TensorFlowJS示例-6.1 MB T ...

  4. 图像迁移风格保存模型_用TensorFlow.js在浏览器中部署可进行任意图像风格迁移的模型...

    风格迁移一直是很多读者感兴趣的内容之一,近日,网友ReiichiroNakano公开了自己的一个实现:用TensorFlow.js在浏览器中部署可进行任意图像风格迁移的模型.让我们一起去看看吧! Gi ...

  5. 使用 Colab 在 tf.keras 中训练模型，并使用 TensorFlow.js 在浏览器中运行

    文 / Zaid Alyafeai 我们将创建一个简单的工具来识别图纸并输出当前图纸的名称. 此应用程序将直接在浏览器上运行,无需任何安装.我们会使用 Google Colab 来训练模型,并使用 T ...

  6. 用TensorFlow.js在浏览器中进行实时语义分割 | MixLab算法系列

    语义分割是监测和描绘图像中每个感兴趣对象的问题 当前,有几种方法可以解决此问题并输出结果 如下图示: 语义分割示例 这种分割是对图像中的每个像素进行预测,也称为密集预测. 十分重要且要注意的是,同一类 ...

  7. 用 TensorFlow.js 在浏览器中训练一个计算机视觉模型（手写数字分类器）

    文章目录 Building a CNN in JavaScript Using Callbacks for Visualization Training with the MNIST Dataset ...

  8. 有了TensorFlow.js，浏览器中也可以实时人体姿势估计

    翻译文章,内容有删减.原文地址:https://medium.com/tensorflow/real-time-human-pose-estimation-in-the-browser-with-te ...

  9. js如何在浏览器中运行php文件下载,JavaScript_用JS在浏览器中创建下载文件，但受限于浏览器，很多情况下 - phpStudy...

    用JS在浏览器中创建下载文件 但受限于浏览器,很多情况下我们都只能给出个链接,让用户点击打开->另存为.如下面这个链接: file.js 用户点击这个链接的时候,浏览器会打开并显示链接指向的文件 ...

最新文章

  1. 我的 FPGA 学习历程（13）—— 电子钟项目
  2. python 选择不同数据库环境执行SQL文件
  3. hdu 1564 Play a game
  4. 2021中国垂类电竞KOL发展洞察行业报告
  5. socket_基础2_传输大数据
  6. 集成unittest与html测试报告
  7. arm-linux测网速工具,用Iperf工具测试网速和网络质量
  8. SDH传输分析仪是什么？
  9. 多径信道误码率理论仿真
  10. 还在到处找Linux内核的学习资料吗?你想要的都在这里
  11. php图形验证码验证,php图片验证码代码
  12. 芬斯狄娜内衣怎么样，文胸质量好不好吗
  13. 360安全浏览器如何锁定极速模式
  14. Annotation（注解）是什么？
  15. 视觉导航小车开源项目（1）—小车底盘
  16. 详解爬电距离和电气间隙
  17. 中企故事汇：铁匠之乡借东风出海
  18. 关于C#不同位数相与或，或赋值时，隐藏位数扩展该留意的问题
  19. Unity用Mesh画多边形、圆形
  20. Java 使用 JDBI 库访问MySQL 数据库

热门文章

  1. php 字符串中文截取,PHP 截取中文字符串（支持多种编码）
  2. 人工智能导论 王万良教授_FCES2019 panel4：人工智能的第一堂课究竟讲什么？
  3. python 释放链表节点_redis：链表
  4. 设计干货 | 时尚简约海报模板
  5. 帮助您快速开始下一个移动APP应用模板、UI设计
  6. HTML中的父选择器,html – css4中是否有父选择器？
  7. creo打不开stp文件_让Creo输出的stp格式文件含有颜色设置 | 坐倚北风
  8. 2019/5/28 感觉吧
  9. Python--多线程学习(11.3)
  10. The Real Time Linux and RT Applications | PREEMPT_RT