Spaces:
Sleeping
Sleeping
File size: 4,081 Bytes
1b3ec90 25572f4 1b3ec90 cb6496c 1b3ec90 cb6496c 1b3ec90 cb6496c 1b3ec90 cb6496c 1b3ec90 ba65b06 1b3ec90 cb6496c 1b3ec90 cb6496c 3d3ece1 cb6496c 3d3ece1 cb6496c 3d3ece1 cb6496c 3d3ece1 1b3ec90 d66ab0b cb6496c 1b3ec90 cb6496c d66ab0b cb6496c d66ab0b cb6496c d66ab0b cb6496c d66ab0b cb6496c 1b3ec90 cb6496c 1b3ec90 cb6496c 1b3ec90 cb6496c 1b3ec90 cb6496c 1b3ec90 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 |
<!DOCTYPE html>
<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>
|