JSFiddle - React, Tailwind, and code Playground

PUBLIC - DEPLOYED

by morphcast

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MorphCast SDK - Demo with graphical elements</title>

    <!-- configuration for the Alert plugin -->
    <meta name="mphtools-feature" content="compatibilityUI, cameraPrivacyPopup, compatibilityAutoCheck">
</head>
<body>
<!-- include automatic alerts about browser and App compatibility -->
<script src="https://sdk.morphcast.com/mphtools/v1.0/mphtools.js"></script>
<!-- include MorphCast SDK -->
<script src="https://ai-sdk.morphcast.com/v1.14/ai-sdk.js"></script>
<!-- include chart -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<!-- elements of the page -->
<div><b>Emotion Detection Results</b></div>
<div class="wrapper">
    <canvas class="charts" id="chart"></canvas>
</div>
<div id="start_over">
    <span>CLICK TO START</span>
</div>
</body>
</html>

CSS

body {
  background-color: #666666;
  color: #FFFFFF;
}

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

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.charts {
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
}

JavaScript

const EMOTIONS = [
  'Anger',
  'Disgust',
  'Fear',
  'Happiness',
  'Sadness',
  'Surprise',
  'Neutral'
];
EMOTIONS.ANGER = EMOTIONS[0];
EMOTIONS.DISGUST = EMOTIONS[1];
EMOTIONS.FEAR = EMOTIONS[2];
EMOTIONS.HAPPINESS = EMOTIONS[3];
EMOTIONS.SADNESS = EMOTIONS[4];
EMOTIONS.SURPRISE = EMOTIONS[5];
EMOTIONS.NEUTRAL = EMOTIONS[6];

const colorMap = {
  [EMOTIONS.ANGER]: '#cc002e',
  [EMOTIONS.DISGUST]: '#36c341',
  [EMOTIONS.FEAR]: '#9a59a0',
  [EMOTIONS.HAPPINESS]: '#e1ef00',
  [EMOTIONS.SADNESS]: '#83c0e4',
  [EMOTIONS.SURPRISE]: '#FFC0CB',
  [EMOTIONS.NEUTRAL]: '#FFFFFF',
};

const MAX = 30;
const STEP = 2;

class EmoChart {
  constructor(el) {
    this._element = el;
    const datasets = EMOTIONS.slice(0, 7).map((emotion) => {
      return {
        label: emotion,
        fill: false,
        borderColor: colorMap[emotion],
        borderWidth: 2,
        data: [],
        // lineTension: 0,
        pointRadius: 0
      };
    }).concat([{
      label: 'Face not detected',
      fill: true,
      backgroundColor: 'rgba(170,170,170,0.6)',
      borderColor: 'rgba(170,170,170,0.6)',
      data: [],
      lineTension: 0,
      pointRadius: 0
    }]);

    const ctx = el.getContext('2d');
    const config = {
      type: 'line',
      data: {
        datasets
      },
      options: {
        responsive: false,
        animation: {
          duration: 0,
        },
        scales: {
          xAxes: [{
            type: 'linear',
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'time (sec)'
            },
            ticks: {
              min: 0,
              suggestedMax: MAX + STEP,
              stepSize: STEP
            }
          }],
          yAxes: [{
            display: true,
            scaleLabel: {
              display: true,
              labelString: 'Emotion level (%)'
            },
            ticks: {
              display: false,
              min: 0,
              max: 1
        ...