Spaces:

ommore86
/

Legal-Docs-AI

Sleeping

App Files Files Community

ommore86 commited on Sep 4, 2025

Commit

96874c5

1 Parent(s): 32dc1d7

ohh

Browse files

Files changed (2) hide show

app.py +36 -0
templates/index.html +220 -129

app.py CHANGED Viewed

@@ -65,6 +65,21 @@ def build_qa_for_pdf(path: str) -> RetrievalQA:
     retriever = store.as_retriever(search_type="mmr", search_kwargs={"k": 5})
     return RetrievalQA.from_chain_type(llm=get_llm(), retriever=retriever)
 @app.route("/healthz")
 def healthz():
     return "ok", 200
@@ -109,6 +124,27 @@ def ask_question():
         return jsonify({"answer": answer}), 200
     except Exception as e:
         return jsonify({"error": f"Error: {e}"}), 500
 if __name__ == "__main__":
     app.run(debug=True)

     retriever = store.as_retriever(search_type="mmr", search_kwargs={"k": 5})
     return RetrievalQA.from_chain_type(llm=get_llm(), retriever=retriever)
+def summarize_pdf(path: str) -> str:
+    """Summarize an entire PDF using the LLM."""
+    text = extract_text_from_pdf(path)
+    # Limit text size (avoid overloading model)
+    if len(text) > 5000:
+        text = text[:5000]  # truncate long docs for quick summarization
+    llm = get_llm()
+    prompt = f"Summarize the following legal document in a clear and concise way:\n\n{text}"
+    result = llm.invoke(prompt)
+    return result.content if hasattr(result, "content") else str(result)
 @app.route("/healthz")
 def healthz():
     return "ok", 200
         return jsonify({"answer": answer}), 200
     except Exception as e:
         return jsonify({"error": f"Error: {e}"}), 500
+@app.post("/summarize")
+def summarize():
+    data = request.get_json(force=True)
+    file_id = data.get("file_id")
+    if not file_id:
+        return jsonify({"error": "Missing file_id."}), 400
+    # locate the uploaded file from /tmp/uploads
+    path = os.path.join(app.config["UPLOAD_FOLDER"], file_id)
+    if not os.path.exists(path):
+        return jsonify({"error": "File not found or expired."}), 404
+    try:
+        summary = summarize_pdf(path)
+        gc.collect()
+        return jsonify({"summary": summary}), 200
+    except Exception as e:
+        return jsonify({"error": f"Error summarizing: {e}"}), 500
 if __name__ == "__main__":
     app.run(debug=True)

templates/index.html CHANGED Viewed

@@ -13,34 +13,57 @@
 <body class="m-0 bg-white">
   <div class="bg-gradient-to-b from-indigo-200 via-white to-indigo-100">
-  <div class="bg-gradient-to-b from-indigo-50 via-white to-indigo-100">
-    <!-- Header -->
-    <header class="fixed inset-x-0 top-0 z-50 bg-white/70 backdrop-blur-md shadow-sm">
-      <div class="max-w-7xl mx-auto px-6 py-3 flex items-center justify-between">
-        <a href="/" class="text-xl sm:text-2xl font-bold tracking-tight text-indigo-600">
-          AskBot.AI
-        </a>
-        <nav class="hidden sm:flex items-center space-x-6 text-sm font-medium">
-          <a href="#chat" class="text-gray-600 hover:text-indigo-600 transition">Chat</a>
-          <a href="#features" class="text-gray-600 hover:text-indigo-600 transition">Features</a>
-          <a href="#tech" class="text-gray-600 hover:text-indigo-600 transition">Tech</a>
-          <a href="#connect" class="text-gray-600 hover:text-indigo-600 transition">Connect</a>
-        </nav>
-        <button class="sm:hidden inline-flex items-center justify-center h-8 w-8 text-gray-600 hover:text-indigo-600">
-          <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
-          </svg>
-        </button>
       </div>
