공태현 / healthcare-with-webcam

Go to a project
Toggle navigation Toggle navigation pinning
공태현
2d103c95 2 parents 2a4512fc 3785525b

Merge branch 'feature/googleposeAPI' into develop 

Merge feature/googleposeAPI into develop
Inline Side-by-side
Showing 1 changed file with 89 additions and 0 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