Hugging Face's logo

Spaces:
arshtech
/
IRIS_data_predictor
Sleeping

App Files Community
arshtech commited on
Commit
c1a4e0b
·
verified ·
1 Parent(s): afc9a8e

Update templates/form.html

Browse files
Files changed (1) hide show
  1. templates/form.html +236 -75
templates/form.html CHANGED
@@ -1,82 +1,243 @@
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 Flower Predictor</title>
7
- <!-- Tailwind CSS CDN -->
8
- <script src="https://cdn.tailwindcss.com"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
- <body class="bg-gradient-to-r from-green-100 via-blue-50 to-purple-100 min-h-screen flex flex-col items-center justify-start">
11
-
12
- <!-- Title -->
13
- <header class="w-full text-center py-10">
14
- <h1 class="text-4xl font-extrabold text-purple-700 mb-2">🌸 Iris Flower Predictor 🌸</h1>
15
- <p class="text-lg text-gray-700">Enter the flower measurements to predict its species</p>
16
- </header>
17
-
18
- <!-- Form Section -->
19
- <section class="bg-white shadow-lg rounded-2xl p-8 w-full max-w-lg">
20
- <form action="/predict" method="post" class="space-y-5">
21
- <div>
22
- <label for="sl" class="block text-gray-700 font-semibold mb-1">Sepal Length (cm)</label>
23
- <input type="number" step="any" name="sl" id="sl" class="w-full p-2 border border-gray-300 rounded-lg focus:ring focus:ring-purple-300" placeholder="e.g. 5.1" required>
24
- </div>
25
- <div>
26
- <label for="sw" class="block text-gray-700 font-semibold mb-1">Sepal Width (cm)</label>
27
- <input type="number" step="any" name="sw" id="sw" class="w-full p-2 border border-gray-300 rounded-lg focus:ring focus:ring-purple-300" placeholder="e.g. 3.5" required>
28
- </div>
29
- <div>
30
- <label for="pl" class="block text-gray-700 font-semibold mb-1">Petal Length (cm)</label>
31
- <input type="number" step="any" name="pl" id="pl" class="w-full p-2 border border-gray-300 rounded-lg focus:ring focus:ring-purple-300" placeholder="e.g. 1.4" required>
32
- </div>
33
- <div>
34
- <label for="pw" class="block text-gray-700 font-semibold mb-1">Petal Width (cm)</label>
35
- <input type="number" step="any" name="pw" id="pw" class="w-full p-2 border border-gray-300 rounded-lg focus:ring focus:ring-purple-300" placeholder="e.g. 0.2" required>
36
- </div>
37
- <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-lg font-semibold transition">Predict Flower Species</button>
38
- </form>
39
-
40
- {% if result %}
41
- <div class="mt-6 p-4 bg-purple-50 border border-purple-200 rounded-lg text-center">
42
- <p class="text-lg font-bold text-purple-700">Predicted Flower Type: {{result}}</p>
43
- </div>
44
- {% endif %}
45
- </section>
46
-
47
- <!-- Info Section -->
48
- <section class="mt-12 w-full max-w-5xl px-4">
49
- <h2 class="text-3xl font-bold text-center text-gray-800 mb-8">About the Iris Species</h2>
50
- <div class="grid md:grid-cols-3 gap-6">
51
- <!-- Setosa -->
52
- <div class="bg-white shadow-md rounded-xl overflow-hidden">
53
- <img src="https://upload.wikimedia.org/wikipedia/commons/5/56/Irissetosa1.jpg" alt="Iris Setosa" class="h-48 w-full object-cover">
54
- <div class="p-4">
55
- <h3 class="text-xl font-semibold text-purple-700">Iris Setosa</h3>
56
- <p class="text-gray-600 text-sm mt-2">Usually small flowers with narrow petals. Found mostly in northern regions. Sepals and petals are purple-blue.</p>
57
- </div>
58
- </div>
59
- <!-- Versicolor -->
60
- <div class="bg-white shadow-md rounded-xl overflow-hidden">
61
- <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Iris_versicolor_3.jpg" alt="Iris Versicolor" class="h-48 w-full object-cover">
62
- <div class="p-4">
63
- <h3 class="text-xl font-semibold text-purple-700">Iris Versicolor</h3>
64
- <p class="text-gray-600 text-sm mt-2">Medium-sized flowers with deep blue or violet color. Commonly found in wetlands and meadows.</p>
65
- </div>
66
- </div>
67
- <!-- Virginica -->
68
- <div class="bg-white shadow-md rounded-xl overflow-hidden">
69
- <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Iris_virginica.jpg" alt="Iris Virginica" class="h-48 w-full object-cover">
70
- <div class="p-4">
71
- <h3 class="text-xl font-semibold text-purple-700">Iris Virginica</h3>
72
- <p class="text-gray-600 text-sm mt-2">Larger flowers, blue to purple in color with bright yellow markings. Found in swamps and coastal areas.</p>
73
  </div>
