JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<html>
<head>
  <title>MorphCast AI HTML5 SDK - Test: New license infrastructure - Dev env</title>
  <meta name="mphtools-feature" content="compatibilityUI, cameraPrivacyPopup, compatibilityAutoCheck">
</head>
<body>
  <div><b>Test: New license infrastructure. Results</b></div>
  <div id="age">Age: -</div>
  <div id="gender">Gender: -</div>
  <div id="emotion">Emotion: -</div>
  <script src="https://sdk.morphcast.com/mphtools/v1.0/mphtools.js"></script>
<script src="https://ai-sdk.morphcast.com/dev/ai-sdk.js"></script>
<script>
CY.loader()
   .licenseKey("24779ec6a0943eab41753861bd00c51fd15c8f7670a8")
   .addModule(CY.modules().FACE_AGE.name)
   .addModule(CY.modules().FACE_GENDER.name)
   .addModule(CY.modules().FACE_EMOTION.name)
   .load()
   .then(({ start, stop }) => start());

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

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;
});

</script>
</body>
</html>