Hugging Face's logo

Spaces:
dilpreet77
/
iris
Sleeping

App Files Community
dilpreet77 commited on
Commit
4beb8c2
·
verified ·
1 Parent(s): 8765541

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +128 -130
templates/index.html CHANGED
@@ -1,137 +1,135 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <title>Home</title>
6
- <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/bird.png') }}">
7
- <style>
8
- body {
9
- margin: 0;
10
- padding: 0;
11
- background-image: url("https://cdn-uploads.huggingface.co/production/uploads/68c904e18015407020b54e94/-jH9W0IcdkO3xzcxHuTfS.gif");
12
- background-size: cover;
13
- background-repeat: no-repeat;
14
- background-attachment: fixed;
15
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16
- color: #ffffff;
17
- text-shadow: 1px 1px 3px #000;
18
- display: flex;
19
- flex-direction: column;
20
- align-items: center;
21
- min-height: 100vh;
22
- justify-content: center;
23
- }
24
-
25
- h2 {
26
- margin-top: 30px;
27
- font-size: 28px;
28
- text-align: center;
29
- }
30
-
31
- p {
32
- font-size: 18px;
33
- text-align: center;
34
- margin: 10px;
35
- }
36
-
37
- form {
38
- background: rgba(0, 0, 0, 0.7);
39
- padding: 30px 40px;
40
- border-radius: 15px;
41
- box-shadow: 0 8px 20px rgba(0,0,0,0.5);
42
- width: 90%;
43
- max-width: 400px;
44
- margin-bottom: 30px;
45
- }
46
-
47
- label {
48
- font-weight: bold;
49
- display: block;
50
- margin-top: 15px;
51
- }
52
-
53
- input {
54
- width: 100%;
55
- padding: 12px;
56
- border: none;
57
- border-radius: 8px;
58
- margin-top: 5px;
59
- font-size: 15px;
60
- box-shadow: 0 2px 5px rgba(0,0,0,0.3);
61
- }
62
-
63
- button {
64
- width: 100%;
65
- padding: 12px;
66
- margin-top: 20px;
67
- font-size: 16px;
68
- font-weight: bold;
69
- border: none;
70
- border-radius: 8px;
71
- cursor: pointer;
72
- background-color: #28a745;
73
- color: white;
74
- transition: background 0.3s ease;
75
- }
76
-
77
- button:hover {
78
- background-color: #218838;
79
- }
80
-
81
- button a {
82
- color: white;
83
- text-decoration: none;
84
- display: block;
85
- width: 100%;
86
- height: 100%;
87
- }
88
-
89
- img {
90
- margin-top: 20px;
91
- border-radius: 12px;
92
- box-shadow: 0 4px 15px rgba(0,0,0,0.6);
93
- }
94
-
95
- @media (max-width: 480px) {
96
- form {
97
- padding: 20px;
98
- }
99
-
100
- h2 {
101
- font-size: 24px;
102
- }
103
- }
104
- </style>
105
  </head>
106
- <body>
107
- <form action="/predict" method="post">
108
- <label for="sl">Enter Sepal Length:</label>
109
- <input type="text" name="sl" required>
110
-
111
- <label for="sw">Enter Sepal Width:</label>
112
- <input type="text" name="sw" required>
113
-
114
- <label for="pl">Enter Petal Length:</label>
115
- <input type="text" name="pl" required>
116
-
117
- <label for="pw">Enter Petal Width:</label>
118
- <input type="text" name="pw" required>
119
-
120
- <button type="submit">Predict</button>
121
- <button><a href="/">Refresh</a></button>
122
- </form>
123
-
124
- {% if data %}
125
- <h2>Prediction Result</h2>
126
- <p>The predicted flower species is: <strong>{{ data }}</strong></p>
127
- {% endif %}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
128
 
129
- {% if data=="setosa" %}
130
- <img src="https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/iVXMOLPdx1ctqWnvnFED_.png" alt="IRIS SETOSA" width="200" height="200">
131
- {% elif data=="versicolor" %}
132
- <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20versicolor.png?v=1680866854461" alt="IRIS VERSICOLOR" width="200" height="200">
133
- {% elif data=="virginica" %}
134
- <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20Virginica.png?v=1680866857022" alt="IRIS VIRGINICA" width="200" height="200">
135
- {% endif %}
136
  </body>