-    </header>
-    <!-- /Header -->
-    <!-- <main class=""> -->
       <section>
         <div class="bg-white">
           <!-- <div class="relative isolate overflow-hidden bg-gradient-to-b from-gray-200/50"> -->
@@ -57,124 +80,123 @@
             </div>
             <div class="mt-20 lg:mt-0 flex justify-center items-center">
-              <img
-                src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751450446/giphy_sab0e8.webp"
                 class="drop-shadow-2xl" height="350" width="550" alt="chatbot image">
             </div>
           </div>
         </div>
-  </div>
-  </section>
-  <!-- Chat Section -->
-  <section id="chat" class="py-20">
-    <div class="max-w-6xl mx-auto px-6">
-      <div class="text-center mb-10">
-        <h2 class="text-3xl font-bold text-gray-800">Chat With Your PDF</h2>
-        <p class="mt-2 text-gray-600 text-sm">Upload a research paper and ask any question. Powered by AI.</p>
-      </div>
-      <div id="uploadChatCard" class="bg-white shadow-xl border border-gray-200 rounded-xl p-6 space-y-6">
-        <div id="uploader" class="space-y-4 text-center">
-          <div class="flex items-center justify-center gap-4 flex-col sm:flex-row">
-            <label for="pdfFile"
-              class="cursor-pointer bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded shadow text-sm transition">
-              Choose PDF
-            </label>
-            <span id="fileNameDisplayText" class="text-sm text-gray-600 italic">No file chosen</span>
-            <input id="pdfFile" type="file" accept=".pdf" class="hidden">
-          </div>
-          <button id="btnUpload" disabled class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded">
-            Upload PDF
-          </button>
         </div>
-        <!-- Chat Interface -->
-        <div id="chatInterface" class="hidden space-y-4">
-          <div class="flex justify-between items-center max-w-3xl mx-auto">
-            <div id="fileNameDisplay" class="text-sm text-gray-600 font-medium italic"></div>
-            <button id="reuploadBtn" class="text-sm text-indigo-600 hover:underline">
-              Upload Another PDF
             </button>
           </div>
-          <!-- Chat Box -->
-          <div id="chatBox"
-            class="space-y-3 max-w-3xl max-h-96 overflow-y-auto px-4 py-4 border rounded-lg bg-white shadow-inner mx-auto">
           </div>
-          <form id="chatForm" class="flex max-w-3xl mx-auto">
-            <input id="msgInput" autocomplete="off" placeholder="Ask a question..."
-              class="flex-1 rounded-l-lg border-gray-300 px-4 py-3 shadow" />
-            <button class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 rounded-r-lg">
-              Send
-            </button>
-          </form>
         </div>
-      </div>
-      <!-- Result -->
-      {% if results %}
-      <div class="mt-6 bg-white p-6 rounded-lg shadow border border-gray-200">
-        <h2 class="text-lg font-semibold text-gray-800 mb-2">Answer:</h2>
-        <p class="text-gray-700 whitespace-pre-wrap">{{ results }}</p>
       </div>
-      {% endif %}
-    </div>
-  </section>
-  <!-- Features Section -->
-  <section id="features" class="py-20">
-    <div class="max-w-7xl mx-auto px-6">
-      <div class="text-center mb-12">
-        <h2 class="text-3xl font-bold text-gray-800">Features</h2>
-        <p class="mt-2 text-gray-600 text-sm">What makes our PDF Chatbot stand out</p>
-      </div>
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <!-- Instant PDF Reading -->
-        <div
-          class="bg-white bg-opacity-80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
-          <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751357240/feature_img_1_nhlopv.jpg"
-            alt="Feature 1" class="mx-auto h-28 mb-4 object-contain" />
-          <h3 class="text-xl font-semibold text-gray-800 mb-2">Instant PDF Understanding</h3>
-          <p class="text-sm text-gray-600">Ask any question and get accurate responses
-            based on the uploaded PDF content in seconds.</p>
-        </div>
-        <!-- Multiple File-Type Support -->
-        <div
-          class="bg-white bg-opacity-80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
-          <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751357240/feature_img_2_b8feaa.jpg"
-            alt="Feature 2" class="mx-auto h-28 mb-4 object-contain" />
-          <h3 class="text-xl font-semibold text-gray-800 mb-2">Multiple File-Type Support</h3>
-          <p class="text-sm text-gray-600">Upload research papers, eBooks, or reports —
-            the chatbot can handle various types of academic PDFs.</p>
-        </div>
-        <!-- AI-Powered Accuracy -->
-        <div
-          class="bg-white bg-opacity-80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
-          <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751357580/feature_img_3_qeecda.jpg"
-            alt="Feature 3" class="mx-auto h-28 mb-4 object-contain" />
-          <h3 class="text-xl font-semibold text-gray-800 mb-2">AI-Powered Accuracy</h3>
-          <p class="text-sm text-gray-600">Built with powerful AI models to understand complex contexts, summaries,
-            and
-            in-depth queries.</p>
         </div>
       </div>
