Create src/templates/index.html

src/src/templates/index.html

@@ -0,0 +1,132 @@
+document.addEventListener('DOMContentLoaded', function() {
+    
+    //  INITIALIZE ALL NUMBER INPUTS 
+    const containers = document.querySelectorAll('.number-input-container');
+
+    containers.forEach(container => {
+        const input = container.querySelector('.number-input');
+        const decreaseBtn = container.querySelector('.decrease-btn');
+        const increaseBtn = container.querySelector('.increase-btn');
+
+        // Helper: Validate and clamp value based on min/max attributes
+        function validateAndClamp(value) {
+            const min = parseFloat(input.getAttribute('min')) || 0;
+            const max = parseFloat(input.getAttribute('max')) || Infinity;
+            const step = parseFloat(input.getAttribute('step')) || 1;
+            
+            if (value > max) return max;
+            if (value < min) return min;
+            return value;
+        }
+
+        // Helper: Update value logic
+        function updateValue(change) {
+            let current = parseFloat(input.value) || 0;
+            let step = parseFloat(input.getAttribute('step')) || 1;
+            
+            // Fix float math issues (e.g. 0.1 + 0.2)
+            let newValue = current + (change * step);
+            newValue = Math.round(newValue * 1000) / 1000;
+
+            const clamped = validateAndClamp(newValue);
+            input.value = clamped;
+            input.dispatchEvent(new Event('input')); // Trigger events
+        }
+
+        // Button Listeners
+        decreaseBtn.addEventListener('click', () => updateValue(-1));
+        increaseBtn.addEventListener('click', () => updateValue(1));
+
+        // Validation on Blur (Flash Red if corrected)
+        input.addEventListener('blur', function() {
+            let current = parseFloat(this.value) || 0;
+            const clamped = validateAndClamp(current);
+            
+            if (current !== clamped) {
+                this.value = clamped;
+                this.style.color = '#f87171';
+                setTimeout(() => this.style.color = '#ffffff', 300);
+            }
+        });
+
+        // Mouse Wheel Support
+        input.addEventListener('wheel', function(e) {
+            if (document.activeElement === input) {
+                e.preventDefault();
+                updateValue(e.deltaY < 0 ? 1 : -1);
+            }
+        });
+    });
+});
+
+//  PREDICTION LOGIC (Sends data to Flask) 
+async function makePrediction() {
+    const submitBtn = document.querySelector('.submit-btn');
+    const originalText = submitBtn.innerText;
+    
+    // Loading State
+    submitBtn.innerText = "Analyzing...";
+    submitBtn.disabled = true;
+    submitBtn.style.opacity = "0.7";
+
+    // Collect Data
+    const data = {
+        Pregnancies: Number(document.getElementById('Pregnancies').value),
+        Glucose: Number(document.getElementById('Glucose').value),
+        BloodPressure: Number(document.getElementById('BloodPressure').value),
+        SkinThickness: Number(document.getElementById('SkinThickness').value),
+        Insulin: Number(document.getElementById('Insulin').value),
+        BMI: Number(document.getElementById('BMI').value),
+        DiabetesPedigreeFunction: Number(document.getElementById('DiabetesPedigreeFunction').value),
+        Age: Number(document.getElementById('Age').value)
+    };
+
+    try {
+        // Send to Flask
+        const response = await fetch('/predict', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(data)
+        });
+
+        const result = await response.json();
+
+        // Update UI
+        const resultCard = document.getElementById('resultCard');
+        
+        const isHighRisk = result.prediction === 1;
+        const colorClass = isHighRisk ? 'danger-color' : 'safe-color';
+        const barColor = isHighRisk ? '#f87171' : '#34d399';
+        const title = isHighRisk ? 'High Risk' : 'Low Risk';
+        const message = isHighRisk 
+            ? 'The model suggests a high probability of diabetes.' 
+            : 'The model suggests a low probability of diabetes.';
+
+        resultCard.innerHTML = `
+            <div class="result-box">
+                <p style="color: #9ca3af; font-size: 0.9rem; letter-spacing: 1px; margin-bottom:10px;">PREDICTION RESULT</p>
+                <div class="risk-level ${colorClass}">${title}</div>
+                <p style="margin-bottom: 20px; color: #e0e0e0;">${message}</p>
+                
+                <div style="text-align: left; width: 100%; background: #1c1c2e; padding: 15px; border-radius: 8px; border: 1px solid #2e2e42;">
+                    <div style="display:flex; justify-content:space-between; font-size: 0.9rem; color: #ccc; margin-bottom: 8px;">
+                        <span>Confidence Score</span>
+                        <span style="color: #fff; font-weight: bold;">${result.confidence.toFixed(1)}%</span>
+                    </div>
+                    <div class="confidence-bar-bg">
+                        <div class="confidence-bar-fill" style="width: ${result.confidence}%; background-color: ${barColor};"></div>
+                    </div>
+                </div>
+            </div>
+        `;
+
+    } catch (error) {
+        console.error("Error:", error);
+        alert("Server Error: Make sure the Flask app is running.");
+    }
+
+    // Reset Button
+    submitBtn.innerText = originalText;
+    submitBtn.disabled = false;
+    submitBtn.style.opacity = "1";
+}