static/scripts/summerize.js

const label = document.querySelector("#label-input");
const inputfile = label.querySelector("#document-input");
const fileContainer = document.querySelector(".file-container");
const form = document.querySelector("form");
const summary_section = document.querySelector("#summary");
const btnDounload = summary_section.querySelector("#btn-download");

let file = null;
const SUPPORTED_EXT = ["pdf", "docx", "pptx", "xlsx"];

const getfileicon = (ext) => {
	return ext === "pdf"
		? "fa-file-pdf"
		: ext === "xlsx"
		? "fa-file-excel"
		: ext === "pptx"
		? "fa-file-powerpoint"
		: "fa-file-word";
};

const upload = (filedata) => {
	file = filedata;
	const [name, ext] = file.name.split(".");

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

inputfile.addEventListener("change", (e) => {
	e.preventDefault();
	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();
	/*if (file === null) {
    console.error("No file choosed");
  } else {
    const formData = new FormData();
    formData.append("file", file);
    const res = await fetch("/summarize", {
      method: "post",

      body: formData,
    });
    const data = await res.json();
    console.log(data.text);*/
	summary_section.style.display = "block";
	const text = `  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos,
              nulla quia vitae officia, repudiandae eum inventore facilis sunt
              aliquid dolorem enim placeat ex cumque mollitia necessitatibus
              voluptatem aut provident assumenda? Eius delectus cum, minus
              voluptate eos laborum odio dolorum! Nulla excepturi laboriosam
              atque aliquid placeat vero enim doloribus quas, repudiandae
              vo`;

	summary_section.scrollIntoView({ behavior: "smooth" });

	typing(
		text,
		summary_section.querySelector(".text-wrapper"),
		summary_section.querySelector(".summary-content")
	);

	// }
});

const typing = (text, element, parent) => {
	const textsplit = text.split(" ");

	const interval = setInterval(() => {
		if (textsplit.length > 0) {
			element.innerHTML += `${textsplit.shift()} `;
			parent.scrollIntoView({ behavior: "smooth" });

			element.scrollIntoView({ behavior: "smooth" });
		} else {
			clearInterval(interval);
		}
	}, 50);
};