|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Crop Price Prediction</title>
|
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
<style>
|
|
|
body {
|
|
|
background-color: #e9f5e9;
|
|
|
}
|
|
|
.container {
|
|
|
margin-top: 50px;
|
|
|
margin-bottom:30px;
|
|
|
background-color: #ffffff;
|
|
|
padding: 30px;
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
.row {
|
|
|
display: flex;
|
|
|
align-items: stretch;
|
|
|
}
|
|
|
.form-section {
|
|
|
flex: 65%;
|
|
|
padding-right: 15px;
|
|
|
background-color: #f0fff0;
|
|
|
border: 2px solid #4CAF50;
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
padding: 20px;
|
|
|
}
|
|
|
.image-section {
|
|
|
flex: 35%;
|
|
|
padding-left: 15px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
.image-section img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 10px;
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
h2 {
|
|
|
text-align: center;
|
|
|
color: #2e7d32;
|
|
|
font-weight: bold;
|
|
|
font-size: 2em;
|
|
|
}
|
|
|
#result {
|
|
|
display: none;
|
|
|
margin-top: 20px;
|
|
|
background-color: #d4edda;
|
|
|
border-color: #c3e6cb;
|
|
|
color: #155724;
|
|
|
border-radius: 5px;
|
|
|
padding: 20px;
|
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
.form-control {
|
|
|
margin-bottom: 15px;
|
|
|
}
|
|
|
.btn-success {
|
|
|
background-color: #4CAF50;
|
|
|
}
|
|
|
.alert h4 {
|
|
|
font-size: 1.5em;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
|
|
|
<div class="container">
|
|
|
<h2>Crop Price Prediction</h2>
|
|
|
<div class="row">
|
|
|
<div class="form-section">
|
|
|
<form id="prediction-form">
|
|
|
<div class="form-group">
|
|
|
<label for="state">Select State:</label>
|
|
|
<select class="form-control" id="state" name="state" required>
|
|
|
<option value="">Select State</option>
|
|
|
{% for state in states %}
|
|
|
<option value="{{ state }}">{{ state }}</option>
|
|
|
{% endfor %}
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="district">Select District:</label>
|
|
|
<select class="form-control" id="district" name="district" required>
|
|
|
<option value="">Select District</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="date">Select Date:</label>
|
|
|
<input type="date" class="form-control" id="date" name="date" required>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="crop">Select Crop:</label>
|
|
|
<select class="form-control" id="crop" name="crop" required>
|
|
|
<option value="">Select Crop</option>
|
|
|
{% for crop in crops %}
|
|
|
<option value="{{ crop }}">{{ crop }}</option>
|
|
|
{% endfor %}
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<label for="production">Production (in quintals):</label>
|
|
|
<input type="number" class="form-control" id="production" name="production" min="0" required>
|
|
|
</div>
|
|
|
<button type="submit" class="btn btn-success btn-block">Predict Price</button>
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="image-section">
|
|
|
<img src="static/images/img.png" alt="Decorative Crop Image">
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div id="result" class="alert alert-info">
|
|
|
<h4>Predicted Price: ₹<span id="predicted-price"></span> per quintal</h4>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
$(document).ready(function () {
|
|
|
$('#state').on('change', function () {
|
|
|
const state = $(this).val();
|
|
|
if (state) {
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/districts',
|
|
|
data: { state: state },
|
|
|
success: function (response) {
|
|
|
$('#district').empty();
|
|
|
$('#district').append('<option value="">Select District</option>');
|
|
|
response.districts.forEach(function (district) {
|
|
|
$('#district').append('<option value="' + district + '">' + district + '</option>');
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
} else {
|
|
|
$('#district').empty();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
$('#prediction-form').on('submit', function (e) {
|
|
|
e.preventDefault();
|
|
|
$.ajax({
|
|
|
type: 'POST',
|
|
|
url: '/predict',
|
|
|
data: $(this).serialize(),
|
|
|
success: function (response) {
|
|
|
$('#predicted-price').text(response.predicted_price.toFixed(2));
|
|
|
$('#result').show();
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
