Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Digit Doodle Recognition</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="{{ url_for('static', filename='script.js') }}"></script> | |
| </head> | |
| <body class="bg-gray-900 text-gray-200 font-sans min-h-screen"> | |
| <div class="container mx-auto p-6"> | |
| <!-- Title --> | |
| <h1 class="text-4xl font-bold text-center mb-6">Digit Doodle Recognition</h1> | |
| <!-- Canvas Section --> | |
| <div class="flex flex-col items-center gap-4"> | |
| <!-- Canvas --> | |
| <canvas id="drawingCanvas" width="500" height="500" class="bg-gray-800 border border-gray-700 shadow-md rounded-lg"></canvas> | |
| <!-- Buttons for Canvas --> | |
| <div class="flex gap-4"> | |
| <button | |
| onclick="clearCanvas()" | |
| class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded shadow-md transition duration-300"> | |
| Clear | |
| </button> | |
| <button | |
| onclick="sendToServer()" | |
| class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded shadow-md transition duration-300"> | |
| Predict | |
| </button> | |
| </div> | |
| <!-- Prediction Result --> | |
| <p id="result" class="text-lg font-medium text-green-400 mt-2"></p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |