Hugging Face's logo

Spaces:
arshtech
/
IRIS_data_predictor
Sleeping

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

Update templates/form.html

Browse files
Files changed (1) hide show
  1. templates/form.html +76 -29
templates/form.html CHANGED
@@ -1,35 +1,82 @@
1
- <html>
 
 
 
 
 
 
 
 
 
2
 
 
 
 
 
 
3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4
 
5
- <head> <title> AIML -Form </title></head>
6
- <body>
7
- <H1> IRIS Flower Classification</H1>
8
- <form action="/predict" method="post">
9
- <table>
10
- <tr>
11
- <td> Sepal Length </td> <td> <input type="text" name="sl"> </td>
12
- </tr>
13
- <tr>
14
- <td> Sepal Width </td> <td> <input type="text" name="sw"> </td>
15
- </tr>
16
- <tr>
17
- <td> Petal Length </td> <td> <input type="text" name="pl"> </td>
18
- </tr>
19
- <tr>
20
- <td> Petal Width </td> <td> <input type="text" name="pw"> </td>
21
- </tr>
22
- <tr> <td> <input type="submit"> </td></tr>
23
- </table>
24
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
25
 
26
-
27
- {% if result %}
28
- <p> Predicted Flower type is {{result}} </p>
29
- {% endif %}
30
- </form>
31
- </body>
32
  </html>
33
-
34
-
35
-
 
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>