Hugging Face's logo

Spaces:
dilpreet77
/
iris
Sleeping

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

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +133 -74
templates/index.html CHANGED
@@ -1,78 +1,137 @@
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/68c904e18015407020b54e94/-jH9W0IcdkO3xzcxHuTfS.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>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>