Let explain the code..
We start to create our HTML file and add our tensorflow js library and posenet model.
<html>
<head>
<!-- Load TensorFlow.js and Posenet Library-->
<meta charset="utf-8"/>
<script src="https://unpkg.com/@tensorflow/tfjs"></script>
<script src="https://unpkg.com/@tensorflow-models/posenet"></script>
</head>
We define an image or a video input so it could be load in our ponsenet function.
We also need to define some parameters such as: imageScaleFactor, outputStride, flipHorizontal.
<body>
<img id="people" src="C:\Users\REY1GA\Documents\single.jpg" style="width: 600px; height: 600px;">
</body>
<script>
var imageScaleFactor = 0.5;
var outputStride = 16;
var flipHorizontal = false;
var imageElement = document.getElementById('people')
posenet.load().then(function(net){
return net.estimateSinglePose(imageElement,imageScaleFactor,flipHorizontal,outputStride)
}).then(function(pose){
console.log(pose);
})
</script>
</html>
Our output we could see and mode developer in the console. Something like this:
{score: 0.0008116127083827878, keypoints: Array(17)}
keypoints
:Array(17)
0:{score: 0.000052598938054870814, part: "nose", position: {…}}
1:{score: 0.00004150184759055264, part: "leftEye", position: {…}}
2:{score: 0.000031778541597304866, part: "rightEye", position: {…}}
3:{score: 0.00021380084217526019, part: "leftEar", position: {…}}
4:{score: 0.00004942030136589892, part: "rightEar", position: {…}}
5:{score: 0.0013915509916841984, part: "leftShoulder", position: {…}}
6:{score: 0.0005532603827305138, part: "rightShoulder", position: {…}}
7:{score: 0.000993350869975984, part: "leftElbow", position: {…}}
8:{score: 0.0005455522914417088, part: "rightElbow", position: {…}}
9:{score: 0.0004648562171496451, part: "leftWrist", position: {…}}
10:{score: 0.0005871786270290613, part: "rightWrist", position: {…}}
11:{score: 0.0038784013595432043, part: "leftHip", position: {…}}
12:{score: 0.0026300642639398575, part: "rightHip", position: {…}}
13:{score: 0.0006528994417749345, part: "leftKnee", position: {…}}
14:{score: 0.0004500267968978733, part: "rightKnee", position: {…}}
15:{score: 0.0006650598952546716, part: "leftAnkle", position: {…}}
16:{score: 0.0005961144343018532, part: "rightAnkle", position: {…}}
length:17
__proto__:Array(0)
score:0.0008116127083827878
__proto__:Object
If we want to make a multipose detection we need to make some changes on our function.
<script>
var imageScaleFactor = 0.5;
var flipHorizontal = false;
var outputStride = 16;
var maxPoseDetections = 2;
var imageElement = document.getElementById('people');
posenet.load().then(function(net){
return net.estimateMultiplePoses(imageElement, 0.5, flipHorizontal, outputStride, maxPoseDetections)
}).then(function(poses){
console.log(poses);
})
</script>