Hugging Face's logo

Spaces:
Prashant43
/
iris
Sleeping

App Files Community
Prashant43 commited on
Commit
825b55a
·
verified ·
1 Parent(s): d66ab0b

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +83 -63
templates/index.html CHANGED
@@ -1,78 +1,98 @@
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
  <html>
2
+ <head>
3
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
4
+ <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/bird.png') }}">
5
+ <title>Home</title>
6
+ <style>
7
+ body {
8
+ background-image: url("https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/6-OP-BRC1dAJP0iIaxCrd.gif");
9
+ background-size: cover;
10
+ background-repeat: no-repeat;
11
+ background-attachment: fixed;
12
+ font-family: Arial, sans-serif;
13
+ color: white;
14
+ text-shadow: 1px 1px 2px black;
15
+ display: flex;
16
+ justify-content: center;
17
+ align-items: center;
18
+ min-height: 100vh;
19
+ margin: 0;
20
+ padding: 10px;
21
+ }
22
+ form {
23
+ background-color: rgba(0, 0, 0, 0.6);
24
+ padding: 20px;
25
+ border-radius: 10px;
26
+ width: 100%;
27
+ max-width: 350px; /* prevents it from being too wide on desktop */
28
+ box-shadow: 0 0 10px rgba(0,0,0,0.5);
29
+ box-sizing: border-box;
30
+ }
31
+ input, button {
32
+ margin: 10px 0;
33
+ width: 100%;
34
+ padding: 12px;
35
+ border: none;
36
+ border-radius: 5px;
37
+ font-size: 16px;
38
+ box-sizing: border-box;
39
+ }
40
+ button {
41
+ background-color: #4CAF50;
42
+ color: white;
43
+ cursor: pointer;
44
+ }
45
+ button:hover {
46
+ background-color: #45a049;
47
+ }
48
+ h2, p, img {
49
+ text-align: center;
50
+ }
51
+ .refresh-link {
52
+ display: block;
53
+ text-align: center;
54
+ text-decoration: none;
55
+ background: #4CAF50;
56
+ color: white;
57
+ padding: 12px;
58
+ border-radius: 5px;
59
+ margin: 15px auto 0;
60
+ max-width: 350px;
61
+ }
62
+ /* Make text slightly smaller on very small screens */
63
+ @media (max-width: 400px) {
64
+ input, button, .refresh-link {
65
+ font-size: 14px;
66
  padding: 10px;
 
 
 
 
 
 
 
 
 
 
 
67
  }
68
+ }
69
+ </style>
70
+ </head>
71
+ <body>
72
+ <div>
 
73
  <form action="/predict" method="post">
74
+ <label for="sl">Enter sepal_length:</label>
75
+ <input type="text" name="sl" required>
76
 
77
+ <label for="sw">Enter sepal_width:</label>
78
+ <input type="text" name="sw" required>
79
 
80
+ <label for="pl">Enter petal_length:</label>
81
+ <input type="text" name="pl" required>
82
 
83
+ <label for="pw">Enter petal_width:</label>
84
+ <input type="text" name="pw" required>
85
 
86
+ <button type="submit">Submit</button>
 
87
  </form>
88
 
89
+ <a href="/" class="refresh-link">Refresh</a>
90
+
91
  {% if data %}
92
  <h2>Prediction Result</h2>
93
  <p>The predicted flower species is: <strong>{{ data }}</strong></p>
94
  {% endif %}
95
+
96
  {% if data=="setosa" %}
97
+ <center><img src="https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/iVXMOLPdx1ctqWnvnFED_.png" alt="IRIS SETOSA" width="200" height="200"></center>
98
+ {% elif data=