Update static/script.js

static/script.js

@@ -1,102 +1,125 @@
-document.addEventListener("DOMContentLoaded", function () {
-    const fileInput = document.getElementById("fileInput");
-    const scanBtn = document.getElementById("scan-btn");
-    const resultDiv = document.getElementById("result");
-    const consentCheckbox = document.getElementById("user-consent");
-    const preview = document.getElementById("preview");
-    const splash = document.getElementById("splash-screen");
-
-    function updateButton() {
-        scanBtn.disabled = !(consentCheckbox.checked && fileInput.files.length > 0);
-    }
-
-    consentCheckbox.addEventListener("change", updateButton);
-
-    fileInput.addEventListener("change", function () {
-        const file = this.files[0];
-        if (!file) {
-            preview.style.display = "none";
-            updateButton();
-            return;
-        }
-
-        if (file.size > 4 * 1024 * 1024) {
-            alert("File too big! Max 4MB allowed");
-            fileInput.value = "";
-            preview.style.display = "none";
-            updateButton();
-            return;
-        }
-
-        preview.src = URL.createObjectURL(file);
-        preview.style.display = "block";
-        updateButton();
-    });
-
-    scanBtn.addEventListener("click", async function (e) {
-        e.preventDefault();
-
-        if (!fileInput.files[0]) {
-            alert("Select image first");
-            return;
-        }
-
-        resultDiv.innerHTML = "Analyzing... ⏳";
-
-        const formData = new FormData();
-        formData.append("image", fileInput.files[0]);
-
-        try {
-            const res = await fetch("/analyze", {
-                method: "POST",
-                body: formData
-            });
-
-            const data = await res.json();
-
-            if (data.error) {
-                resultDiv.innerHTML = "❌ " + data.error;
-                return;
-            }
-
-            const analysis = data.analysis || {};
-            const metadata = data.metadata || {};
-
-            const width = metadata.width ?? "N/A";
-            const height = metadata.height ?? "N/A";
-            const size = metadata.size_mb ?? "N/A";
-
-            const status = analysis.is_real ? "Likely Real ✅" : "Likely AI Generated 🔴";
-
-            resultDiv.innerHTML = `
-                <div style="text-align: center; margin-top: 15px;">
-                    <p><b>Result:</b> ${status}</p>
-                    <p><b>Confidence:</b> ${analysis.confidence ?? 0}%</p>
-                    <p><b>Reason:</b> ${analysis.reason ?? "N/A"}</p>
-                    <p><b>Detected Text:</b> ${data.text || "None"}</p>
-                    <hr>
-                    <p><b>Width:</b> ${width} px</p>
-                    <p><b>Height:</b> ${height} px</p>
-                    <p><b>Size:</b> ${size} MB</p>
-                </div>
-            `;
-        } catch (err) {
-            console.error("ERROR:", err);
-            resultDiv.innerHTML = "❌ Server connection error!";
-        }
-    });
-
-    if (splash) {
-        splash.style.display = "flex";
-        setTimeout(() => {
-            splash.style.transition = "opacity 0.8s ease";
-            splash.style.opacity = "0";
-            setTimeout(() => { splash.style.display = "none"; }, 800);
-        }, 2000);
-    }
-
-    const yearEl = document.getElementById("year");
-    if (yearEl) {
-        yearEl.innerText = new Date().getFullYear();
-    }
-});
+document.addEventListener("DOMContentLoaded", () => {
+    const fileInput = document.getElementById("fileInput");
+    const scanBtn = document.getElementById("scan-btn");
+    const resultDiv = document.getElementById("result");
+    const consentCheckbox = document.getElementById("user-consent");
+    const preview = document.getElementById("preview");
+    const previewBox = document.getElementById("previewBox"); // ✅ NEW
+    const removeBtn = document.getElementById("removeBtn");   // ✅ NEW
+    const splash = document.getElementById("splash-screen");
+    const yearEl = document.getElementById("year");
+
+    // Initially hide preview
+    if (previewBox) previewBox.style.display = "none";
+
+    function updateButton() {
+        scanBtn.disabled = !(consentCheckbox.checked && fileInput.files.length > 0);
+    }
+
+    consentCheckbox.addEventListener("change", updateButton);
+
+    fileInput.addEventListener("change", function () {
+        const file = this.files[0];
+
+        if (!file) {
+            preview.style.display = "none";
+            if (previewBox) previewBox.style.display = "none";
+            updateButton();
+            return;
+        }
+
+        if (file.size > 4 * 1024 * 1024) {
+            alert("File too big! Max 4MB allowed");
+            fileInput.value = "";
+            preview.style.display = "none";
+            if (previewBox) previewBox.style.display = "none";
+            updateButton();
+            return;
+        }
+
+        preview.src = URL.createObjectURL(file);
+        preview.style.display = "block";
+        if (previewBox) previewBox.style.display = "block";
+
+        updateButton();
+    });
+
+    // ❌ REMOVE IMAGE BUTTON (X)
+    if (removeBtn) {
+        removeBtn.addEventListener("click", () => {
+            preview.src = "";
+            preview.style.display = "none";
+            fileInput.value = "";
+            if (previewBox) previewBox.style.display = "none";
+            updateButton();
+        });
+    }
+
+    scanBtn.addEventListener("click", async (e) => {
+        e.preventDefault();
+
+        if (!fileInput.files[0]) {
+            alert("Select image first");
+            return;
+        }
+
+        resultDiv.innerHTML = "Analyzing...";
+
+        const formData = new FormData();
+        formData.append("image", fileInput.files[0]);
+
+        try {
+            const res = await fetch("/analyze", {
+                method: "POST",
+                body: formData
+            });
+
+            const data = await res.json();
+
+            if (data.error) {
+                resultDiv.innerHTML = "Error: " + data.error;
+                return;
+            }
+
+            const analysis = data.analysis || {};
+            const metadata = data.metadata || {};
+            const width = metadata.width ?? "N/A";
+            const height = metadata.height ?? "N/A";
+            const size = metadata.size_mb ?? "N/A";
+            const status = analysis.is_real ? "Likely Real" : "Likely AI Generated";
+
+            resultDiv.innerHTML = `
+                <div style="text-align: center; margin-top: 15px;">
+                    <p><b>Result:</b> ${status}</p>
+                    <p><b>Confidence:</b> ${analysis.confidence ?? 0}%</p>
+                    <p><b>Reason:</b> ${analysis.reason ?? "N/A"}</p>
+                    <p><b>Detected Text:</b> ${data.text || "None"}</p>
+                    <hr>
+                    <p><b>Width:</b> ${width} px</p>
+                    <p><b>Height:</b> ${height} px</p>
+                    <p><b>Size:</b> ${size} MB</p>
+                </div>
+            `;
+        } catch (error) {
+            console.error("Analyze error:", error);
+            resultDiv.innerHTML = "Server connection error!";
+        }
+    });
+
+    window.addEventListener('load', () => {
+        if (splash) {
+            splash.style.display = "flex";
+            setTimeout(() => {
+                splash.style.transition = "opacity 0.8s ease";
+                splash.style.opacity = "0";
+                setTimeout(() => {
+                    splash.style.display = "none";
+                }, 800);
+            }, 2000);
+        }
+    });
+
+    if (yearEl) {
+        yearEl.innerText = new Date().getFullYear();
+    }
+});