* 👋 Hello! This is an ml5.js example made and shared with ❤️.

 * Learn more about the ml5.js project: https://ml5js.org/

 * ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md

 *

 * This example demonstrates loading a pre-trained model with ml5.neuralNetwork.

 */

​

let classifier;

let handPose;

let video;

let hands = [];

let classification = "";

let isModelLoaded = false;

​

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(640, 480);

  video.hide();

​

  // For this example to work across all browsers

  // "webgl" or "cpu" needs to be set as the backend

  ml5.setBackend("webgl");

​

  // Set up the neural network

  let classifierOptions = {

    task: "classification",

  };

  classifier = ml5.neuralNetwork(classifierOptions);

​

  const modelDetails = {

    model: "model/model.json",

    metadata: "model/model_meta.json",

    weights: "model/model.weights.bin",

  };

​

  classifier.load(modelDetails, modelLoaded);

​

  // Start the handPose detection

  handPose.detectStart(video, gotHands);

}

​

function draw() {

  //Display the webcam video

  image(video, 0, 0, width, height);

​

  // Draw the handPose keypoints

  if (hands[0]) {

    let hand = hands[0];

    for (let i = 0; i < hand.keypoints.length; i++) {

      let keypoint = hand.keypoints[i];

      fill(0, 255, 0);

      noStroke();

      circle(keypoint.x, keypoint.y, 10);

    }

  }

​

  // If the model is loaded, make a classification and display the result

  if (isModelLoaded && hands[0]) {

    let inputData = flattenHandData();

    classifier.classify(inputData, gotClassification);

    textSize(64);

    fill(0, 255, 0);

    text(classification, 20, 60);

  }

}

​

// convert the handPose data to a 1D array

function flattenHandData() {

  let hand = hands[0];

  let handData = [];

  for (let i = 0; i < hand.keypoints.length; i++) {

    let keypoint = hand.keypoints[i];

    handData.push(keypoint.x);

    handData.push(keypoint.y);

  }

  return handData;

}

​

// Callback function for when handPose outputs data

function gotHands(results) {

  hands = results;

}

​

// Callback function for when the classifier makes a classification

function gotClassification(results) {

  classification = results[0].label;

}

​

// Callback function for when the pre-trained model is loaded

function modelLoaded() {

  isModelLoaded = true;

}

​