
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Gradio: Draw a Digit</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/draw-a-digit.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>

  <body>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
      <a class="navbar-brand" href="#">Draw a Digit</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <!--<li class="nav-item active">-->
            <!--<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>-->
          <!--</li>-->
          <!--<li class="nav-item">-->
            <!--<a class="nav-link disabled" href="#">Disabled</a>-->
          <!--</li>-->
          <!--<li class="nav-item dropdown">-->
            <!--<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>-->
            <!--<div class="dropdown-menu" aria-labelledby="dropdown01">-->
              <!--<a class="dropdown-item" href="#">Action</a>-->
              <!--<a class="dropdown-item" href="#">Another action</a>-->
              <!--<a class="dropdown-item" href="#">Something else here</a>-->
            <!--</div>-->
          <!--</li>-->
        </ul>
          <ul class="navbar-nav">
          <!--<li class="nav-item">-->
            <!--<a class="nav-link" href="#">Help</a>-->
          <!--</li>-->
          <li class="nav-item ">
            <a class="nav-link" href="http://www.siliconprep.com"><em>Gradio</em>, a tool by Silicon School</a>
          </li>
          </ul>
      </div>
    </nav>

    <main role="main" class="container starter-template">


            <div class="row">
              <div class="col-6">
                <h5>Use your cursor to draw a digit below</h5>
                <canvas id="canvas" width="400" height="400"></canvas><br>
                <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-primary" id="submit-button">Recognize</button>
                <button type="button" class="btn btn-secondary" id="clear-button">Clear</button>
                </div>
              </div>
              <div class="col-6">
                <h5>Predicted digit appears here</h5>
                <canvas id="predict_canvas" width="400" height="400" style="background-color:black"></canvas><br>
              </div>
            </div>



      </div>

    </main><!-- /.container -->

    <footer class="footer">
      <div class="container" >
        <span class="text-muted">

            <!-- Add font awesome icons -->
            Gradio is open-source, help make it better &nbsp;
            <a href="https://github.com/abidlabs/gradiome" target="_blank" class="fa fa-github"></a>

        </span>

        <span class="text-muted pull-right">

            <!-- Add font awesome icons -->
            Found this useful? Kindly spread the word &nbsp;
            <a href="https://www.facebook.com/sharer/sharer.php?u=www.siliconprep.com" target="_blank" class="fa fa-facebook"></a>
            <a href="https://twitter.com/home?status=Check%20out%20Gradio%20tool%20at%20www.siliconprep.com" target="_blank" class="fa fa-twitter"></a>


        </span>
      </div>
    </footer>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/bootstrap-notify.min.js"></script>
    <script src="../js/draw-a-digit.js"></script>
  </body>
</html>
