Hugging Face's logo

Spaces:
LovnishVerma
/
flaskpredict
Sleeping

App Files Community
Lovnish Verma commited on
Commit
69a83f3
·
1 Parent(s): 846075f

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +91 -7
templates/index.html CHANGED
@@ -1,10 +1,94 @@
1
- <!DOCTYPE html>
2
  <html>
3
- <head>
4
- <title>Flask Index Page</title>
5
- </head>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  <body>
7
- <h1>Welcome to my Flask App</h1>
8
- <p>This is the index page.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </body>
10
- </html>
 
 
1
  <html>
2
+ <title>Iris Flower Prediction</title>
3
+ <head>
4
+ <style>
5
+ body{
6
+
7
+ background-color:floralwhite
8
+ }
9
+
10
+ div{
11
+ color : #cd5c5c;
12
+ text-align: center;
13
+ font-style: oblique;
14
+ font-weight: bold;
15
+ box-shadow: 10px 10px 5px #808080;
16
+ animation: bounce 2s infinite;
17
+ }
18
+ @keyframes bounce {
19
+ 0% {
20
+ transform: translateY(0);
21
+ }
22
+ 25% {
23
+ transform: translateY(-20px);
24
+ }
25
+ 50% {
26
+ transform: translateY(0);
27
+ }
28
+ 75% {
29
+ transform: translateY(20px);
30
+ }
31
+ 100% {
32
+ transform: translateY(0);
33
+ }
34
+ } h2{
35
+ color: #cd5c5c;
36
+ text-align: center;
37
+ }
38
+ </style>
39
+ </head>
40
  <body>
41
+
42
+ <form action="/irisf" method="POST">
43
+ <table class="table table-striped trans" align="center">
44
+
45
+ <div class="row">
46
+ <tr align="center">
47
+ <div class="col-sm-6">
48
+ <td><label for="swidth" class="form-label">Sepal Width</label></td></div>
49
+ <div class="col-sm-6">
50
+ <td><input type="text" name="swidth" placeholder="Enter width of Sepal" required></td></div>
51
+ </tr>
52
+ <tr align="center">
53
+ <div class="col-sm-6">
54
+ <td><label for="sheight" class="form-label">Sepal Height</label></td></div>
55
+ <div class="col-sm-6">
56
+ <td><input type="text" name="sheight" placeholder="Enter height of Sepal" required></td></div>
57
+ </tr>
58
+ <tr align="center">
59
+ <div class="col-sm-6">
60
+ <td><label for="pwidth" class="form-label">Petal Width</label></td></div>
61
+ <div class="col-sm-6">
62
+ <td><input type="text" name="pwidth" placeholder="Enter width of Petal" required></td></div>
63
+ </tr>
64
+ <tr align="center">
65
+ <div class="col-sm-6">
66
+ <td><label for="pheight" class="form-label">Petal Height</label></td></div>
67
+ <div class="col-sm-6">
68
+ <td><input type="text" name="pheight" placeholder="Enter height of Petal" required></td></div>
69
+ </tr>
70
+
71
+ <tr>
72
+ <td colspan="2" align="center">
73
+ <input type="submit" value="Predict Flower Type">
74
+ <input type="reset" value="Clear">
75
+ </td>
76
+ </tr>
77
+ </div>
78
+ </table>
79
+
80
+ </form>
81
+ <div> The Flower Name is: </div>
82
+ <div align="center"> {{data}} </div>
83
+ <center>
84
+ {% if data=="Iris-setosa" %}
85
+ <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20Setosa.png?v=1680866840563" alt="IRIS SETOSA" width="200" height="200">
86
+ {% elif data=="Iris-versicolor" %}
87
+ <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20versicolor.png?v=1680866854461" alt="IRIS VERSICOLOR" width="200" height="200">
88
+ {% elif data=="Iris-virginica" %}
89
+ <img src="https://cdn.glitch.global/8599b2d2-58ab-4d42-98f5-97fa4c6bad04/Iris%20Virginica.png?v=1680866857022" alt="IRIS VIRGINICA" width="200" height="200">
90
+ {% endif %}
91
+ </center>
92
+
93
  </body>
94
+ </html>