공태현 / healthcare-with-webcam

Go to a project
Toggle navigation Toggle navigation pinning
정지호
377f31ff 1 parent 12e6311b

Design squat page

Inline Side-by-side
Showing 3 changed files with 33 additions and 6 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 2
3 button { 3 button {
4 margin: 10px; 4 margin: 10px;
5 - margin-bottom: 40px; 5 + margin-bottom: 20px;
6 } 6 }
7 7
8 .w-btn { 8 .w-btn {
...@@ -45,12 +45,21 @@ button { ...@@ -45,12 +45,21 @@ button {
45 } 45 }
46 46
47 .Title { 47 .Title {
48 - font-size : 60px; 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;
49 font-family: fantasy; 57 font-family: fantasy;
50 color : aliceblue; 58 color : aliceblue;
51 - margin-top: 60px; 59 + margin-top: 40px;
52 margin-bottom: 20px; 60 margin-bottom: 20px;
53 text-align: center; 61 text-align: center;
62 + transition: 500ms;
54 } 63 }
55 64
56 .label-container { 65 .label-container {
...@@ -64,3 +73,14 @@ button { ...@@ -64,3 +73,14 @@ button {
64 .visible { 73 .visible {
65 visibility: visible; 74 visibility: visible;
66 } 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
......
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
8 <title>Squat Page</title> 8 <title>Squat Page</title>
9 </head> 9 </head>
10 <body bgcolor= "#353535"> 10 <body bgcolor= "#353535">
11 - <div class="Title">Squat Page</div> 11 + <div id="title" class="Title">
12 + Squat Page
12 <center> 13 <center>
13 <button class="w-btn w-btn-indigo" type="button" onclick="init()">WEBCAM START</button> 14 <button class="w-btn w-btn-indigo" type="button" onclick="init()">WEBCAM START</button>
14 <div> 15 <div>
...@@ -16,14 +17,16 @@ ...@@ -16,14 +17,16 @@
16 <iframe 17 <iframe
17 id="youtube" 18 id="youtube"
18 class="hidden" 19 class="hidden"
19 - width="560" height="315" 20 + width="560" height="400"
20 src="https://www.youtube.com/embed/9WhpAVOSyl8?start=22" 21 src="https://www.youtube.com/embed/9WhpAVOSyl8?start=22"
21 title="YouTube video player" 22 title="YouTube video player"
22 frameborder="0" 23 frameborder="0"
23 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> 24 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
24 </iframe> 25 </iframe>
25 </div> 26 </div>
27 + <div id="counter" class="circle">0</div>
26 </center> 28 </center>
29 + </div>
27 <div id="label-container" class="label-container"></div> 30 <div id="label-container" class="label-container"></div>
28 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script> 31 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
29 <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script> 32 <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
......
...@@ -13,13 +13,16 @@ async function init() { ...@@ -13,13 +13,16 @@ async function init() {
13 var target = document.getElementById("youtube"); 13 var target = document.getElementById("youtube");
14 target.className = "visible"; 14 target.className = "visible";
15 15
16 + var target2 = document.getElementById("title");
17 + target2.className = "click_title";
18 +
16 // load the model and metadata 19 // load the model and metadata
17 // Refer to tmImage.loadFromFiles() in the API to support files from a file picker 20 // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
18 // Note: the pose library adds a tmPose object to your window (window.tmPose) 21 // Note: the pose library adds a tmPose object to your window (window.tmPose)
19 model = await tmPose.load(modelURL, metadataURL); 22 model = await tmPose.load(modelURL, metadataURL);
20 maxPredictions = model.getTotalClasses(); 23 maxPredictions = model.getTotalClasses();
21 // Convenience function to setup a webcam 24 // Convenience function to setup a webcam
22 - const size = 300; 25 + const size = 400;
23 const flip = true; // whether to flip the webcam 26 const flip = true; // whether to flip the webcam
24 webcam = new tmPose.Webcam(size, size, flip); // width, height, flip 27 webcam = new tmPose.Webcam(size, size, flip); // width, height, flip
25 await webcam.setup(); // request access to the webcam 28 await webcam.setup(); // request access to the webcam
...@@ -60,6 +63,7 @@ async function predict() { ...@@ -60,6 +63,7 @@ async function predict() {
60 var audio = new Audio('./sound/' + count%10 + '.wav'); 63 var audio = new Audio('./sound/' + count%10 + '.wav');
61 audio.play(); 64 audio.play();
62 console.log(count); 65 console.log(count);
66 + document.getElementById("counter").innerText(count);
63 } 67 }
64 status = "stand" 68 status = "stand"
65 } else if (prediction[1].probability.toFixed(2) == 1.00) { // 스쿼트 자세 69 } else if (prediction[1].probability.toFixed(2) == 1.00) { // 스쿼트 자세
......