DYNAMAXD/ExplainabilityOnModel

1document.addEventListener("DOMContentLoaded", () => {2    const uploadArea = document.getElementById("uploadArea");3    const imageInput = document.getElementById("imageInput");4    const imagePreview = document.getElementById("imagePreview");5    const uploadContent = document.querySelector(".upload-content");6    const analyzeBtn = document.getElementById("analyzeBtn");7    const loadingSpinner = document.getElementById("loadingSpinner");8    const resultsContainer = document.getElementById("resultsContainer");9 10    const predClassEl = document.getElementById("predClass");11    const predConfEl = document.getElementById("predConf");12 13    const imgIds = [14        "origImg", "gradcamImg", "gradcamppImg", 15        "scorecamImg", "occlusionImg", "eigencamImg", "layercamImg"16    ];17 18    let currentFile = null;19 20    // Handle Drag & Drop21    uploadArea.addEventListener("dragover", (e) => {22        e.preventDefault();23        uploadArea.classList.add("dragover");24    });25 26    uploadArea.addEventListener("dragleave", () => {27        uploadArea.classList.remove("dragover");28    });29 30    uploadArea.addEventListener("drop", (e) => {31        e.preventDefault();32        uploadArea.classList.remove("dragover");33        if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {34            handleFile(e.dataTransfer.files[0]);35        }36    });37 38    // Handle Click39    uploadArea.addEventListener("click", () => {40        imageInput.click();41    });42 43    imageInput.addEventListener("change", (e) => {44        if (e.target.files && e.target.files.length > 0) {45            handleFile(e.target.files[0]);46        }47    });48 49    function handleFile(file) {50        if (!file.type.startsWith('image/')) {51            alert('Please select a valid image file');52            return;53        }54        currentFile = file;55 56        const reader = new FileReader();57        reader.onload = (e) => {58            imagePreview.src = e.target.result;59            imagePreview.classList.remove("hidden");60            uploadContent.classList.add("hidden");61            analyzeBtn.classList.remove("disabled");62            analyzeBtn.disabled = false;63        };64        reader.readAsDataURL(file);65    }66 67    analyzeBtn.addEventListener("click", async () => {68        if (!currentFile) return;69 70        // UI updates for loading state71        analyzeBtn.disabled = true;72        analyzeBtn.querySelector('span').innerText = 'Analyzing...';73        loadingSpinner.classList.remove("hidden");74        resultsContainer.classList.add("hidden");75 76        const formData = new FormData();77        formData.append("file", currentFile);78 79        try {80            const response = await fetch("/predict", {81                method: "POST",82                body: formData83            });84 85            if (!response.ok) {86                throw new Error(`Server returned ${response.status}: ${response.statusText}`);87            }88 89            const data = await response.json();90            91            // Set Text results92            predClassEl.innerText = data.pred_class;93            predConfEl.innerText = (data.confidence * 100).toFixed(2) + "%";94 95            // Determine if pred_class is normal or tumor for potential dynamic color coding96            if(data.pred_class === "notumor") {97                predClassEl.style.color = "#48bb78"; // Green accent98            } else {99                predClassEl.style.color = "#f56565"; // Red accent (medical alert)100            }101 102            // Set Image results103            document.getElementById("origImg").src = "data:image/jpeg;base64," + data.original_image;104            document.getElementById("gradcamImg").src = "data:image/jpeg;base64," + data.cams.gradcam;105            document.getElementById("gradcamppImg").src = "data:image/jpeg;base64," + data.cams.gradcam_pp;106            document.getElementById("scorecamImg").src = "data:image/jpeg;base64," + data.cams.scorecam;107            document.getElementById("occlusionImg").src = "data:image/jpeg;base64," + data.cams.occlusion;108            document.getElementById("eigencamImg").src = "data:image/jpeg;base64," + data.cams.eigencam;109            document.getElementById("layercamImg").src = "data:image/jpeg;base64," + data.cams.layercam;110 111            // Show results112            resultsContainer.classList.remove("hidden");113 114            // Scroll into view115            resultsContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });116 117        } catch (error) {118            console.error("Error during prediction:", error);119            alert("Error: " + error.message);120        } finally {121            analyzeBtn.disabled = false;122            analyzeBtn.querySelector('span').innerText = 'Generate Analysis';123            loadingSpinner.classList.add("hidden");124        }125    });126 127});128