Hugging Face's logo

Spaces:
Prashant43
/
iris
Sleeping

App Files Community
Prashant43 commited on
Commit
b35c40f
·
verified ·
1 Parent(s): e3b6c6f

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +129 -72
templates/index.html CHANGED
@@ -1,78 +1,135 @@
1
- <html>
2
- <head>
3
- <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/bird.png') }}">
4
- <title>Home</title>
5
- <!-- <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> -->
6
- <!-- WE WILL USE INTERNAL CSS -->
7
- <style>
8
- body {
9
- background-image: url("https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/6-OP-BRC1dAJP0iIaxCrd.gif"); /* Example GIF */
10
- background-size: cover;
11
- background-repeat: no-repeat;
12
- background-attachment: fixed;
13
- font-family: Arial, sans-serif;
14
- color: white;
15
- text-shadow: 1px 1px 2px black;
16
- }
17
- form {
18
- background-color: rgba(0, 0, 0, 0.6);
19
- padding: 20px;
20
- border-radius: 10px;
21
- width: 300px;
22
- margin: 50px auto;
23
- box-shadow: 0 0 10px rgba(0,0,0,0.5);
24
- }
25
- input, button {
26
- margin: 10px 0;
27
- width: 100%;
28
- padding: 10px;
29
- border: none;
30
- border-radius: 5px;
31
- font-size: 16px;
32
- }
33
- button {
34
- background-color: #4CAF50;
35
- color: white;
36
- cursor: pointer;
37
- }
38
- button:hover {
39
- background-color: #45a049;
40
- }
41
- h2, p, img {
42
- text-align: center;
43
- }
44
- </style>
45
- </head>
46
- <body>
47
- <form action="/predict" method="post">
48
- <label for="sl">Enter sepal_length:</label><br>
49
- <input type="text" name="sl" required><br>
50
 
51
- <label for="sw">Enter sepal_width:</label><br>
52
- <input type="text" name="sw" required><br>
 
 
 
 
 
 
 
53
 
54
- <label for="pl">Enter petal_length:</label><br>
55
- <input type="text" name="pl" required><br>
 
 
 
 
 
 
56
 
57
- <label for="pw">Enter petal_width:</label><br>
58
- <input type="text" name="pw" required><br>
 
59
 
60
- <button type="submit">Submit</button> <br>
61
- <button><a href="/">Refresh</a></button>
62
- </form>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
 
64
- {% if data %}
65
- <h2>Prediction Result</h2>
66
- <p>The predicted flower species is: <strong>{{ data }}</strong></p>
67
- {% endif %}
68
- <center>
69
- {% if data=="setosa" %}
70
- <img src="https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/iVXMOLPdx1ctqWnvnFED_.png" alt="IRIS SETOSA" width="200" height="200">
71
- {% elif data=="versicolor" %}
72
- <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20versicolor.png?v=1680866854461" alt="IRIS VERSICOLOR" width="200" height="200">
73
- {% elif data=="virginica" %}
74
- <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20Virginica.png?v=1680866857022" alt="IRIS VIRGINICA" width="200" height="200">
75
- {% endif %}
76
- </center>
77
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  </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>