Hugging Face's logo

Spaces:
arshtech
/
IRIS_data_predictor
Sleeping

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

Update templates/form.html

Browse files
Files changed (1) hide show
  1. templates/form.html +177 -236
templates/form.html CHANGED
@@ -1,243 +1,184 @@
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>
 
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
+ body {
9
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
+ background: linear-gradient(120deg, #89f7fe, #66a6ff);
11
+ margin: 0;
12
+ padding: 0;
13
+ color: #333;
14
+ }
15
+
16
+ header {
17
+ text-align: center;
18
+ padding: 20px;
19
+ background: rgba(255, 255, 255, 0.2);
20
+ backdrop-filter: blur(10px);
21
+ }
22
+
23
+ header h1 {
24
+ font-size: 2.5rem;
25
+ color: #fff;
26
+ letter-spacing: 2px;
27
+ }
28
+
29
+ .container {
30
+ max-width: 900px;
31
+ margin: 20px auto;
32
+ padding: 20px;
33
+ background: #fff;
34
+ border-radius: 12px;
35
+ box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
36
+ }
37
+
38
+ form {
39
+ margin-top: 20px;
40
+ display: grid;
41
+ grid-template-columns: 1fr 1fr;
42
+ gap: 15px;
43
+ }
44
+
45
+ form label {
46
+ font-weight: bold;
47
+ }
48
+
49
+ form input {
50
+ padding: 10px;
51
+ border: 1px solid #ddd;
52
+ border-radius: 6px;
53
+ font-size: 1rem;
54
+ width: 100%;
55
+ }
56
+
57
+ form button {
58
+ grid-column: span 2;
59
+ padding: 12px;
60
+ font-size: 1rem;
61
+ background: #66a6ff;
62
+ color: #fff;
63
+ border: none;
64
+ border-radius: 8px;
65
+ cursor: pointer;
66
+ transition: 0.3s;
67
+ }
68
+
69
+ form button:hover {
70
+ background: #4d8fe3;
71
+ }
72
+
73
+ .result {
74
+ margin-top: 30px;
75
+ font-size: 1.2rem;
76
+ font-weight: bold;
77
+ text-align: center;
78
+ color: #2c3e50;
79
+ }
80
+
81
+ .species-info {
82
+ display: flex;
83
+ flex-wrap: wrap;
84
+ gap: 20px;
85
+ margin-top: 40px;
86
+ }
87
+
88
+ .species-card {
89
+ flex: 1 1 calc(33% - 20px);
90
+ background: #f9f9f9;
91
+ border-radius: 10px;
92
+ box-shadow: 0px 5px 15px rgba(0,0,0,0.1);
93
+ overflow: hidden;
94
+ text-align: center;
95
+ padding: 15px;
96
+ transition: transform 0.3s;
97
+ }
98
+
99
+ .species-card:hover {
100
+ transform: translateY(-8px);
101
+ }
102
+
103
+ .species-card img {
104
+ width: 100%;
105
+ height: 180px;
106
+ object-fit: cover;
107
+ }
108
+
109
+ .species-card h3 {
110
+ margin-top: 10px;
111
+ color: #444;
112
+ }
113
+
114
+ .species-card p {
115
+ font-size: 0.9rem;
116
+ color: #666;
117
+ padding: 0 10px;
118
+ }
119
+
120
+ @media (max-width: 768px) {
121
+ .species-card {
122
+ flex: 1 1 100%;
123
+ }
124
+ }
125
+ </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
126
  </head>
127
  <body>
128
+
129
+ <header>
130
+ <h1>Iris Flower Predictor</h1>
131
+ </header>
132
+
133
+ <div class="container">
134
+ <h2>Enter Flower Measurements</h2>
135
+ <form action="/predict" method="post">
136
+ <div>
137
+ <label for="sl">Sepal Length (cm)</label>
138
+ <input type="number" step="0.1" min="0" name="sl" id="sl" placeholder="e.g. 5.1" required>
139
+ </div>
140
+ <div>
141
+ <label for="sw">Sepal Width (cm)</label>
142
+ <input type="number" step="0.1" min="0" name="sw" id="sw" placeholder="e.g. 3.5" required>
143
+ </div>
144
+ <div>
145
+ <label for="pl">Petal Length (cm)</label>
146
+ <input type="number" step="0.1" min="0" name="pl" id="pl" placeholder="e.g. 1.4" required>
147
+ </div>
148
+ <div>
149
+ <label for="pw">Petal Width (cm)</label>
150
+ <input type="number" step="0.1" min="0" name="pw" id="pw" placeholder="e.g. 0.2" required>
151
+ </div>
152
+ <button type="submit">Find My Flower</button>
153
+ </form>
154
+
155
+ {% if result %}
156
+ <div class="result">
157
+ Predicted Flower type is: {{ result }}
158
+ </div>
159
+ {% endif %}
160
+
161
+ <h2 style="margin-top:40px;">About Iris Species</h2>
162
+ <div class="species-info">
163
+ <div class="species-card">
164
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/Irissetosa1.jpg" alt="Iris Setosa">
165
+ <h3>Iris Setosa</h3>
166
+ <p>Setosa flowers are generally small, with narrow petals and light bluish-purple shades. They are distinct due to their short, broad sepal structure.</p>
167
+ </div>
168
+
169
+ <div class="species-card">
170
+ <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Iris_versicolor_2.jpg" alt="Iris Versicolor">
171
+ <h3>Iris Versicolor</h3>
172
+ <p>Versicolor blooms are violet-blue with yellow accents. Medium-sized petals make them recognizable as Blue Flag Irises in wetlands.</p>
173
+ </div>
174
+
175
+ <div class="species-card">
176
+ <img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/Iris_virginica.jpg" alt="Iris Virginica">
177
+ <h3>Iris Virginica</h3>
178
+ <p>Virginica flowers have slender, long petals with rich purple hues. They usually grow near rivers and marshes in North America.</p>
179
+ </div>
 
 
180
  </div>
181
+ </div>
182
+
183
  </body>
184
+ </html>