Code

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>
PreviousPose EstimationNextBest-fit line approximation

Last updated

Was this helpful?