공태현 / 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
@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
button {
margin: 10px;
margin-bottom: 20px;
}
.w-btn {
position: relative;
border: none;
display: inline-block;
padding: 15px 30px;
border-radius: 15px;
font-family: "paybooc-Light", sans-serif;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
text-decoration: none;
font-weight: 600;
transition: 0.25s;
}
.w-btn-outline {
position: relative;
padding: 15px 30px;
border-radius: 15px;
font-family: "paybooc-Light", sans-serif;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
text-decoration: none;
font-weight: 600;
transition: 0.25s;
}
.w-btn-indigo {
background-color: aliceblue;
color: #2e2f30;
}
.w-btn-indigo-outline {
border: 3px solid aliceblue;
color: #2e2f30;
}
.w-btn-indigo-outline:hover {
color: #2e2f30;
background: aliceblue;
}
.Title {
font-size : 100px;
font-family: fantasy;
color : aliceblue;
margin-top: 15%;
text-align: center;
}
.click_title {
font-size : 40px;
font-family: fantasy;
color : aliceblue;
margin-top: 40px;
margin-bottom: 20px;
text-align: center;
transition: 500ms;
}
.label-container {
visibility: hidden;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
.circle {
margin: 20px;
width: 100px;
height: 100px;
background-color: aliceblue;
color: #2e2f30;
text-align: center;
border-radius: 50%;
line-height: 100px;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="squat.css">
<title>Squat Page</title>
</head>
<body bgcolor= "#353535">
<div id="title" class="Title">
Squat Page
<center>
<button class="w-btn w-btn-indigo" type="button" onclick="init()">WEBCAM START</button>
<div>
<canvas id="canvas"></canvas>
<iframe
id="youtube"
class="hidden"
width="560" height="400"
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>
</div>
<div id="counter" class="circle"></div>
</center>
</div>
<div id="label-container" class="label-container"></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
<script src="./squat.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Squart Page</title>
</head>
<body>
<div>온라인 헬스 케어 서비스 (스쿼트)</div>
<div>
<script src = "./squart.js"></script>
<sapn id = "user_count">0</sapn>
</div>
<button type="button" onclick="init()">Start</button>
<div><canvas id="canvas"></canvas></div>
// More API functions here:
// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose
// the link to your model provided by Teachable Machine export panel
const URL = "https://teachablemachine.withgoogle.com/models/xymjZj4q-/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습.
let model, webcam, ctx, labelContainer, maxPredictions;
<div id="label-container"></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
<script type="text/javascript">
// More API functions here:
// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose
// 상태 : 서있는 상태로 초기화
let status = "stand" ;
// 갯수 count
let count = 0;
var counter = document.getElementById("counter");
counter.textContent = count;
counter.className = "hidden";
// the link to your model provided by Teachable Machine export panel
const URL = "https://teachablemachine.withgoogle.com/models/xymjZj4q-/"; // 임시 URI - stand , squart, bent(허리 굽은 자세) 학습.
let model, webcam, ctx, labelContainer, maxPredictions;
async function init() {
async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
var target = document.getElementById("youtube");
target.className = "visible";
var target2 = document.getElementById("title");
target2.className = "click_title";
counter.className = "circle";
// load the model and metadata
// Refer to tmImage.loadFromFiles() in the API to support files from a file picker
// Note: the pose library adds a tmPose object to your window (window.tmPose)
model = await tmPose.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
// Convenience function to setup a webcam
const size = 200;
const size = 400;
const flip = true; // whether to flip the webcam
webcam = new tmPose.Webcam(size, size, flip); // width, height, flip
await webcam.setup(); // request access to the webcam
await webcam.play();
webcam.style
window.requestAnimationFrame(loop);
// append/get elements to the DOM
const canvas = document.getElementById("canvas");
canvas.width = size; canvas.height = size;
......@@ -52,48 +45,38 @@
for (let i = 0; i < maxPredictions; i++) { // and class labels
labelContainer.appendChild(document.createElement("div"));
}
}
}
async function loop(timestamp) {
async function loop(timestamp) {
webcam.update(); // update the webcam frame
await predict();
window.requestAnimationFrame(loop);
}
// 상태
let status = "stand" ;
// 갯수 count
let count = 0;
// 잘못된 경우 count
let wrong_count = 0;
}
async function predict() {
async function predict() {
// Prediction #1: run input through posenet
// estimatePose can take in an image, video or canvas html element
const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);
// Prediction 2: run input through teachable machine classification model
const prediction = await model.predict(posenetOutput);
if (prediction[0].probability.toFixed(2) > 0.9) // 서있는 상태
{
if (status == "squart")
{
if (prediction[0].probability.toFixed(2) > 0.9) { // 서있는 상태
if (status == "squat"){ // 전에 스쿼트 상태였다면, 일어날 때 카운트를 하나 올려줘야 함.
count++;
console.log(`올바른 스쿼트 : ${count}`)
}
status = "stand";
}
else if (prediction[1].probability.toFixed(2) > 1.00) // 스쿼트 자세
{
status = "squart";
var audio = new Audio('./sound/' + count%10 + '.wav');
audio.play();
counter.textContent = count;
console.log(count);
}
else if (prediction[2].probability.toFixed(2) == 1.00) // 굽은 자세(잘못된 케이스)
{
if (status == "squart" || status == "stand") // 굽은 자세로 잘못 수행하면,
{
wrong_count++;
console.log(`잘못된 자세 : ${wrong_count}`)
status = "stand"
} else if (prediction[1].probability.toFixed(2) == 1.00) { // 스쿼트 자세
status = "squat"
} else if (prediction[2].probability.toFixed(2) == 1.00) { // 굽은 자세(잘못된 케이스)
if (status == "squart" || status == "stand") { // 굽은 자세로 잘못 수행하면, 소리 나도록
var audio = new Audio('./sound/bad.mp3');
audio.play();
}
status = "bent";
status = "bent"
}
for (let i = 0; i < maxPredictions; i++) {
......@@ -104,9 +87,9 @@
// finally draw the poses
drawPose(pose);
}
}
function drawPose(pose) {
function drawPose(pose) {
if (webcam.canvas) {
ctx.drawImage(webcam.canvas, 0, 0);
// draw the keypoints and skeleton
......@@ -116,8 +99,4 @@
tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);
}
}
}
</script>
</body>
</html>
\ No newline at end of file
}
\ No newline at end of file
......
Subproject commit 381096f776f0756063d2f9e77ceaca7d5fc7fcdc