JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.34.0/smoothie.min.js"></script>
<script src="https://ai-sdk.morphcast.com/dev/ai-sdk.js"></script>
<body>
  <div class="container-fluid">
    <div class="row">
       <video playsinline preload="auto" loop crossorigin="Anonymous" onclick="toggleVideo();" src="https://s3.eu-central-1.amazonaws.com/demo.morphcast.com/attention/claudia2.mp4" id="yt_player" width=320></video>
      <br />
        <strong>MorphCast JS SDK - Attention module (dev environment)</strong>
      FROM SDK: Attention (in red) - FROM WEBPARTERRE (in green)
      <br />
      <canvas id="chart_att" width="400" height="250"></canvas>
      <br />
      <canvas id="chart_arousal" width="400" height="250"></canvas>
      <div class="col-md-4">
        <div id="results" style="word-wrap:break-word;font-size:40px"></div>
        <div id="detector"></div>
      </div>
    </div>
    <div>
      <button id="start" onclick="onStart()" disabled>Start</button>
      <button id="stop" onclick="onStop()">Stop</button>
      <p>
        <strong>Instructions</strong>
        Press the start button to start the detector.
        <br/> Press the stop button to end the detector.
      </p>
      <div>
        <strong>LOG:</strong>
      </div>
      <div id="logs"></div>
    </div>
  </div>
</body>

JavaScript

function log(msg) {
  var element = document.getElementById("logs");
  element.innerHTML += "<span>" + msg + "</span><br />";
}

let timeout;
let tmp = [];

function print(node, msg) {
  document.getElementById(node).innerHTML = msg;
}

//function executes when Start button is pushed.
function onStart() {
  if (detector && !detector.isRunning) {
    detector.isRunning = true;
    detector.start();
  }
  log("Clicked the start button");
  print("results", "Attention: --");
}

//function executes when the Stop button is pushed.
function onStop() {
  log("Clicked the stop button");
  if (detector && detector.isRunning) {
    detector.stop();
    detector.isRunning = false;
  }
}

window.addEventListener(CY.modules().FACE_ATTENTION.eventName, (evt) => {
  const att = evt.detail.output.attention;
  print("results", "Attention: " + att !== null ? att.toFixed(2) : '--');

  ts_att_raw.append(new Date().getTime(), att);
	tmp.push(att);
  //ts_sdk_att.append(new Date().getTime(), att);
});

setInterval(()=>{
	if(tmp.length > 0) ts_sdk_att.append(new Date().getTime(), tmp.reduce((p,c)=>p+c)/tmp.length);
  tmp = [];
},1000);



window.addEventListener(CY.modules().FACE_DETECTOR.eventName, (evt) => {
  console.log(CY.modules().FACE_DETECTOR.eventName, evt.detail);
  document.getElementById('detector').innerHTML = 'Tracker status: ' + evt.detail.status;
});

var detector = {};
detector.isRunning = false;

let ts_sdk_att = new TimeSeries();
let ts_att_raw = new TimeSeries();

function createTimeline() {
  let chart_a = new SmoothieChart({
    interpolation: 'step',
    maxValue: +1.01,
    minValue: -0.01,
    grid: {
      sharpLines: true,
      verticalSections: 10
    }
  });

  chart_a.addTimeSeries(ts_sdk_att, {
    strokeStyle: 'rgba(0, 255, 0, 1)',
    lineWidth: 2
  });
  chart_a.addTimeSeries(ts_att_raw, {
    strokeStyle: 'rgba(255, 50, 0, 1)',
    lineWidth: 2
  });
  chart_a.streamTo(document.getElementById("chart_att"), 50);
}


class Camera {
 ...