Spaces:
Build error
Build error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ANPR Image Upload</title> | |
| <!-- Load Tailwind CSS from CDN --> | |
| <script src="https://www.google.com/search?q=https://cdn.tailwindcss.com"></script> | |
| <style> | |
| /* Optional: Add custom styles or use a font like Inter */ | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 flex items-center justify-center min-h-screen"> | |
| <div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-lg"> | |
| <h1 class="text-3xl font-bold mb-6 text-center text-gray-800">Number Plate Detector</h1> | |
| <p class="text-center text-gray-600 mb-6">Upload an image containing a vehicle's number plate.</p> | |
| <!-- The form sends data to our '/' route using the POST method --> | |
| <!-- enctype="multipart/form-data" is essential for file uploads --> | |
| <form method="post" enctype="multipart/form-data" class="space-y-6"> | |
| <div> | |
| <label for="file" class="block text-sm font-medium text-gray-700 mb-2">Choose an image file:</label> | |
| <input type="file" name="file" id="file" required accept="image/png, image/jpeg, image/jpg" | |
| class="block w-full text-sm text-gray-500 rounded-md border border-gray-300 cursor-pointer | |
| file:mr-4 file:py-2 file:px-4 | |
| file:rounded-md file:border-0 | |
| file:text-sm file:font-semibold | |
| file:bg-indigo-50 file:text-indigo-700 | |
| hover:file:bg-indigo-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <p class="text-xs text-gray-500 mt-1">Accepted formats: PNG, JPG, JPEG.</p> | |
| </div> | |
| <div> | |
| <button type="submit" | |
| class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out"> | |
| Upload and Detect | |
| </button> | |
| </div> | |
| </form> | |
| <!-- We can add messages here later (e.g., upload errors) --> | |
| {% if error_message %} | |
| <p class="mt-4 text-center text-red-600">{{ error_message }}</p> | |
| {% endif %} | |
| </div> | |
| </body> | |
| </html> | |