137
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <title>Iris Predictor</title>
6
+ <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/bird.png') }}">
7
+
8
+ <!-- Tailwind CSS CDN (for prototyping) -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <!-- Adjust Tailwind config to enable backdrop-filter (if needed) -->
11
+ <style>
12
+ /* Tailwind config for backdrop-filter if required (most new versions support it) */
13
+ @layer utilities {
14
+ .backdrop-blur-3xl { backdrop-filter: blur(40px); }
15
+ }
16
+ </style>
17
+
18
+ <!-- Font Awesome Free CDN -->
19
+ <link
20
+ rel="stylesheet"
21
+ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
22
+ integrity="sha512-…(use correct integrity)…"
23
+ crossorigin="anonymous"
24
+ referrerpolicy="no-referrer"
25
+ />
26
+
27
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  </head>
29
+ <body class="min-h-screen bg-cover bg-center text-white" style="background-image: url('https://cdn-uploads.huggingface.co/production/uploads/68c904e18015407020b54e94/-jH9W0IcdkO3xzcxHuTfS.gif');">
30
+
31
+ <div class="flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
32
+ <div class="max-w-md w-full space-y-8">
33
+ <div class="text-center">
34
+ <h2 class="text-3xl font-extrabold">🌸 Iris Flower Predictor</h2>
35
+ </div>
36
+ <form action="/predict" method="post" class="glass bg-white/10 backdrop-blur-3xl rounded-3xl shadow-lg p-8 space-y-6">
37
+ <!-- sepal length -->
38
+ <div>
39
+ <label for="sl" class="block text-sm font-semibold">Sepal Length</label>
40
+ <div class="mt-1 relative">
41
+ <input type="text" name="sl" id="sl" required
42
+ class="appearance-none block w-full px-4 py-3 bg-white/20 placeholder-white/70 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
43
+ placeholder="e.g., 5.1">
44
+ <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
45
+ <i class="fas fa-ruler-vertical text-white/70"></i>
46
+ </div>
47
+ </div>
48
+ </div>
49
+
50
+ <!-- sepal width -->
51
+ <div>
52
+ <label for="sw" class="block text-sm font-semibold">Sepal Width</label>
53
+ <div class="mt-1 relative">
54
+ <input type="text" name="sw" id="sw" required
55
+ class="appearance-none block w-full px-4 py-3 bg-white/20 placeholder-white/70 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
56
+ placeholder="e.g., 3.5">
57
+ <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
58
+ <i class="fas fa-arrows-alt-h text-white/70"></i>
59
+ </div>
60
+ </div>
61
+ </div>
62
+
63
+ <!-- petal length -->
64
+ <div>
65
+ <label for="pl" class="block text-sm font-semibold">Petal Length</label>
66
+ <div class="mt-1 relative">
67
+ <input type="text" name="pl" id="pl" required
68
+ class="appearance-none block w-full px-4 py-3 bg-white/20 placeholder-white/70 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
69
+ placeholder="e.g., 1.4">
70
+ <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
71
+ <i class="fas fa-long-arrow-alt-down text-white/70"></i>
72
+ </div>
73
+ </div>
74
+ </div>
75
+
76
+ <!-- petal width -->
77
+ <div>
78
+ <label for="pw" class="block text-sm font-semibold">Petal Width</label>
79
+ <div class="mt-1 relative">
80
+ <input type="text" name="pw" id="pw" required
81
+ class="appearance-none block w-full px-4 py-3 bg-white/20 placeholder-white/70 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
82
+ placeholder="e.g., 0.2">
83
+ <div class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
84
+ <i class="fas fa-arrows-alt-v text-white/70"></i>
85
+ </div>
86
+ </div>
87
+ </div>
88
+
89
+ <!-- buttons -->
90
+ <div class="space-y-4">
91
+ <button type="submit"
92
+ class="w-full flex justify-center py-3 px-6 bg-gradient-to-r from-indigo-500 to-purple-500 hover:from-purple-500 hover:to-indigo-500 rounded-xl text-lg font-bold transition transform hover:-translate-y-1 shadow-md">
93
+ <i class="fas fa-magic mr-2"></i> Predict
94
+ </button>
95
+ <button type="button"
96
+ onclick="window.location='/'"
97
+ class="w-full flex justify-center py-3 px-6 bg-gray-700/50 hover:bg-gray-700/70 rounded-xl text-lg font-semibold transition transform hover:-translate-y-1 shadow">
98
+ <i class="fas fa-sync-alt mr-2"></i> Refresh
99
+ </button>
100
+ </div>
101
+
102
+ </form>
103
+
104
+ {% if data %}
105
+ <div class="glass bg-white/10 backdrop-blur-3xl rounded-3xl shadow-lg p-6 mt-6 text-center animate-fadeIn">
106
+ <p class="text-xl">The predicted flower species is:</p>
107
+ <p class="text-2xl font-bold text-indigo-200 mt-2">{{ data }}</p>
108
+ <div class="mt-4">
109
+ {% if data=="setosa" %}
110
+ <img src="https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/iVXMOLPdx1ctqWnvnFED_.png" alt="IRIS SETOSA" class="mx-auto w-40 h-40 rounded-xl shadow-2xl">
111
+ {% elif data=="versicolor" %}
112
+ <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-xl shadow-2xl">
113
+ {% elif data=="virginica" %}
114
+ <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-xl shadow-2xl">
115
+ {% endif %}
116
+ </div>
117
+ </div>
118
+ {% endif %}
119
+
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Optional: Animation classes -->
124
+ <style>
125
+ @keyframes fadeIn {
126
+ from { opacity: 0; transform: scale(0.95); }
127
+ to { opacity: 1; transform: scale(1); }
128
+ }
129
+ .animate-fadeIn {
130
+ animation: fadeIn 0.5s ease-in-out;
131
+ }
132
+ </style>
133
 
 
 
 
 
 
 
 
134
  </body>
135
  </html>