Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <title>Diabetes Prediction Model</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>BetaCell AI 🩺 </h1> | |
| <p>Diabetes Risk Prediction Model</p> | |
| </header> | |
| <div class="main-content"> | |
| <!-- The Form --> | |
| <div class="form-section"> | |
| <form id="predictionForm" onsubmit="event.preventDefault(); makePrediction();"> | |
| <div class="form-grid"> | |
| <!-- 1. Pregnancies --> | |
| <div class="input-group"> | |
| <label class="input-label">Pregnancies</label> | |
| <div class="number-input-container"> | |
| <input type="number" id="Pregnancies" class="number-input" value="3" min="0" max="17" step="1" inputmode="numeric"> | |
| <div class="controls"> | |
| <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| <div class="separator"></div> | |
| <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 2. Glucose --> | |
| <div class="input-group"> | |
| <label class="input-label">Glucose (mg/dL)</label> | |
| <div class="number-input-container"> | |
| <input type="number" id="Glucose" class="number-input" value="117" min="0" max="199" step="1" inputmode="numeric"> | |
| <div class="controls"> | |
| <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| <div class="separator"></div> | |
| <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 3. Blood Pressure --> | |
| <div class="input-group"> | |
| <label class="input-label">Blood Pressure (mm Hg)</label> | |
| <div class="number-input-container"> | |
| <input type="number" id="BloodPressure" class="number-input" value="72" min="0" max="122" step="1" inputmode="numeric"> | |
| <div class="controls"> | |
| <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| <div class="separator"></div> | |
| <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 4. Skin Thickness --> | |
| <div class="input-group"> | |
| <label class="input-label">Skin Thickness (mm)</label> | |
| <div class="number-input-container"> | |
| <input type="number" id="SkinThickness" class="number-input" value="23" min="0" max="99" step="1" inputmode="numeric"> | |
| <div class="controls"> | |
| <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| <div class="separator"></div> | |
| <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 5. Insulin --> | |
| <div class="input-group"> | |
| <label class="input-label">Insulin (mu U/ml)</label> | |
| <div class="number-input-container"> | |
| <input type="number" id="Insulin" class="number-input" value="30" min="0" max="846" step="1" inputmode="numeric"> | |
| <div class="controls"> | |
| <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| <div class="separator"></div> | |
| <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 6. BMI --> | |
| <div class="input-group"> | |
| <label class="input-label"> | |
| <a href="https://www.calculator.net/bmi-calculator.html" target="_blank" class="external-link">BMI</a> | |
| </label> | |
| <div class="number-input-container"> | |
| <input type="number" id="BMI" class="number-input" value="32.0" min="0" max="67.1" step="0.1" inputmode="decimal"> | |
| <div class="controls"> | |
| <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| <div class="separator"></div> | |
| <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 7. Diabetes Pedigree Function --> | |
| <div class="input-group"> | |
| <label class="input-label">Diabetes Pedigree</label> | |
| <div class="number-input-container"> | |
| <input type="number" id="DiabetesPedigreeFunction" class="number-input" value="0.372" min="0.078" max="2.42" step="0.001" inputmode="decimal"> | |
| <div class="controls"> | |
| <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| <div class="separator"></div> | |
| <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 8. Age --> | |
| <div class="input-group"> | |
| <label class="input-label">Age (Years)</label> | |
| <div class="number-input-container"> | |
| <input type="number" id="Age" class="number-input" value="29" min="21" max="81" step="1" inputmode="numeric"> | |
| <div class="controls"> | |
| <button class="control-btn decrease-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| <div class="separator"></div> | |
| <button class="control-btn increase-btn" type="button"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8 3v10M3 8h10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button type="submit" class="submit-btn">Run Prediction</button> | |
| </form> | |
| </div> | |
| <!-- Results --> | |
| <div class="result-section" id="resultCard"> | |
| <div class="placeholder-text"> | |
| <div style="font-size: 3rem; margin-bottom: 10px;">⚡</div> | |
| <h3>Ready to Predict</h3> | |
| <p>Enter patient vitals and click Run Prediction.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="{{ url_for('static', filename='script.js') }}"></script> | |
| </body> | |
| </html> |