fix human.draw

pull/91/head
Vladimir Mandic 2021-03-05 14:30:09 -05:00
parent 28bec908ba
commit 52d811b5cb
26 changed files with 445466 additions and 10340 deletions

View File

@ -14,7 +14,6 @@ Compatible with *Browser*, *WebWorker* and *NodeJS* execution on both Windows an
- NodeJS: Compatible with software *tfjs-node* and CUDA accelerated backends *tfjs-node-gpu*
Check out [**Live Demo**](https://vladmandic.github.io/human/demo/index.html) for processing of live WebCam video or static images
Live demo uses `WASM` backend for faster startup, but results are slower than when using `WebGL` backend
<br>

View File

@ -142,7 +142,7 @@ export default {
maxDetections: 10, // maximum number of people detected in the input
// should be set to the minimum number for performance
// only valid for posenet as blazepose only detects single pose
scoreThreshold: 0.5, // threshold for deciding when to remove boxes based on score
scoreThreshold: 0.3, // threshold for deciding when to remove boxes based on score
// in non-maximum suppression
// only valid for posenet as blazepose only detects single pose
nmsRadius: 20, // radius for deciding points are too close in non-maximum suppression

View File

@ -1,13 +1,8 @@
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
// import * as tf from '@tensorflow/tfjs';
// import Human from '../dist/human.esm-nobundle.js';
import Human from '../dist/human.esm.js'; // equivalent of @vladmandic/human
import Menu from './menu.js';
import GLBench from './gl-bench.js';
const userConfig = { backend: 'wasm' }; // add any user configuration overrides
const userConfig = { }; // add any user configuration overrides
/*
const userConfig = {
@ -18,7 +13,7 @@ const userConfig = {
face: { enabled: false, iris: { enabled: true }, mesh: { enabled: true }, age: { enabled: true }, gender: { enabled: true }, emotion: { enabled: true }, embedding: { enabled: true } },
hand: { enabled: false },
gestures: { enabled: true },
body: { enabled: true, modelType: 'blazepose', modelPath: '../models/blazepose-upper.json' },
body: { enabled: true, modelType: 'blazepose', modelPath: '../models/blazepose.json' },
};
*/

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,7 +1,7 @@
{
"inputs": {
"dist/human.esm.js": {
"bytes": 1350737,
"bytes": 3295444,
"imports": []
},
"demo/menu.js": {
@ -13,7 +13,7 @@
"imports": []
},
"demo/browser.js": {
"bytes": 28114,
"bytes": 27915,
"imports": [
{
"path": "dist/human.esm.js",
@ -35,7 +35,7 @@
"imports": [],
"exports": [],
"inputs": {},
"bytes": 2058908
"bytes": 2164760
},
"dist/demo-browser-index.js": {
"imports": [],
@ -43,19 +43,19 @@
"entryPoint": "demo/browser.js",
"inputs": {
"dist/human.esm.js": {
"bytesInOutput": 1343243
"bytesInOutput": 3294216
},
"demo/menu.js": {
"bytesInOutput": 10696
"bytesInOutput": 13710
},
"demo/gl-bench.js": {
"bytesInOutput": 6759
"bytesInOutput": 9352
},
"demo/browser.js": {
"bytesInOutput": 17687
"bytesInOutput": 24611
}
},
"bytes": 1385770
"bytes": 3342136
}
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

98617
dist/human.esm.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

96
dist/human.esm.json vendored
View File

@ -5,7 +5,7 @@
"imports": []
},
"dist/tfjs.esm.js": {
"bytes": 1065682,
"bytes": 2912420,
"imports": []
},
"src/tfjs/backend.ts": {
@ -388,7 +388,7 @@
"imports": []
},
"src/blazepose/blazepose.ts": {
"bytes": 3290,
"bytes": 3259,
"imports": [
{
"path": "src/log.ts",
@ -446,8 +446,12 @@
"imports": []
},
"src/draw.ts": {
"bytes": 18011,
"bytes": 19435,
"imports": [
{
"path": "config.js",
"kind": "import-statement"
},
{
"path": "src/blazeface/coords.ts",
"kind": "import-statement"
@ -541,7 +545,7 @@
"imports": [],
"exports": [],
"inputs": {},
"bytes": 1976930
"bytes": 2197512
},
"dist/human.esm.js": {
"imports": [],
@ -551,130 +555,130 @@
"entryPoint": "src/human.ts",
"inputs": {
"src/blazeface/facemesh.ts": {
"bytesInOutput": 1546
"bytesInOutput": 3037
},
"src/posenet/keypoints.ts": {
"bytesInOutput": 1690
"bytesInOutput": 2522
},
"src/log.ts": {
"bytesInOutput": 252
"bytesInOutput": 307
},
"dist/tfjs.esm.js": {
"bytesInOutput": 1056713
"bytesInOutput": 2834044
},
"src/tfjs/backend.ts": {
"bytesInOutput": 1053
"bytesInOutput": 1780
},
"src/blazeface/blazeface.ts": {
"bytesInOutput": 2194
"bytesInOutput": 4949
},
"src/blazeface/box.ts": {
"bytesInOutput": 834
"bytesInOutput": 1663
},
"src/blazeface/util.ts": {
"bytesInOutput": 858
"bytesInOutput": 2253
},
"src/blazeface/coords.ts": {
"bytesInOutput": 28983
"bytesInOutput": 40670
},
"src/blazeface/facepipeline.ts": {
"bytesInOutput": 5054
"bytesInOutput": 11648
},
"src/human.ts": {
"bytesInOutput": 11325
"bytesInOutput": 18065
},
"src/faceboxes/faceboxes.ts": {
"bytesInOutput": 1576
"bytesInOutput": 2761
},
"src/profile.ts": {
"bytesInOutput": 606
"bytesInOutput": 952
},
"src/age/age.ts": {
"bytesInOutput": 784
"bytesInOutput": 1493
},
"src/gender/gender.ts": {
"bytesInOutput": 1246
"bytesInOutput": 2600
},
"src/emotion/emotion.ts": {
"bytesInOutput": 1189
"bytesInOutput": 2304
},
"src/embedding/embedding.ts": {
"bytesInOutput": 804
"bytesInOutput": 1600
},
"src/posenet/posenet.ts": {
"bytesInOutput": 1016
"bytesInOutput": 2195
},
"src/posenet/modelBase.ts": {
"bytesInOutput": 662
"bytesInOutput": 1274
},
"src/posenet/heapSort.ts": {
"bytesInOutput": 1017
"bytesInOutput": 1442
},
"src/posenet/buildParts.ts": {
"bytesInOutput": 456
"bytesInOutput": 1506
},
"src/posenet/decodePose.ts": {
"bytesInOutput": 1283
"bytesInOutput": 4683
},
"src/posenet/vectors.ts": {
"bytesInOutput": 346
"bytesInOutput": 779
},
"src/posenet/decoders.ts": {
"bytesInOutput": 768
"bytesInOutput": 1851
},
"src/posenet/decodeMultiple.ts": {
"bytesInOutput": 529
"bytesInOutput": 1731
},
"src/posenet/util.ts": {
"bytesInOutput": 354
"bytesInOutput": 791
},
"src/handpose/handpose.ts": {
"bytesInOutput": 1281
"bytesInOutput": 2325
},
"src/handpose/box.ts": {
"bytesInOutput": 938
"bytesInOutput": 1893
},
"src/handpose/handdetector.ts": {
"bytesInOutput": 1668
"bytesInOutput": 3379
},
"src/handpose/util.ts": {
"bytesInOutput": 816
"bytesInOutput": 2198
},
"src/handpose/handpipeline.ts": {
"bytesInOutput": 2510
"bytesInOutput": 5897
},
"src/handpose/anchors.ts": {
"bytesInOutput": 126985
"bytesInOutput": 221202
},
"src/blazepose/blazepose.ts": {
"bytesInOutput": 1167
"bytesInOutput": 2051
},
"src/blazepose/annotations.ts": {
"bytesInOutput": 860
"bytesInOutput": 1087
},
"src/gesture/gesture.ts": {
"bytesInOutput": 2391
"bytesInOutput": 4071
},
"src/imagefx.js": {
"bytesInOutput": 10975
"bytesInOutput": 18706
},
"src/image.ts": {
"bytesInOutput": 2355
"bytesInOutput": 4511
},
"config.js": {
"bytesInOutput": 1439
"bytesInOutput": 2205
},
"src/sample.ts": {
"bytesInOutput": 55295
"bytesInOutput": 55311
},
"package.json": {
"bytesInOutput": 2596
"bytesInOutput": 3363
},
"src/draw.ts": {
"bytesInOutput": 8269
"bytesInOutput": 15586
}
},
"bytes": 1350737
"bytes": 3295444
}
}
}

96
dist/human.iife.json vendored
View File

@ -5,7 +5,7 @@
"imports": []
},
"dist/tfjs.esm.js": {
"bytes": 1065682,
"bytes": 2912420,
"imports": []
},
"src/tfjs/backend.ts": {
@ -388,7 +388,7 @@
"imports": []
},
"src/blazepose/blazepose.ts": {
"bytes": 3290,
"bytes": 3259,
"imports": [
{
"path": "src/log.ts",
@ -446,8 +446,12 @@
"imports": []
},
"src/draw.ts": {
"bytes": 18011,
"bytes": 19435,
"imports": [
{
"path": "config.js",
"kind": "import-statement"
},
{
"path": "src/blazeface/coords.ts",
"kind": "import-statement"
@ -541,7 +545,7 @@
"imports": [],
"exports": [],
"inputs": {},
"bytes": 1976941
"bytes": 2200849
},
"dist/human.ts": {
"imports": [],
@ -549,130 +553,130 @@
"entryPoint": "src/human.ts",
"inputs": {
"src/blazeface/facemesh.ts": {
"bytesInOutput": 1546
"bytesInOutput": 3169
},
"src/posenet/keypoints.ts": {
"bytesInOutput": 1690
"bytesInOutput": 2710
},
"src/human.ts": {
"bytesInOutput": 11361
"bytesInOutput": 19074
},
"src/log.ts": {
"bytesInOutput": 252
"bytesInOutput": 319
},
"dist/tfjs.esm.js": {
"bytesInOutput": 1056713
"bytesInOutput": 2975386
},
"src/tfjs/backend.ts": {
"bytesInOutput": 1053
"bytesInOutput": 1910
},
"src/blazeface/blazeface.ts": {
"bytesInOutput": 2194
"bytesInOutput": 5171
},
"src/blazeface/box.ts": {
"bytesInOutput": 834
"bytesInOutput": 1753
},
"src/blazeface/util.ts": {
"bytesInOutput": 858
"bytesInOutput": 2381
},
"src/blazeface/coords.ts": {
"bytesInOutput": 28983
"bytesInOutput": 47204
},
"src/blazeface/facepipeline.ts": {
"bytesInOutput": 5054
"bytesInOutput": 12116
},
"src/faceboxes/faceboxes.ts": {
"bytesInOutput": 1576
"bytesInOutput": 2897
},
"src/profile.ts": {
"bytesInOutput": 606
"bytesInOutput": 996
},
"src/age/age.ts": {
"bytesInOutput": 784
"bytesInOutput": 1597
},
"src/gender/gender.ts": {
"bytesInOutput": 1246
"bytesInOutput": 2758
},
"src/emotion/emotion.ts": {
"bytesInOutput": 1189
"bytesInOutput": 2444
},
"src/embedding/embedding.ts": {
"bytesInOutput": 804
"bytesInOutput": 1684
},
"src/posenet/posenet.ts": {
"bytesInOutput": 1016
"bytesInOutput": 2305
},
"src/posenet/modelBase.ts": {
"bytesInOutput": 662
"bytesInOutput": 1338
},
"src/posenet/heapSort.ts": {
"bytesInOutput": 1017
"bytesInOutput": 1564
},
"src/posenet/buildParts.ts": {
"bytesInOutput": 456
"bytesInOutput": 1578
},
"src/posenet/decodePose.ts": {
"bytesInOutput": 1283
"bytesInOutput": 4861
},
"src/posenet/vectors.ts": {
"bytesInOutput": 346
"bytesInOutput": 839
},
"src/posenet/decoders.ts": {
"bytesInOutput": 768
"bytesInOutput": 1945
},
"src/posenet/decodeMultiple.ts": {
"bytesInOutput": 529
"bytesInOutput": 1795
},
"src/posenet/util.ts": {
"bytesInOutput": 354
"bytesInOutput": 837
},
"src/handpose/handpose.ts": {
"bytesInOutput": 1281
"bytesInOutput": 2439
},
"src/handpose/box.ts": {
"bytesInOutput": 938
"bytesInOutput": 1991
},
"src/handpose/handdetector.ts": {
"bytesInOutput": 1668
"bytesInOutput": 3525
},
"src/handpose/util.ts": {
"bytesInOutput": 816
"bytesInOutput": 2320
},
"src/handpose/handpipeline.ts": {
"bytesInOutput": 2510
"bytesInOutput": 6155
},
"src/handpose/anchors.ts": {
"bytesInOutput": 126985
"bytesInOutput": 256534
},
"src/blazepose/blazepose.ts": {
"bytesInOutput": 1167
"bytesInOutput": 2161
},
"src/blazepose/annotations.ts": {
"bytesInOutput": 860
"bytesInOutput": 1235
},
"src/gesture/gesture.ts": {
"bytesInOutput": 2391
"bytesInOutput": 4241
},
"src/imagefx.js": {
"bytesInOutput": 10975
"bytesInOutput": 20118
},
"src/image.ts": {
"bytesInOutput": 2355
"bytesInOutput": 4717
},
"config.js": {
"bytesInOutput": 1439
"bytesInOutput": 2425
},
"src/sample.ts": {
"bytesInOutput": 55295
"bytesInOutput": 55315
},
"package.json": {
"bytesInOutput": 2596
"bytesInOutput": 3603
},
"src/draw.ts": {
"bytesInOutput": 8269
"bytesInOutput": 16338
}
},
"bytes": 1350779
"bytes": 3486694
}
}
}

25011
dist/human.node-gpu.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

25011
dist/human.node.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

96
dist/human.node.json vendored
View File

@ -5,7 +5,7 @@
"imports": []
},
"dist/tfjs.esm.js": {
"bytes": 737,
"bytes": 1335,
"imports": []
},
"src/tfjs/backend.ts": {
@ -388,7 +388,7 @@
"imports": []
},
"src/blazepose/blazepose.ts": {
"bytes": 3290,
"bytes": 3259,
"imports": [
{
"path": "src/log.ts",
@ -446,8 +446,12 @@
"imports": []
},
"src/draw.ts": {
"bytes": 18011,
"bytes": 19435,
"imports": [
{
"path": "config.js",
"kind": "import-statement"
},
{
"path": "src/blazeface/coords.ts",
"kind": "import-statement"
@ -541,7 +545,7 @@
"imports": [],
"exports": [],
"inputs": {},
"bytes": 743687
"bytes": 862736
},
"dist/human.node-gpu.js": {
"imports": [],
@ -549,130 +553,130 @@
"entryPoint": "src/human.ts",
"inputs": {
"dist/tfjs.esm.js": {
"bytesInOutput": 598
"bytesInOutput": 1283
},
"src/blazeface/facemesh.ts": {
"bytesInOutput": 1585
"bytesInOutput": 3097
},
"src/posenet/keypoints.ts": {
"bytesInOutput": 1677
"bytesInOutput": 2527
},
"src/human.ts": {
"bytesInOutput": 11333
"bytesInOutput": 18122
},
"src/log.ts": {
"bytesInOutput": 251
"bytesInOutput": 307
},
"src/tfjs/backend.ts": {
"bytesInOutput": 1145
"bytesInOutput": 1845
},
"src/blazeface/blazeface.ts": {
"bytesInOutput": 2338
"bytesInOutput": 5097
},
"src/blazeface/facepipeline.ts": {
"bytesInOutput": 5101
"bytesInOutput": 11710
},
"src/blazeface/box.ts": {
"bytesInOutput": 854
"bytesInOutput": 1713
},
"src/blazeface/util.ts": {
"bytesInOutput": 848
"bytesInOutput": 2247
},
"src/blazeface/coords.ts": {
"bytesInOutput": 28973
"bytesInOutput": 40670
},
"src/faceboxes/faceboxes.ts": {
"bytesInOutput": 1618
"bytesInOutput": 2814
},
"src/profile.ts": {
"bytesInOutput": 604
"bytesInOutput": 950
},
"src/age/age.ts": {
"bytesInOutput": 831
"bytesInOutput": 1550
},
"src/gender/gender.ts": {
"bytesInOutput": 1319
"bytesInOutput": 2688
},
"src/emotion/emotion.ts": {
"bytesInOutput": 1256
"bytesInOutput": 2385
},
"src/embedding/embedding.ts": {
"bytesInOutput": 848
"bytesInOutput": 1653
},
"src/posenet/posenet.ts": {
"bytesInOutput": 1039
"bytesInOutput": 2233
},
"src/posenet/modelBase.ts": {
"bytesInOutput": 672
"bytesInOutput": 1319
},
"src/posenet/heapSort.ts": {
"bytesInOutput": 1017
"bytesInOutput": 1440
},
"src/posenet/buildParts.ts": {
"bytesInOutput": 454
"bytesInOutput": 1506
},
"src/posenet/decodePose.ts": {
"bytesInOutput": 1271
"bytesInOutput": 4681
},
"src/posenet/vectors.ts": {
"bytesInOutput": 345
"bytesInOutput": 772
},
"src/posenet/decoders.ts": {
"bytesInOutput": 823
"bytesInOutput": 1937
},
"src/posenet/decodeMultiple.ts": {
"bytesInOutput": 525
"bytesInOutput": 1731
},
"src/posenet/util.ts": {
"bytesInOutput": 352
"bytesInOutput": 788
},
"src/handpose/handpose.ts": {
"bytesInOutput": 1322
"bytesInOutput": 2374
},
"src/handpose/handdetector.ts": {
"bytesInOutput": 1813
"bytesInOutput": 3551
},
"src/handpose/box.ts": {
"bytesInOutput": 958
"bytesInOutput": 1945
},
"src/handpose/handpipeline.ts": {
"bytesInOutput": 2531
"bytesInOutput": 5956
},
"src/handpose/util.ts": {
"bytesInOutput": 806
"bytesInOutput": 2198
},
"src/handpose/anchors.ts": {
"bytesInOutput": 126985
"bytesInOutput": 221202
},
"src/blazepose/blazepose.ts": {
"bytesInOutput": 1198
"bytesInOutput": 2118
},
"src/blazepose/annotations.ts": {
"bytesInOutput": 860
"bytesInOutput": 1087
},
"src/gesture/gesture.ts": {
"bytesInOutput": 2391
"bytesInOutput": 4071
},
"src/image.ts": {
"bytesInOutput": 2339
"bytesInOutput": 4539
},
"src/imagefx.js": {
"bytesInOutput": 10973
"bytesInOutput": 18690
},
"config.js": {
"bytesInOutput": 1439
"bytesInOutput": 2205
},
"src/sample.ts": {
"bytesInOutput": 55295
"bytesInOutput": 55311
},
"package.json": {
"bytesInOutput": 2593
"bytesInOutput": 3371
},
"src/draw.ts": {
"bytesInOutput": 8180
"bytesInOutput": 15579
}
},
"bytes": 288179
"bytes": 464146
}
}
}

98623
dist/human.ts vendored

File diff suppressed because one or more lines are too long

4
dist/human.ts.map vendored

File diff suppressed because one or more lines are too long

76267
dist/tfjs.esm.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

7196
dist/tfjs.esm.json vendored

File diff suppressed because it is too large Load Diff

View File

@ -23,13 +23,12 @@ export async function predict(image, config) {
const resize = tf.image.resizeBilinear(image, [model.width || config.body.inputSize, model.height || config.body.inputSize], false);
const normalize = tf.div(resize, [255.0]);
resize.dispose();
// let segmentation; // not used right now since we have keypoints and don't need to go through matrix using strides
// let poseflag; // irrelevant
let points;
if (!config.profile) { // run through profiler or just execute
const resT = await model.predict(normalize);
// segmentation = resT[0].dataSync();
// poseflag = resT[1].dataSync();
// const segmentationT = resT.find((t) => (t.size === 16384 || t.size === 0)).squeeze();
// const segmentation = segmentationT.arraySync(); // array 128 x 128
// tf.dispose(segmentationT);
points = resT.find((t) => (t.size === 195 || t.size === 155)).dataSync(); // order of output tensors may change between models, full has 195 and upper has 155 items
resT.forEach((t) => t.dispose());
} else {

View File

@ -1,3 +1,4 @@
import config from '../config';
import { TRI468 as triangulation } from './blazeface/coords';
export const options = {
@ -9,11 +10,11 @@ export const options = {
lineWidth: 6,
pointSize: 2,
roundRect: 8,
drawPoints: false,
drawLabels: true,
drawBoxes: true,
drawPoints: false,
drawPolygons: true,
fillPolygons: true,
fillPolygons: false,
useDepth: true,
bufferedOutput: false,
};
@ -45,6 +46,21 @@ function rect(ctx, x, y, width, height) {
}
}
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
function lines(ctx, points) {
ctx.beginPath();
const path = new Path2D();
path.moveTo(points[0][0], points[0][1]);
for (const pt of points) {
path.lineTo(pt[0], parseInt(pt[1]));
}
ctx.stroke(path);
if (options.fillPolygons) {
ctx.closePath();
ctx.fill(path);
}
}
// eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
function curve(ctx, points = []) {
if (points.length < 2) return;
@ -177,11 +193,7 @@ export async function face(inCanvas, result) {
ctx.font = options.font;
ctx.strokeStyle = options.color;
ctx.fillStyle = options.color;
ctx.lineWidth = options.lineWidth;
ctx.beginPath();
if (options.drawBoxes) {
rect(ctx, f.box[0], f.box[1], f.box[2], f.box[3]);
}
if (options.drawBoxes) rect(ctx, f.box[0], f.box[1], f.box[2], f.box[3]);
// silly hack since fillText does not suport new line
const labels:string[] = [];
labels.push(`face confidence: ${Math.trunc(100 * f.confidence)}%`);
@ -205,8 +217,6 @@ export async function face(inCanvas, result) {
ctx.fillStyle = options.labelColor;
ctx.fillText(labels[i], x + 4, y + 15);
}
ctx.fillStyle = options.color;
ctx.stroke();
ctx.lineWidth = 1;
if (f.mesh) {
if (options.drawPoints) {
@ -222,18 +232,10 @@ export async function face(inCanvas, result) {
triangulation[i * 3 + 1],
triangulation[i * 3 + 2],
].map((index) => f.mesh[index]);
const path = new Path2D();
path.moveTo(points[0][0], points[0][1]);
for (const pt of points) {
path.lineTo(pt[0], pt[1]);
}
path.closePath();
ctx.strokeStyle = options.useDepth ? `rgba(${127.5 + (2 * points[0][2])}, ${127.5 - (2 * points[0][2])}, 255, 0.3)` : options.color;
ctx.stroke(path);
if (options.fillPolygons) {
ctx.fillStyle = options.useDepth ? `rgba(${127.5 + (2 * points[0][2])}, ${127.5 - (2 * points[0][2])}, 255, 0.3)` : options.color;
ctx.fill(path);
}
ctx.lineWidth = 1;
lines(ctx, points);
}
// iris: array[center, left, top, right, bottom]
if (f.annotations && f.annotations.leftEyeIris) {
@ -276,23 +278,24 @@ export async function body(inCanvas, result) {
// result[i].keypoints = result[i].keypoints.filter((a) => a.score > 0.5);
if (!lastDrawnPose[i] && options.bufferedOutput) lastDrawnPose[i] = { ...result[i] };
ctx.strokeStyle = options.color;
ctx.font = options.font;
ctx.lineWidth = options.lineWidth;
if (options.drawPoints) {
for (let pt = 0; pt < result[i].keypoints.length; pt++) {
ctx.fillStyle = options.useDepth && result[i].keypoints[pt].position.z ? `rgba(${127.5 + (2 * result[i].keypoints[pt].position.z)}, ${127.5 - (2 * result[i].keypoints[pt].position.z)}, 255, 0.5)` : options.color;
if (options.drawLabels) {
ctx.fillText(`${result[i].keypoints[pt].part}`, result[i].keypoints[pt][0] + 4, result[i].keypoints[pt][1] + 4);
}
ctx.beginPath();
if (options.bufferedOutput) {
lastDrawnPose[i].keypoints[pt][0] = (lastDrawnPose[i].keypoints[pt][0] + result[i].keypoints[pt][0]) / 2;
lastDrawnPose[i].keypoints[pt][1] = (lastDrawnPose[i].keypoints[pt][1] + result[i].keypoints[pt][1]) / 2;
lastDrawnPose[i].keypoints[pt][0] = (lastDrawnPose[i].keypoints[pt][0] + result[i].keypoints[pt].position.x) / 2;
lastDrawnPose[i].keypoints[pt][1] = (lastDrawnPose[i].keypoints[pt][1] + result[i].keypoints[pt].position.y) / 2;
point(ctx, lastDrawnPose[i].keypoints[pt][0], lastDrawnPose[i].keypoints[pt][1]);
} else {
point(ctx, result[i].keypoints[pt][0], result[i].keypoints[pt][1]);
point(ctx, result[i].keypoints[pt].position.x, result[i].keypoints[pt].position.y);
}
ctx.fill();
}
}
if (options.drawLabels) {
ctx.font = options.font;
for (const pt of result[i].keypoints) {
ctx.fillStyle = options.useDepth && pt.position.z ? `rgba(${127.5 + (2 * pt.position.z)}, ${127.5 - (2 * pt.position.z)}, 255, 0.5)` : options.color;
ctx.fillText(`${pt.part}`, pt.position.x + 4, pt.position.y + 4);
}
}
if (options.drawPolygons) {
@ -301,64 +304,74 @@ export async function body(inCanvas, result) {
let part;
// torso
root = result[i].keypoints.find((a) => a.part === 'leftShoulder');
if (root) {
path.moveTo(root.position.x, root.position.y);
if (root && root.score > config.body.scoreThreshold) {
const points: any[] = [];
points.push([root.position.x, root.position.y, 'leftShoulder']);
part = result[i].keypoints.find((a) => a.part === 'rightShoulder');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
part = result[i].keypoints.find((a) => a.part === 'rightHip');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
part = result[i].keypoints.find((a) => a.part === 'leftHip');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
part = result[i].keypoints.find((a) => a.part === 'leftShoulder');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
lines(ctx, points);
}
// leg left
root = result[i].keypoints.find((a) => a.part === 'leftHip');
if (root) {
path.moveTo(root.position.x, root.position.y);
if (root && root.score > config.body.scoreThreshold) {
const points: any[] = [];
points.push([root.position.x, root.position.y]);
part = result[i].keypoints.find((a) => a.part === 'leftKnee');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
part = result[i].keypoints.find((a) => a.part === 'leftAnkle');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
part = result[i].keypoints.find((a) => a.part === 'leftHeel');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
part = result[i].keypoints.find((a) => a.part === 'leftFoot');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
lines(ctx, points);
}
// leg right
root = result[i].keypoints.find((a) => a.part === 'rightHip');
if (root) {
path.moveTo(root.position.x, root.position.y);
if (root && root.score > config.body.scoreThreshold) {
const points: any[] = [];
points.push([root.position.x, root.position.y]);
part = result[i].keypoints.find((a) => a.part === 'rightKnee');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
part = result[i].keypoints.find((a) => a.part === 'rightAnkle');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
part = result[i].keypoints.find((a) => a.part === 'rightHeel');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
part = result[i].keypoints.find((a) => a.part === 'rightFoot');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
lines(ctx, points);
}
// arm left
root = result[i].keypoints.find((a) => a.part === 'leftShoulder');
if (root) {
path.moveTo(root.position.x, root.position.y);
if (root && root.score > config.body.scoreThreshold) {
const points: any[] = [];
points.push([root.position.x, root.position.y]);
part = result[i].keypoints.find((a) => a.part === 'leftElbow');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
part = result[i].keypoints.find((a) => a.part === 'leftWrist');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
part = result[i].keypoints.find((a) => a.part === 'leftPalm');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
lines(ctx, points);
}
// arm right
root = result[i].keypoints.find((a) => a.part === 'rightShoulder');
if (root) {
path.moveTo(root.position.x, root.position.y);
if (root && root.score > config.body.scoreThreshold) {
const points: any[] = [];
points.push([root.position.x, root.position.y]);
part = result[i].keypoints.find((a) => a.part === 'rightElbow');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
part = result[i].keypoints.find((a) => a.part === 'rightWrist');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
part = result[i].keypoints.find((a) => a.part === 'rightPalm');
if (part) path.lineTo(part.position.x, part.position.y);
if (part && part.score > config.body.scoreThreshold) points.push([part.position.x, part.position.y]);
lines(ctx, points);
}
// draw all
ctx.stroke(path);
@ -372,12 +385,9 @@ export async function hand(inCanvas, result) {
const ctx = inCanvas.getContext('2d');
if (!ctx) return;
ctx.lineJoin = 'round';
for (const h of result) {
ctx.font = options.font;
ctx.lineWidth = options.lineWidth;
for (const h of result) {
if (options.drawBoxes) {
ctx.lineWidth = options.lineWidth;
ctx.beginPath();
ctx.strokeStyle = options.color;
ctx.fillStyle = options.color;
rect(ctx, h.box[0], h.box[1], h.box[2], h.box[3]);

2
types/draw.d.ts vendored
View File

@ -7,9 +7,9 @@ export declare const options: {
lineWidth: number;
pointSize: number;
roundRect: number;
drawPoints: boolean;
drawLabels: boolean;
drawBoxes: boolean;
drawPoints: boolean;
drawPolygons: boolean;
fillPolygons: boolean;
useDepth: boolean;

2
wiki

@ -1 +1 @@
Subproject commit 9173ba06bb5f5aa361ea391ea88b6aaf0eb34006
Subproject commit 77fcd4eb7a6b6282dba900e0a70554a788514639