Hugging Face's logo

Spaces:
LovnishVerma
/
testiris
Sleeping

App Files Community
LovnishVerma commited on
Commit
294abcd
·
verified ·
1 Parent(s): a74ced8

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +180 -83
templates/index.html CHANGED
@@ -1,85 +1,182 @@
1
- <html>
2
- <head>
3
- <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/indiaai-logo.jpeg') }}">
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
-
18
- form {
19
- background-color: rgba(0, 0, 0, 0.6);
20
- padding: 20px;
21
- border-radius: 10px;
22
- width: 300px;
23
- margin: 50px auto;
24
- box-shadow: 0 0 10px rgba(0,0,0,0.5);
25
- }
26
-
27
- input, button {
28
- margin: 10px 0;
29
- width: 100%;
30
- padding: 10px;
31
- border: none;
32
- border-radius: 5px;
33
- font-size: 16px;
34
- }
35
-
36
- button {
37
- background-color: #4CAF50;
38
- color: white;
39
- cursor: pointer;
40
- }
41
-
42
- button:hover {
43
- background-color: #45a049;
44
- }
45
-
46
- h2, p, img {
47
- text-align: center;
48
- }
49
- </style>
50
- </head>
51
- <body>
52
- <form action="/predict" method="post">
53
- <label for="sl">Enter sepal_length:</label><br>
54
- <input type="text" name="sl" required><br>
55
-
56
- <label for="sw">Enter sepal_width:</label><br>
57
- <input type="text" name="sw" required><br>
58
-
59
- <label for="pl">Enter petal_length:</label><br>
60
- <input type="text" name="pl" required><br>
61
-
62
- <label for="pw">Enter petal_width:</label><br>
63
- <input type="text" name="pw" required><br>
64
-
65
- <button type="submit">Submit</button> <br>
66
- <button><a href="/">Refresh</a></button>
67
- </form>
68
-
69
- {% if data %}
70
- <h2>Prediction Result</h2>
71
- <p>The predicted flower species is: <strong>{{ data }}</strong></p>
72
- {% endif %}
73
- <center>
74
- {% if data=="setosa" %}
75
- <img src="https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/iVXMOLPdx1ctqWnvnFED_.png" alt="IRIS SETOSA" width="200" height="200">
76
- {% elif data=="versicolor" %}
77
- <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20versicolor.png?v=1680866854461" alt="IRIS VERSICOLOR" width="200" height="200">
78
- {% elif data=="virginica" %}
79
- <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20Virginica.png?v=1680866857022" alt="IRIS VIRGINICA" width="200" height="200">
80
- {% endif %}
81
- </center>
82
- </body>
83
- </html>
 
 
 
 
 
 
 
 
 
 
 
84
 
 
 
 
 
85
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/indiaai-logo.jpeg') }}">
7
+ <title>Iris Prediction</title>
8
+
9
+ <style>
10
+ /* Fullscreen video background */
11
+ #myVideo {
12
+ position: fixed;
13
+ top: 0;
14
+ left: 0;
15
+ min-width: 100%;
16
+ min-height: 100%;
17
+ object-fit: cover;
18
+ z-index: -1;
19
+ }
20
+
21
+ /* Overlay content */
22
+ .content {
23
+ position: fixed;
24
+ bottom: 0;
25
+ width: 100%;
26
+ background: rgba(0, 0, 0, 0.6);
27
+ color: #f1f1f1;
28
+ text-align: center;
29
+ padding: 20px;
30
+ }
31
+
32
+ /* Form styling */
33
+ form {
34
+ background-color: rgba(0, 0, 0, 0.65);
35
+ padding: 20px;
36
+ border-radius: 12px;
37
+ width: 90%;
38
+ max-width: 400px;
39
+ margin: 100px auto 40px auto;
40
+ box-shadow: 0 4px 15px rgba(0,0,0,0.6);
41
+ color: white;
42
+ }
43
+
44
+ label {
45
+ display: block;
46
+ margin: 8px 0 4px;
47
+ font-weight: bold;
48
+ }
49
+
50
+ input {
51
+ margin-bottom: 12px;
52
+ width: 100%;
53
+ padding: 10px;
54
+ border: none;
55
+ border-radius: 6px;
56
+ font-size: 16px;
57
+ }
58
+
59
+ button {
60
+ width: 100%;
61
+ padding: 12px;
62
+ margin-top: 8px;
63
+ border: none;
64
+ border-radius: 6px;
65
+ font-size: 16px;
66
+ cursor: pointer;
67
+ transition: background 0.3s ease;
68
+ }
69
+
70
+ button[type="submit"] {
71
+ background-color: #4CAF50;
72
+ color: white;
73
+ }
74
+
75
+ button[type="submit"]:hover {
76
+ background-color: #45a049;
77
+ }
78
+
79
+ .refresh-btn {
80
+ background-color: #007BFF;
81
+ color: white;
82
+ text-decoration: none;
83
+ display: inline-block;
84
+ text-align: center;
85
+ }
86
+
87
+ .refresh-btn:hover {
88
+ background-color: #0056b3;
89
+ }
90
+
91
+ h2, p, img {
92
+ text-align: center;
93
+ margin-top: 20px;
94
+ }
95
 
