공태현 / healthcare-with-webcam

Go to a project
Toggle navigation Toggle navigation pinning
정지호
12257454 1 parent 99ae40b4

showing squat videos

Inline Side-by-side
Showing 2 changed files with 96 additions and 97 deletions
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html lang="en"> 2 <html lang="en">
3 -<head> 3 + <head>
4 - <meta charset="UTF-8"> 4 + <meta charset="UTF-8">
5 - <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 - <title>Squart Page</title> 7 + <title>Squart Page</title>
8 -</head> 8 + </head>
9 -<body> 9 + <body>
10 <div>Teachable Machine Pose Model - Squart</div> 10 <div>Teachable Machine Pose Model - Squart</div>
11 -<button type="button" onclick="init()">Start</button> 11 + <button type="button" onclick="init()">Start</button>
12 -<div><canvas id="canvas"></canvas></div> 12 + <div><canvas id="canvas"></canvas></div>
13 -<div id="label-container"></div> 13 + <div id="label-container"></div>
14 -<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script> 14 + <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
15 -<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script> 15 + <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
16 -<script type="text/javascript"> 16 + <script type="text/javascript">
17 - // More API functions here: 17 + // More API functions here:
18 - // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose 18 + // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose
19 + // the link to your model provided by Teachable Machine export panel
20 + const URL = "https://teachablemachine.withgoogle.com/models/xymjZj4q-/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습.
21 + let model, webcam, ctx, labelContainer, maxPredictions;
19 22
20 - // the link to your model provided by Teachable Machine export panel 23 + async function init() {
21 - const URL = "https://teachablemachine.withgoogle.com/models/xymjZj4q-/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습. 24 + const modelURL = URL + "model.json";
22 - let model, webcam, ctx, labelContainer, maxPredictions; 25 + const metadataURL = URL + "metadata.json";
23 26
24 - async function init() { 27 + // load the model and metadata
25 - const modelURL = URL + "model.json"; 28 + // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
26 - const metadataURL = URL + "metadata.json"; 29 + // Note: the pose library adds a tmPose object to your window (window.tmPose)
27 - 30 + model = await tmPose.load(modelURL, metadataURL);
28 - // load the model and metadata 31 + maxPredictions = model.getTotalClasses();
29 - // Refer to tmImage.loadFromFiles() in the API to support files from a file picker 32 + // Convenience function to setup a webcam
30 - // Note: the pose library adds a tmPose object to your window (window.tmPose) 33 + const size = 600;
31 - model = await tmPose.load(modelURL, metadataURL); 34 + const flip = true; // whether to flip the webcam
32 - maxPredictions = model.getTotalClasses(); 35 + webcam = new tmPose.Webcam(size, size, flip); // width, height, flip
33 - 36 + await webcam.setup(); // request access to the webcam
34 - // Convenience function to setup a webcam 37 + await webcam.play();
35 - const size = 200; 38 + window.requestAnimationFrame(loop);
36 - const flip = true; // whether to flip the webcam 39 + // append/get elements to the DOM
37 - webcam = new tmPose.Webcam(size, size, flip); // width, height, flip 40 + const canvas = document.getElementById("canvas");
38 - await webcam.setup(); // request access to the webcam 41 + canvas.width = size; canvas.height = size;
39 - await webcam.play(); 42 + ctx = canvas.getContext("2d");
40 - window.requestAnimationFrame(loop); 43 + labelContainer = document.getElementById("label-container");
41 - 44 + for (let i = 0; i < maxPredictions; i++) { // and class labels
42 - // append/get elements to the DOM 45 + labelContainer.appendChild(document.createElement("div"));
43 - const canvas = document.getElementById("canvas"); 46 + }
44 - canvas.width = size; canvas.height = size;
45 - ctx = canvas.getContext("2d");
46 - labelContainer = document.getElementById("label-container");
47 - for (let i = 0; i < maxPredictions; i++) { // and class labels
48 - labelContainer.appendChild(document.createElement("div"));
49 } 47 }
50 - }
51 48
52 - async function loop(timestamp) { 49 + async function loop(timestamp) {
53 - webcam.update(); // update the webcam frame 50 + webcam.update(); // update the webcam frame
54 - await predict(); 51 + await predict();
55 - window.requestAnimationFrame(loop); 52 + window.requestAnimationFrame(loop);
56 - } 53 + }
57 - // 상태 54 + // 상태
58 - let status = "stand" ; 55 + let status = "stand" ;
59 - // 갯수 count 56 + // 갯수 count
60 - let count = 0; 57 + let count = 0;
61 58
62 - async function predict() { 59 + async function predict() {
63 - // Prediction #1: run input through posenet 60 + // Prediction #1: run input through posenet
64 - // estimatePose can take in an image, video or canvas html element 61 + // estimatePose can take in an image, video or canvas html element
65 - const { pose, posenetOutput } = await model.estimatePose(webcam.canvas); 62 + const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);
66 - // Prediction 2: run input through teachable machine classification model 63 + // Prediction 2: run input through teachable machine classification model
67 - const prediction = await model.predict(posenetOutput); 64 + const prediction = await model.predict(posenetOutput);
68 65
69 - if (prediction[0].probability.toFixed(2) > 0.9) // 서있는 상태 66 + if (prediction[0].probability.toFixed(2) > 0.9) // 서있는 상태
70 - {
71 - if (status == "squart")
72 { 67 {
73 - count++; 68 + if (status == "squart")
69 + {
70 + count++;
71 + }
72 + status = "stand";
74 } 73 }
75 - status = "stand"; 74 + else if (prediction[1].probability.toFixed(2) == 1.00) // 스쿼트 자세
76 - }
77 - else if (prediction[1].probability.toFixed(2) == 1.00) // 스쿼트 자세
78 - {
79 - status = "squart";
80 - }
81 - else if (prediction[2].probability.toFixed(2) == 1.00) // 굽은 자세(잘못된 케이스)
82 - {
83 - if (status == "squart" || status == "stand") // 굽은 자세로 잘못 수행하면,
84 { 75 {
85 - console.log("잘못된 경우 입니다.") 76 + status = "squart";
77 + }
78 + else if (prediction[2].probability.toFixed(2) == 1.00) // 굽은 자세(잘못된 케이스)
79 + {
80 + if (status == "squart" || status == "stand") // 굽은 자세로 잘못 수행하면,
81 + {
82 + console.log("잘못된 경우 입니다.")
83 + }
84 + status = "bent";
86 } 85 }
87 - status = "bent";
88 - }
89 -
90 - for (let i = 0; i < maxPredictions; i++) {
91 - const classPrediction =
92 - prediction[i].className + ": " + prediction[i].probability.toFixed(2);
93 - labelContainer.childNodes[i].innerHTML = classPrediction;
94 - }
95 -
96 - // finally draw the poses
97 - drawPose(pose);
98 - }
99 86
100 - function drawPose(pose) { 87 + for (let i = 0; i < maxPredictions; i++) {
101 - if (webcam.canvas) { 88 + const classPrediction =
102 - ctx.drawImage(webcam.canvas, 0, 0); 89 + prediction[i].className + ": " + prediction[i].probability.toFixed(2);
103 - // draw the keypoints and skeleton 90 + labelContainer.childNodes[i].innerHTML = classPrediction;
104 - if (pose) {
105 - const minPartConfidence = 0.5;
106 - tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);
107 - tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);
108 } 91 }
92 +
93 + // finally draw the poses
94 + drawPose(pose);
109 } 95 }
110 - }
111 -</script>
112 96
113 -</body>
114 -</html>
...\ No newline at end of file ...\ No newline at end of file
97 + function drawPose(pose) {
98 + if (webcam.canvas) {
99 + ctx.drawImage(webcam.canvas, 0, 0);
100 + // draw the keypoints and skeleton
101 + if (pose) {
102 + const minPartConfidence = 0.5;
103 + tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);
104 + tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);
105 + }
106 + }
107 + }
108 + </script>
109 + <!-- 유튜브 영상 띄우기 -->
110 + <iframe width="560" height="315" src="https://www.youtube.com/embed/9WhpAVOSyl8?start=22" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
111 + </body>
112 +</html>
......