From 0062c0459be814c21b03338e7b23418d004417d3 Mon Sep 17 00:00:00 2001 From: QuinnHe Date: Thu, 1 Feb 2024 06:05:19 -0600 Subject: [PATCH] Quinn.add topic tab (#37) * add glossary ML topic tabs * update handpose model page --- docs/reference/handpose.md | 103 +++++++++++++++--- .../iframes/handpose-keypoints/index.html | 22 ++++ .../iframes/handpose-keypoints/main.html | 24 ++++ .../iframes/handpose-keypoints/script.js | 45 ++++++++ 4 files changed, 177 insertions(+), 17 deletions(-) create mode 100644 docs/reference/iframes/handpose-keypoints/index.html create mode 100644 docs/reference/iframes/handpose-keypoints/main.html create mode 100644 docs/reference/iframes/handpose-keypoints/script.js diff --git a/docs/reference/handpose.md b/docs/reference/handpose.md index ef57b99..a90351c 100644 --- a/docs/reference/handpose.md +++ b/docs/reference/handpose.md @@ -12,25 +12,98 @@ Handpose is a machine-learning model that allows for palm detection and hand-ske The ml5.js Handpose model is ported from the [TensorFlow.js Handpose implementation](https://github.com/tensorflow/tfjs-models/tree/master/handpose). -## Quickstart +## Getting Started +Ready to give it a try? Feel free to follow our instructions to build your first Handpose project! + +### Demo +[p5 Web Editor](iframes/pose-estimation ':include :type=iframe width=100% height=550px') + +### Quickstart +First of all, copy and paste the following code into your **index.html** file: + +```html + + + + + Hand Pose Keypoints Detection using Handpose and p5.js + + + + + + +

Hand Pose Keypoints Detection using Handpose and p5.js

+ + + + +``` + +Then, add the code below to your **script.js** file: ```js -let predictions = []; -const video = document.getElementById('video'); +let handpose; +let video; +let hands = []; + +function preload() { + // Load the handpose model + handpose = ml5.handpose(); +} + +function setup() { + createCanvas(640, 480); + + // Create a video element and hide it + video = createCapture(VIDEO); + video.size(width, height); + video.hide(); -// Create a new handpose method -const handpose = ml5.handpose(video, modelLoaded); + // Start detecting hands from the webcam video + // Call function "gotHands" upon receiving output from the model + handpose.detectStart(video, gotHands); +} -// When the model is loaded -function modelLoaded() { - console.log('Model Loaded!'); +function draw() { + // Draw the webcam video + image(video, 0, 0, width, height); + + // Draw all the tracked hand points + for (let i = 0; i < hands.length; i++) { + let hand = hands[i]; + for (let j = 0; j < hand.keypoints.length; j++) { + let keypoint = hand.keypoints[j]; + fill(0, 255, 0); + noStroke(); + circle(keypoint.x, keypoint.y, 10); + } + } } -// Listen to new 'hand' events -handpose.on('hand', results => { - predictions = results; -}); +// Callback function for when handpose outputs data +function gotHands(results) { + // Save the output to the hands variable + hands = results; +} ``` + +Alternatively, you can open [this example code](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-keypoints) and try it yourself on p5.js web editor! + +### Additional Examples +* [Handpose-parts](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-parts) +* [Handpose-single-image](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-single-image) +* [Handpose-start-stop](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Handpose-start-stop) + +TODO (link p5 web editor examples once uploaded) + +### Tutorials + +**PoseNet on The Coding Train** + + +TODO (link new youtube video once uploaded) + ## Methods #### ml5.handpose() @@ -118,8 +191,4 @@ handpose.detect(media, ?callback); - **callback(output, error)**: OPTIONAL. A callback function to handle the output of the estimation, see output example above. **Returns:** -A promise that resolves to the estimation output. - -### Examples - -TODO (link p5 web editor examples once uploaded) \ No newline at end of file +A promise that resolves to the estimation output. \ No newline at end of file diff --git a/docs/reference/iframes/handpose-keypoints/index.html b/docs/reference/iframes/handpose-keypoints/index.html new file mode 100644 index 0000000..caee91f --- /dev/null +++ b/docs/reference/iframes/handpose-keypoints/index.html @@ -0,0 +1,22 @@ + + + + + + + + p5.js iframe + + + + +
+

Hand Pose Keypoints Detection Model

+

(Add description.) Ensure to enable the webcam.

+ +
+ + + \ No newline at end of file diff --git a/docs/reference/iframes/handpose-keypoints/main.html b/docs/reference/iframes/handpose-keypoints/main.html new file mode 100644 index 0000000..fc9afb1 --- /dev/null +++ b/docs/reference/iframes/handpose-keypoints/main.html @@ -0,0 +1,24 @@ + + + + + + + + + + + + + +
+
+
+ +
+ + + + \ No newline at end of file diff --git a/docs/reference/iframes/handpose-keypoints/script.js b/docs/reference/iframes/handpose-keypoints/script.js new file mode 100644 index 0000000..3335da3 --- /dev/null +++ b/docs/reference/iframes/handpose-keypoints/script.js @@ -0,0 +1,45 @@ +// Copyright (c) 2023 ml5 +// +// This software is released under the MIT License. +// https://opensource.org/licenses/MIT + +let handpose; +let video; +let hands = []; + +function preload() { + // Load the handpose model + handpose = ml5.handpose(); +} + +function setup() { + createCanvas(640, 480); + // Create the webcam video and hide it + video = createCapture(VIDEO); + video.size(width, height); + video.hide(); + // start detecting hands from the webcam video + handpose.detectStart(video, gotHands); +} + +function draw() { + // Draw the webcam video + image(video, 0, 0, width, height); + + // Draw all the tracked hand points + for (let i = 0; i < hands.length; i++) { + let hand = hands[i]; + for (let j = 0; j < hand.keypoints.length; j++) { + let keypoint = hand.keypoints[j]; + fill(0, 255, 0); + noStroke(); + circle(keypoint.x, keypoint.y, 10); + } + } +} + +// Callback function for when handpose outputs data +function gotHands(results) { + // save the output to the hands variable + hands = results; +} \ No newline at end of file