Spaces:

rootstrap-org
/

mediapipe-pose-demo

Running

App Files Files Community

gustavo_malmoria commited on Jul 3, 2023

Commit

9b56ece

1 Parent(s): 5c5d646

add code

Browse files

Files changed (3) hide show

index.html +56 -0
script.js +172 -0
style.css +113 -0

index.html ADDED Viewed

	@@ -0,0 +1,56 @@

+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Curl Detector</title>
+  <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
+<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
+</script>
+<body>
+  <h1>Excercise counter with Mediapipe</h1>
+  <section id="demos" class="invisible">
+    <p>Stand in front of your webcam to get real-time pose landmarker detection.</br>Click <b>enable webcam</b> below and grant access to the webcam if prompted.</p>
+    <div id="liveView" class="videoView">
+      <button id="webcamButton" class="mdc-button mdc-button--raised">
+        <span class="mdc-button__ripple"></span>
+        <span class="mdc-button__label">ENABLE WEBCAM</span>
+      </button>
+      <button id="startButton" class="mdc-button mdc-button--raised">
+        START COUNTING
+      </button>
+      <button id="stopButton" class="mdc-button mdc-button--raised">
+        STOP COUNTING
+      </button>
+      <button id="restartButton" class="mdc-button mdc-button--raised">
+        RESTART COUNTING
+      </button>
+      <div style="position: relative;">
+        <video id="webcam" style="width: 1280px; height: 720px; position: abso" autoplay playsinline></video>
+        <canvas class="output_canvas" id="output_canvas" width="1280" height="720" style="position: absolute; left: 0px; top: 0px;"></canvas>
+      </div>
+    </div>
+    <fieldset>
+      <legend>Choose your excercise</legend>
+      <div>
+        <input type="radio" id="curl" name="excercise" value="curl" />
+        <label for="curl">curl</label>
+      </div>
+      <div>
+        <input type="radio" id="squat" name="excercise" value="squat" />
+        <label for="squat">squat</label>
+      </div>
+    </fieldset>
+    <div id="counter"></div>
+  </section>
+  <script type="module" src="./script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,172 @@

