static/scripts/ImageInterpretation.js

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);
	});
});