Hugging Face's logo

Spaces:
Prashant43
/
iris
Sleeping

App Files Community
Prashant43 commited on
Commit
9818d62
·
verified ·
1 Parent(s): ab2853f

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +72 -129
templates/index.html CHANGED
@@ -1,135 +1,78 @@
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://images.google.com/');">
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>
 
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>