Models Covered:

demo code for all models mentioned in lecture: week4 face-hand

Face Api

1. Always start with video

let video;
let myFaceAPI;
const detectionOptions = {
  withLandmarks: true,
  withDescriptors: false,
}

function setup() {
  video = createCapture(VIDEO)
  video.size(640,480)
  video.hide()
  createCanvas(640, 480);
  
  myFaceAPI = ml5.faceApi(video, detectionOptions, modelLoaded)
}

function draw() {
  image(video, 0, 0, width, height)
}

1. Then, load model. Can use: ml5 Reference page for FaceApi Model

let video;
let myFaceAPI;
const detectionOptions = {
  withLandmarks: true,
  withDescriptors: false,
}

function setup() {
  video = createCapture(VIDEO)
  video.size(640,480)
  video.hide()
  createCanvas(640, 480);
  
  myFaceAPI = ml5.faceApi(video, detectionOptions, modelLoaded)
}

//will take some time for model to load, so once it's ready, console.log
function modelLoaded(){
  console.log('modelLoaded')
  //now that its ready, ask model to do something for us
    //detect or singleDetect
  myFaceAPI.detect(gotResults);
		// don't need video here because passing in video earlier
}

function draw() {
  image(video, 0, 0, width, height)
}

1. Process results

let video;
let myFaceAPI;
let myResults=[];
const detectionOptions = {
  withLandmarks: true,
  withDescriptors: false,
}

function setup() {
  video = createCapture(VIDEO)
  video.size(640,480)
  video.hide()
  createCanvas(640, 480);
  
  myFaceAPI = ml5.faceApi(video, detectionOptions, modelLoaded)
}

function modelLoaded(){
  console.log('modelLoaded')
  myFaceAPI.detect(gotResults);
}

function modelLoaded(){
  console.log('modelLoaded')
  myFaceAPI.detect(gotResults);
}

function gotResults(err, results){
  if (err) {
    console.error(err);
  }
  if (results) {
    myResults=results
    console.log('results', results)
  }
}

function draw() {
  image(video, 0, 0, width, height)
}

1. do something with results

like drawing a box around detected face’s boundary box

function gotResults(err, results){
  if (err) {
    console.error(err);
  }
  if (results) {
    myResults=results
    console.log('results', results)
    
  //can move draw things under results to save computing power
  image(video, 0, 0, width, height)
  
  //if results exist, then do something
	noFill()
  stroke(255, 100, 0)
  strokeWeight(4)
  if(myResults[0]){
    const box = myResults[0].alignedRect._box
    rect(box._x, box._y, box._width, box._height)
  }

  }
}