-    </div>
-  </section>
-  <!-- ========== Tech Stack & AI Models ========== -->
-  <!-- <section id="tech" class="py-20">
     <div class="max-w-7xl mx-auto px-6">
       <div class="text-center mb-12">
         <h2 class="text-3xl font-bold text-gray-800">Tech Stack &amp; AI Models</h2>
@@ -183,8 +205,8 @@
         </p>
       </div> -->
-      <!-- Python and Flask -->
-      <!-- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
         <div
           class="bg-white/80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
           <img src="https://cdn-icons-png.flaticon.com/512/5968/5968350.png" alt="Python Flask"
@@ -193,8 +215,8 @@
           <p class="text-sm text-gray-600">Handles backend, file uploads & AI Responses.</p>
         </div> -->
-        <!-- LangChain -->
-        <!-- <div
           class="bg-white/80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
           <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751439498/download_wabh02.png" alt="LangChain"
             class="mx-auto h-20 mb-4 object-contain" />
@@ -202,17 +224,17 @@
           <p class="text-sm text-gray-600">LangChain manages PDF processing & LLM calls.</p>
         </div> -->
-        <!-- Embeddings -->
-        <!-- <div
           class="bg-white/80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
           <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="MiniLM Embeddings"
             class="mx-auto h-20 mb-4 object-contain" />
           <h3 class="text-xl font-semibold text-gray-800 mb-2">Embedding Model: all-MiniLM-L6-v2 </h3>
           <p class="text-sm text-gray-600">Converts Text into Numerical Vectors.</p>
         </div> -->
-        <!-- FAISS -->
-        <!-- <div
           class="bg-white/80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
           <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751439632/download_so6va6.png" alt="FAISS"
             class="mx-auto h-20 mb-4 object-contain" />
@@ -221,8 +243,8 @@
         </div> -->
-        <!-- LLM -->
-        <!-- <div
           class="bg-white/80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
           <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751520819/download_cbh1yx.jpg" alt="Mixtral LLM"
             class="mx-auto h-20 mb-4 object-contain" />
@@ -230,8 +252,8 @@
           <p class="text-sm text-gray-600">Generates correct answers from extracted PDF chunks.</p>
         </div> -->
-        <!-- Tailwind CSS -->
-        <!-- <div
           class="bg-white/80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
           <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751439818/download_qgtwpn.png"
             alt="Tailwind CSS" class="mx-auto h-20 mb-4 object-contain" />
@@ -241,7 +263,7 @@
       </div>
     </div>
   </section> -->
-  <!-- </main> -->
   </div>
   <!-- ========== Connect / Footer Section ========== -->
@@ -381,6 +403,75 @@
       btnUpload.disabled = true;
       btnUpload.textContent = "Upload PDF";
     };
   </script>
 </body>

 <body class="m-0 bg-white">
   <div class="bg-gradient-to-b from-indigo-200 via-white to-indigo-100">
