JSFiddle - React, Tailwind, and code Playground

Analytics example with data storage lib.

by morphcast

HTML

<head>
  <title>MorphCast AI HTML5 SDK - Analytics example with data storage lib. (dev env)</title>
</head>

<body>
  <div><b>Data collection</b> (it stops automatically)</div>
  <div id="samples">Samples: -</div>
  <br />
  <div><b>Dimensions</b></div>
  <div id="age">Age group: -</div>
  <div id="gender">Gender: -</div>
  <div id="seconds">Video second: -</div>
  <br />
  <div><b>Attributes</b></div>
  <div id="attention">Attention: -</div>
  <div id="start_over">
    <span>CLICK TO START</span>
  </div>
  <!--div>
    <button id="eventsButton">Get uploaded events</button>
  </div>
  <p>Current savedData: <span id="dataCurrent"></span></p-->
</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

async function main() {
  await downloadAiSdk();

  /// CONSTs

  const MAX_TIME_SEC = 20000;
  const VIDEO_NAME = 'video2';
  const DEMO_NAME = "demo1";
  const USER_NAME = "noUser";

  const LICENSE_KEY = "9087cfd2037a28a79769fdcaa4962252379cd2e2fd0b"; // alessandro.beltramin
  const API_KEY = "kkkk";

  const AGE_GROUPS = [30, 50]; // indexes: 0, 1, 2

  window.globals = window.globals || {};
  window.globals.__API_ENDPOINT__ =
    "https://54ad0beqcf.execute-api.eu-central-1.amazonaws.com/stage";

  //////////// AI SDK //////////////


  const initSDK = new Promise((res) => {
    res(CY.loader()
      .licenseKey('9087cfd2037a28a79769fdcaa4962252379cd2e2fd0b')
      .addModule(CY.modules().FACE_AGE.name)
      .addModule(CY.modules().FACE_GENDER.name)
      .addModule(CY.modules().FACE_ATTENTION.name)
      .addModule(CY.modules().FACE_AROUSAL_VALENCE.name)
      .addModule(CY.modules().DATA_AGGREGATOR.name, {
        initialWaitMs: 2000,
        periodMs: 1000
      })
      .load());
  });

  initSDK.then(({
    start,
    stop
  }) => {
    start();
    console.log(`Automatic stop after ${MAX_TIME_SEC} seconds`);
    setTimeout(stop, MAX_TIME_SEC);
  });

  //////////// DATA STORAGE //////////////

  function loadScript(url) {
    return new Promise(resolve => {
      const script = document.createElement("script");
      script.type = "text/javascript";
      if (script.readyState) { //IE
        script.onreadystatechange = function() {
          if (script.readyState === "loaded" || script.readyState === "complete") {
            script.onreadystatechange = null;
            resolve();
          }
        };
      } else { //Others
        script.onload = function() {
          resolve();
        };
      }
      script.src = url;
      document.getElementsByTagName("head")[0].appendChild(script);
    });
  }

  async function downloadMphDataStorage() {
    if (window.MphDataStorage == null) {
      await...