Hugging Face's logo

Spaces:
Prashant43
/
iris
Sleeping

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

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +85 -73
templates/index.html CHANGED
@@ -1,78 +1,90 @@
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
+ <!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
+ <title>Iris Prediction</title>
7
+ <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='img/bird.png') }}">
8
+ <!-- Tailwind CSS CDN -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <!-- Font Awesome CDN -->
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
12
+ <style>
13
+ body {
14
+ background-image: url("https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/6-OP-BRC1dAJP0iIaxCrd.gif");
15
+ background-size: cover;
16
+ background-repeat: no-repeat;
17
+ background-attachment: fixed;
18
+ }
19
+ .glass {
20
+ backdrop-filter: blur(10px);
21
+ background: rgba(255, 255, 255, 0.15);
22
+ border: 1px solid rgba(255, 255, 255, 0.25);
23
+ }
24
+ </style>
25
+ </head>
26
+ <body class="flex flex-col items-center justify-center min-h-screen text-white px-4">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
 
28
+ <!-- Form Container -->
29
+ <form action="/predict" method="post"
30
+ class="glass w-full max-w-md p-6 rounded-2xl shadow-xl text-white space-y-4">
31
 
32
+ <h1 class="text-center text-2xl font-bold mb-4">
33
+ <i class="fa-solid fa-seedling mr-2"></i> Iris Flower Predictor
34
+ </h1>
35
 
36
+ <div>
37
+ <label class="block mb-1"><i class="fa-solid fa-ruler-horizontal mr-2"></i>Sepal Length</label>
38
+ <input type="text" name="sl" required
39
+ class="w-full px-3 py-2 rounded-lg bg-white/20 placeholder-gray-200 text-white focus:outline-none focus:ring-2 focus:ring-green-400">
40
+ </div>
41
 
42
+ <div>
43
+ <label class="block mb-1"><i class="fa-solid fa-ruler-horizontal mr-2"></i>Sepal Width</label>
44
+ <input type="text" name="sw" required
45
+ class="w-full px-3 py-2 rounded-lg bg-white/20 placeholder-gray-200 text-white focus:outline-none focus:ring-2 focus:ring-green-400">
46
+ </div>
47
 
48
+ <div>
49
+ <label class="block mb-1"><i class="fa-solid fa-ruler-vertical mr-2"></i>Petal Length</label>
50
+ <input type="text" name="pl" required
51
+ class="w-full px-3 py-2 rounded-lg bg-white/20 placeholder-gray-200 text-white focus:outline-none focus:ring-2 focus:ring-green-400">
52
+ </div>
53
+
54
+ <div>
55
+ <label class="block mb-1"><i class="fa-solid fa-ruler-vertical mr-2"></i>Petal Width</label>
56
+ <input type="text" name="pw" required
57
+ class="w-full px-3 py-2 rounded-lg bg-white/20 placeholder-gray-200 text-white focus:outline-none focus:ring-2 focus:ring-green-400">
58
+ </div>
59
+
60
+ <button type="submit"
61
+ class="w-full py-2 mt-2 rounded-lg bg-green-500 hover:bg-green-600 transition flex items-center justify-center gap-2">
62
+ <i class="fa-solid fa-paper-plane"></i> Submit
63
+ </button>
64
+
65
+ <a href="/"
66
+ class="block text-center w-full py-2 rounded-lg bg-blue-500 hover:bg-blue-600 transition mt-2">
67
+ <i class="fa-solid fa-rotate-right"></i> Refresh
68
+ </a>
69
+ </form>
70
+
71
+ <!-- Prediction Output -->
72
+ {% if data %}
73
+ <div class="glass mt-6 p-6 w-full max-w-md rounded-2xl text-center">
74
+ <h2 class="text-xl font-semibold mb-2"><i class="fa-solid fa-leaf mr-2"></i>Prediction Result</h2>
75
+ <p class="text-lg mb-4">The predicted flower species is:
76
+ <strong class="text-yellow-300">{{ data }}</strong>
77
+ </p>
78
+
79
+ {% if data=="setosa" %}
80
+ <img src="https://cdn-uploads.huggingface.co/production/uploads/6474405f90330355db146c76/iVXMOLPdx1ctqWnvnFED_.png" alt="IRIS SETOSA" class="mx-auto w-40 h-40 rounded-lg shadow-lg">
81
+ {% elif data=="versicolor" %}
82
+ <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-lg shadow-lg">
83
+ {% elif data=="virginica" %}
84
+ <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-lg shadow-lg">
85
+ {% endif %}
86
+ </div>
87
+ {% endif %}
88
+
89
+ </body>
90
+ </html>