static/scripts/image_iterpretation.js

const notifications = document.querySelector(".notifications");
const fileContainer = document.querySelector(".file-container");
const label = document.querySelector("#label-input");
const inputFile = document.querySelector("#document-input");
const form = document.querySelector("form");

const result_img = document.querySelector(".result_img");
const img_wrapper = document.querySelector(".img-wrapper");
const text_result = document.querySelector(".result-text");

const toast = (message, type) => {
	const notification = document.createElement("div");

	notification.innerHTML = `
		<i class="fa fa-xmark close" onclick="this.parentNode.remove()"></i>
        <i class="fa-solid ${
					type === "error" ? "fa-circle-xmark" : "fa-triangle-exclamation"
				} icon"></i>
    
      <div class="notification-content">
        <h3>${type}</h3>
        <p>${message}</p>
      </div>
    `;
	notification.classList.add(...["notification", type]);
	notifications.appendChild(notification);
	setTimeout(() => {
		notification.remove();
	}, 5000);
};

let file = null;
const SUPPORTED_EXT = ["jpg", "png", "jpeg"];

function clear() {
	file = null;
	label.style.display = "flex";
	fileContainer.innerHTML = "";
}
const upload = (fileData) => {
	file = fileData;
	const ext = file.name.split(".").pop();
	let isvalid = SUPPORTED_EXT.some((s_ext) => s_ext === ext);
	if (isvalid) {
		label.style.display = "none";
		fileContainer.innerHTML = `
        <div class="file-wrapper">
                    <i class="fa fa-file-image"></i>
                    <p>
                        ${file.name}
                    </p>
                    <button id='btn-clear' type="button" ><i class="fa fa-close" ></i></button>
        </div>
        `;
		document
			.querySelector("#btn-clear")
			.addEventListener("click", (e) => clear(e));
	} else {
		console.error("file is not supported");
		toast("file is not supported", "error");
	}
};

inputFile.addEventListener("change", (e) => {
	e.preventDefault();
	if (inputFile.files[0]) upload(inputFile.files[0]);
});

label.addEventListener("dragover", (e) => {
	e.preventDefault();
});
label.addEventListener("drop", (e) => {
	e.preventDefault();
	upload(e.dataTransfer.files[0]);
});
form.addEventListener("submit", async (e) => {
	e.preventDefault();
	let res = await new Promise((resolve, reject) => {
		setTimeout(() => {
			resolve({
				src: "../static/assests/1694502952506.jpg",
				discription: "this is a discription",
			});
		}, 3000);
	});
	const img = document.createElement("img");
	img.src = res.src;
	img_wrapper.appendChild(img);
	text_result.innerText = res.discription;
	result_img.scrollIntoView({ behavior: "smooth" });
});