공태현 / healthcare-with-webcam

Go to a project
Toggle navigation Toggle navigation pinning
공태현
0ba1300b 1 parent d2d48891

Update googleposeAPI.html -> squart.html

Inline Side-by-side
Showing 2 changed files with 78 additions and 90 deletions
1 -<!DOCTYPE html>
2 -<html lang="en">
3 -<head>
4 - <meta charset="UTF-8">
5 - <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 - <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 - <title>Squart Page</title>
8 -</head>
9 -<body>
10 - <div>Teachable Machine Pose Model - Squart</div>
11 -<button type="button" onclick="init()">Start</button>
12 -<div><canvas id="canvas"></canvas></div>
13 -<div id="label-container"></div>
14 -<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
15 -<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
16 -<script type="text/javascript">
17 - // More API functions here:
18 - // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose
19 -
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 -
34 - // Convenience function to setup a webcam
35 - const size = 200;
36 - const flip = true; // whether to flip the webcam
37 - webcam = new tmPose.Webcam(size, size, flip); // width, height, flip
38 - await webcam.setup(); // request access to the webcam
39 - await webcam.play();
40 - window.requestAnimationFrame(loop);
41 -
42 - // append/get elements to the DOM
43 - const canvas = document.getElementById("canvas");
44 - canvas.width = size; canvas.height = size;
45 - ctx = canvas.getContext("2d");
46 - labelContainer = document.getElementById("label-container");
47 - for (let i = 0; i < maxPredictions; i++) { // and class labels
48 - labelContainer.appendChild(document.createElement("div"));
49 - }
50 - }
51 -
52 - async function loop(timestamp) {
53 - webcam.update(); // update the webcam frame
54 - await predict();
55 - window.requestAnimationFrame(loop);
56 - }
57 -
58 - async function predict() {
59 - // Prediction #1: run input through posenet
60 - // estimatePose can take in an image, video or canvas html element
61 - const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);
62 - // Prediction 2: run input through teachable machine classification model
63 - const prediction = await model.predict(posenetOutput);
64 -
65 - for (let i = 0; i < maxPredictions; i++) {
66 - const classPrediction =
67 - prediction[i].className + ": " + prediction[i].probability.toFixed(2);
68 - labelContainer.childNodes[i].innerHTML = classPrediction;
69 - }
70 -
71 - // finally draw the poses
72 - drawPose(pose);
73 - }
74 -
75 - function drawPose(pose) {
76 - if (webcam.canvas) {
77 - ctx.drawImage(webcam.canvas, 0, 0);
78 - // draw the keypoints and skeleton
79 - if (pose) {
80 - const minPartConfidence = 0.5;
81 - tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);
82 - tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);
83 - }
84 - }
85 - }
86 -</script>
87 -
88 -</body>
89 -</html>
...\ No newline at end of file ...\ No newline at end of file
...@@ -7,6 +7,83 @@ ...@@ -7,6 +7,83 @@
7 <title>Squart Page</title> 7 <title>Squart Page</title>
8 </head> 8 </head>
9 <body> 9 <body>
10 - Squart Page 10 + <div>Teachable Machine Pose Model - Squart</div>
11 +<button type="button" onclick="init()">Start</button>
12 +<div><canvas id="canvas"></canvas></div>
13 +<div id="label-container"></div>
14 +<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
15 +<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
16 +<script type="text/javascript">
17 + // More API functions here:
18 + // https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/pose
19 +
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 +
34 + // Convenience function to setup a webcam
35 + const size = 200;
36 + const flip = true; // whether to flip the webcam
37 + webcam = new tmPose.Webcam(size, size, flip); // width, height, flip
38 + await webcam.setup(); // request access to the webcam
39 + await webcam.play();
40 + window.requestAnimationFrame(loop);
41 +
42 + // append/get elements to the DOM
43 + const canvas = document.getElementById("canvas");
44 + canvas.width = size; canvas.height = size;
45 + ctx = canvas.getContext("2d");
46 + labelContainer = document.getElementById("label-container");
47 + for (let i = 0; i < maxPredictions; i++) { // and class labels
48 + labelContainer.appendChild(document.createElement("div"));
49 + }
50 + }
51 +
52 + async function loop(timestamp) {
53 + webcam.update(); // update the webcam frame
54 + await predict();
55 + window.requestAnimationFrame(loop);
56 + }
57 +
58 + async function predict() {
59 + // Prediction #1: run input through posenet
60 + // estimatePose can take in an image, video or canvas html element
61 + const { pose, posenetOutput } = await model.estimatePose(webcam.canvas);
62 + // Prediction 2: run input through teachable machine classification model
63 + const prediction = await model.predict(posenetOutput);
64 +
65 + for (let i = 0; i < maxPredictions; i++) {
66 + const classPrediction =
67 + prediction[i].className + ": " + prediction[i].probability.toFixed(2);
68 + labelContainer.childNodes[i].innerHTML = classPrediction;
69 + }
70 +
71 + // finally draw the poses
72 + drawPose(pose);
73 + }
74 +
75 + function drawPose(pose) {
76 + if (webcam.canvas) {
77 + ctx.drawImage(webcam.canvas, 0, 0);
78 + // draw the keypoints and skeleton
79 + if (pose) {
80 + const minPartConfidence = 0.5;
81 + tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);
82 + tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);
83 + }
84 + }
85 + }
86 +</script>
87 +
11 </body> 88 </body>
12 </html> 89 </html>
...\ No newline at end of file ...\ No newline at end of file
......