JSFiddle - React, Tailwind, and code Playground

SDK example with Ale license

by morphcast

HTML

<script src="https://ai-sdk.morphcast.com/v1.15/ai-sdk.js"></script>
<head>
  <title>MorphCast AI HTML5 SDK - Base example</title>
</head>

<body>
  <div><b>Results</b></div>
  <div id="faces">Faces: -</div>
  <div id="age">Age: -</div>
  <div id="gender">Gender: -</div>
  <div id="emotion">Emotion: -</div>
  <div id="start_over">
    <span>CLICK TO START</span>
  </div>
</body>

CSS

#start_over {
  position: absolute;
  background-color: #7F8C8D;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  cursor: pointer;
}

#start_over span {
  position: absolute;
  font-size: 20px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  display: block;
  height: 20px;
  margin: auto;
  text-align: center;
}

JavaScript

// Complete code documentation of MorphCast AI SDK, here:
// https://ai-sdk.morphcast.com/latest/index.html

const initSDK = new Promise((res) => {
  res(CY.loader()
  	.licenseKey("9087cfd2037a28a79769fdcaa4962252379cd2e2fd0b")
    .powerSave(3)
    .maxInputFrameSize(320)
    .addModule(CY.modules().FACE_DETECTOR.name, {multiFace: true, maxInputFrameSize: 320})
    //.addModule(CY.modules().FACE_BASE.name/*, {backendOrder: "webgl"}*/)
    //.addModule(CY.modules().FACE_AGE.name/*, {backendOrder: "webassembly"}*/)
    //.addModule(CY.modules().FACE_GENDER.name/*, {backendOrder: "webassembly"}*/)
    //.addModule(CY.modules().FACE_EMOTION.name/*, {backendOrder: "webassembly"}*/)
    //.addModule(CY.modules().DATA_AGGREGATOR.name, {})
    .load());
});

const startButton = document.querySelector("#start_over");

startButton.onclick = () => {
  startButton.style.display = "none";
  initSDK.then(({
    start
  }) => start());
};

const faces_div = document.querySelector("#faces");
const age_div = document.querySelector("#age");
const gen_div = document.querySelector("#gender");
const emo_div = document.querySelector("#emotion");

window.addEventListener(CY.modules().FACE_DETECTOR.eventName, (evt) => {
  faces_div.innerHTML = 'Faces: ' + evt.detail.faces.length;
});

window.addEventListener(CY.modules().FACE_AGE.eventName, (evt) => {
  age_div.innerHTML = 'Age: ' + evt.detail.output.numericAge;
});

window.addEventListener(CY.modules().FACE_GENDER.eventName, (evt) => {
  gen_div.innerHTML = 'Gender: ' + evt.detail.output.mostConfident;
});

window.addEventListener(CY.modules().FACE_EMOTION.eventName, (evt) => {
  emo_div.innerHTML = 'Emotion: ' + evt.detail.output.dominantEmotion;
});