Hugging Face's logo

Spaces:
Prashant43
/
iris
Sleeping

App Files Community
Prashant43 commited on
Commit
cb6496c
·
verified ·
1 Parent(s): 3d3ece1

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +68 -63
templates/index.html CHANGED
@@ -1,102 +1,107 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Iris Prediction</title>
7
  <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/bird.png') }}">
8
- <!-- Tailwind CSS -->
 
9
  <script src="https://cdn.tailwindcss.com"></script>
10
- <!-- Font Awesome -->
11
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
 
 
12
  <style>
 
13
  body {
14
  background-image: url("https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/6-OP-BRC1dAJP0iIaxCrd.gif");
15
  background-size: cover;
16
  background-repeat: no-repeat;
17
  background-attachment: fixed;
 
18
  }
19
- .glass {
20
- backdrop-filter: blur(10px);
21
- background: rgba(255, 255, 255, 0.15);
22
- border: 1px solid rgba(255, 255, 255, 0.25);
23
- }
24
  /* Fade-in + slide-up animation */
25
- @keyframes fadeSlide {
26
  0% {
27
  opacity: 0;
28
- transform: translateY(20px);
29
  }
30
  100% {
31
  opacity: 1;
32
  transform: translateY(0);
33
  }
34
  }
35
- .fade-slide {
36
- animation: fadeSlide 0.8s ease-out forwards;
37
  }
38
  </style>
39
  </head>
40
- <body class="flex flex-col items-center justify-center min-h-screen text-white px-4">
41
 
42
- <!-- Form -->
 
43
  <form action="/predict" method="post"
44
- class="glass w-full max-w-md p-6 rounded-2xl shadow-xl text-white space-y-4">
45
 
46
- <h1 class="text-center text-2xl font-bold mb-4">
47
- <i class="fa-solid fa-seedling mr-2"></i> Iris Flower Predictor
48
- </h1>
49
 
50
- <div>
51
- <label class="block mb-1"><i class="fa-solid fa-ruler-horizontal mr-2"></i>Sepal Length</label>
52
- <input type="text" name="sl" required
53
- class="w-full px-3 py-2 rounded-lg bg-white/20 placeholder-gray-200 text-white focus:outline-none focus:ring-2 focus:ring-green-400">
54
- </div>
55
 
56
- <div>
57
- <label class="block mb-1"><i class="fa-solid fa-ruler-horizontal mr-2"></i>Sepal Width</label>
58
- <input type="text" name="sw" required
59
- class="w-full px-3 py-2 rounded-lg bg-white/20 placeholder-gray-200 text-white focus:outline-none focus:ring-2 focus:ring-green-400">
60
- </div>
61
 
62
- <div>
63
- <label class="block mb-1"><i class="fa-solid fa-ruler-vertical mr-2"></i>Petal Length</label>
64
- <input type="text" name="pl" required
65
- class="w-full px-3 py-2 rounded-lg bg-white/20 placeholder-gray-200 text-white focus:outline-none focus:ring-2 focus:ring-green-400">
66
- </div>
67
 
68
- <div>
69
- <label class="block mb-1"><i class="fa-solid fa-ruler-vertical mr-2"></i>Petal Width</label>
70
- <input type="text" name="pw" required
71
- class="w-full px-3 py-2 rounded-lg bg-white/20 placeholder-gray-200 text-white focus:outline-none focus:ring-2 focus:ring-green-400">
72
- </div>
 
 
 
 
 
 
73
 
74
- <button type="submit"
75
- class="w-full py-2 mt-2 rounded-lg bg-green-500 hover:bg-green-600 transition flex items-center justify-center gap-2">
76
- <i class="fa-solid fa-paper-plane"></i> Submit
77
- </button>
78
 
79
- <a href="/"
80
- class="block text-center w-full py-2 rounded-lg bg-blue-500 hover:bg-blue-600 transition mt-2">
81
- <i class="fa-solid fa-rotate-right"></i> Refresh
82
- </a>
 
 
83
  </form>
84
 
85
- <!-- Animated Result -->
86
  {% if data %}
87
- <div class="glass mt-6 p-6 w-full max-w-md rounded-2xl text-center fade-slide">
88
- <h2 class="text-xl font-semibold mb-2"><i class="fa-solid fa-leaf mr-2"></i>Prediction Result</h2>
89
- <p class="text-lg mb-4">The predicted flower species is:
90
- <strong class="text-yellow-300">{{ data }}</strong>
91
- </p>
92
-
93
- {% if data=="setosa" %}
94
- <img src="https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/iVXMOLPdx1ctqWnvnFED_.png" alt="IRIS SETOSA" class="mx-auto w-40 h-40 rounded-lg shadow-lg">
95
- {% elif data=="versicolor" %}
96
- <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-lg shadow-lg">
97
- {% elif data=="virginica" %}
98
- <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-lg shadow-lg">
99
- {% endif %}
 
