File size: 4,194 Bytes
36bb3e5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | 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();
}
}); |