The avatar for @randomfractals
Taras Novak
I map 🗺️ & graph 📈 data 🈸
Published
TensorFlow
Edited
May 31, 2021
3 forks
Importers
3 stars
TensorFlow
TensorFlow MoveNet Webcam
TensorFlow MoveNet Intro
TensorFlow ToxicityFilter WakeMeUpTensorFlow ToxicityFilter
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function markPoses(input, poses, showLabels, showFacePoints, pointColor, textColor) {
// TODO: scale to max 640px, clamp, and create square image for posenet model to process
// see: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/putImageData
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 = 2;
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}`;
}
Insert cell
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));
}
}
Insert cell
facePoints = ['nose', 'left_eye', 'right_eye', 'left_ear', 'right_ear']
Insert cell
function drawPoint(context, point, showLabels, showFacePoints) {
if (point.score >= scoreThreshold &&
(showFacePoints || !facePoints.includes(point.name))) {
context.beginPath();
context.arc(point.x, point.y, 2, 0, 2 * Math.PI);
context.stroke();
context.closePath();
if (showLabels) {
context.fillText(point.name, point.x, point.y);
}
}
}
Insert cell
function drawLine(context, pointA, pointB) {
if (pointA && pointB) {
context.beginPath();
context.moveTo(pointA.x, pointA.y);
context.lineTo(pointB.x, pointB.y);
context.stroke();
context.closePath();
}
}
Insert cell
Insert cell
Insert cell
viewof player = youtubePlayer('GQ2juiyXk-s')
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
tf = require('@tensorflow/tfjs-core@3')
Insert cell
poseDetection = requireTF("@tensorflow-models/pose-detection@0.0.3/dist/pose-detection.js")
Insert cell
requireTF = require.alias({
'@tensorflow/tfjs-converter': '@tensorflow/tfjs@3',
'@tensorflow/tfjs-core': '@tensorflow/tfjs@3',
'@mediapipe/pose': false,
fs: false,
path: false,
worker_threads: false,
perf_hooks: false,
os: false
});
Insert cell

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.
Learn more