Update the UI and main

main.py

@@ -81,13 +81,13 @@ def index(req:Request):
     return  templates.TemplateResponse('index.html',{'request':req})
 @app.get("/summarization",response_class=HTMLResponse)
 def index(req:Request):
-    return  templates.TemplateResponse('Summarization.html',{'request':req})
+    return  templates.TemplateResponse('text-summarization.html',{'request':req})
 @app.get("/datavisualisation",response_class=HTMLResponse)
 def index(req:Request):
-    return  templates.TemplateResponse('DataVisualisation.html',{'request':req})
+    return  templates.TemplateResponse('data-visualization.html',{'request':req})
 @app.get("/imageinterpretation",response_class=HTMLResponse)
 def index(req:Request):
-    return  templates.TemplateResponse('ImageInterpretation.html',{'request':req})
+    return  templates.TemplateResponse('image-interpretation.html',{'request':req})
 
 
 
@@ -109,13 +109,13 @@ def interpret(file_img:UploadFile=File(...)):
     return  JSONResponse(content={"caption": caption[0]['generated_text']},status_code=200)
 
 @app.post("/summerize")
-async def summerzation(file:UploadFile=File(...)):
+def summerzation(file:UploadFile=File(...)):
     try:
         extension = file.filename.split(".")[-1]
         supported_ext=["pdf","xlxs","docx","ppt"]
         if extension not in supported_ext :
             return JSONResponse(content={"error": "Unsupported file type"},status_code=400)
-        file_bytes = await file.file.read()
+        file_bytes = file.file.read()
         if len(file_bytes) >  MAX_SIZE :
             return JSONResponse(content={"error": "too large file "},status_code=400)
         if extension == "pdf":
@@ -178,7 +178,6 @@ df.dtypes:{df.dtypes.to_dict()}
 -you have to extract the column names and the plot type  from the prompt bellow  and use them in the code.
 -if the user task is not clear or there is an error like the column names are not in the dataframe, raise an 
 error.