+    <div class="bg-gradient-to-b from-indigo-50 via-white to-indigo-100">
+      <!-- Sidebar -->
+      <div id="sidebar"
+        class="fixed top-0 left-0 h-full w-64 bg-white shadow-xl border-r border-gray-200 transform -translate-x-full transition-transform duration-300 z-40">
+        <div class="p-6">
+          <h2 class="text-lg font-semibold text-gray-800 mb-4">Uploaded PDF</h2>
+          <div id="sidebarFileName" class="text-sm text-gray-600 italic mb-6">No file uploaded</div>
+          <button id="btnSummarize"
+            class="w-full bg-indigo-500 hover:bg-indigo-600 text-white py-2 rounded disabled:opacity-50" disabled>
+            Summarize
+          </button>
+          <div id="summaryBox"
+            class="mt-6 max-h-64 overflow-y-auto text-sm text-gray-700 p-3 border rounded bg-gray-50 hidden"></div>
+        </div>
       </div>
+      <!-- Sidebar Toggle Button -->
+      <button id="sidebarToggle"
+        class="fixed top-4 left-4 z-50 bg-indigo-500 hover:bg-indigo-600 text-white p-2 rounded shadow">
+        ☰
+      </button>
+      <!-- Header -->
+      <header class="fixed inset-x-0 top-0 z-50 bg-white/70 backdrop-blur-md shadow-sm">
+        <div class="max-w-7xl mx-auto px-6 py-3 flex items-center justify-between">
+          <a href="/" class="text-xl sm:text-2xl font-bold tracking-tight text-indigo-600">
+            AskBot.AI
+          </a>
+          <nav class="hidden sm:flex items-center space-x-6 text-sm font-medium">
+            <a href="#chat" class="text-gray-600 hover:text-indigo-600 transition">Chat</a>
+            <a href="#features" class="text-gray-600 hover:text-indigo-600 transition">Features</a>
+            <a href="#tech" class="text-gray-600 hover:text-indigo-600 transition">Tech</a>
+            <a href="#connect" class="text-gray-600 hover:text-indigo-600 transition">Connect</a>
+          </nav>
+          <button class="sm:hidden inline-flex items-center justify-center h-8 w-8 text-gray-600 hover:text-indigo-600">
+            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+        </div>
+      </header>
+      <!-- /Header -->
+      <!-- <main class=""> -->
       <section>
         <div class="bg-white">
           <!-- <div class="relative isolate overflow-hidden bg-gradient-to-b from-gray-200/50"> -->
             </div>
             <div class="mt-20 lg:mt-0 flex justify-center items-center">
+              <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751450446/giphy_sab0e8.webp"
                 class="drop-shadow-2xl" height="350" width="550" alt="chatbot image">
             </div>
           </div>
         </div>
+    </div>
+    </section>
+    <!-- Chat Section -->
+    <section id="chat" class="py-20">
+      <div class="max-w-6xl mx-auto px-6">
+        <div class="text-center mb-10">
+          <h2 class="text-3xl font-bold text-gray-800">Chat With Your PDF</h2>
+          <p class="mt-2 text-gray-600 text-sm">Upload a research paper and ask any question. Powered by AI.</p>
         </div>
+        <div id="uploadChatCard" class="bg-white shadow-xl border border-gray-200 rounded-xl p-6 space-y-6">
+          <div id="uploader" class="space-y-4 text-center">
+            <div class="flex items-center justify-center gap-4 flex-col sm:flex-row">
+              <label for="pdfFile"
+                class="cursor-pointer bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded shadow text-sm transition">
+                Choose PDF
+              </label>
+              <span id="fileNameDisplayText" class="text-sm text-gray-600 italic">No file chosen</span>
+              <input id="pdfFile" type="file" accept=".pdf" class="hidden">
+            </div>
+            <button id="btnUpload" disabled class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded">
+              Upload PDF
             </button>
           </div>