96
+ img {
97
+ border-radius: 8px;
98
+ margin-top: 10px;
99
+ }
100
 
101
+ /* Video control button */
102
+ #myBtn {
103
+ width: 180px;
104
+ font-size: 16px;
105
+ padding: 10px;
106
+ border: none;
107
+ border-radius: 6px;
108
+ background: #000;
109
+ color: #fff;
110
+ cursor: pointer;
111
+ transition: background 0.3s ease;
112
+ }
113
+
114
+ #myBtn:hover {
115
+ background: #ddd;
116
+ color: black;
117
+ }
118
+ </style>
119
+ </head>
120
+ <body>
121
+ <!-- Background Video -->
122
+ <video autoplay muted loop id="myVideo">
123
+ <source src="{{ url_for('static', filename='video/rain.mp4') }}" type="video/mp4">
124
+ Your browser does not support the video tag.
125
+ </video>
126
+
127
+ <!-- Prediction Form -->
128
+ <form action="/predict" method="post">
129
+ <label for="sl">Sepal Length:</label>
130
+ <input type="text" id="sl" name="sl" placeholder="e.g. 5.1" required>
131
+
132
+ <label for="sw">Sepal Width:</label>
133
+ <input type="text" id="sw" name="sw" placeholder="e.g. 3.5" required>
134
+
135
+ <label for="pl">Petal Length:</label>
136
+ <input type="text" id="pl" name="pl" placeholder="e.g. 1.4" required>
137
+
138
+ <label for="pw">Petal Width:</label>
139
+ <input type="text" id="pw" name="pw" placeholder="e.g. 0.2" required>
140
+
141
+ <button type="submit">Predict</button>
142
+ <a href="/" class="refresh-btn"><button type="button">Refresh</button></a>
143
+ </form>
144
+
145
+ <!-- Prediction Result -->
146
+ {% if data %}
147
+ <h2>Prediction Result</h2>
148
+ <p>The predicted flower species is: <strong>{{ data }}</strong></p>
149
+ <div style="text-align:center;">
150
+ {% if data == "setosa" %}
151
+ <img src="https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/iVXMOLPdx1ctqWnvnFED_.png" alt="IRIS SETOSA" width="200" height="200">
152
+ {% elif data == "versicolor" %}
153
+ <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20versicolor.png?v=1680866854461" alt="IRIS VERSICOLOR" width="200" height="200">
154
+ {% elif data == "virginica" %}
155
+ <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20Virginica.png?v=1680866857022" alt="IRIS VIRGINICA" width="200" height="200">
156
+ {% endif %}
157
+ </div>
158
+ {% endif %}
159
+
160
+ <!-- Video Overlay -->
161
+ <div class="content">
162
+ <h1>Iris Flower Classifier</h1>
163
+ <p>Enter flower measurements and get instant prediction</p>
164
+ <button id="myBtn" onclick="toggleVideo()">Pause</button>
165
+ </div>
166
+
167
+ <script>
168
+ const video = document.getElementById("myVideo");
169
+ const btn = document.getElementById("myBtn");
170
+
171
+ function toggleVideo() {
172
+ if (video.paused) {
173
+ video.play();
174
+ btn.innerText = "Pause";
175
+ } else {
176
+ video.pause();
177
+ btn.innerText = "Play";
178
+ }
179
+ }
180
+ </script>
181
+ </body>
182
+ </html>