Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>EMNIST OCR Canvases</title> | |
| <link rel="stylesheet" href="/static/style.css" /> | |
| </head> | |
| <body> | |
| <!-- Header / Banner --> | |
| <header class="header"> | |
| <h1>Handwritten Optical Character Recognition</h1> | |
| <p class="underline"> | |
| Draw a single character on the canvas below. The model will predict what it is | |
| </p> | |
| <p> | |
| Use this to test out how recognition models work or to see how clear your handwriting is to a computer. | |
| </p> | |
| </header> | |
| <!-- Main Layout --> | |
| <main class="container"> | |
| <!-- Left: Drawing Canvas --> | |
| <section class="drawing-section"> | |
| <h2>Draw Here</h2> | |
| <canvas | |
| id="draw-canvas" | |
| width="420" | |
| height="420" | |
| style="width: 420px; height: 420px; border: 1px solid black;" | |
| ></canvas> | |
| <div class="controls"> | |
| <button id="clear-btn">Clear</button> | |
| </div> | |
| </section> | |
| <!-- Right: Predictions Canvas--> | |
| <section class="prediction-section"> | |
| <h2>Predictions</h2> | |
| <canvas | |
| id="prediction-canvas" | |
| width="420" | |
| height="420" | |
| ></canvas> | |
| <div class="slider-container"> | |
| <input type="range" id="k-slider" min="1" max="15" step="1" value="10"> | |
| <div id="k-value">10</div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Import everything else --> | |
| <script src="/static/helpers/barGraphs.js"></script> | |
| <script src="/static/helpers/Sanitizer.js"></script> | |
| <script src="/static/helpers/kSlider.js"></script> | |
| <script src="/static/helpers/footer.js"></script> | |
| <script src="/static/main.js"></script> | |
| </body> | |
| </html> | |