+          <!-- Chat Interface -->
+          <div id="chatInterface" class="hidden space-y-4">
+            <div class="flex justify-between items-center max-w-3xl mx-auto">
+              <div id="fileNameDisplay" class="text-sm text-gray-600 font-medium italic"></div>
+              <button id="reuploadBtn" class="text-sm text-indigo-600 hover:underline">
+                Upload Another PDF
+              </button>
+            </div>
+            <!-- Chat Box -->
+            <div id="chatBox"
+              class="space-y-3 max-w-3xl max-h-96 overflow-y-auto px-4 py-4 border rounded-lg bg-white shadow-inner mx-auto">
+            </div>
+            <form id="chatForm" class="flex max-w-3xl mx-auto">
+              <input id="msgInput" autocomplete="off" placeholder="Ask a question..."
+                class="flex-1 rounded-l-lg border-gray-300 px-4 py-3 shadow" />
+              <button class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 rounded-r-lg">
+                Send
+              </button>
+            </form>
           </div>
+        </div>
+        <!-- Result -->
+        {% if results %}
+        <div class="mt-6 bg-white p-6 rounded-lg shadow border border-gray-200">
+          <h2 class="text-lg font-semibold text-gray-800 mb-2">Answer:</h2>
+          <p class="text-gray-700 whitespace-pre-wrap">{{ results }}</p>
         </div>
+        {% endif %}
       </div>
+    </section>
+    <!-- Features Section -->
+    <section id="features" class="py-20">
+      <div class="max-w-7xl mx-auto px-6">
+        <div class="text-center mb-12">
+          <h2 class="text-3xl font-bold text-gray-800">Features</h2>
+          <p class="mt-2 text-gray-600 text-sm">What makes our PDF Chatbot stand out</p>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <!-- Instant PDF Reading -->
+          <div
+            class="bg-white bg-opacity-80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
+            <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751357240/feature_img_1_nhlopv.jpg"
+              alt="Feature 1" class="mx-auto h-28 mb-4 object-contain" />
+            <h3 class="text-xl font-semibold text-gray-800 mb-2">Instant PDF Understanding</h3>
+            <p class="text-sm text-gray-600">Ask any question and get accurate responses
+              based on the uploaded PDF content in seconds.</p>
+          </div>
+          <!-- Multiple File-Type Support -->
+          <div
+            class="bg-white bg-opacity-80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
+            <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751357240/feature_img_2_b8feaa.jpg"
+              alt="Feature 2" class="mx-auto h-28 mb-4 object-contain" />
+            <h3 class="text-xl font-semibold text-gray-800 mb-2">Multiple File-Type Support</h3>
+            <p class="text-sm text-gray-600">Upload research papers, eBooks, or reports —
+              the chatbot can handle various types of academic PDFs.</p>
+          </div>
+          <!-- AI-Powered Accuracy -->
+          <div
+            class="bg-white bg-opacity-80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
+            <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751357580/feature_img_3_qeecda.jpg"
+              alt="Feature 3" class="mx-auto h-28 mb-4 object-contain" />
+            <h3 class="text-xl font-semibold text-gray-800 mb-2">AI-Powered Accuracy</h3>
+            <p class="text-sm text-gray-600">Built with powerful AI models to understand complex contexts, summaries,
+              and
+              in-depth queries.</p>
+          </div>
         </div>
       </div>
+    </section>
+    <!-- ========== Tech Stack & AI Models ========== -->
+    <!-- <section id="tech" class="py-20">
     <div class="max-w-7xl mx-auto px-6">
       <div class="text-center mb-12">
         <h2 class="text-3xl font-bold text-gray-800">Tech Stack &amp; AI Models</h2>
         </p>
       </div> -->
+    <!-- Python and Flask -->
+    <!-- <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
         <div
           class="bg-white/80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
           <img src="https://cdn-icons-png.flaticon.com/512/5968/5968350.png" alt="Python Flask"
           <p class="text-sm text-gray-600">Handles backend, file uploads & AI Responses.</p>
         </div> -->
+    <!-- LangChain -->
+    <!-- <div
           class="bg-white/80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
           <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751439498/download_wabh02.png" alt="LangChain"
             class="mx-auto h-20 mb-4 object-contain" />
           <p class="text-sm text-gray-600">LangChain manages PDF processing & LLM calls.</p>
         </div> -->
