JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<script src="https://s3.eu-central-1.amazonaws.com/demo.morphcast.com/face-api/face-api.js"></script>
<script src="https://ai-sdk.morphcast.com/v1.12/ai-sdk.js"></script>

JavaScript

const url1 = 'https://justadudewhohacks.github.io/face-api.js/images/sheldon/sheldon1.png';
const url2 = 'https://justadudewhohacks.github.io/face-api.js/images/sheldon/sheldon2.png';
let img1, img2;

async function load() {
  await faceapi.loadFaceRecognitionModel('https://s3.eu-central-1.amazonaws.com/demo.morphcast.com/face-api/');
  img1 = await faceapi.fetchImage(url1);
  img2 = await faceapi.fetchImage(url2);
}

async function process(img1, img2) {
  const desc1 = await faceapi.computeFaceDescriptor(img1);
  const desc2 = await faceapi.computeFaceDescriptor(img2);
  //faceapi.detectSingleFace(input, faceapiOptions).withFaceLandmarks(useTinyModel));
  
  const distance = faceapi.utils.round(
  	faceapi.euclideanDistance(desc1, desc2)
	);
  //console.log(distance);
  return distance;
}


function imagedata_to_image(imagedata) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = imagedata.width;
    canvas.height = imagedata.height;
    ctx.putImageData(imagedata, 0, 0);

    var image = new Image();
    image.src = canvas.toDataURL();
    return image;
}
    
CY.loader()
  .addModule(CY.modules().FACE_DETECTOR.name)
  .addModule(CY.modules().FACE_GENDER.name)
  .load()
  .then(({ start, stop }) => {
  	start();
    setTimeout(stop, 5000);
  })
  .then(load)
  .then(()=>process(img1, img2))
  .then((distance)=>console.log(distance));

window.addEventListener(CY.modules().FACE_DETECTOR.eventName, (evt) => {
	console.log('Face detector result', evt.detail);
	if (evt.detail.faces.length > 0) {
  	const face = imagedata_to_image(evt.detail.faces[0]);
  	process(img1, face).then((distance)=>console.log('from webcam: ' + distance));
  }
});

window.addEventListener(CY.modules().FACE_GENDER.eventName, (evt) => {
  console.log('FACE_GENDER result', console.log(evt.detail.output.gender));
});