Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Home</title> | |
| <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/bird.png') }}"> | |
| <!-- TailwindCSS CDN --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Font Awesome CDN --> | |
| <script src="https://kit.fontawesome.com/a2e0e6ad65.js" crossorigin="anonymous"></script> | |
| <style> | |
| /* Background */ | |
| body { | |
| background-image: url("https://cdn-uploads.huggingface.co/production/uploads/68c90468161ed98c9506a99a/BD9A7lpUH5i7r8T0oGHQo.gif"); | |
| background-attachment: fixed; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| /* Fade-in + slide-up animation */ | |
| @keyframes fadeSlideUp { | |
| 0% { | |
| opacity: 0; | |
| transform: translateY(40px); | |
| } | |
| 100% { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-fadeSlideUp { | |
| animation: fadeSlideUp 1.2s ease-out forwards; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-white flex items-center justify-center min-h-screen px-4"> | |
| <form action="/predict" method="post" | |
| class="backdrop-blur-md bg-white/10 p-8 rounded-2xl shadow-2xl w-full max-w-md animate-fadeSlideUp"> | |
| <h2 class="text-3xl font-bold text-center mb-6"> | |
| <i class="fas fa-seedling mr-2"></i> Iris Prediction | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm mb-1" for="sl">Sepal Length</label> | |
| <input type="text" name="sl" id="sl" required | |
| class="w-full p-3 rounded-lg bg-white/20 placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-green-400" placeholder="Enter sepal length"> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1" for="sw">Sepal Width</label> | |
| <input type="text" name="sw" id="sw" required | |
| class="w-full p-3 rounded-lg bg-white/20 placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-green-400" placeholder="Enter sepal width"> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1" for="pl">Petal Length</label> | |
| <input type="text" name="pl" id="pl" required | |
| class="w-full p-3 rounded-lg bg-white/20 placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-green-400" placeholder="Enter petal length"> | |
| </div> | |
| <div> | |
| <label class="block text-sm mb-1" for="pw">Petal Width</label> | |
| <input type="text" name="pw" id="pw" required | |
| class="w-full p-3 rounded-lg bg-white/20 placeholder-gray-300 focus:outline-none focus:ring-2 focus:ring-green-400" placeholder="Enter petal width"> | |
| </div> | |
| <button type="submit" | |
| class="w-full bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg font-semibold transition-colors duration-300"> | |
| <i class="fas fa-paper-plane mr-2"></i> Submit | |
| </button> | |
| <a href="/" | |
| class="block text-center bg-gray-500 hover:bg-gray-600 text-white py-3 rounded-lg font-semibold transition-colors duration-300"> | |
| <i class="fas fa-sync-alt mr-2"></i> Refresh | |
| </a> | |
| </div> | |
| </form> | |
| {% if data %} | |
| <div class="absolute bottom-10 text-center w-full px-4 animate-fadeSlideUp"> | |
| <h2 class="text-2xl font-bold">Prediction Result</h2> | |
| <p class="mt-2">The predicted flower species is: <strong>{{ data }}</strong></p> | |
| {% if data=="setosa" %} | |
| <img src="https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/iVXMOLPdx1ctqWnvnFED_.png" | |
| alt="IRIS SETOSA" class="mx-auto mt-4 w-40 h-40"> | |
| {% 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 mt-4 w-40 h-40"> | |
| {% 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 mt-4 w-40 h-40"> | |
| {% endif %} | |
| </div> | |
| {% endif %} | |
| </body> | |
| </html> | |