+import { PoseLandmarker, FilesetResolver, DrawingUtils } from "https://cdn.skypack.dev/@mediapipe/[email protected]";
+const demosSection = document.getElementById("demos");
+let poseLandmarker = undefined;
+let runningMode = "IMAGE";
+let enableWebcamButton;
+let enableCounter;
+let webcamRunning = false;
+const videoHeight = "360px";
+const videoWidth = "480px";
+let shoulder = [];
+let elbow = [];
+let wrist = [];
+let hip = [];
+let ankle = [];
+let knee = [];
+let stage;
+let angle;
+let counter = 0;
+let starter = 0;
+const createPoseLandmarker = async () => {
+    const vision = await FilesetResolver.forVisionTasks("https://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/wasm");
+    poseLandmarker = await PoseLandmarker.createFromOptions(vision, {
+        baseOptions: {
+            modelAssetPath: `https://storage.googleapis.com/mediapipe-models/pose_landmarker/pose_landmarker_lite/float16/1/pose_landmarker_lite.task`,
+            delegate: "GPU"
+        },
+        runningMode: runningMode,
+        numPoses: 2
+    });
+    demosSection.classList.remove("invisible");
+};
+createPoseLandmarker();
+const video = document.getElementById("webcam");
+const canvasElement = document.getElementById("output_canvas");
+const canvasCtx = canvasElement.getContext("2d");
+const drawingUtils = new DrawingUtils(canvasCtx);
+const hasGetUserMedia = () => { var _a; return !!((_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia); };
+if (hasGetUserMedia()) {
+    enableWebcamButton = document.getElementById("webcamButton");
+    enableWebcamButton.addEventListener("click", enableCam);
+}
+else {
+    console.warn("getUserMedia() is not supported by your browser");
+}
+function enableCam(event) {
+    if (!poseLandmarker) {
+        console.log("Wait! poseLandmaker not loaded yet.");
+        return;
+    }
+    if (webcamRunning === true) {
+        webcamRunning = false;
+        enableWebcamButton.innerText = "ENABLE PREDICTIONS";
+    }
+    else {
+        webcamRunning = true;
+        enableWebcamButton.innerText = "DISABLE PREDICTIONS";
+    }
+    const constraints = {
+        video: true
+    };
+    navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
+        video.srcObject = stream;
+        video.addEventListener("loadeddata", predictWebcam);
+    });
+}
+let lastVideoTime = -1;
+async function predictWebcam() {
+    canvasElement.style.height = videoHeight;
+    video.style.height = videoHeight;
+    canvasElement.style.width = videoWidth;
+    video.style.width = videoWidth;
+    if (runningMode === "IMAGE") {
+        runningMode = "VIDEO";
+        await poseLandmarker.setOptions({ runningMode: "VIDEO" });
+    }
+    let startTimeMs = performance.now();
+    if (lastVideoTime !== video.currentTime) {
+        lastVideoTime = video.currentTime;
+        poseLandmarker.detectForVideo(video, startTimeMs, (result) => {
+            canvasCtx.save();
+            canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
+            for (const landmark of result.landmarks) {
+                shoulder = [landmark[11].x, landmark[11].y]
+                elbow = [landmark[13].x, landmark[13].y]
+                wrist = [landmark[15].x, landmark[15].y]
+                hip = [landmark[23].x, landmark[23].y]
+                knee = [landmark[25].x, landmark[25].y]
+                ankle = [landmark[27].x, landmark[27].y]
+                drawingUtils.drawLandmarks(landmark, {
+                    radius: (data) => DrawingUtils.lerp(data.from.z, -0.15, 0.1, 5, 1)
+                });
+                drawingUtils.drawConnectors(landmark, PoseLandmarker.POSE_CONNECTIONS);
+            }
+            canvasCtx.restore();
+        });
+    }
+    function calculateAngle(a, b, c) {
+        const vecA = new Array(a[0], a[1]); // First
+        const vecB = new Array(b[0], b[1]); // Mid
+        const vecC = new Array(c[0], c[1]); // End
+        const radians = Math.atan2(vecC[1] - vecB[1], vecC[0] - vecB[0]) - Math.atan2(vecA[1] - vecB[1], vecA[0] - vecB[0]);
+        let angle = Math.abs(radians * (180.0 / Math.PI));
+        if (angle > 180.0) {
+          angle = 360 - angle;
+        }
+        return angle;
+      }
+    const startButton = document.getElementById('startButton');
+    startButton.addEventListener('click', () => {
+        starter = 1
+    });
+    const stopButton = document.getElementById('stopButton');
+    stopButton.addEventListener('click', () => {
+        starter = 0
+    });
+    const restartButton = document.getElementById('restartButton');
+    restartButton.addEventListener('click', () => {
+        counter = 0
+    });
+    if (starter == 1){
+        if(document.getElementById('curl').checked) {
+            angle = calculateAngle(shoulder,elbow,wrist)
+            if (angle > 160){
+                stage = "down"
+            }
+            if (angle < 30 & stage =='down'){
+                stage="up"
+                counter +=1
+            }
+          }
+          if(document.getElementById('squat').checked) {
+            angle = calculateAngle(hip,knee,ankle)
+            if (angle > 169){
+                stage = "up"
+            }
+            if (angle < 90 & stage =='up'){
+                stage="down"
+                counter +=1
+            }
+          }
+    }
+    const landmarkValuesDiv = document.getElementById('counter');
+    landmarkValuesDiv.innerHTML = `stage: ${stage}, count: ${counter}`;
+    if (webcamRunning === true) {
+        window.requestAnimationFrame(predictWebcam);
+    }
+}

style.css ADDED Viewed

	@@ -0,0 +1,113 @@

+/* Copyright 2023 The MediaPipe Authors.
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+     http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. */
+@use "@material";
+body {
+  font-family: roboto;
+  margin: 2em;
+  color: #3d3d3d;
+  --mdc-theme-primary: #007f8b;
+  --mdc-theme-on-primary: #f1f3f4;
+}
+h1 {
+  color: #007f8b;
+}
+h2 {
+  clear: both;
+}
+em {
+  font-weight: bold;
+}
+video {
+  clear: both;
+  display: block;
+  transform: rotateY(180deg);
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+}
+section {
+  opacity: 1;
+  transition: opacity 500ms ease-in-out;
+}
+header,
+footer {
+  clear: both;
+}
+.removed {
+  display: none;
+}
+.invisible {
+  opacity: 0.2;
+}
+.note {
+  font-style: italic;
+  font-size: 130%;
+}
+.videoView,
+.detectOnClick {
+  position: relative;
+  float: left;
+  width: 48%;
+  margin: 2% 1%;
+  cursor: pointer;
+}
+.videoView p,
+.detectOnClick p {
+  position: absolute;
+  padding: 5px;
+  background-color: #007f8b;
+  color: #fff;
+  border: 1px dashed rgba(255, 255, 255, 0.7);
+  z-index: 2;
+  font-size: 12px;
+  margin: 0;
+}
+.highlighter {
+  background: rgba(0, 255, 0, 0.25);
+  border: 1px dashed #fff;
+  z-index: 1;
+  position: absolute;
+}
+.canvas {
+  z-index: 1;
+  position: absolute;
+  pointer-events: none;
+}
+.output_canvas {
+  transform: rotateY(180deg);
+  -webkit-transform: rotateY(180deg);
+  -moz-transform: rotateY(180deg);
+}
+.detectOnClick {
+  z-index: 0;
+}
+.detectOnClick img {
+  width: 100%;
+}