ml5.js是什么
ml5.js 它是基于Tensorflow.js的一个非常简便易用的接口,目的是让更广泛的受众更容易使用机器学习。(演示都是根据官网实例demo)
其他知识点索引点这里
描述
PoseNet姿势网
描述
PoseNet 是一种允许实时人体姿势估计的机器学习模型。
PoseNet 可用于估计单个姿势或多个姿势,这意味着有一种算法版本只能检测图像/视频中的一个人,而一个版本可以检测图像/视频中的多个人。
下面是官网demo 识别图中人物关节
<html>
<head>
<meta charset="UTF-8">
<title>poseNet</title>
<script src="../p5.min.js"></script>
<script src="../ml5.js"></script>
</head>
<body>
<h1>基于p5.js演示</h1>
<p id='status'>Loading model...</p>
<script src="index.js"></script>
</body>
</html>
let img;
let poseNet;
let poses = [];
function setup() {
createCanvas(640, 360);
img = createImg("data/runner.jpg", imageReady);
img.size(width, height);
img.hide();
frameRate(1); // 将 frameRate 设置为 1,因为在这种情况下我们不需要它快速运行
}
// 图片加载完成
function imageReady() {
const options = {
minConfidence: 0.1,
inputResolution: { width, height },
};
poseNet = ml5.poseNet(modelReady, options);
// 给poseNet添加配置
poseNet.on("pose", function(results) {
console.log(results);
poses = results;
});
}
// poseNet加载完成
function modelReady() {
select("#status").html("Model Loaded");
// 当模型准备好后,运行 singlePose() 函数...
// 如果/当检测到姿势时,poseNet.on('pose', ...) 将监听检测结果
// 在 draw() 循环中,如果有任何姿势,则执行绘制命令
poseNet.singlePose(img);
}
// p5不断调用
function draw() {
if (poses.length > 0) {
image(img, 0, 0, width, height);
drawSkeleton(poses);
drawKeypoints(poses);
noLoop(); // 当poses存在停止循环
}
}
// 在检测到的关键点上绘制椭圆的函数
function drawKeypoints() {
for (let i = 0; i < poses.length; i += 1) {
// 对于检测到的每个姿势,循环遍历所有关键点
const pose = poses[i].pose;
for (let j = 0; j < pose.keypoints.length; j += 1) {
// 关键点是描述身体部位的对象(如右臂或左肩
const keypoint = pose.keypoints[j];
// 只画一个椭圆是姿势概率大于0.2
if (keypoint.score > 0.2) {
fill(255);
stroke(20);
strokeWeight(4);
ellipse(round(keypoint.position.x), round(keypoint.position.y), 8, 8);
}
}
}
}
function drawSkeleton() {
for (let i = 0; i < poses.length; i += 1) {
const skeleton = poses[i].skeleton;
// 给关节连线
for (let j = 0; j < skeleton.length; j += 1) {
const partA = skeleton[j][0];
const partB = skeleton[j][1];
stroke(255);
strokeWeight(1);
line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);
}
}
}
效果如下
这是原图
显示效果画出了根据返回的数据画出人物骨骼线
下一篇 身体像素