-
 ##Prompt: {user_need}.
         """
         global generator
@@ -202,7 +201,7 @@ error.
             plt.savefig(buf, format='png')
             buf.seek(0)
             base64_image = base64.b64encode(buf.getvalue()).decode('utf-8')
-            return JSONResponse(content={"plot": f"data:image/png;base64,{base64_image}"},status_code=200)
+            return JSONResponse(content={"plot": f"data:image/png;base64,{base64_image}",'code':code},status_code=200)
         except Exception as e:
             print(e)
             return JSONResponse(content={"error": str(e) },status_code=500)

static/scripts/ImageInterpretation.js

@@ -0,0 +1,92 @@
+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);
+	});
+});

static/scripts/data-visualisation.js

@@ -0,0 +1,91 @@
+document.addEventListener("DOMContentLoaded", function () {
+	const fileInput = document.getElementById("data-upload");
+	const fileName = document.getElementById("file-name");
+	const promptInput = document.getElementById("visualization-prompt");
+	const visualizeBtn = document.getElementById("visualize-btn");
+	const loadingContainer = document.getElementById("loading-container");
+	const resultsSection = document.getElementById("results-section");
+	const img_chart = document.getElementById("results-chart");
+	const newVisualizationBtn = document.getElementById("new-visualization-btn");
+	const downloadChartBtn = document.getElementById("download-chart-btn");
+	const downloadCodeBtn = document.getElementById("download-code-btn");
+
+	fileInput.addEventListener("change", function () {
+		if (this.files && this.files[0]) {
+			fileName.textContent = this.files[0].name;
+		} else {
+			fileName.textContent = "No Data chosen";
+		}
+	});
+
+	visualizeBtn.addEventListener("click", async function () {
+		try {
+			if (fileInput.files.length === 0) {
+				showNotification("warning", "No file chosen ...");
+				return;
+			}
+			const prompt = promptInput.value.trim();
+			if (!prompt) {
+				showNotification("warning", "discribe your needs ...");
+				return;
+			}
+
+			loadingContainer.style.display = "block";
+			visualizeBtn.disabled = true;
+
+			const formdata = new FormData();
+			formdata.append("file", fileInput.files[0]);
+			formdata.append("user_need", prompt);
+			const response = await fetch("/plot", {
+				method: "POST",
+				body: formData,
+			});
+			const result = await response.json();
+
+			if (result.error) {
+				showNotification("error", result.error);
+				return;
+			}
+			img_chart.src = result.plot;
+			resultsSection.style.display = "block";
+			resultsSection.scrollIntoView({ behavior: "smooth" });
+		} catch (error) {
+			showNotification("error", error);
+		} finally {
+			loadingContainer.style.display = "none";
+			visualizeBtn.disabled = false;
+		}
+	});
+
+	newVisualizationBtn.addEventListener("click", function () {
+		fileInput.files = [];
+		//fileName.textContent = "No Data chosen";
+		promptInput.value = "";
+		resultsSection.style.display = "none";
+
+		document.querySelector(".upload").scrollIntoView({ behavior: "smooth" });
+	});
+
+	downloadChartBtn.addEventListener("click", function () {
+		const link = document.createElement("a");
+		link.download = "chart_visualization.png";
+		link.href = img_chart.src;
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	});
+
+	downloadCodeBtn.addEventListener("click", function () {
+		const codeContent = document.getElementById("code-content").innerText;
+		const blob = new Blob([codeContent], { type: "text/plain" });
+		const url = URL.createObjectURL(blob);
+
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = "visualization_code.py";
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	});
+});

static/scripts/dataViz.js

@@ -1,99 +0,0 @@
-const fileContainer = document.querySelector(".file-container");
-const label = document.querySelector("#label-input");
-const inputFile = document.querySelector("#document-input");
-const form = document.querySelector("form");
-const prompt_txt = document.querySelector("#text-prompt");
-const result_section = document.querySelector(".result");
-const chart_wrapper = result_section.querySelector(".chart-wrapper");
-
-let file = null;
-const notifications = document.querySelector(".notifications");
-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();
-	}, 10000);
-};
-
-function clear() {
-	file = null;
-	label.style.display = "flex";
-	fileContainer.innerHTML = "";
-}
-const upload = (fileData) => {
-	file = fileData;
-	const ext = file.name.split(".").pop();
-
-	if (ext === "pdf") {
-		label.style.display = "none";
-		fileContainer.innerHTML = `
-        <div class="file-wrapper">
-                    <i class="fa fa-file-excel"></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();
-	if (e.dataTransfer.files[0]) upload(e.dataTransfer.files[0]);
-});
-form.addEventListener("submit", (e) => {
-	e.preventDefault();
-	/*const prompt = prompt_txt.value.trim();
-	if (prompt && file) {
-		showchart("");
-	} else {
-		console.log("no file selected or no prompted");
-	}*/
-});
-const showchart = (url) => {
-	chart_wrapper.innerHTML = `
-        <i class="fas fa-download" id="btn-download" onclick='download()'></i>
-        <img src=${url} id="chart">
-        `;
-	result_section.style.display = "block";
-	result_section.scrollIntoView({ behavior: "smooth" });
-};
-
-const download = () => {
-	const imageurl = document.querySelector("#chart").src;
-	const a = document.createElement("a");
-	a.href = imageurl;
-	a.download = "SmartDoc-chart.jpg";
-	document.body.appendChild(a);
-	a.click();
-	document.body.removeChild(a);
-};

static/scripts/image_iterpretation.js

@@ -1,95 +0,0 @@
-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();
-	if (!file) {
-		toast("No Image selected ...", "warning");
-	} else {
-		const data = new FormData();
-		data.append("file_img", file);
-		const response = await fetch("/interpret", {
-			method: "post",
-			body: data,
-		});
-		const result = await response.json();
-		if (result.error) {
-			toast(result.error, "error");
-			console.log(result.error);
-			return;
-		}
-		text_result.innerHTML = result.caption;
-	}
-});

static/scripts/notifcation.js

@@ -0,0 +1,41 @@
+function showNotification(type, message, duration = 5000) {
+	const container = document.querySelector(".notification-container");
+	const notification = document.createElement("div");
+	notification.classList.add("notification", `notification-${type}`);
+	notification.innerHTML = `
+        <div class="notification-icon">${getIconForType(type)}</div>
+        <div class="notification-content">
+            <div class="notification-title">${type}</div>
+            <div class="notification-message">${message}</div>
+        </div>
+        <button class="notification-close" onclick='this.parentNode.remove()' aria-label="Close notification">X</button>`;
+
+	container.appendChild(notification);
+	if (duration > 0) {
+		setTimeout(() => {
+			closeNotification(notification);
+		}, duration);
+	}
+}
+
+function closeNotification(notification) {
+	notification.classList.add("hide");
+	setTimeout(() => {
+		notification.remove();
+	}, 300);
+}
+
+function getIconForType(type) {
+	switch (type) {
+		case "error":
+			return "❌";
+		case "warning":
+			return "⚠️";
+		case "success":
+			return "✅";
+		case "info":
+			return "ℹ️";
+		default:
+			return "";
+	}
+}

static/scripts/notification.js

@@ -1,22 +0,0 @@
-const wrapper = document.querySelector(".notifications");
-
-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]);
-	wrapper.appendChild(notification);
-	setTimeout(() => {
-		notification.remove();
-	}, 10000);
-};

static/scripts/summerize.js

@@ -1,106 +0,0 @@
-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);
-};

static/scripts/text-summarization.js

@@ -0,0 +1,71 @@
+document.addEventListener("DOMContentLoaded", function () {
+	const fileInput = document.getElementById("document-upload");
+	const fileName = document.getElementById("file-name");
+	const summarizeBtn = document.getElementById("summarize-btn");
+	const loadingContainer = document.getElementById("loading-container");
+	const resultsSection = document.getElementById("results-section");
+	const result_summary = document.getElementById("summary-content");
+	const newSummaryBtn = document.getElementById("new-summary-btn");
+	const downloadBtn = document.getElementById("download-btn");
+
+	fileInput.addEventListener("change", function () {
+		if (this.files && this.files[0]) {
+			fileName.textContent = this.files[0].name;
+		} else {
+			fileName.textContent = "No file chosen";
+		}
+	});
+
+	summarizeBtn.addEventListener("click", async function () {
+		try {
+			if (fileInput.files.length === 0) {
+				showNotification("warning", "Please select a file first");
+				return;
+			}
+
+			loadingContainer.style.display = "block";
+			summarizeBtn.disabled = true;
+			const formData = new FormData();
+			formData.append("file", fileInput.files[0]);
+			const response = await fetch("/summerize", {
+				method: "POST",
+				body: formData,
+			});
+			const result = await response.json();
+
+			if (result.error) {
+				showNotification("error", result.error);
+				return;
+			}
+			result_summary.innerText = result.summary;
+			resultsSection.style.display = "block";
+			resultsSection.scrollIntoView({ behavior: "smooth" });
+		} catch (error) {
+			showNotification("error", error);
+		} finally {
+			loadingContainer.style.display = "none";
+			summarizeBtn.disabled = false;
+		}
+	});
+
+	newSummaryBtn.addEventListener("click", function () {
+		fileInput.value = "";
+		fileName.textContent = "No file chosen";
+		resultsSection.style.display = "none";
+		document.querySelector(".upload").scrollIntoView({ behavior: "smooth" });
+	});
+
+	downloadBtn.addEventListener("click", function () {
+		const summaryText = document.getElementById("summary-content").innerText;
+		const blob = new Blob([summaryText], { type: "text/plain" });
+		const url = URL.createObjectURL(blob);
+
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = "document-summary.txt";
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	});
+});

static/styles/features.css

@@ -1,553 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Romanesco&display=swap");
-
-*,
-*::after,
-*::before {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-a {
-  text-decoration: none;
-}
-
-:root {
-  --primary: #0c042c;
-  --secondary: #d1c10a;
-  --helper: #c9c5e0;
-
-}
-
-html {
-  scroll-behavior: smooth;
-  font-size: 20px;
-}
-
-body {
-  font-family: "Roboto";
-}
-
-.container {
-  width: 80%;
-  margin: 0 auto;
-}
-
-.title {
-  font-size: 30px;
-  text-align: center;
-  text-shadow: 2px 4px 0 rgba(72, 71, 71, 0.529);
-  color: var(--primary);
-  margin: 50px 0;
-}
-
-header {
-  background-color: var(--primary);
-}
-
-header .container a {
-  font-family: "Romanesco", system-ui, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
-    sans-serif;
-  font-size: 2.5rem;
-  color: var(--secondary);
-  cursor: pointer;
-}
-
-.hero {
-  min-height: 77vh;
-  position: relative;
-  background-color: var(--primary);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-}
-
-.hero img {
-  position: absolute;
-
-  left: -100px;
-  width: 100%;
-  top: 42%;
-  opacity: 0.4;
-}
-
-.hero .hero-content {
-  padding: 10px 20px;
-  color: var(--secondary);
-  text-align: center;
-  transform: translateY(-50px);
-}
-
-.hero .hero-content h1 {
-  font-size: 2rem;
-  font-weight: 900;
-  letter-spacing: 2px;
-  margin-bottom: 20px;
-}
-
-.hero .hero-content h3 {
-  font-size: 1.5rem;
-  font-weight: 200;
-  letter-spacing: 4px;
-  margin-bottom: 20px;
-}
-
-.hero .hero-content p {
-  font-size: 0.85rem;
-  font-weight: 200;
-  letter-spacing: 4px;
-  margin-bottom: 20px;
-}
-
-.raisons {
-  background-color: var(--helper);
-  padding: 20px 0;
-}
-
-.raisons-content .raisons-wrapper {
-  padding: 10px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.raison {
-  display: flex;
-  align-items: center;
-  padding: 20px;
-  box-shadow: 0 0 8px black;
-  border-radius: 8px;
-  gap: 30px;
-  transition: transform 0.5s;
-  background-color: white;
-}
-
-.raison:hover {
-  transform: scale(1.05);
-}
-
-.raison i {
-  font-size: 20px;
-  color: green;
-}
-
-.raison p {
-  font-size: 20px;
-  font-weight: 500;
-  text-transform: capitalize;
-}
-
-.steps {
-  position: relative;
-  min-height: fit-content;
-  padding: 20px 0;
-  overflow: hidden;
-}
-
-.steps img {
-  width: 122%;
-  top: 60%;
-  left: -100px;
-  transform: rotate(20deg);
-  position: absolute;
-  z-index: -1;
-  opacity: 0.4;
-}
-
-.steps-content .steps-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 30px;
-  margin-bottom: 50px;
-  padding: 0 10px;
-}
-
-.steps-content .steps-wrapper .step {
-  display: flex;
-  color: var(--secondary);
-  gap: 10px;
-  padding: 20px;
-
-  width: 270px;
-  height: 150px;
-  border-radius: 5px;
-  background-color: var(--primary);
-  box-shadow: 0 0 9px black;
-  transition: transform 0.5s;
-}
-
-.steps-content .steps-wrapper .step:hover {
-  transform: scale(1.05);
-}
-
-.steps-content .steps-wrapper .step span {
-  font-size: 100px;
-  display: flex;
-  align-items: flex-end;
-  font-family: "Romanesco";
-  opacity: 0.4;
-}
-
-.steps-content .steps-wrapper .step p {
-  font-size: 22px;
-  flex: 1;
-
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.upload {
-  background-color: var(--helper);
-  padding: 20px 0;
-}
-
-.upload .upload-content p {
-  font-size: 20px;
-}
-
-.upload .upload-content .wrapper {
-  padding: 20px 0;
-  gap: 30px;
-  margin-top: 20px;
-  border: 1px solid var(--secondary);
-  border-radius: 20px;
-  background-color: #fff;
-}
-
-.upload .upload-content .wrapper .input-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 20px;
-  padding: 0 20px;
-}
-
-.upload .upload-content .wrapper .input-wrapper label {
-  width: 100%;
-  max-width: 350px;
-  min-width: 200px;
-  height: 150px;
-  border-radius: 5px;
-  border: 1px dashed var(--secondary);
-  background-color: var(--primary);
-  color: var(--secondary);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  text-align: center;
-  gap: 10px;
-  cursor: pointer;
-}
-
-.active {
-  border: 3px solid var(--secondary);
-}
-
-.upload .upload-content .wrapper .input-wrapper label i {
-  font-size: 50px;
-}
-
-.upload .upload-content .wrapper .input-wrapper label span {
-  font-size: 17px;
-  font-weight: 100;
-}
-
-.upload .upload-content .wrapper .btn-wrapper {
-  text-align: center;
-  padding: 0 20px;
-}
-
-.upload .upload-content .wrapper .btn-wrapper button {
-  width: 100%;
-  max-width: 350px;
-  min-width: 200px;
-  padding: 10px 0;
-  cursor: pointer;
-  font-size: 20px;
-  font-weight: 600;
-  color: var(--primary);
-  background-color: var(--secondary);
-  border-radius: 5px;
-  outline: none;
-  border: 1px solid transparent;
-  transition: all 0.5s;
-}
-
-.upload .upload-content .wrapper .btn-wrapper button:hover {
-  border-color: var(--primary);
-  transform: scale(1.05);
-}
-
-.upload .upload-content .wrapper .file-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.upload .upload-content .wrapper .file-container .file-wrapper {
-  display: flex;
-  position: relative;
-  align-items: center;
-  background-color: var(--primary);
-  padding: 20px 10px;
-  width: 350px;
-  height: 65px;
-  gap: 10px;
-  color: var(--secondary);
-  border-radius: 5px;
-}
-
-.upload .upload-content .wrapper .file-container .file-wrapper i {
-  font-size: 35px;
-}
-
-.upload .upload-content .wrapper .file-container .file-wrapper p {
-  flex: 1;
-  font-size: 15px;
-  overflow: scroll;
-  scrollbar-width: none;
-}
-
-.upload .upload-content .wrapper .file-container .file-wrapper button {
-  position: absolute;
-  top: 0;
-  right: 0;
-  cursor: pointer;
-  border-radius: 50%;
-  padding: 2px 5px;
-  background-color: var(--primary);
-  color: var(--secondary);
-  border: none;
-  outline: none;
-  transition: all 0.5s;
-}
-
-.upload .upload-content .wrapper .file-container .file-wrapper button i {
-  font-size: 10px;
-}
-
-.upload .upload-content .wrapper .file-container .file-wrapper button:hover {
-  background-color: var(--secondary);
-  color: var(--primary);
-  transform: scale(1.05);
-}
-
-.summary {
-  padding: 20px 0;
-  display: none;
-}
-
-.summary .summary-content {
-  max-height: 40vh;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-}
-
-.summary .summary-content .summary-wrapper {
-  background-color: var(--helper);
-  border-radius: 5px;
-  flex: 1;
-
-  overflow-y: auto;
-  scrollbar-width: none;
-}
-
-.summary .summary-content .summary-wrapper i {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  font-size: 20px;
-  background-color: var(--primary);
-  color: var(--helper);
-  padding: 10px;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: transform 0.5s;
-}
-
-.summary .summary-content .summary-wrapper i:hover {
-  transform: scale(1.1);
-  background-color: var(--secondary);
-}
-
-.summary .summary-content .summary-wrapper p {
-  text-align: start;
-  line-height: 25px;
-  padding: 20px 0;
-  letter-spacing: 1.5px;
-  width: 80%;
-  margin: 0 auto;
-}
-
-
-
-.upload .upload-content .wrapper .prompt-wrapper {
-  display: flex;
-  align-items: center;
-  width: 90%;
-
-  max-width: 900px;
-  min-width: 270px;
-  height: 40px;
-  margin: 0 auto;
-  border: 1px solid var(--primary);
-  border-radius: 5px;
-}
-
-.upload .upload-content .wrapper .prompt-wrapper input {
-  flex: 1;
-  height: 100%;
-  padding: 0 15px;
-  outline: none;
-  font-size: 15px;
-  border: none;
-  border-radius: 5px 0 0 5px;
-}
-
-.upload .upload-content .wrapper .prompt-wrapper button {
-  height: 100%;
-  padding: 0 20px;
-  font-size: 15px;
-  font-weight: 500;
-  outline: none;
-  color: var(--primary);
-  background-color: var(--secondary);
-  border: none;
-  cursor: pointer;
-  transition: transform 0.5s;
-  border-radius: 0 5px 5px 0;
-}
-
-.upload .upload-content .wrapper .prompt-wrapper button:hover {
-  transform: scale(1.05);
-}
-
-.result {
-
-  padding: 20px 0;
-}
-
-.result .result-content .chart-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-.result .result-content .chart-wrapper i {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  font-size: 20px;
-  background-color: var(--primary);
-  color: var(--helper);
-  padding: 10px;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: transform 0.5s;
-}
-
-.result .result-content .chart-wrapper i:hover {
-  transform: scale(1.1);
-  background-color: var(--secondary);
-}
-
-.result .result-content .chart-wrapper img {
-  width: 50%;
-  height: 40%;
-  max-width: 600px;
-  max-height: 500px;
-  border-radius: 5px;
-}
-
-.result_img .result-content .img-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 10px 0;
-}
-
-.result_img .result-content {
-  padding: 10px 0;
-}
-
-.result_img .result-content .img-wrapper img {
-  width: 300px;
-  height: 300px;
-  border-radius: 5px;
-
-}
-
-.result_img .result-content h3 {
-  font-size: 25px;
-  color: var(--primary);
-  margin-bottom: 5px;
-}
-
-.result_img .result-content p {
-  font-size: 17px;
-  letter-spacing: 2px;
-  color: var(--primary);
-  margin-bottom: 5px;
-
-}
-
-footer {
-  font-family: R;
-  height: 50px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: "Romanesco";
-  font-size: 30px;
-  color: var(--secondary);
-  background-color: var(--primary);
-}
-
-
-@media (max-width:576px) {
-  html {
-    font-size: 13px;
-  }
-
-
-
-  .raison {
-    padding: 5px;
-  }
-
-  .title {
-    font-size: 25px;
-  }
-
-
-  .upload .upload-content .wrapper .prompt-wrapper button {
-    padding: 0 5px;
-    font-size: 10px;
-    font-weight: 400;
-  }
-}
-
-@media (max-width:768px) and (min-width:576px) {
-  html {
-    font-size: 16px;
-  }
-
-
-  .title {
-    font-size: 27px;
-  }
-
-  .raison {
-    padding: 10px;
-  }
-}

static/styles/functions.css

@@ -0,0 +1,626 @@
+/* Base Styles */
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Romanesco&display=swap");
+
+:root {
+    /*--primary-color: #4f46e5;
+    --primary-dark: #4338ca;
+    --secondary-color: #10b981;
+    --dark-blue: #0a192f;
+    --dark-blue-light: #112240;
+    --dark-blue-lighter: #1d3557;
+    --text-color: #e6f1ff;
+    --text-light: #a8b2d1;
+    --text-lightest: #ccd6f6;
+    --background-dark: #0a192f;
+    --background-card: #112240;
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+    --border-radius: 8px;
+    --highlight-color: #64ffda;
+    /* 0c042c
+    d1c10a
+    
+*/
+    --primary-color: #4f46e5;
+    --primary-dark: #4338ca;
+
+    --secondary-color: #10b981;
+    --dark-blue: #0c042c;
+    --dark-blue-light: #1a0d51;
+    --dark-blue-lighter: #2b2059;
+    --text-color: #e6f1ff;
+    --text-light: #a8b2d1;
+    --text-lightest: #ccd6f6;
+    --background-dark: #0c042c;
+    --background-card: #08031e;
+    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
+    --border-radius: 8px;
+    --highlight-color: #64ffda;
+    --code-bg: #0d1b2a;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html::-webkit-scrollbar {
+    width: 12px;
+}
+
+html::-webkit-scrollbar-track {
+    background: var(--background-card);
+}
+
+html::-webkit-scrollbar-thumb {
+    background-color: var(--highlight-color);
+    border-radius: var(--border-radius);
+}
+
+html::-webkit-scrollbar-thumb:hover {
+    background-color: var(--secondary-color);
+}
+
+
+
+body {
+    font-family: "Inter", sans-serif;
+    color: var(--text-color);
+    line-height: 1.6;
+    background-color: var(--dark-blue);
+
+    scrollbar-color: red;
+    scrollbar-color: blue;
+}
+
+.container {
+
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+ul {
+    list-style: none;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--border-radius);
+}
+
+
+
+
+
+.btn-primary {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 12px 24px;
+    border-radius: var(--border-radius);
+    font-weight: 500;
+    display: inline-block;
+    transition: background-color 0.3s ease;
+    border: none;
+    cursor: pointer;
+}
+
+.btn-primary:hover {
+    background-color: var(--primary-dark);
+}
+
+.btn-secondary {
+    background-color: transparent;
+    color: var(--highlight-color);
+    padding: 12px 24px;
+    border-radius: var(--border-radius);
+    font-weight: 500;
+    display: inline-block;
+    border: 1px solid var(--highlight-color);
+    transition: background-color 0.3s ease;
+    cursor: pointer;
+}
+
+.btn-secondary:hover {
+    background-color: rgba(100, 255, 218, 0.1);
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 60px;
+}
+
+.section-header h2 {
+    font-size: 2.5rem;
+    margin-bottom: 16px;
+    color: var(--text-lightest);
+}
+
+.underline {
+    height: 4px;
+    width: 70px;
+    background-color: var(--highlight-color);
+    margin: 0 auto;
+}
+
+/* Header Styles */
+header {
+    background-color: var(--dark-blue);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+nav {
+    padding: 20px 0;
+}
+
+.logo a {
+    font-size: 2.5rem;
+    font-family: 'Romanesco';
+    font-weight: 700;
+    color: var(--highlight-color);
+}
+
+
+
+/* Hero Section */
+.hero {
+    padding: 80px 0;
+
+    background-image: linear-gradient(to bottom, var(--dark-blue), var(--dark-blue-light));
+}
+
+.hero .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.hero-content h1 {
+    font-size: 3.5rem;
+    line-height: 1.2;
+    margin-bottom: 24px;
+    color: var(--text-lightest);
+}
+
+.hero-content p {
+    font-size: 1.25rem;
+    color: var(--text-light);
+    margin-bottom: 32px;
+    max-width: 800px;
+}
+
+
+.reasons {
+    padding: 100px 0;
+    background-color: var(--dark-blue-light);
+}
+
+.reasons-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+}
+
+.reason-card {
+    background-color: var(--background-card);
+    padding: 30px;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: transform 0.3s ease;
+}
+
+.reason-card:hover {
+    transform: translateY(-5px);
+    border-color: var(--highlight-color);
+}
+
+.reason-icon {
+    font-size: 2.5rem;
+    margin-bottom: 20px;
+    color: var(--highlight-color);
+}
+
+.reason-card h3 {
+    font-size: 1.5rem;
+    margin-bottom: 16px;
+    color: var(--text-lightest);
+}
+
+.reason-card p {
+    color: var(--text-light);
+}
+
+/* Steps Section */
+.steps {
+    padding: 100px 0;
+    background-color: var(--dark-blue);
+}
+
+.steps-container {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.step {
+    display: flex;
+    margin-bottom: 50px;
+    position: relative;
+}
+
+.step:last-child {
+    margin-bottom: 0;
+}
+
+.step-number {
+    flex-shrink: 0;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-right: 30px;
+    position: relative;
+    z-index: 2;
+}
+
+.step-content {
+    padding-top: 5px;
+}
+
+.step-content h3 {
+    font-size: 1.5rem;
+    margin-bottom: 16px;
+    color: var(--text-lightest);
+}
+
+.step-content p {
+    color: var(--text-light);
+}
+
+.step-line {
+    position: absolute;
+    top: 50px;
+    left: 25px;
+    width: 2px;
+    height: calc(100% - 0px);
+    background-color: var(--primary-color);
+    z-index: 1;
+}
+
+
+
+
+.upload {
+    padding: 100px 0;
+    background-color: var(--dark-blue-light);
+}
+
+.upload-container {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.upload-box {
+    background-color: var(--background-card);
+    padding: 40px;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+    border: 2px dashed rgba(255, 255, 255, 0.2);
+    text-align: center;
+    transition: border-color 0.3s ease;
+}
+
+.upload-box:hover {
+    border-color: var(--highlight-color);
+}
+
+.upload-icon {
+    font-size: 3rem;
+    margin-bottom: 20px;
+    color: var(--highlight-color);
+}
+
+.upload-text {
+    margin-bottom: 30px;
+}
+
+.upload-text h3 {
+    font-size: 1.5rem;
+    margin-bottom: 10px;
+    color: var(--text-lightest);
+}
+
+.upload-text p {
+    color: var(--text-light);
+}
+
+.file-input-container {
+    margin-bottom: 30px;
+}
+
+.file-input-label {
+    background-color: var(--dark-blue-lighter);
+    color: var(--text-lightest);
+    padding: 12px 24px;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    display: inline-block;
+    transition: background-color 0.3s ease;
+}
+
+.file-input-label:hover {
+    background-color: var(--dark-blue);
+}
+
+.file-input {
+    display: none;
+}
+
+.file-name {
+    margin-top: 10px;
+    color: var(--text-light);
+    font-size: 0.9rem;
+}
+
+/* Image Preview */
+.image-preview-container {
+    margin: 20px 0;
+    display: none;
+}
+
+.image-preview {
+    max-width: 100%;
+    max-height: 300px;
+    border-radius: var(--border-radius);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.prompt-container {
+    margin-bottom: 30px;
+    text-align: left;
+}
+
+.prompt-label {
+    display: block;
+    margin-bottom: 10px;
+    color: var(--text-lightest);
+    font-weight: 500;
+}
+
+.prompt-input {
+    width: 100%;
+    padding: 12px 16px;
+    background-color: var(--dark-blue-lighter);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--border-radius);
+    color: var(--text-color);
+    font-family: "Inter", sans-serif;
+    font-size: 1rem;
+    resize: vertical;
+    min-height: 100px;
+    transition: border-color 0.3s ease;
+}
+
+.prompt-input:focus {
+    outline: none;
+    border-color: var(--highlight-color);
+}
+
+.prompt-input::placeholder {
+    color: var(--text-light);
+    opacity: 0.7;
+}
+
+
+
+.loading-container {
+    display: none;
+    margin: 30px 0;
+    text-align: center;
+}
+
+.loading-spinner {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    border: 3px solid rgba(100, 255, 218, 0.3);
+    border-radius: 50%;
+    border-top-color: var(--highlight-color);
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.loading-text {
+    margin-top: 15px;
+    color: var(--text-light);
+}
+
+
+.results {
+    padding: 100px 0;
+    background-color: var(--dark-blue);
+    display: none;
+}
+
+.results-container {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.results-box {
+    background-color: var(--background-card);
+    padding: 40px;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.results-header {
+    display: flex;
+
+    align-items: center;
+    margin-bottom: 30px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.results-title h3 {
+    font-size: 1.5rem;
+    color: var(--text-lightest);
+}
+
+.results-content {
+    margin-bottom: 30px;
+    color: var(--text-light);
+    line-height: 1.8;
+}
+
+.results-image-container {
+    margin-bottom: 30px;
+    text-align: center;
+}
+
+.results-image {
+    max-width: 100%;
+    max-height: 300px;
+    border-radius: var(--border-radius);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.results-chart-container {
+    margin-bottom: 30px;
+    text-align: center;
+    background-color: white;
+    padding: 20px;
+    border-radius: var(--border-radius);
+}
+
+.results-chart {
+    max-width: 100%;
+    max-height: 400px;
+    border-radius: var(--border-radius);
+}
+
+.results-code-container {
+    margin-bottom: 30px;
+}
+
+.results-code-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.results-code-title {
+    font-size: 1.2rem;
+    color: var(--text-lightest);
+}
+
+.results-code {
+    background-color: var(--code-bg);
+    padding: 20px;
+    border-radius: var(--border-radius);
+    overflow-x: auto;
+    font-family: monospace;
+    font-size: 0.9rem;
+    line-height: 1.5;
+    color: var(--text-light);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.results-code pre {
+    margin: 0;
+    white-space: pre-wrap;
+}
+
+.results-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 15px;
+}
+
+
+footer {
+    background-color: var(--dark-blue-lighter);
+    color: var(--text-color);
+    padding: 80px 0 30px;
+}
+
+.footer-content {
+
+    margin-bottom: 60px;
+}
+
+.footer-logo a {
+    font-size: 2rem;
+    font-family: 'Romanesco';
+    margin-bottom: 8px;
+    color: var(--highlight-color);
+}
+
+.footer-logo p {
+    color: var(--text-light);
+}
+
+.footer-bottom {
+    text-align: center;
+    padding-top: 30px;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    color: var(--text-light);
+}
+
+
+@media (max-width: 768px) {
+
+    .section-header h2 {
+        font-size: 2rem;
+    }
+
+    .hero-content h1 {
+        font-size: 2.5rem;
+    }
+
+    .step {
+        flex-direction: column;
+    }
+
+    .step-number {
+        margin-bottom: 20px;
+        margin-right: 0;
+    }
+
+    .step-line {
+        display: none;
+    }
+
+    .footer-content {
+        flex-direction: column;
+        gap: 40px;
+    }
+
+    .footer-links {
+        flex-wrap: wrap;
+        gap: 30px;
+    }
+}

static/styles/index.css

@@ -1,288 +1,375 @@
+/* Base Styles */
 @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Romanesco&display=swap");
 
-*,
-*::after,
-*::before {
+:root {
+  --primary-color: #4f46e5;
+  --primary-dark: #4338ca;
+  --dark-blue: #0c042c;
+  --dark-blue-light: #1a0d51;
+  --dark-blue-lighter: #2b2059;
+  --secondary-color: #10b981;
+  --highlight-color: #64ffda;
+  --text-color: #e6f1ff;
+  --text-light: #a8b2d1;
+  --text-lightest: #ccd6f6;
+  --background-dark: #0c042c;
+  --background-card: #08031e;
+  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --border-radius: 8px;
+}
+
+* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
+html::-webkit-scrollbar {
+  width: 12px;
+}
+
+html::-webkit-scrollbar-track {
+  background: var(--background-card);
+}
+
+html::-webkit-scrollbar-thumb {
+  background-color: var(--highlight-color);
+  border-radius: var(--border-radius);
+}
+
+html::-webkit-scrollbar-thumb:hover {
+  background-color: var(--secondary-color);
+}
+
+body {
+  font-family: "Inter", sans-serif;
+  color: var(--text-color);
+  line-height: 1.6;
+  overflow-x: hidden;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 20px;
+}
+
 a {
   text-decoration: none;
+  color: inherit;
 }
 
-:root {
-  --primary: #0c042c;
-  --secondary: #d1c10a;
-  --helper: #c9c5e0;
+ul {
+  list-style: none;
 }
 
-html {
-  scroll-behavior: smooth;
-  font-size: 20px;
+img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--border-radius);
 }
 
-body {
-  font-family: "Roboto";
+.btn-primary {
+  background-color: var(--primary-color);
+  color: white;
+  padding: 12px 24px;
+  border-radius: var(--border-radius);
+  font-weight: 500;
+  display: inline-block;
+  transition: background-color 0.3s ease;
+}
 
+.btn-primary:hover {
+  background-color: var(--primary-dark);
 }
 
-header {
-  background-color: #0c042c;
-  padding: 10px 0;
+.btn-secondary {
+  background-color: transparent;
+  color: var(--primary-color);
+  padding: 12px 24px;
+  border-radius: var(--border-radius);
+  font-weight: 500;
+  display: inline-block;
+  border: 1px solid var(--primary-color);
+  transition: background-color 0.3s ease;
 }
 
-header div {
-  width: 80%;
-  margin: 0 auto;
+.btn-secondary:hover {
+  background-color: rgba(79, 70, 229, 0.1);
 }
 
-header div a {
-  font-family: "Romanesco";
+.section-header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.section-header h2 {
   font-size: 2.5rem;
-  color: var(--secondary);
-  cursor: pointer;
+  margin-bottom: 16px;
+  color: var(--text-color);
 }
 
-.hero {
-  height: calc(100vh - 70px);
-  position: relative;
-  background-color: var(--primary);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
+.underline {
+  height: 4px;
+  width: 70px;
+  background-color: var(--highlight-color);
+  margin: 0 auto;
 }
 
-.hero img {
-  position: absolute;
-  left: -200px;
-  right: 0;
-  top: 42%;
+
+header {
+  background-color: var(--dark-blue);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+  position: sticky;
+  top: 0;
+  z-index: 100;
 }
 
-.hero .hero-content {
-  padding: 10px 20px;
-  color: var(--secondary);
-  text-align: center;
-  transform: translateY(-50px);
+nav {
+
+  padding: 20px 0;
 }
 
-.hero .hero-content h3 {
-  font-size: 0.85rem;
-  font-weight: 200;
-  letter-spacing: 3px;
-  margin-bottom: 20px;
+.logo a {
+  font-size: 2.5rem;
+  font-family: 'Romanesco';
+  font-weight: 700;
+  color: var(--highlight-color);
 }
 
-.hero .hero-content h1 {
-  font-family: "Roboto";
-  font-size: 2rem;
-  font-weight: bolder;
+
+
+
+
+.hero {
+  padding: 100px 0;
+
+  background-image: linear-gradient(to bottom, var(--dark-blue), var(--dark-blue-light));
 }
 
-.hero .hero-content .buttons {
-  font-size: 18px;
-  font-weight: bolder;
-  text-transform: capitalize;
+.hero .container {
   display: flex;
-  justify-content: center;
   align-items: center;
-  gap: 70px;
-  margin-top: 50px;
+  gap: 60px;
 }
 
-.hero .hero-content .buttons a {
-  padding: 10px 20px;
-  border-radius: 4px;
-  transition: all 0.4s;
+.hero-content {
+  flex: 1;
 }
 
-.hero .hero-content .buttons a:hover {
-  transform: scale(1.05);
+.hero-content h1 {
+  font-size: 3.5rem;
+  line-height: 1.2;
+  margin-bottom: 24px;
+  color: var(--text-color);
 }
 
-.hero .hero-content .buttons a:first-child {
-  background-color: var(--secondary);
-  color: var(--primary);
+.hero-content p {
+  font-size: 1.25rem;
+  color: var(--text-light);
+  margin-bottom: 32px;
+  max-width: 90%;
 }
 
-.hero .hero-content .buttons a:last-child {
-  background-color: var(--helper);
-  color: var(--secondary);
+.hero-buttons {
+  display: flex;
+  gap: 16px;
 }
 
-.about {
-  position: relative;
-  padding: 50px 0 30px;
-  background-color: var(--helper);
-  overflow: hidden;
+.hero-image {
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
 }
 
-.about img {
-  position: absolute;
+.animate {
+  animation: show linear;
+  animation-timeline: view(90% auto);
 }
 
-.about img:first-child {
-  top: 10px;
-  left: -50px;
+@keyframes show {
+  from {
+    opacity: 0;
+    transform: translate(120px) scale(0.1);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(0) scale(1);
+  }
 }
 
-.about img:nth-child(2) {
-  bottom: 10px;
-  right: 0;
+.about {
+  padding: 100px 0;
+  background-color: var(--dark-blue-light);
 }
 
-.about .about-content {
-  width: 100%;
-  max-width: 80%;
-  margin: 0 auto;
+.about-content {
+  display: flex;
+  align-items: center;
+  gap: 60px;
 }
 
-.title {
-  font-size: 30px;
-  text-align: center;
-  text-shadow: 2px 4px 0 rgba(72, 71, 71, 0.529);
-  color: var(--primary);
+.about-image {
+  flex: 1;
 }
 
-.about .about-content h1 {
-  margin: 50px 0;
+.about-text {
+  flex: 1;
 }
 
-.about .about-content p {
-  letter-spacing: 3px;
-  text-transform: capitalize;
-  margin-bottom: 70px;
-  font-weight: 500;
-  font-size: 1rem;
+.about-text h3 {
+  font-size: 2rem;
+  margin-bottom: 24px;
+  color: var(--text-color);
 }
 
-.features {
-  position: relative;
-  overflow: hidden;
-  margin-bottom: 50px;
+.about-text p {
+  margin-bottom: 16px;
+  color: var(--text-light);
 }
 
-.features img {
-  position: absolute;
-  width: 125%;
-  top: 58%;
-  left: -275px;
+
+.functions {
+  padding: 100px 0;
+  background-color: var(--dark-blue);
 }
 
-.features-content h1 {
-  margin: 50px 0;
+.functions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+
+  gap: 30px;
 }
 
-.features-content .features-wrapper {
+.function-card {
+  background-color: var(--background-card);
+  padding: 40px 30px;
+  border-radius: var(--border-radius);
+  border: 1px solid var(--background-card);
+  box-shadow: var(--shadow);
+  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+}
+
+.function-card:hover {
+  transform: translateY(-5px);
+  border-color: var(--highlight-color);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+.function-icon {
+  margin-bottom: 24px;
   display: flex;
   justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 30px;
 }
 
-.feature {
-  display: flex;
-  flex-direction: column;
-  background-color: var(--primary);
-  color: var(--secondary);
+.function-card h3 {
+  font-size: 1.5rem;
+  margin-bottom: 16px;
+  color: var(--text-color);
   text-align: center;
-  width: 100%;
-  max-width: 300px;
-  padding: 20px 10px 0;
-  border-radius: 8px;
-  height: 300px;
-  z-index: 2;
-  box-shadow: 0 0 10px black;
-  transition: all 0.6s;
 }
 
-.feature:hover {
-  transform: scale(1.1);
+.function-card p {
+  color: var(--text-light);
+  margin-bottom: 24px;
+  text-align: center;
 }
 
-.feature i {
-  font-size: 50px;
-  margin-bottom: 20px;
+.function-link {
+  display: block;
+  text-align: center;
+  color: var(--primary-color);
+  font-weight: 500;
+  transition: color 0.3s ease;
 }
 
-.feature h2 {
-  font-size: 25px;
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+.function-link:hover {
+  color: var(--primary-dark);
 }
 
-.feature p {
-  font-size: 15px;
-  font-weight: 100;
-  margin-top: 20px;
-  width: 100%;
-  margin-bottom: 20px;
+
+footer {
+  background-color: var(--dark-blue-lighter);
+  color: white;
+  padding: 80px 0 30px;
 }
 
-.btn-wrapper {
-  width: 100%;
+.footer-content {
 
-  padding-bottom: 30px;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
+  margin-bottom: 60px;
 }
 
-.btn {
-  font-size: 18px;
-  font-weight: bolder;
-  text-transform: capitalize;
-  padding: 10px 20px;
-  border-radius: 4px;
-  transition: all 0.4s;
-  background-color: var(--helper);
-  color: var(--primary);
+.footer-logo a {
+  font-size: 2rem;
+  font-family: 'Romanesco';
+  color: var(--highlight-color);
+  margin-bottom: 8px;
+
 }
 
-.btn:hover {
-  transform: scale(1.05);
+.footer-logo p {
+  color: var(--text-light);
 }
 
-footer {
-  font-family: R;
-  height: 50px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: "Romanesco";
-  font-size: 30px;
-  color: var(--secondary);
-  background-color: var(--primary);
+
+.footer-bottom {
+  text-align: center;
+  padding-top: 30px;
+  border-top: 1px solid #374151;
+  color: var(--text-light);
 }
 
-@media (max-width:576px) {
-  html {
-    font-size: 13px;
+@media (max-width: 992px) {
+  .hero .container {
+    flex-direction: column;
+  }
+
+  .hero-content {
+    text-align: center;
   }
 
+  .hero-content p {
+    max-width: 100%;
+  }
 
+  .hero-buttons {
+    justify-content: center;
+  }
 
-  .hero .hero-content .buttons a {
-    padding: 5px 10px;
+  .about-content {
+    flex-direction: column;
   }
 
+  .footer-content {
+    flex-direction: column;
+    gap: 40px;
+  }
 
+  .footer-links {
+    flex-wrap: wrap;
+    gap: 30px;
+  }
 }
 
-@media (max-width:768px) and (min-width:576px) {
-  html {
-    font-size: 16px;
+@media (max-width: 768px) {
+  .nav-links {
+    display: none;
   }
 
+  .section-header h2 {
+    font-size: 2rem;
+  }
 
-  .hero .hero-content .buttons a {
-    padding: 5px 10px;
+  .hero-content h1 {
+    font-size: 2.5rem;
   }
 
+  .about-text h3 {
+    font-size: 1.75rem;
+  }
 }

static/styles/notification.css

@@ -1,87 +1,165 @@
-.notifications {
+:root {
+    --error-color: #ef4444;
+    --error-bg: rgba(239, 68, 68, 0.1);
+    --error-border: rgba(239, 68, 68, 0.3);
+
+    --warning-color: #f59e0b;
+    --warning-bg: rgba(245, 158, 11, 0.1);
+    --warning-border: rgba(245, 158, 11, 0.3);
+
+    --success-color: #10b981;
+    --success-bg: rgba(16, 185, 129, 0.1);
+    --success-border: rgba(16, 185, 129, 0.3);
+
+    --info-color: #3b82f6;
+    --info-bg: rgba(59, 130, 246, 0.1);
+    --info-border: rgba(59, 130, 246, 0.3);
+}
+
+.notification-container {
     position: fixed;
-    top: 15px;
-    right: 15px;
-    height: 100vh;
-    z-index: 12;
+    top: 20px;
+    right: 20px;
+    width: 100%;
+    max-width: 400px;
+    z-index: 1000;
     display: flex;
-    flex-direction: column;
-    gap: 20px;
-    font-family: Roboto, sans-serif;
+    flex-direction: column-reverse;
+    gap: 10px;
+    overflow: hidden;
 }
 
 .notification {
     position: relative;
-    width: 300px;
+
     display: flex;
     align-items: center;
-    gap: 20px;
-    border-radius: 10px;
-    animation: spin 0.5s linear 1 alternate;
-    padding: 10px 20px;
-    background-color: #e7e7e7;
-    color: #000;
-    box-shadow: 0 0 12px black;
+    padding: 16px;
+    border-radius: var(--border-radius);
+    box-shadow: var(--shadow);
+    animation: slideIn 0.3s ease forwards;
+    transform: translateX(120%);
+    opacity: 0;
+}
+
+@keyframes slideIn {
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOut {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+
+    to {
+        transform: translateX(120%);
+        opacity: 0;
+    }
+}
 
+.notification.hide {
+    animation: slideOut 0.3s ease forwards;
 }
 
-.notification .icon {
-    font-size: 30px;
+.notification-icon {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    margin-right: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.notification-content {
+    flex-grow: 1;
 }
 
-.error .icon {
-    color: red
+.notification-title {
+    font-weight: 600;
+    margin-bottom: 4px;
+    font-size: 1rem;
+    text-transform: capitalize;
 }
 
-.warning .icon {
-    color: rgb(255, 225, 0)
+.notification-message {
+    font-size: 0.875rem;
+    margin: 0;
 }
 
-i.close {
+.notification-close {
     position: absolute;
-    color: black;
-    top: 10px;
-    right: 10px;
-    font-size: 15px;
+
+    width: 20px;
+    height: 20px;
+    top: 0;
+    right: 0;
     cursor: pointer;
-    opacity: 0.6;
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+    background: none;
+    border: none;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
 }
 
-i.close:hover {
+.notification-close:hover {
     opacity: 1;
 }
 
-.notification .notification-content {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    gap: 5px;
-    overflow: hidden;
+.notification-error {
+    background-color: var(--error-bg);
+    border-left: 4px solid var(--error-color);
 }
 
-.notification .notification-content h3 {
-    text-transform: capitalize;
-    font-size: 22px;
+.notification-error .notification-icon,
+.notification-error .notification-title {
+    color: var(--error-color);
+}
+
+.notification-warning {
+    background-color: var(--warning-bg);
+    border-left: 4px solid var(--warning-color);
 }
 
-.notification .notification-content p {
-    font-size: 15px;
-    text-overflow: ellipsis;
-    color: #333;
+.notification-warning .notification-icon,
+.notification-warning .notification-title {
+    color: var(--warning-color);
+}
 
-    flex: 1;
+.notification-success {
+    background-color: var(--success-bg);
+    border-left: 4px solid var(--success-color);
 }
 
+.notification-success .notification-icon,
+.notification-success .notification-title {
+    color: var(--success-color);
+}
 
-@keyframes spin {
-    from {
-        transform: translateX(300px);
-        opacity: 0;
-    }
+.notification-info {
+    background-color: var(--info-bg);
+    border-left: 4px solid var(--info-color);
+}
 
-    to {
-        transform: translateX(0);
-        opacity: 1;
+.notification-info .notification-icon,
+.notification-info .notification-title {
+    color: var(--info-color);
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+    .notification-container {
+        top: 10px;
+        right: 10px;
+        left: 10px;
+        width: auto;
     }
 }

templates/DataVisualisation.html

@@ -1,116 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>SmartDoc AI-Data Visualisation</title>
-    <link rel="stylesheet" href="static/styles/features.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
-    <link rel="stylesheet" href="static/styles/notification.css" />
-</head>
-
-<body>
-    <header>
-        <div class="container">
-            <a href="/">SmartDoc AI </a>
-        </div>
-    </header>
-    <main>
-        <main>
-            <section id="hero" class="hero">
-                <img src="static/assests/g.svg" alt="" />
-                <div class="container hero-content">
-                    <h1>Turn Data into <br />Stunning Visuals</h1>
-                    <h3>Create interactive charts and graphs efforlessly</h3>
-                    <p>
-                        Our Data visualisation tool helps you to transform raw data into visually appealing charts and
-                        graphs , enabling
-
-                        better decision - making and communication of insights </p>
-                </div>
-            </section>
-            <section class="raisons">
-                <div class="container raisons-content">
-                    <h1 class="title">Why Choose Our Data Visualisation Tool ?</h1>
-                    <div class="raisons-wrapper">
-                        <div class="raison">
-                            <i class="fas fa-check-circle"></i>
-                            <p>User-friendly interface for all skill lavels </p>
-                        </div>
-                        <div class="raison">
-                            <i class="fas fa-check-circle"></i>
-                            <p>Multiple chart types suit your needs</p>
-                        </div>
-                        <div class="raison">
-                            <i class="fas fa-check-circle"></i>
-                            <p>Interactive and customizable Visuals</p>
-                        </div>
-                        <div class="raison">
-                            <i class="fas fa-check-circle"></i>
-                            <p>Secure and private processing</p>
-                        </div>
-                    </div>
-                </div>
-            </section>
-            <section class="steps">
-                <img src="static/assests/g.svg" alt="" />
-                <div class="steps-content">
-                    <h1 class="title">How it works</h1>
-                    <div class="steps-wrapper">
-                        <div class="step">
-                            <span>1</span>
-                            <p>Upload your Data</p>
-                        </div>
-                        <div class="step">
-                            <span>2</span>
-                            <p>Prompt your need </p>
-                        </div>
-                        <div class="step">
-                            <span>3</span>
-                            <p>
-                                View Result and
-                                download your chart
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            <section class="upload">
-                <div class="container upload-content">
-                    <h1 class="title">Upload</h1>
-                    <p>Supported Formats: Excel</p>
-                    <form class="wrapper" enctype="multipart/form-data">
-                        <div class="input-wrapper">
-                            <label for="document-input" id="label-input" class="active" draggable="true">
-                                <input type="file" id="document-input" hidden />
-                                <i class="fa fa-cloud-arrow-up"></i>
-                                <span>Drag and Drop or Select a File</span>
-                            </label>
-                        </div>
-                        <div class="file-container"></div>
-                        <div class="prompt-wrapper">
-                            <input type="text" id="text-prompt" placeholder="decribe your need ...">
-                            <button type="submit">Genreate</button>
-                        </div>
-                    </form>
-                </div>
-            </section>
-            <section class="result" id="result">
-                <div class="container result-content">
-                    <h1 class="title">Result</h1>
-                    <div class="chart-wrapper">
-                    </div>
-                </div>
-            </section>
-        </main>
-        <footer>SmartDoc AI - 2025</footer>
-        <div class="notifications">
-        </div>
-        <script src="static/scripts/dataViz.js"></script>
-
-</body>
-
-
-</html>

templates/ImageInterpretation.html

@@ -1,114 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>SmartDoc AI-Image Interpretation</title>
-    <link rel="stylesheet" href="static/styles/features.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
-    <link rel="stylesheet" href="static/styles/notification.css" />
-</head>
-
-<body>
-    <div class="notifications">
-    </div>
-    <header>
-        <div class="container">
-            <a href="/">SmartDoc AI </a>
-        </div>
-    </header>
-    <main>
-        <section id="hero" class="hero">
-            <img src="static/assests/g.svg" alt="" />
-            <div class="container hero-content">
-                <h1>Unlock the Meaning Behind <br />Your Images in Seconds</h1>
-                <h3>AI - powered analysis for visual content</h3>
-                <p>
-                    Whether you’re working with photos , diagrams , or illustrations ,
-                    our image interpretation tool provides detailed descriptions and
-                    insights , making visual data more accessible than ever.
-                </p>
-            </div>
-        </section>
-        <section class="raisons">
-            <div class="container raisons-content">
-                <h1 class="title">Why Choose Our Image Interpretation Tool ?</h1>
-                <div class="raisons-wrapper">
-                    <div class="raison">
-                        <i class="fas fa-check-circle"></i>
-                        <p>Accurate and detailed descriptions</p>
-                    </div>
-                    <div class="raison">
-                        <i class="fas fa-check-circle"></i>
-                        <p>Dentifies objects,scenes , and text within images</p>
-                    </div>
-                    <div class="raison">
-                        <i class="fas fa-check-circle"></i>
-                        <p>Ideal for accessibility and content creation</p>
-                    </div>
-                    <div class="raison">
-                        <i class="fas fa-check-circle"></i>
-                        <p>Secure and private processing</p>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <section class="steps">
-            <img src="static/assests/g.svg" alt="" />
-            <div class="steps-content">
-                <h1 class="title">How it works</h1>
-                <div class="steps-wrapper">
-                    <div class="step">
-                        <span>1</span>
-                        <p>Upload your Image</p>
-                    </div>
-                    <div class="step">
-                        <span>2</span>
-                        <p>Let our AI analyze the content</p>
-                    </div>
-                    <div class="step">
-                        <span>3</span>
-                        <p>View Detailed description or tags</p>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <section class="upload">
-            <div class="container upload-content">
-                <h1 class="title">Upload</h1>
-                <p>Supported Formats: PNG,JPG,JPEG</p>
-                <form class="wrapper" enctype="multipart/form-data">
-                    <div class="input-wrapper">
-                        <label for="document-input" id="label-input" class="active" draggable="true">
-                            <input type="file" id="document-input" hidden />
-                            <i class="fa fa-cloud-arrow-up"></i>
-                            <span>Drag and Drop or Select a File</span>
-                        </label>
-                    </div>
-                    <div class="file-container"></div>
-                    <div class="btn-wrapper">
-                        <button type="submit" id="interpret">Interpret</button>
-                    </div>
-                </form>
-            </div>
-        </section>
-        <section id="result_img" class="result_img">
-            <div class="container result-content">
-                <h1 class="title">Result</h1>
-                <div class="img-wrapper">
-
-                </div>
-
-                <h3>Description : </h3>
-                <p class="result-text">
-                </p>
-
-            </div>
-        </section>
-    </main>
-    <footer>SmartDoc AI - 2025</footer>
-    <script src="static/scripts/image_iterpretation.js"></script>
-</body>
-
-</html>

templates/Summarization.html

@@ -1,114 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>SmartDoc AI-Summarization</title>
-  <link rel="stylesheet" href="static/styles/features.css" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
-  <link rel="stylesheet" href="static/styles/notification.css" />
-</head>
-
-<body>
-
-  <header>
-    <div class="container">
-      <a href="/">SmartDoc AI </a>
-    </div>
-  </header>
-  <main>
-    <section id="hero" class="hero">
-      <img src="static/assests/g.svg" alt="" />
-      <div class="container hero-content">
-        <h1>Summarize Your Documents <br />in Seconds</h1>
-        <h3>Effortlessly extract key insights from Documents</h3>
-        <p>
-          Our AI-powered summarization tool processes lengthy generates
-          concise summaries , saving your time and effort . Perfect for
-          students , researchers , and professionals.
-        </p>
-      </div>
-    </section>
-    <section class="raisons">
-      <div class="container raisons-content">
-        <h1 class="title">Why Choose Our Summarization Tool ?</h1>
-        <div class="raisons-wrapper">
-          <div class="raison">
-            <i class="fas fa-check-circle"></i>
-            <p>Fast and accurate summarization</p>
-          </div>
-          <div class="raison">
-            <i class="fas fa-check-circle"></i>
-            <p>Retains key information and context</p>
-          </div>
-          <div class="raison">
-            <i class="fas fa-check-circle"></i>
-            <p>Supports multiple file formats</p>
-          </div>
-          <div class="raison">
-            <i class="fas fa-check-circle"></i>
-            <p>Secure and private processing</p>
-          </div>
-        </div>
-      </div>
-    </section>
-    <section class="steps">
-      <img src="static/assests/g.svg" alt="" />
-      <div class="steps-content">
-        <h1 class="title">How it works</h1>
-        <div class="steps-wrapper">
-          <div class="step">
-            <span>1</span>
-            <p>Upload your document</p>
-          </div>
-          <div class="step">
-            <span>2</span>
-            <p>Let our AI analyze the content</p>
-          </div>
-          <div class="step">
-            <span>3</span>
-            <p>Downlaod or copy the summarized text</p>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <section class="upload">
-      <div class="container upload-content">
-        <h1 class="title">Upload</h1>
-        <p>Supported Formats: DOCX ,PDF, PPTX,XLSX</p>
-        <form class="wrapper" enctype="multipart/form-data">
-          <div class="input-wrapper">
-            <label for="document-input" id="label-input" class="active" draggable="true">
-              <input type="file" id="document-input" hidden />
-              <i class="fa fa-cloud-arrow-up"></i>
-              <span>Drag and Drop or Select a File</span>
-            </label>
-          </div>
-          <div class="file-container"></div>
-          <div class="btn-wrapper">
-            <button type="submit" id="summerize">Summarize</button>
-          </div>
-        </form>
-      </div>
-    </section>
-
-    <section class="summary" id="summary">
-      <div class="container summary-content">
-        <h1 class="title">Summary</h1>
-        <div class="summary-wrapper">
-          <i class="fas fa-download" id="btn-download"></i>
-          <p class="text-wrapper"></p>
-        </div>
-      </div>
-    </section>
-  </main>
-
-  <footer>SmartDoc AI - 2025</footer>
-  <div class="notifications">
-  </div>
-  <script src="static/scripts/summerize.js"></script>
-</body>
-
-</html>

templates/data-visualization.html

@@ -0,0 +1,223 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Data Visualization - SmartDoc AI</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+  <link rel="stylesheet" href="static/styles/notification.css">
+  <link rel="stylesheet" href="static/styles/functions.css">
+
+</head>
+
+<body>
+  <header>
+    <nav class="container">
+      <div class="logo">
+        <a href="/">SmartDoc AI</a>
+      </div>
+    </nav>
+  </header>
+
+  <section class="hero">
+    <div class="container">
+      <div class="hero-content">
+        <h1>Turn Data into
+          <br>
+          Stunning Visuals
+        </h1>
+        <p>Transform your raw data into compelling visual stories with our AI-powered data visualization tool. Upload
+          your spreadsheets and let our system generate beautiful, insightful charts and graphs.</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="reasons">
+    <div class="container">
+      <div class="section-header">
+        <h2>Why Choose Our Data Visualization AI</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="reasons-grid">
+        <div class="reason-card">
+          <div class="reason-icon">📊</div>
+          <h3>Instant Insights</h3>
+          <p>Transform complex datasets into clear, actionable visualizations in seconds. Our AI identifies patterns and
+            relationships that might otherwise remain hidden.</p>
+        </div>
+
+        <div class="reason-card">
+          <div class="reason-icon">🎨</div>
+          <h3>Beautiful Design</h3>
+          <p>Generate professional-quality charts and graphs with optimal color schemes, typography, and layouts that
+            follow data visualization best practices.</p>
+        </div>
+
+        <div class="reason-card">
+          <div class="reason-icon">💡</div>
+          <h3>Smart Recommendations</h3>
+          <p>Our AI suggests the most effective visualization types based on your data structure, ensuring you
+            communicate your insights in the most impactful way.</p>
+        </div>
+
+        <div class="reason-card">
+          <div class="reason-icon">🔄</div>
+          <h3>Code Generation</h3>
+          <p>Get ready-to-use code for your visualizations that you can integrate into your projects, presentations, or
+            dashboards with minimal effort.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="steps">
+    <div class="container">
+      <div class="section-header">
+        <h2>How It Works</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="steps-container">
+        <div class="step">
+          <div class="step-number">1</div>
+          <div class="step-line"></div>
+          <div class="step-content">
+            <h3>Upload Your Data</h3>
+            <p>Select and upload your Excel spreadsheet containing the data you want to visualize. Our system supports
+              various data formats and structures.</p>
+          </div>
+        </div>
+
+        <div class="step">
+          <div class="step-number">2</div>
+          <div class="step-line"></div>
+          <div class="step-content">
+            <h3>Describe Your Needs</h3>
+            <p>Tell us what kind of visualization you're looking for or what insights you want to highlight. Our AI will
+              use this to guide the visualization process.</p>
+          </div>
+        </div>
+
+        <div class="step">
+          <div class="step-number">3</div>
+          <div class="step-line"></div>
+          <div class="step-content">
+            <h3>AI Processing</h3>
+            <p>Our advanced algorithms analyze your data, identify patterns and relationships, and generate the most
+              appropriate visualization based on your requirements.</p>
+          </div>
+        </div>
+
+        <div class="step">
+          <div class="step-number">4</div>
+          <div class="step-content">
+            <h3>Download and Use</h3>
+            <p>Get your visualization as an image file, along with the code used to create it. You can download, share,
+              or integrate it directly into your projects.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="upload">
+    <div class="container">
+      <div class="section-header">
+        <h2>Upload Your Data</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="upload-container">
+        <div class="upload-box">
+          <div class="upload-icon">📈</div>
+          <div class="upload-text">
+            <h3>Select a Spreadsheet to Visualize</h3>
+            <p>Upload an Excel file (.xlsx) containing your data (max 1MB)</p>
+          </div>
+          <div class="file-input-container">
+            <label for="data-upload" class="file-input-label">Choose File</label>
+            <input type="file" id="data-upload" class="file-input" accept=".xlsx,.xls">
+            <div class="file-name" id="file-name">No file chosen</div>
+          </div>
+
+          <div class="prompt-container">
+            <label for="visualization-prompt" class="prompt-label">Describe the visualization you want:</label>
+            <textarea id="visualization-prompt" class="prompt-input"
+              placeholder="Example: Create a bar chart showing monthly sales by product category, highlighting the top-performing category"
+              rows="4"></textarea>
+          </div>
+
+          <button class="btn-primary" id="visualize-btn">Generate Visualization</button>
+
+          <div class="loading-container" id="loading-container">
+            <div class="loading-spinner"></div>
+            <div class="loading-text">Analyzing data and generating visualization...</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="results" id="results-section">
+    <div class="container">
+      <div class="section-header">
+        <h2>Your Visualization</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="results-container">
+        <div class="results-box">
+          <div class="results-header">
+            <div class="results-title">
+              <h3>Generated Chart</h3>
+            </div>
+          </div>
+
+          <div class="results-chart-container">
+            <img src="" alt="Generated Chart" class="results-chart" id="results-chart">
+          </div>
+
+          <div class="results-code-container">
+            <div class="results-code-header">
+              <div class="results-code-title">Generated Code</div>
+            </div>
+            <div class="results-code">
+              <pre id="code-content">
+
+</pre>
+            </div>
+          </div>
+
+          <div class="results-actions">
+            <button class="btn-secondary" id="new-visualization-btn">New Visualization</button>
+            <button class="btn-primary" id="download-chart-btn">Download Chart</button>
+            <button class="btn-primary" id="download-code-btn">Download Code</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-logo">
+          <a href="/">SmartDoc AI</a>
+          <p>Intelligent Document Processing</p>
+        </div>
+
+      </div>
+      <div class="footer-bottom">
+        <p>&copy; 2025 SmartDoc AI.</p>
+      </div>
+    </div>
+  </footer>
+  <div class="notification-container"></div>
+  <script src="static/scripts/notifcation.js"></script>
+  <script src="static/scripts/data-visualisation.js"></script>
+
+
+
+</body>
+
+</html>

templates/image-interpretation.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Image Interpretation - SmartDoc AI</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+  <link rel="stylesheet" href="static/styles/notification.css">
+  <link rel="stylesheet" href="static/styles/functions.css">
+
+
+</head>
+
+<body>
+  <header>
+    <nav class="container">
+      <div class="logo">
+        <a href="/">SmartDoc AI</a>
+      </div>
+    </nav>
+  </header>
+
+  <section class="hero ">
+    <div class="container">
+      <div class="hero-content">
+        <h1>Unlock the Meaning Behind <br>
+          Your Images</h1>
+        <p>Unlock the insights hidden in your images with our advanced AI technology. From charts and graphs to complex
+          diagrams, our system analyzes and explains visual content with remarkable accuracy.</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="reasons">
+    <div class="container">
+      <div class="section-header">
+        <h2>Why Choose Our Image Interpretation AI</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="reasons-grid">
+        <div class="reason-card">
+          <div class="reason-icon">🔍</div>
+          <h3>Deep Visual Analysis</h3>
+          <p>Our AI can identify objects, patterns, and relationships within images, extracting meaningful data from
+            charts, graphs, and visual content in documents.</p>
+        </div>
+
+        <div class="reason-card">
+          <div class="reason-icon">📊</div>
+          <h3>Data Extraction</h3>
+          <p>Convert visual data from charts and graphs into actionable insights and structured data that you can use
+            for analysis and decision-making.</p>
+        </div>
+
+        <div class="reason-card">
+          <div class="reason-icon">🧩</div>
+          <h3>Context Understanding</h3>
+          <p>Our system doesn't just identify what's in an image—it understands the context and relationships between
+            elements to provide meaningful interpretations.</p>
+        </div>
+
+        <div class="reason-card">
+          <div class="reason-icon">⚡</div>
+          <h3>Time-Saving</h3>
+          <p>Automate the tedious process of manually analyzing visual content, allowing you to focus on applying the
+            insights rather than extracting them.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="steps">
+    <div class="container">
+      <div class="section-header">
+        <h2>How It Works</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="steps-container">
+        <div class="step">
+          <div class="step-number">1</div>
+          <div class="step-line"></div>
+          <div class="step-content">
+            <h3>Upload Your Image</h3>
+            <p>Select and upload the image you want to analyze. We support various formats including JPG, PNG, GIF, and
+              more.</p>
+          </div>
+        </div>
+
+        <div class="step">
+          <div class="step-number">2</div>
+          <div class="step-line"></div>
+          <div class="step-content">
+            <h3>AI Processing</h3>
+            <p>Our advanced computer vision algorithms analyze your image, identifying objects, patterns, text, and
+              relationships between visual elements.</p>
+          </div>
+        </div>
+
+        <div class="step">
+          <div class="step-number">3</div>
+          <div class="step-line"></div>
+          <div class="step-content">
+            <h3>Review Interpretation</h3>
+            <p>Receive a detailed interpretation of your image, including descriptions of content, data extraction from
+              charts, and contextual analysis.</p>
+          </div>
+        </div>
+
+        <div class="step">
+          <div class="step-number">4</div>
+          <div class="step-content">
+            <h3>Download or Share</h3>
+            <p>Save the interpretation as a text file or share it directly with colleagues. All your data is processed
+              securely and never stored without your permission.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="upload">
+    <div class="container">
+      <div class="section-header">
+        <h2>Upload Your Image</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="upload-container">
+        <form class="upload-box">
+          <div class="upload-icon">🖼️</div>
+          <div class="upload-text">
+            <h3>Select an Image to Interpret</h3>
+            <p>Upload a JPG, PNG, or GIF file (max 5MB)</p>
+          </div>
+          <div class="file-input-container">
+            <label for="image-upload" class="file-input-label">Choose Image</label>
+            <input type="file" id="image-upload" class="file-input" accept="image/*">
+            <div class="file-name" id="file-name">No image chosen</div>
+          </div>
+
+          <div class="image-preview-container" id="image-preview-container">
+            <img src="" alt="Image Preview" class="image-preview" id="image-preview">
+          </div>
+
+          <button class="btn-primary" id="interpret-btn">Interpret Image</button>
+
+          <div class="loading-container" id="loading-container">
+            <div class="loading-spinner"></div>
+            <div class="loading-text">Analyzing image and generating interpretation...</div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </section>
+
+  <section class="results" id="results-section">
+    <div class="container">
+      <div class="section-header">
+        <h2>Your Image Interpretation</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="results-container">
+        <div class="results-box">
+          <div class="results-header">
+            <div class="results-title">
+              <h3>Image Analysis</h3>
+            </div>
+          </div>
+
+          <div class="results-image-container">
+            <img src="" alt="Analyzed Image" class="results-image" id="results-image">
+          </div>
+
+          <div class="results-content" id="interpretation-content">
+
+
+          </div>
+
+          <div class="results-actions">
+            <button class="btn-secondary" id="new-interpretation-btn">New Interpretation</button>
+            <button class="btn-primary" id="download-btn">Download Interpretation</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-logo">
+          <a href="/">SmartDoc AI</a>
+          <p>Intelligent Document Processing</p>
+        </div>
+
+      </div>
+      <div class="footer-bottom">
+        <p>&copy; 2025 SmartDoc AI.</p>
+      </div>
+    </div>
+  </footer>
+  <div class="notification-container"></div>
+  <script src="static/scripts/notifcation.js"></script>
+  <script src="static/scripts/ImageInterpretation.js"></script>
+
+</body>
+
+</html>

templates/index.html

@@ -2,99 +2,120 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>SmartDoc AI</title>
-  <link rel="stylesheet" href="static/styles/index.css" />
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
-  <link rel="stylesheet" href="static/styles/notification.css" />
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SmartDoc AI - Intelligent Document Processing</title>
+    <link rel="stylesheet" href="static/styles/index.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <!-- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">-->
 </head>
 
 <body>
-  <header>
-    <div>
-      <a href="/">SmartDoc AI </a>
-    </div>
-  </header>
-  <main>
-    <section class="hero">
-      <img src="static/assests/g.svg" />
-      <div class="hero-content">
-        <h3>Welcome to SmartDoc AI</h3>
-        <h1>
-          Your All-in-one Tool for <br />document Summerization ,Image
-          Interpretation <br />and Data Visualisation
-        </h1>
-        <div class="buttons">
-          <a href="#features">get started</a>
-          <a href="#about">learn more</a>
+    <header>
+        <nav class="container">
+            <div class="logo ">
+                <a href="/">SmartDoc AI</a>
+            </div>
+
+        </nav>
+    </header>
+
+    <section id="home" class="hero ">
+        <div class="container">
+            <div class="hero-content ">
+                <h1>Transform Your Documents with AI</h1>
+                <p>SmartDoc AI helps you extract insights, summarize content, and visualize data from your documents
+                    with advanced artificial intelligence.</p>
+                <div class="hero-buttons">
+                    <a href="#functions" class="btn-primary">Try for Free</a>
+                    <a href="#about" class="btn-secondary">Learn More</a>
+                </div>
+            </div>
+            <div class="hero-image">
+                <img src="/placeholder.svg?height=400&width=500" alt="SmartDoc AI Dashboard Preview">
+            </div>
         </div>
-      </div>
     </section>
 
     <section id="about" class="about">
-      <img src="static/assests/Ilust.svg" />
-      <img src="static/assests/Ilust.svg" />
-      <div class="about-content">
-        <h1 class="title">About SmartDoc AI</h1>
-        <p>
-          at SmartDoc AI ,we believe in empowering individuals and businesses
-          with cutting-edge technology.Our mission is to streamline workflows
-          by providing tools that are simple , efficient ,and reliable. Built
-          with advanced AI Algorithms, our platform ensures accuracy and speed
-          in every task.
-        </p>
-      </div>
-    </section>
-    <section id="features" class="features">
-      <img src="static/assests/g.svg" />
-      <div class="features-content">
-        <h1 class="title">What can SmartDoc AI Do ?</h1>
-        <div class="features-wrapper">
-          <div class="feature">
-            <i class="fas fa-file"></i>
-            <h2>Document Summerization in Seconds</h2>
-            <p>
-              Upload Your document and let our AI generate concise summaries
-              while retaining key information.
-            </p>
-            <div class="btn-wrapper">
-              <a href="/summarization" class="btn">Try Now</a>
+        <div class="container">
+            <div class="section-header">
+                <h2>About SmartDoc AI</h2>
+                <div class="underline"></div>
             </div>
-          </div>
-          <div class="feature">
-            <i class="fa fa-image"></i>
-            <h2>Interpret Images <br />with Ease</h2>
-            <p>
-              Upload images and our AI will analyze and describe their
-              content,making visual data more accessible.
-            </p>
-            <div class="btn-wrapper">
-              <a href="/imageinterpretation" class="btn">Try Now</a>
+            <div class="about-content">
+                <div class="about-image">
+                    <img src="/placeholder.svg?height=350&width=450" alt="SmartDoc AI in action">
+                </div>
+                <div class="about-text">
+                    <h3>Intelligent Document Processing</h3>
+                    <p>SmartDoc AI is a cutting-edge document intelligence platform that leverages the latest
+                        advancements in artificial intelligence to transform how you interact with documents and extract
+                        valuable insights.</p>
+                    <p>Our powerful AI engine can process various document formats, understand context, recognize
+                        patterns, and present information in user-friendly formats, saving you hours of manual work.</p>
+                    <p>Whether you're a researcher, business analyst, student, or professional, SmartDoc AI streamlines
+                        your workflow by automating document analysis and helping you focus on what matters most.</p>
+                </div>
             </div>
-          </div>
-          <div class="feature">
-            <i class="fa fa-chart-line"></i>
-            <h2>
-              Transform Data <br />
-              into Visual Insights
-            </h2>
-            <p>
-              Input raw data, and watch it transform into interactive charts
-              and graphs for better understanding.
-            </p>
-            <div class="btn-wrapper">
-              <a href="/datavisualisation" class="btn">Try Now</a>
+        </div>
+    </section>
+
+    <section id="functions" class="functions">
+        <div class="container">
+            <div class="section-header">
+                <h2>What SmartDoc AI Can Do</h2>
+                <div class="underline"></div>
+            </div>
+            <div class="functions-grid">
+                <div class="function-card  animate">
+                    <div class="function-icon">
+                        <img src="/placeholder.svg?height=80&width=80" alt="Text Summarization Icon">
+                    </div>
+                    <h3>Text Summarization</h3>
+                    <p>Extract key points and generate concise summaries from lengthy documents, articles, and reports
+                        with our advanced NLP algorithms.</p>
+                    <a href="/summarization" class="function-link">Learn More →</a>
+                </div>
+
+                <div class="function-card animate">
+                    <div class="function-icon">
+                        <img src="/placeholder.svg?height=80&width=80" alt="Image Interpretation Icon">
+                    </div>
+                    <h3>Image Interpretation</h3>
+                    <p>Analyze charts, graphs, diagrams, and visual content within documents to extract meaningful data
+                        and insights automatically.</p>
+                    <a href="/imageinterpretation" class="function-link">Learn More →</a>
+                </div>
+
+                <div class="function-card animate">
+                    <div class="function-icon">
+                        <img src="/placeholder.svg?height=80&width=80" alt="Data Visualization Icon">
+                    </div>
+                    <h3>Data Visualization</h3>
+                    <p>Transform complex data from your documents into clear, interactive visualizations that make
+                        information easier to understand and share.</p>
+                    <a href="/datavisualisation" class="function-link">Learn More →</a>
+                </div>
             </div>
-          </div>
         </div>
-      </div>
     </section>
-  </main>
 
-  <footer>SmartDoc AI - 2025</footer>
+    <footer>
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-logo">
+                    <a href="/">SmartDoc AI</a>
+                    <p>Intelligent Document Processing</p>
+                </div>
 
-  <script src="static/scripts/notification.js"></script>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2025 SmartDoc AI.</p>
+            </div>
+        </div>
+    </footer>
 </body>
 
 </html>

templates/text-summarization.html

@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Text Summarization - SmartDoc AI</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+  <link rel="stylesheet" href="static/styles/notification.css">
+  <link rel="stylesheet" href="static/styles/functions.css">
+
+</head>
+
+<body>
+  <header>
+    <nav class="container">
+      <div class="logo">
+        <a href="/">SmartDoc AI</a>
+      </div>
+    </nav>
+  </header>
+
+  <section class="hero">
+    <div class="container">
+      <div class="hero-content">
+        <h1>Summarize Your Documents <br>
+          in Seconds</h1>
+        <p>Transform lengthy documents into concise, accurate summaries with our advanced AI technology. Save time and
+          extract key insights from any text with just a few clicks.</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="reasons">
+    <div class="container">
+      <div class="section-header">
+        <h2>Why Choose Our Summarization AI</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="reasons-grid">
+        <div class="reason-card">
+          <div class="reason-icon">⚡</div>
+          <h3>Time Efficiency</h3>
+          <p>Reduce reading time by up to 80% while retaining all key information from your documents. Our AI quickly
+            identifies and extracts the most important points.</p>
+        </div>
+
+        <div class="reason-card">
+          <div class="reason-icon">🧠</div>
+          <h3>Advanced NLP</h3>
+          <p>Powered by state-of-the-art Natural Language Processing algorithms that understand context, identify key
+            concepts, and generate human-like summaries.</p>
+        </div>
+
+        <div class="reason-card">
+          <div class="reason-icon">📊</div>
+          <h3>Accuracy</h3>
+          <p>Our AI maintains the highest level of accuracy, ensuring that summaries capture the essential information
+            without missing critical details or context.</p>
+        </div>
+
+        <div class="reason-card">
+          <div class="reason-icon">🔄</div>
+          <h3>Customizable</h3>
+          <p>Adjust summary length and focus areas based on your specific needs. Get exactly the information you want,
+            in the format you prefer.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="steps">
+    <div class="container">
+      <div class="section-header">
+        <h2>How It Works</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="steps-container">
+        <div class="step">
+          <div class="step-number">1</div>
+          <div class="step-line"></div>
+          <div class="step-content">
+            <h3>Upload Your Document</h3>
+            <p>Select and upload the document you want to summarize. We support various formats including PDF, DOCX,
+              TXT, and more.</p>
+          </div>
+        </div>
+
+        <div class="step">
+          <div class="step-number">2</div>
+          <div class="step-line"></div>
+          <div class="step-content">
+            <h3>AI Processing</h3>
+            <p>Our advanced AI analyzes your document, identifying key concepts, main ideas, and important details while
+              understanding the context and relationships between ideas.</p>
+          </div>
+        </div>
+
+        <div class="step">
+          <div class="step-number">3</div>
+          <div class="step-line"></div>
+          <div class="step-content">
+            <h3>Review Summary</h3>
+            <p>Receive a concise, well-structured summary that captures the essence of your document. The summary
+              maintains the original meaning while significantly reducing length.</p>
+          </div>
+        </div>
+
+        <div class="step">
+          <div class="step-number">4</div>
+
+          <div class="step-content">
+            <h3>Download or Share</h3>
+            <p>Save your summary as a PDF or text file, or share it directly with colleagues. All your data is processed
+              securely and never stored without your permission.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="upload">
+    <div class="container">
+      <div class="section-header">
+        <h2>Upload Your Document</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="upload-container">
+        <div class="upload-box">
+          <div class="upload-icon">📄</div>
+          <div class="upload-text">
+            <h3>Select a Document to Summarize</h3>
+            <p>Upload a PDF, DOCX, or TXT file (max 10MB)</p>
+          </div>
+          <div class="file-input-container">
+            <label for="document-upload" class="file-input-label">Choose File</label>
+            <input type="file" id="document-upload" class="file-input" accept=".pdf,.docx,.ppt,.xlsx">
+            <div class="file-name" id="file-name">No file chosen</div>
+          </div>
+          <button class="btn-primary" id="summarize-btn">Generate Summary</button>
+
+          <div class="loading-container" id="loading-container">
+            <div class="loading-spinner"></div>
+            <div class="loading-text">Analyzing document and generating summary...</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="results" id="results-section">
+    <div class="container">
+      <div class="section-header">
+        <h2>Your Summary</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="results-container">
+        <div class="results-box">
+          <div class="results-header">
+            <div class="results-title">
+              <h3>Document Summary</h3>
+            </div>
+          </div>
+          <div class="results-content" id="summary-content">
+            <!-- <p>The document discusses the impact of artificial intelligence on modern business operations. Key points
+              include:</p>
+            <p>1. AI technologies are transforming how businesses analyze customer data, with 78% of companies reporting
+              improved decision-making after implementing AI solutions.</p>
+            <p>2. Machine learning algorithms can predict customer behavior with up to 85% accuracy when properly
+              trained on historical data.</p>
+            <p>3. Companies that have integrated AI into their workflow report an average 23% increase in operational
+              efficiency and 15% reduction in costs.</p>
+            <p>4. The most successful AI implementations focus on augmenting human capabilities rather than replacing
+              them, creating new roles focused on AI oversight and ethical considerations.</p>
+            <p>5. Future developments will likely center around more transparent AI systems that can explain their
+              decision-making processes to human operators.</p>-->
+          </div>
+          <div class="results-actions">
+            <button class="btn-secondary" id="new-summary-btn">New Summary</button>
+            <button class="btn-primary" id="download-btn">Download Summary</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <footer>
+    <div class="container">
+      <div class="footer-content">
+        <div class="footer-logo">
+          <a href="/">SmartDoc AI</a>
+          <p>Intelligent Document Processing</p>
+        </div>
+      </div>
+      <div class="footer-bottom">
+        <p>&copy; 2025 SmartDoc AI.</p>
+      </div>
+    </div>
+  </footer>
+  <div class="notification-container"></div>
+  <script src="static/scripts/notifcation.js"></script>
+  <script src="static/scripts/text-summarization.js"></script>
+  <!--<script>
+    document.addEventListener('DOMContentLoaded', function () {
+      const fileInput = document.getElementById('document-upload');
+      const fileName = document.getElementById('file-name');
+      const summarizeBtn = document.getElementById('summarize-btn');
+      const loadingContainer = document.getElementById('loading-container');
+      const resultsSection = document.getElementById('results-section');
+      const newSummaryBtn = document.getElementById('new-summary-btn');
+      const downloadBtn = document.getElementById('download-btn');
+
+      // Display file name when a file is selected
+      fileInput.addEventListener('change', function () {
+        if (this.files && this.files[0]) {
+          fileName.textContent = this.files[0].name;
+        } else {
+          fileName.textContent = 'No file chosen';
+        }
+      });
+
+      // Show loading animation and then results when Generate Summary is clicked
+      summarizeBtn.addEventListener('click', function () {
+        if (fileInput.files.length === 0) {
+          alert('Please select a file first');
+          return;
+        }
+
+        // Show loading animation
+        loadingContainer.style.display = 'block';
+        summarizeBtn.disabled = true;
+
+        // Simulate processing time (3 seconds)
+        setTimeout(function () {
+          // Hide loading animation
+          loadingContainer.style.display = 'none';
+
+          // Show results section
+          resultsSection.style.display = 'block';
+
+          // Scroll to results
+          resultsSection.scrollIntoView({ behavior: 'smooth' });
+
+          // Re-enable button
+          summarizeBtn.disabled = false;
+        }, 3000);
+      });
+
+      // Reset form for a new summary
+      newSummaryBtn.addEventListener('click', function () {
+        fileInput.value = '';
+        fileName.textContent = 'No file chosen';
+        resultsSection.style.display = 'none';
+
+        // Scroll to upload section
+        document.querySelector('.upload').scrollIntoView({ behavior: 'smooth' });
+      });
+
+      // Simulate download functionality
+      downloadBtn.addEventListener('click', function () {
+        const summaryText = document.getElementById('summary-content').innerText;
+        const blob = new Blob([summaryText], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'document-summary.txt';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+      });
+    });
+  </script>-->
+</body>
+
+</html>