Spaces:
Running
Running
File size: 2,990 Bytes
180dc07 |
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 |
document.addEventListener("DOMContentLoaded", function () {
const fileInput = document.getElementById("image-upload");
const fileName = document.getElementById("file-name");
const imagePreviewContainer = document.getElementById(
"image-preview-container"
);
const imagePreview = document.getElementById("image-preview");
const interpretBtn = document.getElementById("interpret-btn");
const loadingContainer = document.getElementById("loading-container");
const resultsSection = document.getElementById("results-section");
const resultsImage = document.getElementById("results-image");
const interpretationContent = document.querySelector(
"#interpretation-content"
);
const newInterpretationBtn = document.getElementById(
"new-interpretation-btn"
);
const downloadBtn = document.getElementById("download-btn");
fileInput.addEventListener("change", function () {
if (this.files && this.files[0]) {
const file = this.files[0];
fileName.textContent = file.name;
const reader = new FileReader();
reader.onload = function (e) {
imagePreview.src = e.target.result;
imagePreviewContainer.style.display = "block";
};
reader.readAsDataURL(file);
} else {
fileName.textContent = "No image chosen";
imagePreviewContainer.style.display = "none";
}
});
interpretBtn.addEventListener("click", async function (e) {
try {
e.preventDefault();
if (fileInput.files.length === 0) {
showNotification("warning", "no Image selected");
return;
}
loadingContainer.style.display = "block";
interpretBtn.disabled = true;
const formData = new FormData();
formData.append("file_img", fileInput.files[0]);
const response = await fetch("/interpret", {
method: "POST",
body: formData,
});
const result = await response.json();
if (result.error) {
showNotification("error", result.error);
return;
}
resultsImage.src = imagePreview.src;
interpretationContent.innerText = result.caption;
resultsSection.style.display = "block";
resultsSection.scrollIntoView({ behavior: "smooth" });
} catch (error) {
showNotification("error", error);
} finally {
loadingContainer.style.display = "none";
interpretBtn.disabled = false;
}
});
newInterpretationBtn.addEventListener("click", function () {
fileInput.files = [];
fileName.textContent = "No image chosen";
imagePreviewContainer.style.display = "none";
resultsSection.style.display = "none";
document.querySelector(".upload").scrollIntoView({ behavior: "smooth" });
});
downloadBtn.addEventListener("click", function () {
const interpretationText = interpretationContent.innerText;
const blob = new Blob([interpretationText], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "image-interpretation.txt";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
});
});
|