+    <!-- Embeddings -->
+    <!-- <div
           class="bg-white/80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
           <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="MiniLM Embeddings"
             class="mx-auto h-20 mb-4 object-contain" />
           <h3 class="text-xl font-semibold text-gray-800 mb-2">Embedding Model: all-MiniLM-L6-v2 </h3>
           <p class="text-sm text-gray-600">Converts Text into Numerical Vectors.</p>
         </div> -->
+    <!-- FAISS -->
+    <!-- <div
           class="bg-white/80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
           <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751439632/download_so6va6.png" alt="FAISS"
             class="mx-auto h-20 mb-4 object-contain" />
         </div> -->
+    <!-- LLM -->
+    <!-- <div
           class="bg-white/80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
           <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751520819/download_cbh1yx.jpg" alt="Mixtral LLM"
             class="mx-auto h-20 mb-4 object-contain" />
           <p class="text-sm text-gray-600">Generates correct answers from extracted PDF chunks.</p>
         </div> -->
+    <!-- Tailwind CSS -->
+    <!-- <div
           class="bg-white/80 backdrop-blur-md border border-gray-200 rounded-xl p-6 shadow-lg text-center transition hover:shadow-xl">
           <img src="https://res.cloudinary.com/dekujzz4s/image/upload/v1751439818/download_qgtwpn.png"
             alt="Tailwind CSS" class="mx-auto h-20 mb-4 object-contain" />
       </div>
     </div>
   </section> -->
+    <!-- </main> -->
   </div>
   <!-- ========== Connect / Footer Section ========== -->
       btnUpload.disabled = true;
       btnUpload.textContent = "Upload PDF";
     };
+    // Sidebar toggle
+    const sidebar = document.getElementById("sidebar");
+    const sidebarToggle = document.getElementById("sidebarToggle");
+    const sidebarFileName = document.getElementById("sidebarFileName");
+    const btnSummarize = document.getElementById("btnSummarize");
+    const summaryBox = document.getElementById("summaryBox");
+    sidebarToggle.onclick = () => {
+      sidebar.classList.toggle("-translate-x-full");
+    };
+    // Update sidebar filename when file is uploaded
+    btnUpload.onclick = async () => {
+      const file = pdfInput.files[0];
+      const formData = new FormData();
+      formData.append("file", file);
+      btnUpload.disabled = true;
+      btnUpload.textContent = "Uploading…";
+      const res = await fetch("/upload", { method: "POST", body: formData });
+      const data = await res.json();
+      if (res.ok) {
+        fileId = data.file_id;
+        document.getElementById("fileNameDisplay").textContent = `📄 ${file.name}`;
+        sidebarFileName.textContent = file.name;
+        btnSummarize.disabled = false;
+        document.getElementById("uploader").classList.add("hidden");
+        document.getElementById("chatInterface").classList.remove("hidden");
+      } else {
+        alert(data.error || "Upload failed");
+        btnUpload.disabled = false;
+        btnUpload.textContent = "Upload PDF";
+      }
+    };
+    // Summarize logic
+    btnSummarize.onclick = async () => {
+      btnSummarize.disabled = true;
+      btnSummarize.textContent = "Summarizing…";
+      try {
+        const res = await fetch("/summarize", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ file_id: fileId }),
+        });
+        const data = await res.json();
+        if (res.ok) {
+          summaryBox.textContent = data.summary || "No summary available.";
+          summaryBox.classList.remove("hidden");
+        } else {
+          summaryBox.textContent = data.error || "Summarization failed.";
+          summaryBox.classList.remove("hidden");
+        }
+      } catch (err) {
+        summaryBox.textContent = "Error summarizing file.";
+        summaryBox.classList.remove("hidden");
+      }
+      btnSummarize.disabled = false;
+      btnSummarize.textContent = "Summarize";
+    };
   </script>
 </body>