Spaces:
Runtime error
Runtime error
| <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> | |