Skip to content

Commit 60c19dd

Browse files
lina128lina128
authored
[pose-detection]Setup demo. (#614)
FEATURE
1 parent 4301eb1 commit 60c19dd

File tree

7 files changed

+641
-230
lines changed

7 files changed

+641
-230
lines changed

‎pose-detection/demo/.babelrc

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"presets": [
3+
[
4+
"env",
5+
{
6+
"esmodules": false,
7+
"targets": {
8+
"browsers": [
9+
"> 3%"
10+
]
11+
}
12+
}
13+
]
14+
],
15+
"plugins": ["@babel/plugin-transform-runtime"]
16+
}

‎pose-detection/demo/index.html

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,22 @@
3939
}
4040
</style>
4141
<body>
42-
<div>Content Placeholder</div>
42+
<div id="main">
43+
<div class="container">
44+
<div class="canvas-wrapper">
45+
<canvas id="output"></canvas>
46+
<video id="video" playsinline style="
47+
-webkit-transform: scaleX(-1);
48+
transform: scaleX(-1);
49+
visibility: hidden;
50+
width: auto;
51+
height: auto;
52+
">
53+
</video>
54+
</div>
55+
</div>
56+
</div>
4357
</body>
4458
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
4559
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
60+
<script src="index.js"></script>

‎pose-detection/demo/index.js

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
/**
2+
* @license
3+
* Copyright 2021 Google LLC. All Rights Reserved.
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* https://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
* =============================================================================
16+
*/
17+
18+
import '@tensorflow/tfjs-backend-webgl';
19+
20+
import * as posedetection from '@tensorflow-models/posedetection';
21+
import * as tf from '@tensorflow/tfjs-core';
22+
23+
const stats = new Stats();
24+
stats.showPanel(0);
25+
document.body.prepend(stats.domElement);
26+
27+
let detector, ctx, videoWidth, videoHeight, video, canvas;
28+
29+
const state = {
30+
backend: 'webgl'
31+
};
32+
33+
const gui = new dat.GUI();
34+
gui.add(state, 'backend', ['webgl']).onChange(async backend => {
35+
await tf.setBackend(backend);
36+
});
37+
38+
async function setupCamera() {
39+
video = document.getElementById('video');
40+
41+
const stream = await navigator.mediaDevices.getUserMedia({
42+
'audio': false,
43+
'video': {facingMode: 'user'},
44+
});
45+
video.srcObject = stream;
46+
47+
return new Promise((resolve) => {
48+
video.onloadedmetadata = () => {
49+
resolve(video);
50+
};
51+
});
52+
}
53+
54+
const renderPrediction = async () => {
55+
stats.begin();
56+
57+
// TODO: Add rendering logic.
58+
59+
stats.end();
60+
61+
requestAnimationFrame(renderPrediction);
62+
};
63+
64+
const setupPage = async () => {
65+
await tf.setBackend(state.backend);
66+
await setupCamera();
67+
video.play();
68+
69+
videoWidth = video.videoWidth;
70+
videoHeight = video.videoHeight;
71+
video.width = videoWidth;
72+
video.height = videoHeight;
73+
74+
canvas = document.getElementById('output');
75+
canvas.width = videoWidth;
76+
canvas.height = videoHeight;
77+
78+
ctx = canvas.getContext('2d');
79+
ctx.clearRect(0, 0, videoWidth, videoHeight);
80+
ctx.strokeStyle = 'red';
81+
ctx.fillStyle = 'red';
82+
83+
ctx.translate(canvas.width, 0);
84+
ctx.scale(-1, 1);
85+
86+
detector = await posedetection.createDetector(
87+
posedetection.SupportedModels.PoseNet, {
88+
quantBytes: 4,
89+
architecture: 'MobileNetV1',
90+
outputStride: 16,
91+
inputResolution: {width: 514, height: 513},
92+
multiplier: 1
93+
});
94+
95+
renderPrediction();
96+
};
97+
98+
setupPage();

‎pose-detection/demo/package.json

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"node": ">=8.9.0"
1010
},
1111
"dependencies": {
12+
"@tensorflow-models/posedetection": "link:../dist",
1213
"@tensorflow/tfjs-backend-webgl": "3.3.0",
1314
"@tensorflow/tfjs-converter": "3.3.0",
1415
"@tensorflow/tfjs-core": "3.3.0"
@@ -25,15 +26,15 @@
2526
"crypto": false
2627
},
2728
"devDependencies": {
28-
"babel-core": "~6.26.3",
29-
"babel-plugin-transform-runtime": "~6.23.0",
30-
"babel-polyfill": "~6.26.0",
31-
"babel-preset-env": "~1.7.0",
29+
"@babel/core": "7.7.5",
30+
"@babel/plugin-transform-runtime": "^7.7.6",
31+
"@babel/preset-env": "^7.7.6",
32+
"babel-plugin-external-helpers": "^6.22.0",
33+
"babel-preset-env": "^1.7.0",
3234
"clang-format": "~1.2.2",
3335
"cross-env": "^5.2.0",
34-
"dat.gui": "~0.7.2",
35-
"eslint": "~4.19.1",
36-
"eslint-config-google": "~0.9.1",
36+
"eslint": "^4.19.1",
37+
"eslint-config-google": "^0.9.1",
3738
"parcel-bundler": "1.12.3",
3839
"parcel-plugin-static-files-copy": "^2.5.1",
3940
"yalc": "~1.0.0-pre.23"

0 commit comments

Comments
 (0)