snippets/training.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>ML Classification application with Gramex</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../style.css">
  <link rel="stylesheet" href="../ui/bootstrap-select/dist/css/bootstrap-select.min.css">
</head>

<body>
  {% set base = '..' %}
  {% include 'navbar.html' %}

  <!-- upload component -->
  <div class="container py-4">
    <div class="card-deck">
      <div class="card">
        <div class="card-body">
          <form action="../upload" method="POST" enctype="multipart/form-data">
            <input name="file" type="file">
            <button type="buton" id="file_upload_btn">Submit</button>
            <input type="hidden" name="_xsrf" value="{{ handler.xsrf_token }}">
            <input type="hidden" name="save" value="data.csv">
          </form>
        </div>
      </div>
    </div><!-- .card -->
  </div><!-- .container -->

  <!-- data table component -->
  <div class="container py-4">
    <div class="formhandler" data-src="../data"></div>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-6">
        <h3>Tweak the parameters</h3>
        <div class="container py-4" id="mlSection">
          <div class="form-group row">
            <label for="targetCol" class="col-sm-4 col-form-label">Select Target Column:</label>
            <div class="col-sm-8">
              <div id="targetCol"></div>
            </div>
          </div>
          <div class="form-group row">
            <label for="testSize" class="col-sm-4 col-form-label">Select Test Size:</label>
            <div class="col-8">
              <input id="testSize" type="range" class="custom-range" name="testSize" value="33">
            </div>
            <div id="testSizeDisplay" class="col-sm"><p>33 %</p></div>
          </div>
          <div class="form-group row">
            <label for="algorithm" class="col-sm-4 col-form-label">Select Algorithm:</label>
            <div class="col-sm-8">
              <div id="algorithm"></div>
            </div>
          </div>
          <div class="form-group">
            <button class="btn btn-primary" id="train">Train</button>
          </div>
        </div>
      </div>
      <div id="report" class="col-6"></div>
    </div>
  </div>
  {% include 'scripts.html' %}
</body>

<script>
  $('.formhandler').formhandler({
    pageSize: 5
  })
</script>