<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="/static/styles.css" /> <script src="/static/script.js" defer></script> <title>Hiragana Prediction</title> </head> <body> <h1>Hiragana Prediction</h1> <a href="https://github.com/Detopall/handwriting-hiragana">GitHub</a> <button id="showModalBtn" class="btn">Show Cheat Sheet</button> <dialog id="modal"> <img src="/static/hiragana-characters.png" alt="Cheat Sheet" /> <button id="closeModalBtn" class="btn">Close</button> </dialog> <div id="hiraganaBoxes"></div> <canvas id="canvas" width="350" height="350"></canvas> <button id="clearCanvasBtn" class="btn">Clear Canvas</button> <button id="checkPredictionBtn" class="btn">Check Prediction</button> <button id="clearSavesBtn" class="btn">Clear Saves</button> <p id="predictionResult"></p> </body> </html>