Update templates/index.html

templates/index.html

@@ -41,11 +41,12 @@
             --bg-grad-end: #050505;
             --text-main: #f3e8ff; 
             --text-secondary: #c084fc; 
-            --glass-bg: rgba(35, 35, 40, 0.65);
-            --glass-border: rgba(255, 255, 255, 0.12);
+            /* True iOS dark glass: dark background but white tint on islands */
+            --glass-bg: rgba(255, 255, 255, 0.08); 
+            --glass-border: rgba(255, 255, 255, 0.15);
             --glass-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
             --icon-vibrant: #d946ef;
-            --btn-bg: rgba(255, 255, 255, 0.08);
+            --btn-bg: rgba(255, 255, 255, 0.06);
         }
 
         body {
@@ -109,7 +110,7 @@
         /* Interactive Islands */
         .inner-btn {
             background: var(--btn-bg);
-            border: 1px solid rgba(255, 255, 255, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.15);
             border-radius: 2.2rem;
             padding: 1.6rem;
             display: flex;
@@ -127,14 +128,14 @@
         }
         
         [data-theme="dark"] .inner-btn:hover:not(.disabled) {
-            background: rgba(255, 255, 255, 0.1);
+            background: rgba(255, 255, 255, 0.12);
             box-shadow: 0 15px 35px rgba(217, 70, 239, 0.2);
         }
 
         .inner-btn:active:not(.disabled) { transform: scale(0.96) translateY(0); }
         .inner-btn.disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(1); }
 
-        /* Vibrant Icons (Restored) */
+        /* Vibrant Icons */
         .icon-vibrant { transition: all 0.4s ease; }
         .icon-purple { color: #6d28d9; }
         .icon-pink { color: #db2777; }
@@ -160,6 +161,10 @@
             color: var(--text-secondary);
             backdrop-filter: blur(10px);
         }
+        [data-theme="dark"] .status-badge {
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.15);
+        }
         
         .status-dot {
             width: 8px;
@@ -185,6 +190,13 @@
             background-clip: text;
             animation: shimmer 4s linear infinite;
         }
+        [data-theme="dark"] .logo-shimmer {
+            background: linear-gradient(90deg, #c084fc, #e879f9, #c084fc);
+            background-size: 200% auto;
+            color: transparent;
+            -webkit-background-clip: text;
+            background-clip: text;
+        }
         
         @keyframes shimmer { to { background-position: 200% center; } }
 
@@ -299,7 +311,7 @@
                     </h1>
                     <div class="status-badge">
                         <span class="status-dot"></span>
-                        AI System Active
+                        AI Ensemble Active
                     </div>
                 </div>
             </div>
@@ -334,7 +346,7 @@
 
             <!-- FOOTER -->
             <footer class="mt-auto pt-8 text-center opacity-40">
-                <p class="text-[10px] font-mono uppercase tracking-widest">Powered by EfficientNet v2</p>
+                <p class="text-[10px] font-mono uppercase tracking-widest">Powered by PyTorch Ensemble</p>
             </footer>
 
             <!-- SCANNING SECTION (Initially Hidden) -->
@@ -370,16 +382,20 @@
                 <h2 id="result-diagnosis" class="text-3xl font-bold mb-1 text-center tracking-tight">--</h2>
                 <p id="result-severity" class="sub-label text-purple-600 dark:text-purple-400 mb-4 font-black text-xs">ANALYSIS COMPLETE</p>
                 
-                <p id="result-desc" class="text-sm opacity-70 mb-8 font-medium text-center leading-relaxed max-w-[260px]">--</p>
+                <p id="result-desc" class="text-sm opacity-70 mb-6 font-medium text-center leading-relaxed max-w-[260px]">--</p>
                 
-                <div class="grid grid-cols-2 gap-3 w-full mb-8">
-                    <div class="bg-white/10 dark:bg-white/5 p-4 rounded-2xl border border-white/10 text-center">
-                        <p class="sub-label mb-1 opacity-50">Confidence</p>
-                        <p id="result-conf" class="text-xl font-mono font-bold">--%</p>
-                    </div>
-                    <div class="bg-white/10 dark:bg-white/5 p-4 rounded-2xl border border-white/10 text-center">
-                        <p class="sub-label mb-1 opacity-50">Entropy</p>
-                        <p id="result-ent" class="text-xl font-mono font-bold">--</p>
+                <!-- Replaced Entropy with Full-Width Confidence -->
+                <div class="w-full bg-white/10 dark:bg-white/5 p-4 rounded-2xl border border-white/10 text-center mb-4 shadow-inner">
+                    <p class="sub-label mb-1 opacity-50">AI Confidence Score</p>
+                    <p id="result-conf" class="text-2xl font-mono font-bold">--%</p>
+                </div>
+
+                <!-- NEW: Precautions / Recommended Action Box -->
+                <div class="w-full bg-blue-500/10 dark:bg-blue-400/10 border border-blue-500/20 p-4 rounded-2xl mb-8 flex items-start gap-3 text-left shadow-sm">
+                    <i data-lucide="info" class="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0"></i>
+                    <div>
+                        <p class="sub-label text-blue-600 dark:text-blue-400 mb-1">Recommended Action</p>
+                        <p id="result-action" class="text-sm font-medium leading-relaxed opacity-90">--</p>
                     </div>
                 </div>
 
@@ -577,10 +593,6 @@
             
             const ctx = canvas.getContext('2d');
             
-            // Optional: Flip horizontally if using front camera (not the case here with 'environment')
-            // ctx.translate(canvas.width, 0);
-            // ctx.scale(-1, 1);
-            
             ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
             
             canvas.toBlob(blob => { 
@@ -631,7 +643,7 @@
             const steps = [
                 { s: "Preprocessing", d: "Isolating Green Channel...", w: "30%" },
                 { s: "Segmentation", d: "Mapping Vascular Geometry...", w: "65%" },
-                { s: "AI Processing", d: "EfficientNet Analysis...", w: "95%" },
+                { s: "AI Processing", d: "DenseNet & EfficientNet TTA...", w: "95%" },
                 { s: "Finalizing", d: "Generating Diagnosis...", w: "100%" }
             ];
             steps.forEach((step, i) => {
@@ -657,7 +669,20 @@
             document.getElementById('result-severity').textContent = data.severity;
             document.getElementById('result-desc').textContent = data.description;
             document.getElementById('result-conf').textContent = data.confidence;
-            document.getElementById('result-ent').textContent = data.features?.entropy || "N/A";
+            
+            // Generate dynamic precautions based on diagnosis
+            const precautions = {
+                "No DR": "Maintain regular eye check-ups annually to ensure continuous ocular health.",
+                "Mild DR": "Monitor blood sugar levels closely. Schedule a follow-up eye exam in 6-12 months.",
+                "Moderate DR": "Consult an ophthalmologist soon. Optimize diabetes management to slow progression.",
+                "Severe DR": "Immediate ophthalmologist consultation required. Prompt treatment may be necessary.",
+                "Proliferative DR": "Urgent medical intervention needed to prevent severe vision loss (e.g., laser therapy or surgery)."
+            };
+            
+            const diagnosisKey = data.diagnosis;
+            const actionText = precautions[diagnosisKey] || "Consult a healthcare professional for specific medical advice regarding your scan.";
+            document.getElementById('result-action').textContent = actionText;
+
             lucide.createIcons();
             switchView('view-result');
         }