공태현 / 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 47 additions and 20 deletions
......@@ -2,7 +2,7 @@
button {
margin: 10px;
margin-bottom: 40px;
margin-bottom: 20px;
}
.w-btn {
......@@ -45,12 +45,21 @@ button {
}
.Title {
font-size : 60px;
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: 60px;
margin-top: 40px;
margin-bottom: 20px;
text-align: center;
transition: 500ms;
}
.label-container {
......@@ -63,4 +72,15 @@ button {
.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
......
......@@ -8,22 +8,25 @@
<title>Squat Page</title>
</head>
<body bgcolor= "#353535">
<div class="Title">Squat Page</div>
<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="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>
</div>
</center>
<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">0</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>
......
......@@ -13,13 +13,16 @@ async function init() {
var target = document.getElementById("youtube");
target.className = "visible";
var target2 = document.getElementById("title");
target2.className = "click_title";
// 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 = 300;
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
......@@ -60,6 +63,7 @@ async function predict() {
var audio = new Audio('./sound/' + count%10 + '.wav');
audio.play();
console.log(count);
document.getElementById("counter").innerText(count);
}
status = "stand"
} else if (prediction[1].probability.toFixed(2) == 1.00) { // 스쿼트 자세
......