JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AI SDK test</title>
  <script>
  </script>
</head>
<body onload="createTimeline()">
angle, gain, fullGain<br />
<input type="number" id="angle" value="45" placeholder="Angle">
<input type="number" id="gain" value="2" placeholder="Gain">
<input type="number" id="fullGain" value="1" placeholder="Full Gain">
<button id="initButton">Init</button><button id="resetButton" onclick="location.reload()">Reset</button><br />
<canvas id="canvas"></canvas><br />
blu valence, red arousal, green positivity
<canvas id="chart" width="1000" height="250"></canvas>
<canvas id="chart2" width="1000" height="250"></canvas>
<div>
  <button id="toggle">Pause</button>
</div>
<script src="https://ai-sdk.morphcast.com/stage/ai-sdk.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.34.0/smoothie.min.js"></script>
<script>
  let ts_attention = new TimeSeries();
  let ts_arousal = new TimeSeries();
  let ts_valence = new TimeSeries();

  function createTimeline() {
    let chart_a = new SmoothieChart({maxValue:1,minValue:0});
    let chart_b = new SmoothieChart({maxValue:1,minValue:-1});

    chart_a.addTimeSeries(ts_attention, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 2 });
    chart_b.addTimeSeries(ts_arousal, { strokeStyle: 'rgba(255, 0, 0, 0.5)', fillStyle: 'rgba(255, 0, 0, 0.2)', lineWidth: 1 });
    chart_b.addTimeSeries(ts_valence, { strokeStyle: 'rgba(0, 0, 255, 0.5)', fillStyle: 'rgba(0, 0, 255, 0.2)', lineWidth: 1 });

    chart_a.streamTo(document.getElementById("chart"), 50);
    chart_b.streamTo(document.getElementById("chart2"), 50);
  }
</script>
<script>
 
const initButton = document.getElementById("initButton");
initButton.addEventListener("click", async () => {
  initButton.disabled = true;
  const angle = parseInt(document.getElementById("angle").value);
  const gain = parseInt(document.getElementById("gain").value);
  const finalGain =...