Spaces:
Runtime error
Runtime error
File size: 4,817 Bytes
51c06eb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Classification Prediction - Herbal Drying</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<style>
body {
background: #f8f9fa;
}
.form-container {
margin-top: 50px;
}
.card {
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
padding: 30px;
}
h2 {
font-weight: 700;
}
</style>
</head>
<body>
<div class="container form-container">
<div class="card mx-auto">
<h2 class="text-center mb-4">Classification Prediction</h2>
<form action="/predict_classification" method="POST">
<!-- Input Fields (same as regression) -->
<div class="mb-3">
<label for="Layer_Thickness_cm" class="form-label">Layer Thickness (cm)</label>
<input type="number" step="any" class="form-control" id="Layer_Thickness_cm" name="Layer_Thickness_cm" placeholder="e.g., 1.5" required>
</div>
<div class="mb-3">
<label for="Ambient_Temperature_C" class="form-label">Ambient Temperature (°C)</label>
<input type="number" step="any" class="form-control" id="Ambient_Temperature_C" name="Ambient_Temperature_C" placeholder="e.g., 30" required>
</div>
<div class="mb-3">
<label for="Humidity_Percent" class="form-label">Humidity (%)</label>
<input type="number" step="any" class="form-control" id="Humidity_Percent" name="Humidity_Percent" placeholder="e.g., 60" required>
</div>
<div class="mb-3">
<label for="Moisture_Content_Initial_%" class="form-label">Moisture Content Initial (%)</label>
<input type="number" step="any" class="form-control" id="Moisture_Content_Initial_%" name="Moisture_Content_Initial_%" placeholder="e.g., 75" required>
</div>
<div class="mb-3">
<label for="Altitude_meters" class="form-label">Altitude (meters)</label>
<input type="number" class="form-control" id="Altitude_meters" name="Altitude_meters" placeholder="e.g., 1200" required>
</div>
<div class="mb-3">
<label for="Herb_Type" class="form-label">Herb Type</label>
<select class="form-select" id="Herb_Type" name="Herb_Type" required>
<option value="" disabled selected>Select Herb Type</option>
<option value="Lemongrass">Lemongrass</option>
<option value="Mint">Mint</option>
<option value="Moringa">Moringa</option>
<option value="Neem">Neem</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Airflow Level</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="Airflow_Level" id="Airflow_Low" value="Low" required>
<label class="form-check-label" for="Airflow_Low">Low</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="Airflow_Level" id="Airflow_Medium" value="Medium">
<label class="form-check-label" for="Airflow_Medium">Medium</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="Airflow_Level" id="Airflow_High" value="High">
<label class="form-check-label" for="Airflow_High">High</label>
</div>
</div>
<div class="mb-3">
<label class="form-label">Time of Day Start</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="Time_of_Day_Start" id="Time_of_Day_Morning" value="Morning" required>
<label class="form-check-label" for="Time_of_Day_Morning">Morning</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="Time_of_Day_Start" id="Time_of_Day_Noon" value="Noon">
<label class="form-check-label" for="Time_of_Day_Noon">Noon</label>
</div>
</div>
<button type="submit" class="btn btn-success w-100">Predict Drying Status</button>
</form>
<!-- Display prediction result -->
{% if prediction_text %}
<div class="alert alert-info mt-4 text-center" role="alert">
{{ prediction_text }}
</div>
{% endif %}
<div class="text-center mt-3">
<a href="index.html" class="btn btn-link">Back to Home</a>
</div>
</div>
</div>
<!-- Bootstrap Bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
|