const URL2 = 'https://teachablemachine.withgoogle.com/models/0RfdfBN5r/'

const TREEMODEL = 'https://teachablemachine.withgoogle.com/models/FinX7c8bu/'

const github = 'https://raw.githubusercontent.com/davidtiemstra/yogapose/main/'

​

const modelURL = github;

// the json file (model topology) has a reference to the bin file (model weights)

const checkpointURL = modelURL + "model.json";

// the metatadata json file contains the text labels of your model and additional information

const metadataURL = modelURL + "metadata.json";

​

const angle = 1.57079632679;

const size = 500;

const flip = true; // whether to flip the webcam

let webcam;

let model;

let totalClasses;

let myCanvas;

let ctx;

let MediaTrackConstraints = {

  frameRate: 15

};

​

let desiredpose = 'Warrior pose';

let timer = 45;

let nicetimer = 10;

let nice = false;

​

​

let extraLayer;

let treeimg;

let warriorimg;

let goddessimg;

let overlayimage;

​

​

​

// A function that loads the model from the checkpoint

async function load() {

  model = await tmPose.load(checkpointURL, metadataURL);

  totalClasses = model.getTotalClasses();

  console.log("Number of classes, ", totalClasses);

}

​

async function loadWebcam() {

  webcam = new tmPose.Webcam(size, size, flip); // can change width and height

  await webcam.setup(MediaTrackConstraints); 

  await webcam.play();

  window.requestAnimationFrame(loopWebcam);

}

​

async function setup() {

  myCanvas = createCanvas(size, size);

  ctx = myCanvas.elt.getContext("2d");

  treeimg= loadImage('yoga1.png');

  warriorimg=loadImage('yoga2.png');

  goddessimg=loadImage('yoga3.png');

  overlayimage = warriorimg;

  // Call the load function, wait until it finishes loading

  await load();

  await loadWebcam();

}

​

​

async function loopWebcam(timestamp) {

  webcam.update(); // update the webcam frame

  await predict();

  window.requestAnimationFrame(loopWebcam);

}

​

async function predict() {

  // Prediction #1: run input through posenet

  // predict can take in an image, video or canvas html element

  const flipHorizontal = false;

  const { pose, posenetOutput } = await model.estimatePose(

    webcam.canvas,

    flipHorizontal

  );

  // Prediction 2: run input through teachable machine assification model

  const prediction = await model.predict(

    posenetOutput,

    flipHorizontal,

    totalClasses

  );

​

  // console.log('prediction: ', prediction);

  // Sort prediction array by probability

  // So the first classname will have the highest probability

  const sortedPrediction = prediction.sort((a, b) => - a.probability + b.probability);

​

  // Show the result

  const res = select('#res'); // select <span id="res">

  res.html(sortedPrediction[0].className);

​

  // Show the probability

  const prob = select('#prob'); // select <span id="prob">

  prob.html(sortedPrediction[0].probability.toFixed(2));

​

  // draw the keypoints and skeleton

  if (pose) {

    drawPose(pose);

    tint(255, 127); // Display at half opacity

    image(overlayimage,0,0);

    // if (sortedPrediction[0].className=="Nice tree pose!"){

    //   tint(255, 127); // Display at half opacity

    //   image(goddessimg,0,0);

    // }

  }

  // POSE CHECKER

  const despos = select('#despos'); // select <span id="res">

  despos.html(desiredpose);

  textSize(32);

  if (desiredpose == sortedPrediction[0].className){

    if (timer>0){

      timer = timer-1;

      text(timer, 10, 30);

    }

    else{

      timer = 45;

      nice = true;

      if (desiredpose == 'Warrior pose'){

            desiredpose = 'Nice tree pose!';

            overlayimage = treeimg;

          }

      else if (desiredpose == 'Nice tree pose!'){

            desiredpose ='Goddess';

            overlayimage = goddessimg;

          }

      else if (desiredpose == 'Goddess'){

            desiredpose ='Warrior pose';

            overlayimage = warriorimg;

          }

    }

  }

  else{

    timer = 45;

  }

  if(nice){   

    if (nicetimer>0){

      nicetimer = nicetimer-1;

      text('NICE!', 100, 30);

    }

    else{

      nicetimer = 10;

      nice = false;

    }

  }

}

​

​

function drawPose(pose) {

  if (webcam.canvas) {

    ctx.drawImage(webcam.canvas, 0, 0);

    // draw the keypoints and skeleton

    if (pose) {

      const minPartConfidence = 0.5;

      tmPose.drawKeypoints(pose.keypoints, minPartConfidence, ctx);

      tmPose.drawSkeleton(pose.keypoints, minPartConfidence, ctx);

    }

  }

}

​