👋 linkedin.com/in/marisatania/
Published
Edited
Aug 12, 2021
Importers
input = {
let ctx = DOM.canvas(image.width, image.height).getContext("2d");
ctx.drawImage(image, 0, 0);
return {
data: ctx.getImageData(0, 0, image.width, image.height),
width: image.width,
height: image.height
};
}
viewof poses = Inputs.table(imagePoses, {
columns: ['score', 'keypoints'],
format: {
score: sparkbar(d3.max(imagePoses, d => d.score)),
keypoints: points => points.length,
},
required: true
})
md`### Pose Keypoints`
viewof keypoints = Inputs.table(poses[0].keypoints, {
columns: ['name', 'score', 'x', 'y'],
format: {
score: sparkbar(d3.max(imagePoses, d => d.score))
}
})
function sparkbar(max) {
return x => htl.html`<div style="
background: steelblue;
width: ${100 * x / max}%;
float: right;
padding-right: 3px;
box-sizing: border-box;
color: white;">${x.toLocaleString("en")}`
}
imagePoses = {
let poses = [];
switch (model) {
case "MoveNet":
return await detector.estimatePoses(input.data);
break;
case "PoseNet":
return await detector.estimatePoses(input.data, {
maxPoses: 5,
flipHorizontal: false,
scoreThreshold: 0.5,
nmsRadius: 20
});
break;
default:
return poses;
}
}
detector = await poseDetection.createDetector(model)
function markPoses(
input,
poses,
showLabels,
showFacePoints,
pointColor,
textColor
) {
const maxSize = Math.max(input.width, input.height);
const context = DOM.context2d(input.width, input.height, 1); //maxSize, maxSize, 1);
context.putImageData(input.data, 0, 0);
context.font = "16px _sans";
context.textBaseline = "top";
context.fillStyle = textColor;
context.strokeStyle = pointColor;
context.lineWidth = lineWidth;
if (poses) {
poses.forEach((pose) =>
drawPose(context, pose, showLabels, showFacePoints)
);
}
context.canvas.style.maxWidth = input.width; //'640px';
// context.canvas.style.maxHeight = `${Math.min(640, input.height)}px`;
return html`${context.canvas}`;
}
function drawPose(context, pose, showLabels, showFacePoints) {
if (pose.keypoints) {
// key points by name
const points = new Map();
pose.keypoints.map(point => points.set(point.name, point));
// draw pose lines: https://github.com/tensorflow/tfjs-models/tree/master/pose-detection#keypoint-diagram
drawLine(context, points.get('left_shoulder'), points.get('right_shoulder'));
drawLine(context, points.get('left_hip'), points.get('right_hip'));
// left arm
drawLine(context, points.get('left_shoulder'), points.get('left_elbow'));
drawLine(context, points.get('left_elbow'), points.get('left_wrist'));
// left side
drawLine(context, points.get('left_shoulder'), points.get('left_hip'));
// left leg
drawLine(context, points.get('left_hip'), points.get('left_knee'));
drawLine(context, points.get('left_knee'), points.get('left_ankle'));
// right arm
drawLine(context, points.get('right_shoulder'), points.get('right_elbow'));
drawLine(context, points.get('right_elbow'), points.get('right_wrist'));
// right side
drawLine(context, points.get('right_shoulder'), points.get('right_hip'));
// right leg
drawLine(context, points.get('right_hip'), points.get('right_knee'));
drawLine(context, points.get('right_knee'), points.get('right_ankle'));
// connect face points
if (showFacePoints) {
drawLine(context, points.get('right_ear'), points.get('right_eye'));
drawLine(context, points.get('right_eye'), points.get('nose'));
drawLine(context, points.get('nose'), points.get('left_eye'));
drawLine(context, points.get('left_eye'), points.get('left_ear'));
}
// draw points and text labels
pose.keypoints.forEach(point => drawPoint(context, point, showLabels, showFacePoints));
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
