공태현 / healthcare-with-webcam

Go to a project
Toggle navigation Toggle navigation pinning
공태현
5b392344 1 parent 4b6bf184

Change Model URL and update CSS (JIHO)

Inline Side-by-side
Showing 2 changed files with 28 additions and 9 deletions
1 +@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
1 @import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap"); 2 @import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
3 +@font-face {
4 + font-family: 'BMJUA';
5 + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff');
6 + font-weight: normal;
7 + font-style: normal;
8 +}
9 +
10 +@font-face {
11 + font-family: 'BMEULJIRO';
12 + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/BMEULJIRO.woff') format('woff');
13 + font-weight: normal;
14 + font-style: normal;
15 +}
2 16
3 button { 17 button {
4 margin: 10px; 18 margin: 10px;
...@@ -11,7 +25,7 @@ button { ...@@ -11,7 +25,7 @@ button {
11 display: inline-block; 25 display: inline-block;
12 padding: 15px 30px; 26 padding: 15px 30px;
13 border-radius: 15px; 27 border-radius: 15px;
14 - font-family: "paybooc-Light", sans-serif; 28 + font-family: "BMJUA", sans-serif;
15 box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); 29 box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
16 text-decoration: none; 30 text-decoration: none;
17 font-weight: 600; 31 font-weight: 600;
...@@ -22,7 +36,7 @@ button { ...@@ -22,7 +36,7 @@ button {
22 position: relative; 36 position: relative;
23 padding: 15px 30px; 37 padding: 15px 30px;
24 border-radius: 15px; 38 border-radius: 15px;
25 - font-family: "paybooc-Light", sans-serif; 39 + font-family: "BMJUA", sans-serif;
26 box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); 40 box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
27 text-decoration: none; 41 text-decoration: none;
28 font-weight: 600; 42 font-weight: 600;
...@@ -46,7 +60,7 @@ button { ...@@ -46,7 +60,7 @@ button {
46 60
47 .Title { 61 .Title {
48 font-size : 100px; 62 font-size : 100px;
49 - font-family: fantasy; 63 + font-family: BMEULJIRO;
50 color : aliceblue; 64 color : aliceblue;
51 margin-top: 15%; 65 margin-top: 15%;
52 text-align: center; 66 text-align: center;
...@@ -54,7 +68,7 @@ button { ...@@ -54,7 +68,7 @@ button {
54 68
55 .click_title { 69 .click_title {
56 font-size : 40px; 70 font-size : 40px;
57 - font-family: fantasy; 71 + font-family: BMEULJIRO;
58 color : aliceblue; 72 color : aliceblue;
59 margin-top: 40px; 73 margin-top: 40px;
60 margin-bottom: 20px; 74 margin-bottom: 20px;
......
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
2 // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose 2 // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose
3 3
4 // the link to your model provided by Teachable Machine export panel 4 // the link to your model provided by Teachable Machine export panel
5 -const URL = "https://teachablemachine.withgoogle.com/models/xymjZj4q-/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습. 5 +const URL = "https://teachablemachine.withgoogle.com/models/J8-G4eWbz/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습.
6 let model, webcam, ctx, labelContainer, maxPredictions; 6 let model, webcam, ctx, labelContainer, maxPredictions;
7 7
8 8
9 // 갯수 count 9 // 갯수 count
10 -let count = 0; 10 +var count = 0;
11 var counter = document.getElementById("counter"); 11 var counter = document.getElementById("counter");
12 counter.textContent = count; 12 counter.textContent = count;
13 counter.className = "hidden"; 13 counter.className = "hidden";
...@@ -52,6 +52,7 @@ async function loop(timestamp) { ...@@ -52,6 +52,7 @@ async function loop(timestamp) {
52 await predict(); 52 await predict();
53 window.requestAnimationFrame(loop); 53 window.requestAnimationFrame(loop);
54 } 54 }
55 +var status = "stand";
55 56
56 async function predict() { 57 async function predict() {
57 // Prediction #1: run input through posenet 58 // Prediction #1: run input through posenet
...@@ -59,24 +60,28 @@ async function predict() { ...@@ -59,24 +60,28 @@ async function predict() {
59 const { pose, posenetOutput } = await model.estimatePose(webcam.canvas); 60 const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);
60 // Prediction 2: run input through teachable machine classification model 61 // Prediction 2: run input through teachable machine classification model
61 const prediction = await model.predict(posenetOutput); 62 const prediction = await model.predict(posenetOutput);
62 - let status = "stand" 63 +
63 if (prediction[0].probability.toFixed(2) > 0.9) { // 서있는 상태 64 if (prediction[0].probability.toFixed(2) > 0.9) { // 서있는 상태
64 if (status == "squat"){ // 전에 스쿼트 상태였다면, 일어날 때 카운트를 하나 올려줘야 함. 65 if (status == "squat"){ // 전에 스쿼트 상태였다면, 일어날 때 카운트를 하나 올려줘야 함.
65 count++; 66 count++;
66 var audio = new Audio('./sound/' + count%10 + '.wav'); 67 var audio = new Audio('./sound/' + count%10 + '.wav');
67 audio.play(); 68 audio.play();
68 counter.textContent = count; 69 counter.textContent = count;
69 - console.log(count); 70 +
70 } 71 }
71 status = "stand" 72 status = "stand"
73 +
72 } else if (prediction[1].probability.toFixed(2) == 1.00) { // 스쿼트 자세 74 } else if (prediction[1].probability.toFixed(2) == 1.00) { // 스쿼트 자세
73 status = "squat" 75 status = "squat"
76 +
74 } else if (prediction[2].probability.toFixed(2) == 1.00) { // 굽은 자세(잘못된 케이스) 77 } else if (prediction[2].probability.toFixed(2) == 1.00) { // 굽은 자세(잘못된 케이스)
75 - if (status == "squart" || status == "stand") { // 굽은 자세로 잘못 수행하면, 소리 나도록 78 + if (status == "squat" || status == "stand") { // 굽은 자세로 잘못 수행하면, 소리 나도록
76 var audio = new Audio('./sound/bad.mp3'); 79 var audio = new Audio('./sound/bad.mp3');
77 audio.play(); 80 audio.play();
81 +
78 } 82 }
79 status = "bent" 83 status = "bent"
84 + console.log(status);
80 } 85 }
81 86
82 for (let i = 0; i < maxPredictions; i++) { 87 for (let i = 0; i < maxPredictions; i++) {
......