<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plant Disease Classification</title>
<style>
body {
background-image: url("{{ background_image }}");
background-size: cover;
background-position: center;
font-family: Arial, sans-serif;
color: #fff;
text-align: center;
padding: 50px;
}
.container {
background-color: rgba(0, 0, 0, 0.7);
padding: 30px;
border-radius: 10px;
display: inline-block;
}
img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Plant Disease Classification</h1>
<form method="POST" action="/predict" enctype="multipart/form-data">
<label for="model_type">Choose a model:</label>
<select name="model_type" id="model_type">
<option value="potato" selected>Potato</option>
<option value="tomato">Tomato</option>
</select>
<br><br>
<input type="file" name="file" accept="image/*" required>
<br><br>
<button type="submit">Predict</button>
</form>
{% if image %}
<h2>Prediction: {{ class_name }}</h2>
<h3>Confidence: {{ probability }}</h3>
<img src="data:image/jpeg;base64,{{ image }}" alt="Uploaded Image">
{% endif %}
</div>
</body>
</html>