공태현 / healthcare-with-webcam

Go to a project
Toggle navigation Toggle navigation pinning
공태현
86bbad46 2 parents e8d0e720 cd2a8e4b

Merge branch 'feature/counter' into feature/userInfo

Inline Side-by-side
Showing 16 changed files with 167 additions and 65 deletions
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
1 +@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
2 +
3 +button {
4 + margin: 10px;
5 + margin-bottom: 20px;
6 +}
7 +
8 +.w-btn {
9 + position: relative;
10 + border: none;
11 + display: inline-block;
12 + padding: 15px 30px;
13 + border-radius: 15px;
14 + font-family: "paybooc-Light", sans-serif;
15 + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
16 + text-decoration: none;
17 + font-weight: 600;
18 + transition: 0.25s;
19 +}
20 +
21 +.w-btn-outline {
22 + position: relative;
23 + padding: 15px 30px;
24 + border-radius: 15px;
25 + font-family: "paybooc-Light", sans-serif;
26 + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
27 + text-decoration: none;
28 + font-weight: 600;
29 + transition: 0.25s;
30 +}
31 +
32 +.w-btn-indigo {
33 + background-color: aliceblue;
34 + color: #2e2f30;
35 +}
36 +
37 +.w-btn-indigo-outline {
38 + border: 3px solid aliceblue;
39 + color: #2e2f30;
40 +}
41 +
42 +.w-btn-indigo-outline:hover {
43 + color: #2e2f30;
44 + background: aliceblue;
45 +}
46 +
47 +.Title {
48 + font-size : 100px;
49 + font-family: fantasy;
50 + color : aliceblue;
51 + margin-top: 15%;
52 + text-align: center;
53 +}
54 +
55 +.click_title {
56 + font-size : 40px;
57 + font-family: fantasy;
58 + color : aliceblue;
59 + margin-top: 40px;
60 + margin-bottom: 20px;
61 + text-align: center;
62 + transition: 500ms;
63 +}
64 +
65 +.label-container {
66 + visibility: hidden;
67 +}
68 +
69 +.hidden {
70 + visibility: hidden;
71 +}
72 +
73 +.visible {
74 + visibility: visible;
75 +}
76 +
77 +.circle {
78 + margin: 20px;
79 + width: 100px;
80 + height: 100px;
81 + background-color: aliceblue;
82 + color: #2e2f30;
83 + text-align: center;
84 + border-radius: 50%;
85 + line-height: 100px;
86 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 + <head>
4 + <meta charset="UTF-8">
5 + <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 + <link rel="stylesheet" href="squat.css">
8 + <title>Squat Page</title>
9 + </head>
10 + <body bgcolor= "#353535">
11 + <div id="title" class="Title">
12 + Squat Page
13 + <center>
14 + <button class="w-btn w-btn-indigo" type="button" onclick="init()">WEBCAM START</button>
15 + <div>
16 + <canvas id="canvas"></canvas>
17 + <iframe
18 + id="youtube"
19 + class="hidden"
20 + width="560" height="400"
21 + src="https://www.youtube.com/embed/9WhpAVOSyl8?start=22"
22 + title="YouTube video player"
23 + frameborder="0"
24 + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
25 + </iframe>
26 + </div>
27 + <div id="counter" class="circle"></div>
28 + </center>
29 + </div>
30 + <div id="label-container" class="label-container"></div>
31 + <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
32 + <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
33 + <script src="./squat.js"></script>
34 + </body>
35 +</html>
1 -<!DOCTYPE html> 1 +// More API functions here:
2 -<html lang="en"> 2 +// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose
3 -<head> 3 +// the link to your model provided by Teachable Machine export panel
4 - <meta charset="UTF-8"> 4 +const URL = "https://teachablemachine.withgoogle.com/models/xymjZj4q-/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습.
5 - <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 +let model, webcam, ctx, labelContainer, maxPredictions;
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 - <title>Squart Page</title>
8 -</head>
9 -<body>
10 - <div>온라인 헬스 케어 서비스 (스쿼트)</div>
11 -<div>
12 - <script src = "./squart.js"></script>
13 - <sapn id = "user_count">0</sapn>
14 -</div>
15 -<button type="button" onclick="init()">Start</button>
16 -<div><canvas id="canvas"></canvas></div>
17 6
18 -<div id="label-container"></div> 7 +// 상태 : 서있는 상태로 초기화
19 -<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script> 8 +let status = "stand" ;
20 -<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script> 9 +// 갯수 count
21 -<script type="text/javascript"> 10 +let count = 0;
22 - // More API functions here: 11 +var counter = document.getElementById("counter");
23 - // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose 12 +counter.textContent = count;
13 +counter.className = "hidden";
24 14
25 - // the link to your model provided by Teachable Machine export panel 15 +async function init() {
26 - const URL = "https://teachablemachine.withgoogle.com/models/xymjZj4q-/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습.
27 - let model, webcam, ctx, labelContainer, maxPredictions;
28 -
29 - async function init() {
30 const modelURL = URL + "model.json"; 16 const modelURL = URL + "model.json";
31 const metadataURL = URL + "metadata.json"; 17 const metadataURL = URL + "metadata.json";
32 18
19 + var target = document.getElementById("youtube");
20 + target.className = "visible";
21 +
22 + var target2 = document.getElementById("title");
23 + target2.className = "click_title";
24 +
25 + counter.className = "circle";
26 +
33 // load the model and metadata 27 // load the model and metadata
34 // Refer to tmImage.loadFromFiles() in the API to support files from a file picker 28 // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
35 // Note: the pose library adds a tmPose object to your window (window.tmPose) 29 // Note: the pose library adds a tmPose object to your window (window.tmPose)
36 model = await tmPose.load(modelURL, metadataURL); 30 model = await tmPose.load(modelURL, metadataURL);
37 maxPredictions = model.getTotalClasses(); 31 maxPredictions = model.getTotalClasses();
38 -
39 // Convenience function to setup a webcam 32 // Convenience function to setup a webcam
40 - const size = 200; 33 + const size = 400;
41 const flip = true; // whether to flip the webcam 34 const flip = true; // whether to flip the webcam
42 webcam = new tmPose.Webcam(size, size, flip); // width, height, flip 35 webcam = new tmPose.Webcam(size, size, flip); // width, height, flip
43 await webcam.setup(); // request access to the webcam 36 await webcam.setup(); // request access to the webcam
44 await webcam.play(); 37 await webcam.play();
38 + webcam.style
45 window.requestAnimationFrame(loop); 39 window.requestAnimationFrame(loop);
46 -
47 // append/get elements to the DOM 40 // append/get elements to the DOM
48 const canvas = document.getElementById("canvas"); 41 const canvas = document.getElementById("canvas");
49 canvas.width = size; canvas.height = size; 42 canvas.width = size; canvas.height = size;
...@@ -52,48 +45,38 @@ ...@@ -52,48 +45,38 @@
52 for (let i = 0; i < maxPredictions; i++) { // and class labels 45 for (let i = 0; i < maxPredictions; i++) { // and class labels
53 labelContainer.appendChild(document.createElement("div")); 46 labelContainer.appendChild(document.createElement("div"));
54 } 47 }
55 - } 48 +}
56 49
57 - async function loop(timestamp) { 50 +async function loop(timestamp) {
58 webcam.update(); // update the webcam frame 51 webcam.update(); // update the webcam frame
59 await predict(); 52 await predict();
60 window.requestAnimationFrame(loop); 53 window.requestAnimationFrame(loop);
61 - } 54 +}
62 - // 상태
63 - let status = "stand" ;
64 - // 갯수 count
65 - let count = 0;
66 - // 잘못된 경우 count
67 - let wrong_count = 0;
68 55
69 - async function predict() { 56 +async function predict() {
70 // Prediction #1: run input through posenet 57 // Prediction #1: run input through posenet
71 // estimatePose can take in an image, video or canvas html element 58 // estimatePose can take in an image, video or canvas html element
72 const { pose, posenetOutput } = await model.estimatePose(webcam.canvas); 59 const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);
73 // Prediction 2: run input through teachable machine classification model 60 // Prediction 2: run input through teachable machine classification model
74 const prediction = await model.predict(posenetOutput); 61 const prediction = await model.predict(posenetOutput);
75 62
76 - if (prediction[0].probability.toFixed(2) > 0.9) // 서있는 상태 63 + if (prediction[0].probability.toFixed(2) > 0.9) { // 서있는 상태
77 - { 64 + if (status == "squat"){ // 전에 스쿼트 상태였다면, 일어날 때 카운트를 하나 올려줘야 함.
78 - if (status == "squart")
79 - {
80 count++; 65 count++;
81 - console.log(`올바른 스쿼트 : ${count}`) 66 + var audio = new Audio('./sound/' + count%10 + '.wav');
82 - } 67 + audio.play();
83 - status = "stand"; 68 + counter.textContent = count;
84 - } 69 + console.log(count);
85 - else if (prediction[1].probability.toFixed(2) > 1.00) // 스쿼트 자세
86 - {
87 - status = "squart";
88 } 70 }
89 - else if (prediction[2].probability.toFixed(2) == 1.00) // 굽은 자세(잘못된 케이스) 71 + status = "stand"
90 - { 72 + } else if (prediction[1].probability.toFixed(2) == 1.00) { // 스쿼트 자세
91 - if (status == "squart" || status == "stand") // 굽은 자세로 잘못 수행하면, 73 + status = "squat"
92 - { 74 + } else if (prediction[2].probability.toFixed(2) == 1.00) { // 굽은 자세(잘못된 케이스)
93 - wrong_count++; 75 + if (status == "squart" || status == "stand") { // 굽은 자세로 잘못 수행하면, 소리 나도록
94 - console.log(`잘못된 자세 : ${wrong_count}`) 76 + var audio = new Audio('./sound/bad.mp3');
77 + audio.play();
95 } 78 }
96 - status = "bent"; 79 + status = "bent"
97 } 80 }
98 81
99 for (let i = 0; i < maxPredictions; i++) { 82 for (let i = 0; i < maxPredictions; i++) {
...@@ -104,9 +87,9 @@ ...@@ -104,9 +87,9 @@
104 87
105 // finally draw the poses 88 // finally draw the poses
106 drawPose(pose); 89 drawPose(pose);
107 - } 90 +}
108 91
109 - function drawPose(pose) { 92 +function drawPose(pose) {
110 if (webcam.canvas) { 93 if (webcam.canvas) {
111 ctx.drawImage(webcam.canvas, 0, 0); 94 ctx.drawImage(webcam.canvas, 0, 0);
112 // draw the keypoints and skeleton 95 // draw the keypoints and skeleton
...@@ -116,8 +99,4 @@ ...@@ -116,8 +99,4 @@
116 tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx); 99 tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);
117 } 100 }
118 } 101 }
119 - }
120 -</script>
121 -
122 -</body>
123 -</html>
...\ No newline at end of file ...\ No newline at end of file
102 +}
...\ No newline at end of file ...\ No newline at end of file
......
1 +Subproject commit 381096f776f0756063d2f9e77ceaca7d5fc7fcdc