Update templates/index.html

templates/index.html

@@ -123,14 +123,6 @@
                 <canvas id="barChart" height="220"></canvas>
             </div>
 
-            <div class="glass-card p-4">
-                <h3 class="text-xl font-bold mb-3">🧠 Model Attention (Grad-CAM)</h3>
-                <img id="camImage"
-                     class="rounded-xl border border-gray-700 hidden"/>
-                <p id="camHint" class="text-gray-400 text-sm">
-                    Grad-CAM visualization of affected regions
-                </p>
-            </div>
         </div>
     </div>
 
@@ -147,49 +139,37 @@ function previewImage(event) {
     img.src = URL.createObjectURL(event.target.files[0]);
     img.classList.remove("hidden");
 }
-
 /* ------------------ Clear ------------------ */
 function clearImage() {
     document.getElementById("file").value = "";
     document.getElementById("preview").classList.add("hidden");
     document.getElementById("result").classList.add("hidden");
 }
-
 /* ------------------ Submit ------------------ */
 let chartInstance = null;
-
 async function submitForm() {
     const file = document.getElementById("file").files[0];
     if (!file) return alert("Upload an image first");
-
     const formData = new FormData();
     formData.append("file", file);
-
     const start = performance.now();
     const res = await fetch("/predict", { method: "POST", body: formData });
     const data = await res.json();
     const end = performance.now();
-
     document.getElementById("result").classList.remove("hidden");
-
     document.getElementById("prediction").innerText = data.prediction;
     document.getElementById("confidenceText").innerText = data.confidence + "%";
     document.getElementById("confidenceFill").style.width = data.confidence + "%";
-
     const badge = document.getElementById("riskBadge");
     badge.innerText = data.risk + " RISK";
     badge.className = "badge badge-" + data.risk.toLowerCase();
-
     document.getElementById("description").innerText = data.description;
     document.getElementById("treatment").innerText = data.treatment;
-
     document.getElementById("inferenceTime").innerText =
         ((end - start) / 1000).toFixed(2) + " sec";
-
     // History
     document.getElementById("historyList").innerHTML +=
         `<li>${data.prediction} - ${data.confidence}%</li>`;
-
     // Top-5 table
     const table = document.getElementById("top5Table");
     table.innerHTML = "";
@@ -200,11 +180,9 @@ async function submitForm() {
             <td class="p-2 text-right">${(row.probability * 100).toFixed(2)}%</td>
         </tr>`;
     });
-
     // Bar chart
     const ctx = document.getElementById("barChart");
     if (chartInstance) chartInstance.destroy();
-
     chartInstance = new Chart(ctx, {
         type: "bar",
         data: {
@@ -219,16 +197,7 @@ async function submitForm() {
             scales: { y: { beginAtZero: true } }
         }
     });
-
-    // Grad-CAM
-    if (data.cam_image_url) {
-        const cam = document.getElementById("camImage");
-        cam.src = data.cam_image_url + "?t=" + Date.now();
-        cam.classList.remove("hidden");
-        document.getElementById("camHint").classList.add("hidden");
-    }
 }
-
 /* ------------------ Login (demo) ------------------ */
 function loginUser() {
     const user = document.getElementById("username").value;