Last active
June 18, 2020 12:09
-
-
Save duhaime/d0c35ba1d6f446ddce0bf7c943109c7a to your computer and use it in GitHub Desktop.
Posenet in the browser
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<meta charset='UTF-8'> | |
<title>PoseNet</title> | |
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js'></script> | |
<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js'></script> | |
<script src='https://unpkg.com/ml5@0.3.1/dist/ml5.min.js' type='text/javascript'></script> | |
</head> | |
<body> | |
<p id='status'>Loading model...</p> | |
<script src='pose.js'></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var video; | |
var poseNet; | |
var poses = []; | |
function setup() { | |
createCanvas(640, 480); | |
video = createCapture(VIDEO); | |
video.size(width, height); | |
// Create a new poseNet method with a single detection | |
poseNet = ml5.poseNet(video, modelReady); | |
// This sets up an event that fills the global variable "poses" | |
// with an array every time new poses are detected | |
poseNet.on('pose', function(results) { | |
window.results = results; | |
poses = results; | |
post('/api/pose', results); | |
}); | |
// Hide the video element, and just show the canvas | |
video.hide(); | |
} | |
function post(url, data, callback) { | |
var xhr = new XMLHttpRequest() | |
xhr.open('POST', url) | |
xhr.setRequestHeader('Content-type', 'application/json') | |
xhr.send(JSON.stringify(data)) | |
xhr.onload = function() { | |
if (callback) callback(JSON.parse(xhr.responseText)) | |
} | |
} | |
function modelReady() { | |
select('#status').html('Model Loaded'); | |
} | |
function draw() { | |
image(video, 0, 0, width, height); | |
// contains an array of the discovered poses, labelled by part | |
//console.log(poses); | |
// We can call both functions to draw all keypoints and the skeletons | |
drawKeypoints(); | |
drawSkeleton(); | |
} | |
// A function to draw ellipses over the detected keypoints | |
function drawKeypoints() { | |
// Loop through all the poses detected | |
for (var i = 0; i < poses.length; i++) { | |
// For each pose detected, loop through all the keypoints | |
var pose = poses[i].pose; | |
for (var j = 0; j < pose.keypoints.length; j++) { | |
// A keypoint is an object describing a body part (like rightArm or leftShoulder) | |
var keypoint = pose.keypoints[j]; | |
// Only draw an ellipse is the pose probability is bigger than 0.2 | |
if (keypoint.score > 0.2) { | |
fill(255, 0, 0); | |
noStroke(); | |
ellipse(keypoint.position.x, keypoint.position.y, 10, 10); | |
} | |
} | |
} | |
} | |
// A function to draw the skeletons | |
function drawSkeleton() { | |
// Loop through all the skeletons detected | |
for (var i = 0; i < poses.length; i++) { | |
var skeleton = poses[i].skeleton; | |
// For every skeleton, loop through all body connections | |
for (var j = 0; j < skeleton.length; j++) { | |
var partA = skeleton[j][0]; | |
var partB = skeleton[j][1]; | |
stroke(255, 0, 0); | |
line(partA.position.x, partA.position.y, partB.position.x, partB.position.y); | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
''' | |
Usage: | |
open 'http://localhost:5050/index.html' && python server.py | |
''' | |
import json, random, os | |
from flask import Flask, jsonify, request, send_from_directory | |
app = Flask(__name__, static_folder='.') | |
@app.route('/api/pose', methods=['GET', 'POST']) | |
def get_pose(): | |
print(request.json) | |
return jsonify({'status': 'ok'}) | |
@app.route('/', defaults={'path': ''}) | |
@app.route('/<path:path>') | |
def index(path): | |
print(path) | |
return send_from_directory(app.static_folder, path) | |
if __name__ == '__main__': | |
app.run(host='0.0.0.0', port=5050, debug=1) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment