Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Predict - AutoML MLOps</title> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| </head> | |
| <body> | |
| <nav> | |
| <h1>AutoML MLOps Pipeline</h1> | |
| <a href="/">Home</a> | |
| <a href="/ui/predict">Predict</a> | |
| <a href="/ui/health">Status</a> | |
| <a href="/docs">API Docs</a> | |
| </nav> | |
| <div class="container"> | |
| <h2>Heart Disease Prediction</h2> | |
| <form id="predictionForm" class="card"> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label>ID:</label> | |
| <input type="number" name="id" value="1" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>Age:</label> | |
| <input type="number" name="Age" value="50" required> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label>Sex (0=F, 1=M):</label> | |
| <input type="number" name="Sex" min="0" max="1" value="1" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>Chest Pain Type (1-4):</label> | |
| <input type="number" name="Chest pain type" min="1" max="4" value="2" required> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label>BP (mmHg):</label> | |
| <input type="number" name="BP" value="120" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>Cholesterol (mg/dl):</label> | |
| <input type="number" name="Cholesterol" value="200" required> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label>FBS over 120 (0/1):</label> | |
| <input type="number" name="FBS over 120" min="0" max="1" value="0" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>EKG Results (0-2):</label> | |
| <input type="number" name="EKG results" min="0" max="2" value="0" required> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label>Max HR:</label> | |
| <input type="number" name="Max HR" value="150" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>Exercise Angina (0/1):</label> | |
| <input type="number" name="Exercise angina" min="0" max="1" value="0" required> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label>ST Depression:</label> | |
| <input type="number" name="ST depression" step="0.1" value="1.0" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>Slope of ST (1-3):</label> | |
| <input type="number" name="Slope of ST" min="1" max="3" value="1" required> | |
| </div> | |
| </div> | |
| <div class="form-row"> | |
| <div class="form-group"> | |
| <label>Vessels Fluro (0-3):</label> | |
| <input type="number" name="Number of vessels fluro" min="0" max="3" value="0" required> | |
| </div> | |
| <div class="form-group"> | |
| <label>Thallium (3/6/7):</label> | |
| <input type="number" name="Thallium" value="3" required> | |
| </div> | |
| </div> | |
| <button type="submit" class="btn">Predict</button> | |
| </form> | |
| <div id="result" class="card" style="display:none"> | |
| <h3>Prediction Result</h3> | |
| <div id="resultContent"></div> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById('predictionForm').addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const formData = new FormData(e.target); | |
| const data = {}; | |
| formData.forEach((value, key) => { | |
| data[key] = key.includes('depression') ? parseFloat(value) : parseInt(value); | |
| }); | |
| try { | |
| const response = await fetch('/predict/', { | |
| method: 'POST', | |
| headers: {'Content-Type': 'application/json'}, | |
| body: JSON.stringify(data) | |
| }); | |
| const result = await response.json(); | |
| const resultDiv = document.getElementById('result'); | |
| const resultContent = document.getElementById('resultContent'); | |
| if (response.ok) { | |
| const prediction = result.prediction === 1 ? 'POSITIVE' : 'NEGATIVE'; | |
| const color = result.prediction === 1 ? '#e74c3c' : '#27ae60'; | |
| const prob = result.probability ? `${(result.probability[result.prediction] * 100).toFixed(2)}%` : 'N/A'; | |
| resultContent.innerHTML = ` | |
| <p style="font-size: 24px; color: ${color}; font-weight: bold;">${prediction}</p> | |
| <p><strong>Confidence:</strong> ${prob}</p> | |
| <p><strong>Probabilities:</strong> [Negative: ${(result.probability[0] * 100).toFixed(2)}%, Positive: ${(result.probability[1] * 100).toFixed(2)}%]</p> | |
| `; | |
| } else { | |
| resultContent.innerHTML = `<p style="color: #e74c3c;">Error: ${result.detail}</p>`; | |
| } | |
| resultDiv.style.display = 'block'; | |
| } catch (error) { | |
| alert('Error: ' + error.message); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |