Update templates/result.html

templates/result.html

@@ -24,7 +24,6 @@
         .header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #334155; padding-bottom: 20px; }
         .logo span { color: #00f2fe; }
 
-        /* AI Visualization Section */
         .visualization-area {
             display: grid;
             grid-template-columns: 1fr 1fr;
@@ -39,7 +38,6 @@
             text-align: center;
         }
 
-        /* FIX: இமேஜ் கட் ஆகாமல் முழுசாக தெரிய 'contain' பயன்படுத்தப்பட்டுள்ளது */
         .img-card img {
             width: 100%;
             height: 250px;
@@ -50,7 +48,6 @@
             background: #000; 
         }
 
-        /* Results Grid */
         .result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; }
         .res-card { background: rgba(255,255,255,0.05); padding: 20px; border-radius: 15px; text-align: center; border-left: 4px solid #334155; }
 
@@ -63,7 +60,22 @@
             font-weight: bold;
             cursor: pointer;
             margin-top: 30px;
+            color: #0f172a;
         }
+        
+        .btn-back {
+            width: 100%;
+            padding: 15px;
+            background: #334155;
+            border: none;
+            border-radius: 12px;
+            font-weight: bold;
+            cursor: pointer;
+            margin-top: 15px;
+            color: white;
+            transition: 0.3s;
+        }
+        .btn-back:hover { background: #475569; }
     </style>
 </head>
 <body>
@@ -105,4 +117,105 @@
             </div>
         </div>
 
-        <div id="
+        <div id="verdict-box" style="margin-top: 30px; padding: 20px; border-radius: 15px; border: 1px solid #334155;">
+            <strong id="verdict-title">AI Clinical Verdict:</strong>
+            <p id="verdict-text" style="font-size: 14px; margin-top: 5px;">Analyzing clinical correlations...</p>
+        </div>
+    </div>
+
+    <div style="max-width: 1000px; margin: 0 auto;">
+        <button class="btn-print" id="downloadBtn" onclick="generatePDF()">Download Medical Report (PDF)</button>
+        <button class="btn-back" onclick="window.location.href='/'">Scan Another Image (Go Back)</button>
+    </div>
+
+    <script>
+        function generatePDF() {
+            const btn = document.getElementById('downloadBtn');
+            btn.innerText = "Generating PDF... Please wait"; 
+            btn.style.opacity = "0.7";
+
+            const element = document.getElementById('pdf-content'); 
+            
+            const opt = {
+                margin:       0.3,
+                filename:     'RetiCheck_AI_Report.pdf',
+                image:        { type: 'jpeg', quality: 0.98 },
+                html2canvas:  { scale: 2, useCORS: true, backgroundColor: '#0f172a' },
+                jsPDF:        { unit: 'in', format: 'a4', orientation: 'portrait' }
+            };
+
+            html2pdf().set(opt).from(element).save().then(() => {
+                btn.innerText = "Download Medical Report (PDF)"; 
+                btn.style.opacity = "1";
+            });
+        }
+
+        const aiDataJSON = localStorage.getItem('aiResult');
+        
+        // --- 100% BUG FIX LOGIC ---
+        if(!aiDataJSON) {
+            // Data illana automatic ah Home page ku poidum! (No broken screen)
+            window.location.href = '/';
+        } else {
+            const aiData = JSON.parse(aiDataJSON);
+            
+            if(aiData.orig_img) {
+                document.getElementById('display-orig').src = "data:image/jpeg;base64," + aiData.orig_img;
+            }
+            if(aiData.heat_gen && aiData.heat_img) {
+                document.getElementById('display-heat').src = "data:image/jpeg;base64," + aiData.heat_img;
+            } else {
+                document.getElementById('display-heat').src = "data:image/jpeg;base64," + aiData.orig_img;
+                document.getElementById('heatmap-caption').innerText = "Healthy Retina (No Heatmap Needed)";
+                document.getElementById('heatmap-caption').style.color = "#10b981";
+            }
+
+            const headerStatus = document.getElementById('header-status');
+            const mainCard = document.getElementById('main-result-card');
+            const scoreTitle = document.getElementById('pred-title');
+            const scoreValue = document.getElementById('pred-score');
+            const scoreStatus = document.getElementById('pred-status');
+            const dummyCards = document.querySelectorAll('.dummy-card');
+            
+            const verdictBox = document.getElementById('verdict-box');
+            const verdictTitle = document.getElementById('verdict-title');
+            const verdictText = document.getElementById('verdict-text');
+
+            headerStatus.innerText = "● System Diagnosis: " + aiData.triage;
+            scoreTitle.innerText = "AI Prediction: " + aiData.disease;
+            scoreValue.innerText = aiData.confidence;
+            scoreStatus.innerText = "Status: " + aiData.status;
+
+            verdictText.innerText = "Action Required: " + aiData.action + " | Doctor Advice: " + aiData.advice;
+
+            if(aiData.triage === "SAFE") {
+                const color = "#10b981"; 
+                headerStatus.style.color = color;
+                scoreValue.style.color = color;
+                mainCard.style.borderLeftColor = color;
+                verdictBox.style.background = "rgba(16, 185, 129, 0.1)";
+                verdictBox.style.borderColor = color;
+                verdictTitle.style.color = color;
+            } else if(aiData.triage === "URGENT") {
+                const color = "#ef4444"; 
+                headerStatus.style.color = color;
+                scoreValue.style.color = color;
+                mainCard.style.borderLeftColor = color;
+                verdictBox.style.background = "rgba(239, 68, 68, 0.1)";
+                verdictBox.style.borderColor = color;
+                verdictTitle.style.color = color;
+            } else {
+                const color = "#f59e0b"; 
+                headerStatus.style.color = color;
+                scoreValue.style.color = color;
+                mainCard.style.borderLeftColor = color;
+                verdictBox.style.background = "rgba(245, 158, 11, 0.1)";
+                verdictBox.style.borderColor = color;
+                verdictTitle.style.color = color;
+            }
+
+            dummyCards.forEach(card => card.style.display = "none");
+        }
+    </script>
+</body>
+</html>