74
- </div>
75
  </div>
76
- </section>
77
-
78
- <footer class="mt-12 py-6 text-center text-sm text-gray-500">
79
- © 2025 Iris Flower Predictor
80
- </footer>
81
  </body>
82
- </html>
 
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 Flower Predictor 🌸</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
9
+
10
+ :root {
11
+ --primary-color: #4a90e2;
12
+ --secondary-color: #f6f8fa;
13
+ --text-color: #333;
14
+ --card-bg: #fff;
15
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
16
+ --border-radius: 12px;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Poppins', sans-serif;
21
+ background-color: var(--secondary-color);
22
+ color: var(--text-color);
23
+ display: flex;
24
+ justify-content: center;
25
+ align-items: center;
26
+ min-height: 100vh;
27
+ margin: 0;
28
+ padding: 20px;
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ .container {
33
+ display: flex;
34
+ flex-direction: column;
35
+ gap: 24px;
36
+ max-width: 900px;
37
+ width: 100%;
38
+ }
39
+
40
+ .header {
41
+ text-align: center;
42
+ margin-bottom: 20px;
43
+ }
44
+
45
+ .header h1 {
46
+ font-size: 2.5em;
47
+ color: var(--primary-color);
48
+ margin: 0;
49
+ font-weight: 600;
50
+ }
51
+
52
+ .main-content {
53
+ display: flex;
54
+ flex-direction: column;
55
+ gap: 24px;
56
+ }
57
+
58
+ .card {
59
+ background-color: var(--card-bg);
60
+ padding: 24px;
61
+ border-radius: var(--border-radius);
62
+ box-shadow: var(--shadow);
63
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
64
+ }
65
+
66
+ .card:hover {
67
+ transform: translateY(-5px);
68
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
69
+ }
70
+
71
+ .form-section {
72
+ flex: 1;
73
+ }
74
+
75
+ .image-and-info {
76
+ flex: 1;
77
+ display: flex;
78
+ flex-direction: column;
79
+ gap: 24px;
80
+ }
81
+
82
+ .iris-image img {
83
+ width: 100%;
84
+ border-radius: var(--border-radius);
85
+ }
86
+
87
+ .info-section {
88
+ display: flex;
89
+ flex-direction: column;
90
+ gap: 16px;
91
+ }
92
+
93
+ .info-section h2 {
94
+ font-size: 1.5em;
95
+ color: var(--primary-color);
96
+ margin-top: 0;
97
+ }
98
+
99
+ .species-list {
100
+ list-style: none;
101
+ padding: 0;
102
+ margin: 0;
103
+ display: flex;
104
+ flex-direction: column;
105
+ gap: 12px;
106
+ }
107
+
108
+ .species-list li {
109
+ background-color: var(--secondary-color);
110
+ padding: 12px;
111
+ border-radius: 8px;
112
+ border-left: 4px solid var(--primary-color);
113
+ }
114
+
115
+ .species-list li strong {
116
+ display: block;
117
+ margin-bottom: 4px;
118
+ }
119
+
120
+ form {
121
+ display: flex;
122
+ flex-direction: column;
123
+ gap: 16px;
124
+ }
125
+
126
+ label {
127
+ font-weight: 600;
128
+ margin-bottom: 4px;
129
+ }
130
+
131
+ input[type="text"] {
132
+ width: 100%;
133
+ padding: 10px;
134
+ border: 1px solid #ccc;
135
+ border-radius: 8px;
136
+ box-sizing: border-box;
137
+ transition: border-color 0.3s;
138
+ }
139
+
140
+ input[type="text"]:focus {
141
+ outline: none;
142
+ border-color: var(--primary-color);
143
+ box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
144
+ }
145
+
146
+ input[type="submit"] {
147
+ background-color: var(--primary-color);
148
+ color: white;
149
+ padding: 12px 20px;
150
+ border: none;
151
+ border-radius: 8px;
152
+ cursor: pointer;
153
+ font-size: 1em;
154
+ font-weight: 600;
155
+ transition: background-color 0.3s ease;
156
+ }
157
+
158
+ input[type="submit"]:hover {
159
+ background-color: #357abd;
160
+ }
161
+
162
+ .result-section {
163
+ text-align: center;
164
+ font-size: 1.2em;
165
+ font-weight: 600;
166
+ margin-top: 16px;
167
+ padding: 16px;
168
+ background-color: #e8f5e9;
169
+ color: #2e7d32;
170
+ border-radius: var(--border-radius);
171
+ display: {% if result %} block {% else %} none {% endif %};
172
+ }
173
+
174
+ @media (min-width: 768px) {
175
+ .container {
176
+ flex-direction: row;
177
+ gap: 32px;
178
+ }
179
+
180
+ .main-content {
181
+ flex-direction: row;
182
+ }
183
+ }
184
+ </style>
185
  </head>
186
+ <body>
187
+ <div class="container">
188
+ <div class="main-content">
189
+ <div class="form-section card">
190
+ <div class="header">
191
+ <h1>Iris Flower Predictor</h1>
192
+ <p>Enter the measurements to predict the species.</p>
193
+ </div>
194
+ <form action="/predict" method="post">
195
+ <div>
196
+ <label for="sl">Sepal Length (cm)</label>
197
+ <input type="text" id="sl" name="sl" placeholder="e.g., 5.1" required>
198
+ </div>
199
+ <div>
200
+ <label for="sw">Sepal Width (cm)</label>
201
+ <input type="text" id="sw" name="sw" placeholder="e.g., 3.5" required>
202
+ </div>
203
+ <div>
204
+ <label for="pl">Petal Length (cm)</label>
205
+ <input type="text" id="pl" name="pl" placeholder="e.g., 1.4" required>
206
+ </div>
207
+ <div>
208
+ <label for="pw">Petal Width (cm)</label>
209
+ <input type="text" id="pw" name="pw" placeholder="e.g., 0.2" required>
210
+ </div>
211
+ <input type="submit" value="Predict Species">
212
+ </form>
213
+ {% if result %}
214
+ <div class="result-section">
215
+ <p>Predicted Flower Species is: <strong>{{ result }}</strong></p>
216
+ </div>
217
+ {% endif %}
218
+ </div>
219
+
220
+ <div class="image-and-info">
221
+ <div class="iris-image card">
222
+ <img src="https://upload.wikimedia.org/wikipedia/commons/5/56/Iris_versicolor_3.jpg" alt="A beautiful Iris flower" loading="lazy">
223
+ </div>
224
+
225
+ <div class="info-section card">
226
+ <h2>About the Iris Species</h2>
227
+ <ul class="species-list">
228
+ <li>
229
+ <strong>Iris Setosa:</strong> Usually has the shortest and widest petals and sepals. Its flowers are typically bright blue-violet.
230
+ </li>
231
+ <li>
232
+ <strong>Iris Versicolor:</strong> A transitional species with medium-sized petals and sepals. Often has a variety of colors, from blue-violet to yellow.
233
+ </li>
234
+ <li>
235
+ <strong>Iris Virginica:</strong> Tends to have the longest petals and sepals, making it the largest of the three. Flowers are typically a darker blue or violet.
236
+ </li>
237
+ </ul>
238
+ </div>
239
+ </div>
 
 
 
 
 
 
 
 
 
240
  </div>
 
241
  </div>
 
 
 
 
 
242
  </body>
243
+ </html>