|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>PREDICTING IRIS FLOWER SPECIES</title> |
|
|
<style> |
|
|
body { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
background-image: url('https://media.giphy.com/media/QNFhOolVeCzPQ2Mx85/giphy.gif'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
background-repeat: no-repeat; |
|
|
background-attachment: fixed; |
|
|
font-family: Arial, sans-serif; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.container { |
|
|
background-color: rgba(0, 0, 0, 0.6); |
|
|
padding: 30px; |
|
|
margin: 80px auto; |
|
|
width: 400px; |
|
|
border-radius: 15px; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
input[type="text"], input[type="submit"] { |
|
|
padding: 10px; |
|
|
width: 90%; |
|
|
margin: 10px 0; |
|
|
border-radius: 5px; |
|
|
border: none; |
|
|
} |
|
|
|
|
|
input[type="submit"] { |
|
|
background-color: #4CAF50; |
|
|
color: white; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
h1, h2 { |
|
|
color: #00ffe1; |
|
|
} |
|
|
|
|
|
label { |
|
|
float: left; |
|
|
margin-left: 20px; |
|
|
font-weight: bold; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>Iris Flower Species Prediction</h1> |
|
|
<form action="/predict" method="post"> |
|
|
<label>SEPAL LENGTH:</label><br> |
|
|
<input type="text" name="sl" placeholder="sepal_length" required><br> |
|
|
|
|
|
<label>SEPAL WIDTH:</label><br> |
|
|
<input type="text" name="sw" placeholder="sepal_width" required><br> |
|
|
|
|
|
<label>PETAL LENGTH:</label><br> |
|
|
<input type="text" name="pl" placeholder="petal_length" required><br> |
|
|
|
|
|
<label>PETAL WIDTH:</label><br> |
|
|
<input type="text" name="pw" placeholder="petal_width" required><br> |
|
|
|
|
|
<input type="submit" value="Predict"> |
|
|
</form> |
|
|
|
|
|
{% if result %} |
|
|
<h2>Predicted Species: {{ result }}</h2> |
|
|
{% endif %} |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
|
