Updating UI

main.py

@@ -9,6 +9,7 @@ import io
 import base64
 import matplotlib.pyplot as plt 
 from transformers import pipeline
+
 import fitz
 from docx import Document
 from pptx import Presentation
@@ -17,6 +18,8 @@ import PIL.Image as Image
 
 import fitz
 
+
+
 app=FastAPI()
 app.add_middleware(
     CORSMiddleware,
@@ -25,6 +28,23 @@ app.add_middleware(
     allow_methods=["*"],
     allow_headers=["*"],
 )
+try:
+    interpreter = pipeline("image-to-text", model="nlpconnect/vit-gpt2-image-captioning")
+except Exception as exp:
+    print("[ERROR] Can't load nlpconnect/vit-gpt2-image-captioning ")
+    print(str(exp))
+try:
+    summarizer = pipeline("summarization", model="facebook/bart-large-cnn",device=0)
+except Exception as exp:
+    print("[ERROR] Can't load facebook/bart-large-cnn ")
+    print(str(exp))
+try:
+    generator = pipeline("text-generation", model="deepseek-ai/deepseek-coder-1.3b-instruct", device_map="auto")
+except Exception as exp:
+    print("[ERROR] Can't load deepseek-ai/deepseek-coder-1.3b-instruct ")
+    print(str(exp))
+
+
 
 app.mount("/static",StaticFiles(directory='static'),'static')
 templates = Jinja2Templates(directory='templates')
@@ -51,12 +71,13 @@ def caption(file:UploadFile=File(...)):
     if extension not in Supported_extensions:
         return {"error": "Unsupported file type"}
     image = Image.open(file.file)
-    interpreter = pipeline("image-to-text", model="Salesforce/blip-image-captioning-large")
+    
     caption = interpreter(image)
     return {"caption": caption[0]['generated_text']}   
 
 @app.post("/summerize")
 def summerzation(file:UploadFile=File(...)):
+    
     extension = file.filename.split(".")[-1]
     if extension == "pdf":
         text = get_text_from_PDF(file.file)
@@ -70,7 +91,7 @@ def summerzation(file:UploadFile=File(...)):
         return {"error": "Unsupported file type"}
     if not text.strip():
       return {"error": "File is empty"}
-    summarizer = pipeline("summarization", model="facebook/bart-large-cnn",device=0)
+    
     result=""
     for i in range(0,len(text),1024):
         result+=summarizer(text, max_length=150, min_length=30, do_sample=False)[0]['summary_text']
@@ -111,7 +132,7 @@ error.
 
 ##Prompt: {prompt}.
         """
-        generator = pipeline("text-generation", model="deepseek-ai/deepseek-coder-1.3b-instruct", device_map="auto")
+        
         output = generator(message, max_length=1000)
         match = re.search(r'```python(.*?)```', output[0]["generated_text"], re.DOTALL)
         code =''

static/assests/webfonts/fa-regular-400.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:e3456d1283b9d75337a773dfd147bf908fd02c01b4bf48576d8603a69b13cbe5
-size 25472

static/assests/webfonts/fa-v4compatibility.ttf

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:30f6abf6baa425825828793d6dfad1fb63765d0e5abaa7af6feafb9bfcece5a0
-size 10836

static/assests/webfonts/fa-v4compatibility.woff2

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:0ce9033c69dc714f5f45ef9bf17d55e4c46bcdfad6799a4e92b38e7781bf86bd
-size 4796

static/scripts/dataViz.js

@@ -52,7 +52,7 @@ form.addEventListener("submit", (e) => {
 	e.preventDefault();
 	const prompt = prompt_txt.value.trim();
 	if (prompt && file) {
-		showchart("../static/40185.jpg");
+		showchart("");
 	} else {
 		console.log("no file selected or no prompted");
 	}

static/scripts/image_iterpretation.js

@@ -0,0 +1,91 @@
+const notifications = document.querySelector(".notifications");
+const fileContainer = document.querySelector(".file-container");
+const label = document.querySelector("#label-input");
+const inputFile = document.querySelector("#document-input");
+const form = document.querySelector("form");
+
+const result_img = document.querySelector(".result_img");
+const img_wrapper = document.querySelector(".img-wrapper");
+const text_result = document.querySelector(".result-text");
+
+const toast = (message, type) => {
+	const notification = document.createElement("div");
+
+	notification.innerHTML = `
+		<i class="fa fa-xmark close" onclick="this.parentNode.remove()"></i>
+        <i class="fa-solid ${
+					type === "error" ? "fa-circle-xmark" : "fa-triangle-exclamation"
+				} icon"></i>
+    
+      <div class="notification-content">
+        <h3>${type}</h3>
+        <p>${message}</p>
+      </div>
+    `;
+	notification.classList.add(...["notification", type]);
+	notifications.appendChild(notification);
+	setTimeout(() => {
+		notification.remove();
+	}, 5000);
+};
+
+let file = null;
+const SUPPORTED_EXT = ["jpg", "png", "jpeg"];
+
+function clear() {
+	file = null;
+	label.style.display = "flex";
+	fileContainer.innerHTML = "";
+}
+const upload = (fileData) => {
+	file = fileData;
+	const ext = file.name.split(".").pop();
+	let isvalid = SUPPORTED_EXT.some((s_ext) => s_ext === ext);
+	if (isvalid) {
+		label.style.display = "none";
+		fileContainer.innerHTML = `
+        <div class="file-wrapper">
+                    <i class="fa fa-file-image"></i>
+                    <p>
+                        ${file.name}
+                    </p>
+                    <button id='btn-clear' type="button" ><i class="fa fa-close" ></i></button>
+        </div>
+        `;
+		document
+			.querySelector("#btn-clear")
+			.addEventListener("click", (e) => clear(e));
+	} else {
+		console.error("file is not supported");
+		toast("file is not supported", "error");
+	}
+};
+
+inputFile.addEventListener("change", (e) => {
+	e.preventDefault();
+	if (inputFile.files[0]) upload(inputFile.files[0]);
+});
+
+label.addEventListener("dragover", (e) => {
+	e.preventDefault();
+});
+label.addEventListener("drop", (e) => {
+	e.preventDefault();
+	upload(e.dataTransfer.files[0]);
+});
+form.addEventListener("submit", async (e) => {
+	e.preventDefault();
+	let res = await new Promise((resolve, reject) => {
+		setTimeout(() => {
+			resolve({
+				src: "../static/assests/1694502952506.jpg",
+				discription: "this is a discription",
+			});
+		}, 3000);
+	});
+	const img = document.createElement("img");
+	img.src = res.src;
+	img_wrapper.appendChild(img);
+	text_result.innerText = res.discription;
+	result_img.scrollIntoView({ behavior: "smooth" });
+});

static/styles/features.css

@@ -138,7 +138,7 @@ header .container a {
 
 .steps {
   position: relative;
-  height: 60vh;
+  min-height: fit-content;
   padding: 20px 0;
   overflow: hidden;
 }
@@ -159,6 +159,7 @@ header .container a {
   align-items: center;
   flex-wrap: wrap;
   gap: 30px;
+  margin-bottom: 50px;
 }
 
 .steps-content .steps-wrapper .step {
@@ -219,10 +220,13 @@ header .container a {
   justify-content: center;
   align-items: center;
   margin-bottom: 20px;
+  padding: 0 20px;
 }
 
 .upload .upload-content .wrapper .input-wrapper label {
-  width: 350px;
+  width: 100%;
+  max-width: 350px;
+  min-width: 200px;
   height: 150px;
   border-radius: 5px;
   border: 1px dashed var(--secondary);
@@ -252,10 +256,13 @@ header .container a {
 
 .upload .upload-content .wrapper .btn-wrapper {
   text-align: center;
+  padding: 0 20px;
 }
 
 .upload .upload-content .wrapper .btn-wrapper button {
-  width: 350px;
+  width: 100%;
+  max-width: 350px;
+  min-width: 200px;
   padding: 10px 0;
   cursor: pointer;
   font-size: 20px;
@@ -456,6 +463,38 @@ header .container a {
   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;

templates/DataVisualisation.html

@@ -6,7 +6,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="static/styles/all.min.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>
@@ -100,13 +101,15 @@
                 <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

@@ -5,11 +5,14 @@
     <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="static/styles/all.min.css" />
+    <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>
@@ -90,8 +93,22 @@
                 </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

@@ -6,10 +6,12 @@
   <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="static/styles/all.min.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>
@@ -104,6 +106,8 @@
   </main>
 
   <footer>SmartDoc AI - 2025</footer>
+  <div class="notifications">
+  </div>
   <script src="static/scripts/summerize.js"></script>
 </body>
 

templates/index.html

@@ -64,7 +64,7 @@
               while retaining key information.
             </p>
             <div class="btn-wrapper">
-              <a href="/sammarisation" class="btn">Try Now</a>
+              <a href="/summarization" class="btn">Try Now</a>
             </div>
           </div>
           <div class="feature">