index.html¶

Create an index.html file with the following content:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="main.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="column train">
        <form id="train-form" onsubmit="return false;">
          <div class="form-group">
            <label for="train-timeseries">Timeseries</label>
            <textarea id="train-timeseries" type="text" name="trainTimeseries" value=""></textarea>
          </div>

          <div class="form-group">
            <label for="epsilon">Epsilon value</label>
            <input id="epsilon" type="text" name="epsilon" value="1.25">
          </div>

          <div class="form-group">
            <label for="cluster-size">Minimum cluster size</label>
            <input id="cluster-size" type="text" name="clusterSize" value="5">
          </div>

          <div class="form-group">
            <label for="algorithm">Distance measure algorithm</label>
            <select id="algorithm" type="text" name="algorithm" value="">
              <option value="Euclidean">Euclidean</option>
              <option value="Manhattan">Manhattan</option>
              <option value="Chebyshev">Chebyshev</option>
            </select>
          </div>

          <button type="submit" onclick="train(); return false;">Train</button>
        </form>

        <div class="train__result">
          <span id="train-result">id:</span>
        </div>
      </div>

      <div class="column">
        <form id="detect-form">
          <div class="form-group">
            <label for="model-id">Model id</label>
            <input id="model-id" type="text" name="modelId" value="">
          </div>

          <div class="form-group">
            <label for="detect-timeseries">Timeseries</label>
            <textarea id="detect-timeseries" type="text" name="detectTimeseries" value=""></textarea>
          </div>

          <button type="submit" onclick="detect(); return false;">Detect</button>
        </form>
        <div class="detect__result table">
          <div class="table__header">
            <div class="header__row">
              <div class="header__cell">
                <h3>Time</h3>
              </div>
              <div class="header__cell">
                <h3>Anomaly extent</h3>
              </div>
            </div>
          </div>
          <div class="table__body" id="detect-result">
            <!-- Here are substituted the results of detection. -->
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
Any questions left?

Ask the community
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Last update: March 5, 2019