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>
        <strong>MorphCast JS SDK - Arousal module (dev environment)</strong>
      <br />
      Neural net output of arousal (red) - New raw arousal (green)
      <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

const config = {
};
log('Current config is : ' + JSON.stringify(config));

///////

class Window {
  constructor(maxLen) {
    if (!Number.isInteger(maxLen) || maxLen < 1) {
      throw new RangeError('Maximum window size must be an integer greater than zero.');
    }
    this._maxLen = maxLen;
    this._queue = [];
  }

  enqueue(item) {
    this._queue.unshift(item);
    if (this._queue.length > this._maxLen) {
      return this._queue.pop();
    }
  }

  get length() {
    return this._queue.length;
  }
}

/*
  The average squared deviation is normally calculated as
  ``x.sum() / N``, where ``N = len(x)``.  If, however, `ddof` is specified,
  the divisor ``N - ddof`` is used instead. In standard statistical
  practice, ``ddof=1`` provides an unbiased estimator of the variance
  of the infinite population. ``ddof=0`` provides a maximum likelihood
  estimate of the variance for normally distributed variables.
 */
function stddev(values, ddof = 0) {
  const avg = average(values);

  const squareDiffs = values.map(function(value) {
    const diff = value - avg;
    return diff * diff;
  });

  let avgSquareDiff = squareDiffs.reduce((sum, value) => sum + value, 0);
  avgSquareDiff /= squareDiffs.length - ddof;

  return Math.sqrt(avgSquareDiff);
}

function average(data) {
  const sum = data.reduce(function(sum, value) {
    return sum + value;
  }, 0);

  return sum / data.length;
}

class WindowWithStatistics extends Window {

  /**
   * Computes the arithmetic mean of the values in the window.
   *
   * @throws TypeError if the window is empty
   */
  avg() {
    if (this.length === 0) {
      throw new TypeError('Window is empty. Cannot compute average.');
    }
    return average(this._queue);
  }

  /**
   * Computes the standard deviation of the values in the window,
   * i.e. the maximum likelihood estimate of the standard deviation
   * for normally distributed variables.
   *
   * @throws TypeError if the window is empty
   */
  stddev() {
    if...