Hugging Face's logo

Spaces:
Prashant43
/
iris
Sleeping

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

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +63 -83
templates/index.html CHANGED
@@ -1,98 +1,78 @@
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=
 
 
 
 
 
 
 
 
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>