공태현 / healthcare-with-webcam

Go to a project
Toggle navigation Toggle navigation pinning
정지호
95a6187e 1 parent 1ee39185

Seperate css/html/js

Inline Side-by-side
Showing 3 changed files with 96 additions and 95 deletions
...@@ -4,108 +4,19 @@ ...@@ -4,108 +4,19 @@
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 - <link rel="stylesheet" href="style.css"> 7 + <link rel="stylesheet" href="squat.css">
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 class="Title">Squat Page</div>
12 - <center><button class="w-btn w-btn-indigo" type="button" onclick="init()">START</button></center> 12 + <center><button class="w-btn w-btn-indigo" type="button" onclick="init()">WEBCAM START</button></center>
13 <div><canvas id="canvas"></canvas></div> 13 <div><canvas id="canvas"></canvas></div>
14 <div id="label-container"></div> 14 <div id="label-container"></div>
15 + <center>
16 + <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>
17 + </center>
15 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script> 18 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
16 <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script> 19 <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
17 - <script type="text/javascript"> 20 + <script src="./squat.js"></script>
18 - // More API functions here:
19 - // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose
20 - // the link to your model provided by Teachable Machine export panel
21 - const URL = "https://teachablemachine.withgoogle.com/models/xymjZj4q-/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습.
22 - let model, webcam, ctx, labelContainer, maxPredictions;
23 -
24 - async function init() {
25 - const modelURL = URL + "model.json";
26 - const metadataURL = URL + "metadata.json";
27 -
28 - // load the model and metadata
29 - // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
30 - // Note: the pose library adds a tmPose object to your window (window.tmPose)
31 - model = await tmPose.load(modelURL, metadataURL);
32 - maxPredictions = model.getTotalClasses();
33 - // Convenience function to setup a webcam
34 - const size = 500;
35 - const flip = true; // whether to flip the webcam
36 - webcam = new tmPose.Webcam(size, size, flip); // width, height, flip
37 - await webcam.setup(); // request access to the webcam
38 - await webcam.play();
39 - window.requestAnimationFrame(loop);
40 - // append/get elements to the DOM
41 - const canvas = document.getElementById("canvas");
42 - canvas.width = size; canvas.height = size;
43 - ctx = canvas.getContext("2d");
44 - labelContainer = document.getElementById("label-container");
45 - for (let i = 0; i < maxPredictions; i++) { // and class labels
46 - labelContainer.appendChild(document.createElement("div"));
47 - }
48 - }
49 -
50 - async function loop(timestamp) {
51 - webcam.update(); // update the webcam frame
52 - await predict();
53 - window.requestAnimationFrame(loop);
54 - }
55 -
56 - // 상태 : 서있는 상태로 초기화
57 - let status = "stand" ;
58 - // 갯수 count
59 - let count = 0;
60 -
61 - async function predict() {
62 - // Prediction #1: run input through posenet
63 - // estimatePose can take in an image, video or canvas html element
64 - const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);
65 - // Prediction 2: run input through teachable machine classification model
66 - const prediction = await model.predict(posenetOutput);
67 -
68 - if (prediction[0].probability.toFixed(2) > 0.9) { // 서있는 상태
69 - if (status == "squat"){ // 전에 스쿼트 상태였다면, 일어날 때 카운트를 하나 올려줘야 함.
70 - count++;
71 - var audio = new Audio(count%10 + '.wav');
72 - audio.play();
73 - console.log(count);
74 - }
75 - status = "stand"
76 - } else if (prediction[1].probability.toFixed(2) == 1.00) { // 스쿼트 자세
77 - status = "squat"
78 - } else if (prediction[2].probability.toFixed(2) == 1.00) { // 굽은 자세(잘못된 케이스)
79 - if (status == "squart" || status == "stand") { // 굽은 자세로 잘못 수행하면, 소리 나도록
80 - var audio = new Audio('bad.mp3');
81 - audio.play();
82 - }
83 - status = "bent"
84 - }
85 -
86 - for (let i = 0; i < maxPredictions; i++) {
87 - const classPrediction =
88 - prediction[i].className + ": " + prediction[i].probability.toFixed(2);
89 - labelContainer.childNodes[i].innerHTML = classPrediction;
90 - }
91 -
92 - // finally draw the poses
93 - drawPose(pose);
94 - }
95 -
96 - function drawPose(pose) {
97 - if (webcam.canvas) {
98 - ctx.drawImage(webcam.canvas, 0, 0);
99 - // draw the keypoints and skeleton
100 - if (pose) {
101 - const minPartConfidence = 0.5;
102 - tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);
103 - tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);
104 - }
105 - }
106 - }
107 - </script>
108 - <!-- 유튜브 영상 띄우기 -->
109 - <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>
110 </body> 21 </body>
111 </html> 22 </html>
......
1 +// More API functions here:
2 +// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose
3 +// the link to your model provided by Teachable Machine export panel
4 +const URL = "https://teachablemachine.withgoogle.com/models/xymjZj4q-/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습.
5 +let model, webcam, ctx, labelContainer, maxPredictions;
6 +
7 +async function init() {
8 + const modelURL = URL + "model.json";
9 + const metadataURL = URL + "metadata.json";
10 +
11 + // load the model and metadata
12 + // Refer to tmImage.loadFromFiles() in the API to support files from a file picker
13 + // Note: the pose library adds a tmPose object to your window (window.tmPose)
14 + model = await tmPose.load(modelURL, metadataURL);
15 + maxPredictions = model.getTotalClasses();
16 + // Convenience function to setup a webcam
17 + const size = 300;
18 + const flip = true; // whether to flip the webcam
19 + webcam = new tmPose.Webcam(size, size, flip); // width, height, flip
20 + await webcam.setup(); // request access to the webcam
21 + await webcam.play();
22 + webcam.style
23 + window.requestAnimationFrame(loop);
24 + // append/get elements to the DOM
25 + const canvas = document.getElementById("canvas");
26 + canvas.width = size; canvas.height = size;
27 + ctx = canvas.getContext("2d");
28 + labelContainer = document.getElementById("label-container");
29 + for (let i = 0; i < maxPredictions; i++) { // and class labels
30 + labelContainer.appendChild(document.createElement("div"));
31 + }
32 +}
33 +
34 +async function loop(timestamp) {
35 + webcam.update(); // update the webcam frame
36 + await predict();
37 + window.requestAnimationFrame(loop);
38 +}
39 +
40 +// 상태 : 서있는 상태로 초기화
41 +let status = "stand" ;
42 +// 갯수 count
43 +let count = 0;
44 +
45 +async function predict() {
46 + // Prediction #1: run input through posenet
47 + // estimatePose can take in an image, video or canvas html element
48 + const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);
49 + // Prediction 2: run input through teachable machine classification model
50 + const prediction = await model.predict(posenetOutput);
51 +
52 + if (prediction[0].probability.toFixed(2) > 0.9) { // 서있는 상태
53 + if (status == "squat"){ // 전에 스쿼트 상태였다면, 일어날 때 카운트를 하나 올려줘야 함.
54 + count++;
55 + var audio = new Audio(count%10 + '.wav');
56 + audio.play();
57 + console.log(count);
58 + }
59 + status = "stand"
60 + } else if (prediction[1].probability.toFixed(2) == 1.00) { // 스쿼트 자세
61 + status = "squat"
62 + } else if (prediction[2].probability.toFixed(2) == 1.00) { // 굽은 자세(잘못된 케이스)
63 + if (status == "squart" || status == "stand") { // 굽은 자세로 잘못 수행하면, 소리 나도록
64 + var audio = new Audio('bad.mp3');
65 + audio.play();
66 + }
67 + status = "bent"
68 + }
69 +
70 + for (let i = 0; i < maxPredictions; i++) {
71 + const classPrediction =
72 + prediction[i].className + ": " + prediction[i].probability.toFixed(2);
73 + labelContainer.childNodes[i].innerHTML = classPrediction;
74 + }
75 +
76 + // finally draw the poses
77 + drawPose(pose);
78 +}
79 +
80 +function drawPose(pose) {
81 + if (webcam.canvas) {
82 + ctx.drawImage(webcam.canvas, 0, 0);
83 + // draw the keypoints and skeleton
84 + if (pose) {
85 + const minPartConfidence = 0.5;
86 + tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);
87 + tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);
88 + }
89 + }
90 +}
...\ No newline at end of file ...\ No newline at end of file