Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>CKD Prediction</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background-color: aquamarine; | |
| padding: 20px; | |
| } | |
| .container { | |
| width: 700px; | |
| margin: auto; | |
| background: #fff; | |
| padding: 30px; | |
| border-radius: 10px; | |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); | |
| } | |
| h2 { | |
| text-align: center; | |
| color: #333; | |
| } | |
| .form-group { | |
| margin-bottom: 15px; | |
| } | |
| label { | |
| font-weight: bold; | |
| display: block; | |
| margin-bottom: 5px; | |
| } | |
| input, select { | |
| width: 100%; | |
| padding: 8px; | |
| font-size: 14px; | |
| } | |
| .btn { | |
| width: 100%; | |
| padding: 10px; | |
| background-color: #28a745; | |
| border: none; | |
| color: white; | |
| font-size: 16px; | |
| cursor: pointer; | |
| border-radius: 5px; | |
| } | |
| .btn:hover { | |
| background-color: #218838; | |
| } | |
| .result { | |
| font-size: large; | |
| font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; | |
| color: #333; | |
| background-color: #f8f9fa; | |
| margin-top: 20px; | |
| font-size: 18px; | |
| font-weight: bold; | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h2>CKD Prediction Form</h2> | |
| <form method="post"> | |
| <!-- Age --> | |
| <div class="form-group"> | |
| <label>Age</label> | |
| <input type="number" name="age" min="0" max="100" placeholder="e.g., 60" required> | |
| </div> | |
| <!-- Blood Pressure --> | |
| <div class="form-group"> | |
| <label>Blood Pressure (mmHg)</label> | |
| <input type="number" name="blood_pressure" min="40" max="200" placeholder="e.g., 80" required> | |
| </div> | |
| <!-- Specific Gravity --> | |
| <div class="form-group"> | |
| <label>Specific Gravity</label> | |
| <select name="specific_gravity"> | |
| <option value="1.005">1.005</option> | |
| <option value="1.010">1.010</option> | |
| <option value="1.015">1.015</option> | |
| <option value="1.020" selected>1.020</option> | |
| <option value="1.025">1.025</option> | |
| </select> | |
| </div> | |
| <!-- Albumin --> | |
| <div class="form-group"> | |
| <label>Albumin (0–5)</label> | |
| <input type="number" name="albumin" min="0" max="5" placeholder="e.g., 2" required> | |
| </div> | |
| <!-- Sugar --> | |
| <div class="form-group"> | |
| <label>Sugar (0–5)</label> | |
| <input type="number" name="sugar" min="0" max="5" placeholder="e.g., 1" required> | |
| </div> | |
| <!-- Binary Dropdowns --> | |
| {% for field in [ | |
| ('red_blood_cells', 'Red Blood Cells (Normal=1 / Abnormal=0)'), | |
| ('pus_cell', 'Pus Cell (Normal=1 / Abnormal=0)'), | |
| ('pus_cell_clumps', 'Pus Cell Clumps (Yes=1 / No=0)'), | |
| ('bacteria', 'Bacteria (Yes=1 / No=0)'), | |
| ('hypertension', 'Hypertension (Yes=1 / No=0)'), | |
| ('diabetes_mellitus', 'Diabetes Mellitus (Yes=1 / No=0)'), | |
| ('coronary_artery_disease', 'Coronary Artery Disease (Yes=1 / No=0)'), | |
| ('appetite', 'Appetite (Good=1 / Poor=0)'), | |
| ('peda_edema', 'Pedal Edema (Yes=1 / No=0)'), | |
| ('aanemia', 'Anaemia (Yes=1 / No=0)') | |
| ] %} | |
| <div class="form-group"> | |
| <label>{{ field[1] }}</label> | |
| <select name="{{ field[0] }}"> | |
| <option value="1">Yes / Normal / Good</option> | |
| <option value="0">No / Abnormal / Poor</option> | |
| </select> | |
| </div> | |
| {% endfor %} | |
| <!-- Numeric Inputs --> | |
| {% for field, label, minval, maxval, placeholder in [ | |
| ('blood_glucose_random', 'Blood Glucose Random (mg/dL)', 50, 500, 150), | |
| ('blood_urea', 'Blood Urea (mg/dL)', 5, 300, 44), | |
| ('serum_creatinine', 'Serum Creatinine (mg/dL)', 0.5, 15, 1.2), | |
| ('sodium', 'Sodium (mEq/L)', 120, 160, 135), | |
| ('potassium', 'Potassium (mEq/L)', 2.5, 7.5, 4.6), | |
| ('haemoglobin', 'Haemoglobin (g/dL)', 3, 20, 12), | |
| ('packed_cell_volume', 'Packed Cell Volume (%)', 15, 55, 38), | |
| ('white_blood_cell_count', 'WBC Count (cells/uL)', 3000, 25000, 8000), | |
| ('red_blood_cell_count', 'RBC Count (millions/uL)', 2.5, 6.5, 4.5) | |
| ] %} | |
| <div class="form-group"> | |
| <label>{{ label }}</label> | |
| <input type="number" name="{{ field }}" min="{{ minval }}" max="{{ maxval }}" step="any" placeholder="e.g., {{ placeholder }}" required> | |
| </div> | |
| {% endfor %} | |
| <!-- Submit Button --> | |
| <button type="submit" class="btn">Predict</button> | |
| </form> | |
| {% if result %} | |
| <div class="result">{{ result }}</div> | |
| {% endif %} | |
| </div> | |
| </body> | |
| </html> |