JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AI SDK test</title>
  <meta name="mphtools-feature" content="compatibilityUI, cameraPrivacyPopup, compatibilityAutoCheck">
</head>
<body>
<canvas id="canvas"></canvas>
<div>
  <button id="toggle">Pause</button>
</div>
<script src="https://sdk.morphcast.com/mphtools/dev/mphtools.js"></script>
<script src="https://ai-sdk.morphcast.com/v1.17/ai-sdk.js"></script>

<script>
  const customPrivacyPopup = {
    show(){
      console.log("show");
    },
    hide(){
      console.log("hide");
    },
    cameraDenied(){
      console.log("deny");
    }
  };
  // MphTools.config({customPrivacyPopup:customPrivacyPopup});
  const toggle = document.querySelector('#toggle');
  CY.loader()
    .loadErrorHandler((err) => {console.error(err, " -> ", err.type , " -> ",err.moduleName)})
    .busyHandler((err) => {console.error("busy handler:", err)})
    .runErrorHandler((err) => {console.error("run error handler:", err)})
    .addModule(CY.modules().FACE_DETECTOR.name/*, {multiFace: true}*/)
    //.addModule(CY.modules().FACE_BASE.name)
    .addModule(CY.modules().FACE_AGE.name)
    .addModule(CY.modules().FACE_EMOTION.name)
    // .addModule(CY.modules().FACE_EMOTION_HD.name)
    .addModule(CY.modules().FACE_FEATURES.name)
    .addModule(CY.modules().FACE_GENDER.name)
    .addModule(CY.modules().FACE_POSE.name)
    .addModule(CY.modules().FACE_ATTENTION.name, {})
    .addModule(CY.modules().FACE_WISH.name, {})
    .addModule(CY.modules().FACE_POSITIVITY.name, {})
    .addModule(CY.modules().DATA_AGGREGATOR.name, {})
    .addModule(CY.modules().FACE_POSITIVITY.name, {})
    .addModule(CY.modules().ALARM_NO_FACE.name, {})
    .addModule(CY.modules().ALARM_LOW_ATTENTION.name, {})
    .addModule(CY.modules().ALARM_MORE_FACES.name, {})
    // //.addModule(CY.modules().SMART.name)
    // //.addModule(CY.modules().FRUIT.name)
   ...