100
  </div>
101
  {% endif %}
102
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Home</title>
7
  <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/bird.png') }}">
8
+
9
+ <!-- TailwindCSS CDN -->
10
  <script src="https://cdn.tailwindcss.com"></script>
11
+
12
+ <!-- Font Awesome CDN -->
13
+ <script src="https://kit.fontawesome.com/a2e0e6ad65.js" crossorigin="anonymous"></script>
14
+
15
  <style>
16
+ /* Background */
17
  body {
18
  background-image: url("https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/6-OP-BRC1dAJP0iIaxCrd.gif");
19
  background-size: cover;
20
  background-repeat: no-repeat;
21
  background-attachment: fixed;
22
+ font-family: 'Inter', sans-serif;
23
  }
24
+
 
 
 
 
25
  /* Fade-in + slide-up animation */
26
+ @keyframes fadeSlideUp {
27
  0% {
28
  opacity: 0;
29
+ transform: translateY(40px);
30
  }
31
  100% {
32
  opacity: 1;
33
  transform: translateY(0);
34
  }
35
  }
36
+ .animate-fadeSlideUp {
37
+ animation: fadeSlideUp 1.2s ease-out forwards;
38
  }
39
  </style>
40
  </head>
 
41
 
42
+ <body class="text-white flex items-center justify-center min-h-screen px-4">
43
+
44
  <form action="/predict" method="post"
45
+ class="backdrop-blur-md bg-white/10 p-8 rounded-2xl shadow-2xl w-full max-w-md animate-fadeSlideUp">
46
 
47
+ <h2 class="text-3xl font-bold text-center mb-6">
48
+ <i class="fas fa-seedling mr-2"></i> Iris Prediction
49
+ </h2>
50
 
51
+ <div class="space-y-4">
 
 
 
 
52
 
53
+ <div>
54
+ <label class="block text-sm mb-1" for="sl">Sepal Length</label>
55
+ <input type="text" name="sl" id="sl" required
56
+ 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">
57
+ </div>
58
 
59
+ <div>
60
+ <label class="block text-sm mb-1" for="sw">Sepal Width</label>
61
+ <input type="text" name="sw" id="sw" required
62
+ 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">
63
+ </div>
64
 
65
+ <div>
66
+ <label class="block text-sm mb-1" for="pl">Petal Length</label>
67
+ <input type="text" name="pl" id="pl" required
68
+ 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">
69
+ </div>
70
+
71
+ <div>
72
+ <label class="block text-sm mb-1" for="pw">Petal Width</label>
73
+ <input type="text" name="pw" id="pw" required
74
+ 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">
75
+ </div>
76
 
77
+ <button type="submit"
78
+ class="w-full bg-green-500 hover:bg-green-600 text-white py-3 rounded-lg font-semibold transition-colors duration-300">
79
+ <i class="fas fa-paper-plane mr-2"></i> Submit
80
+ </button>
81
 
82
+ <a href="/"
83
+ class="block text-center bg-gray-500 hover:bg-gray-600 text-white py-3 rounded-lg font-semibold transition-colors duration-300">
84
+ <i class="fas fa-sync-alt mr-2"></i> Refresh
85
+ </a>
86
+
87
+ </div>
88
  </form>
89
 
 
90
  {% if data %}
91
+ <div class="absolute bottom-10 text-center w-full px-4 animate-fadeSlideUp">
92
+ <h2 class="text-2xl font-bold">Prediction Result</h2>
93
+ <p class="mt-2">The predicted flower species is: <strong>{{ data }}</strong></p>
94
+
95
+ {% if data=="setosa" %}
96
+ <img src="https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/iVXMOLPdx1ctqWnvnFED_.png"
97
+ alt="IRIS SETOSA" class="mx-auto mt-4 w-40 h-40">
98
+ {% elif data=="versicolor" %}
99
+ <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20versicolor.png?v=1680866854461"
100
+ alt="IRIS VERSICOLOR" class="mx-auto mt-4 w-40 h-40">
101
+ {% elif data=="virginica" %}
102
+ <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20Virginica.png?v=1680866857022"
103
+ alt="IRIS VIRGINICA" class="mx-auto mt-4 w-40 h-40">
104
+ {% endif %}
105
  </div>
106
  {% endif %}
107