github项目posenet-similarity的|对比两张图片的动作相似程度得三指标cosineSimilarity、weightedDistance、cosineDistance

w55aa

已于 2023-04-16 16:17:46 修改

阅读量681

点赞数

文章标签： github css javascript Powered by 金山文档

于 2023-04-16 16:12:24 首次发布

本文链接：https://blog.csdn.net/w55aa/article/details/129421169

版权

该项目可以通过posenet来对比两张图片的动作相似程度，有三个指标。

github:freshsomebody/posenet-similarity

1.将项目放置在这个位置：

2.安装node并载入包

C:\Users\蜗蜗>npm install posenet-similarity

added 1 package in 1s

3.后来发现并不需要node，直接创建一个index.html，输入两个图，打开浏览器，点击F12就可以看到console.log()输出的内容。

<html>
  <head>
    <!-- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <!-- Load Posenet -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
    <!-- Load posenet-similarity -->
    <script src="https://cdn.jsdelivr.net/npm/posenet-similarity/dist/posenet-similarity.min.js"></script>
    <style>
      .outer {
        display: flex;
      }
      #div1,#div2 {
        flex: 1 1 0;
        position: relative;
      }
      #pose1,#pose2 {
        width: 500px;
      }
      .point {
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 100%;
        background-color: red;
      }
    </style>
 </head>

  <body>
    <div class="outer">
      <div id="div1">
        <img id='pose1' src='docs/images/pose1.jpg' crossorigin='anonymous' />
      </div>
      <div id="div2">
        <img id='pose2' src='docs/images/pose5.png' crossorigin='anonymous' />
      </div>
    </div>
  </body>

  <script>
    var pose1ImageElement = document.getElementById('pose1');
    var pose2ImageElement = document.getElementById('pose2');
    var divPose1 = document.getElementById('div1');
    var divPose2 = document.getElementById('div2');

    function drawPoint(points, container, image) {
      // const imageWidth = image.naturalWidth;
      // const imageHeight = image.naturalHeight;
      const divHeight = image.height;
      points.forEach(point => {
          var p = document.createElement('div');
          p.classList = 'point';
          p.style.left = point.position.x + 'px';
          p.style.top = point.position.y + 'px';
          container.appendChild(p);
      });
    }
    let count = 0

    pose1ImageElement.addEventListener('load', imageLoad)
    pose2ImageElement.addEventListener('load', imageLoad)

    function imageLoad() {
      count++
      if(count === 2) {
        posenet.load().then(function(net) {
          // Estimate the two poses
          return Promise.all([
            net.estimateSinglePose(pose1ImageElement),
            net.estimateSinglePose(pose2ImageElement)
          ])
        }).then(function(poses){
          // Calculate the weighted distance between the two poses
          //var weightedDistance = pns.poseSimilarity(poses[0], poses[1]);
          var weightedDistance = pns.poseSimilarity(poses[0], poses[1], { strategy: 'cosineSimilarity' });
          console.log(weightedDistance);
          console.log(poses[0]);
          console.log(poses[1]);
          drawPoint(poses[0].keypoints, divPose1, pose1ImageElement);
          drawPoint(poses[1].keypoints, divPose2, pose2ImageElement);
        })
      }
    }
    // For more detailed Posenet setup, please refer its own document.
    // Load Posenet model

  </script>
</html>

比较三个指标

① cosineSimilarity：余弦相似性,返回值越大意味着越相似

cosineSimilarity	p2	p3	p4	p5
p1	0.9912	0.9634	0.9072	0.8593

weightedDistance	p2	p3	p4	p5
p1	0.0329	0.0635	0.1086	0.1383

cosineDistance	p2	p3	p4	p5
p1	0.1323	0.2703	0.4307	0.5303

个人感觉cosineDistance好一点

w55aa

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
github项目posenet-similarity的|对比两张图片的动作相似程度得三指标cosineSimilarity、weightedDistance、cosineDistance

posenet-similarity获取图片相似度，cosineSimilarity、weightedDistance、cosineDistance
复制链接

扫一扫