Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Iris Predictor</title> | |
| <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/bird.png') }}"> | |
| <!-- Tailwind CSS CDN (for prototyping) --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Adjust Tailwind config to enable backdrop-filter (if needed) --> | |
| <style> | |
| /* Tailwind config for backdrop-filter if required (most new versions support it) */ | |
| @layer utilities { | |
| .backdrop-blur-3xl { backdrop-filter: blur(40px); } | |
| } | |
| </style> | |
| <!-- Font Awesome Free CDN --> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" | |
| integrity="sha512-…(use correct integrity)…" | |
| crossorigin="anonymous" | |
| referrerpolicy="no-referrer" | |
| /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| </head> | |
| <body class="min-h-screen bg-cover bg-center text-white" style="background-image: url('https://cdn-uploads.huggingface.co/production/uploads/68c904e18015407020b54e94/-jH9W0IcdkO3xzcxHuTfS.gif');"> | |
| <div class="flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-md w-full space-y-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-extrabold">🌸 Iris Flower Predictor</h2> | |
| </div> | |
| <form action="/predict" method="post" class="glass bg-white/10 backdrop-blur-3xl rounded-3xl shadow-lg p-8 space-y-6"> | |
| <!-- sepal length --> | |
| <div> | |
| <label for="sl" class="block text-sm font-semibold">Sepal Length</label> | |
| <div class="mt-1 relative"> | |
| <input type="text" name="sl" id="sl" required | |
| class="appearance-none block w-full px-4 py-3 bg-white/20 placeholder-white/70 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500" | |
| placeholder="e.g., 5.1"> | |
| <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-ruler-vertical text-white/70"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- sepal width --> | |
| <div> | |
| <label for="sw" class="block text-sm font-semibold">Sepal Width</label> | |
| <div class="mt-1 relative"> | |
| <input type="text" name="sw" id="sw" required | |
| class="appearance-none block w-full px-4 py-3 bg-white/20 placeholder-white/70 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500" | |
| placeholder="e.g., 3.5"> | |
| <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-arrows-alt-h text-white/70"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- petal length --> | |
| <div> | |
| <label for="pl" class="block text-sm font-semibold">Petal Length</label> | |
| <div class="mt-1 relative"> | |
| <input type="text" name="pl" id="pl" required | |
| class="appearance-none block w-full px-4 py-3 bg-white/20 placeholder-white/70 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500" | |
| placeholder="e.g., 1.4"> | |
| <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-long-arrow-alt-down text-white/70"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- petal width --> | |
| <div> | |
| <label for="pw" class="block text-sm font-semibold">Petal Width</label> | |
| <div class="mt-1 relative"> | |
| <input type="text" name="pw" id="pw" required | |
| class="appearance-none block w-full px-4 py-3 bg-white/20 placeholder-white/70 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500" | |
| placeholder="e.g., 0.2"> | |
| <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-arrows-alt-v text-white/70"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- buttons --> | |
| <div class="space-y-4"> | |
| <button type="submit" | |
| class="w-full flex justify-center py-3 px-6 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-purple-500 hover:to-indigo-500 rounded-xl text-lg font-bold transition transform hover:-translate-y-1 shadow-md"> | |
| <i class="fas fa-magic mr-2"></i> Predict | |
| </button> | |
| <button type="button" | |
| onclick="window.location='/'" | |
| class="w-full flex justify-center py-3 px-6 bg-gray-700/50 hover:bg-gray-700/70 rounded-xl text-lg font-semibold transition transform hover:-translate-y-1 shadow"> | |
| <i class="fas fa-sync-alt mr-2"></i> Refresh | |
| </button> | |
| </div> | |
| </form> | |
| {% if data %} | |
| <div class="glass bg-white/10 backdrop-blur-3xl rounded-3xl shadow-lg p-6 mt-6 text-center animate-fadeIn"> | |
| <p class="text-xl">The predicted flower species is:</p> | |
| <p class="text-2xl font-bold text-indigo-200 mt-2">{{ data }}</p> | |
| <div class="mt-4"> | |
| {% if data=="setosa" %} | |
| <img src="https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/iVXMOLPdx1ctqWnvnFED_.png" alt="IRIS SETOSA" class="mx-auto w-40 h-40 rounded-xl shadow-2xl"> | |
| {% elif data=="versicolor" %} | |
| <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20versicolor.png?v=1680866854461" alt="IRIS VERSICOLOR" class="mx-auto w-40 h-40 rounded-xl shadow-2xl"> | |
| {% elif data=="virginica" %} | |
| <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20Virginica.png?v=1680866857022" alt="IRIS VIRGINICA" class="mx-auto w-40 h-40 rounded-xl shadow-2xl"> | |
| {% endif %} | |
| </div> | |
| </div> | |
| {% endif %} | |
| </div> | |
| </div> | |
| <!-- Optional: Animation classes --> | |
| <style> | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: scale(0.95); } | |
| to { opacity: 1; transform: scale(1); } | |
| } | |
| .animate-fadeIn { | |
| animation: fadeIn 0.5s ease-in-out; | |
| } | |
| </style> | |
| </body> | |
| </html> | |