<!DOCTYPE html>
<html>
  <head>
    <title>MNIST</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script type="text/javascript">
        var BACKEND_URL = "{{ backend_url }}"
    </script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/main.js') }}"></script>
  </head>
  <body>
    <a href="https://github.com/sugyan/tensorflow-mnist"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
    <div class="container">
      <h1>MNIST</h1>
      <div class="row">
        <div class="col-md-6">
          <p>draw a digit here!</p>
          <canvas id="main"></canvas>
          <p>
            <button id="clear" class="btn btn-default">clear</button>
          </p>
        </div>
        <div class="col-md-6">
          <p>input:</p>
          <canvas id="input" style="border:1px solid" width="140" height="140"></canvas>
          <hr>
          <p>output:</p>
          <table id="output" class="table">
            <tr>
              <th class="col-md-1">class</th>
              <th class="col-md-2">confidence</th>
            </tr>
            <tr>
              <th>0</th>
              <td></td>
            </tr>
            <tr>
              <th>1</th>
              <td></td>
            </tr>
            <tr>
              <th>2</th>
              <td></td>
            </tr>
            <tr>
              <th>3</th>
              <td></td>
            </tr>
            <tr>
              <th>4</th>
              <td></td>
            </tr>
            <tr>
              <th>5</th>
              <td></td>
            </tr>
            <tr>
              <th>6</th>
              <td></td>
            </tr>
            <tr>
              <th>7</th>
              <td></td>
            </tr>
            <tr>
              <th>8</th>
              <td></td>
            </tr>
            <tr>
              <th>9</th>
              <td></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </body>
</html>
