Update app.py

app.py

@@ -3,6 +3,7 @@ import spaces
 
 import gradio as gr
 import time
+from gradio.themes.utils import sizes
 import threading
 import logging
 from main import run_repository_ranking  # Your repository ranking function
@@ -125,69 +126,52 @@ def lite_runner(topic):
 # ---------------------------
 # App UI Setup Using Gradio Soft Theme with Centered Layout
 # ---------------------------
-with gr.Blocks(
-    theme="gstaff/sketch", 
-    title="DeepGit Lite",
-    css="""
-        /* Center header and footer */
-        #header { text-align: center; margin-bottom: 20px; }
-        #main-container { max-width: 800px; margin: auto; }
-        #footer { text-align: center; margin-top: 20px; }
-    """
-) as demo:
+with gr.Blocks(css=CSS, theme=gr.themes.Soft(text_size=sizes.text_md)) as demo:
+    # Header with logo and title aligned side-by-side
     gr.Markdown(
         """
-        <div style="padding-top: 60px;">
-            <div style="display: flex; align-items: center; justify-content: center;">
-                <img src="https://img.icons8.com/?size=100&id=118557&format=png&color=000000" style="width: 60px; height: 60px; margin-right: 12px;">
-                <h1 style="margin: 0; font-size: 2.2em;">DeepGit Lite</h1>
-            </div>
-            <div style="text-align: center; margin-top: 10px;">
-                <p style="margin: 0;">
-                    DeepGit-lite is a nano version of DeepGit 🌱<br>
-                    Explore GitHub repositories with deep semantic search.<br>
-                    Check out our <a href="https://github.com/zamalali/DeepGit" target="_blank">GitHub</a> to explore the full DeepGit version. <br> Give a ⭐ on GitHub. <br>
-                </p>
-            </div>
+        <div style="display: flex; align-items: center; justify-content: center; padding-top: 60px;">
+            <img src="https://img.icons8.com/?size=100&id=118557&format=png&color=000000" 
+                 style="width: 60px; height: 60px; margin-right: 12px;">
+            <h1 style="margin: 0; font-size: 2.2em;">DeepGit Lite</h1>
+        </div>
+        <div style="text-align: center; margin-top: 10px;">
+            <p style="margin: 0;">
+                DeepGit-lite is a nano version of DeepGit 🌱<br>
+                Explore GitHub repositories with deep semantic search.<br>
+                Check out our <a href="https://github.com/zamalali/DeepGit" target="_blank">GitHub</a> to explore the full DeepGit version.<br>
+                Give a ⭐ on GitHub.
+            </p>
         </div>
         """,
         elem_id="header"
     )
-
-
-    # Centered main container for inputs and outputs.
-    with gr.Column(elem_id="main-container"):
-        research_input = gr.Textbox(
-            label="Research Query",
-            placeholder="Enter your research topic here, simply describe as detailed as possible for wider context e.g., 'data augmentation pipelines for LLM fine-tuning'",
-            lines=3
-        )
-        run_button = gr.Button("Run DeepGit Lite", variant="primary")
-        status_display = gr.Markdown(label="Status")
-        detail_display = gr.HTML(label="Results")
     
-    run_button.click(
-        fn=lite_runner,
-        inputs=[research_input],
-        outputs=[status_display, detail_display],
-        api_name="deepgit_lite",
-        show_progress=True
+    # (Optional) Additional state variables, tabs, and UI elements as needed.
+    vectordb = gr.State()
+    doc_collection = gr.State(value=[])
+    session_states = gr.State(value={})
+    references = gr.State(value=[])
+
+    gr.Markdown(
+        """<h2><center>Chat PDF Multimodal 💬 </center></h2>
+        <h3><center><b>Interact With Your PDF Documents</b></center></h3>"""
     )
-    
-    research_input.submit(
-        fn=lite_runner,
-        inputs=[research_input],
-        outputs=[status_display, detail_display],
-        api_name="deepgit_lite_submit",
-        show_progress=True
+    gr.Markdown(
+        """<center>
+            <h3><b>Note: </b> This application leverages advanced Retrieval-Augmented Generation (RAG) techniques to provide context-aware responses from your PDF documents</center>
+            <h3><br>
+            <center>Utilizing multimodal capabilities, this chatbot can understand and answer queries based on both textual and visual information within your PDFs.</center>
+        """
     )
-    
-    gr.HTML(
+    gr.Markdown(
         """
-        <div id="footer">
-            Made with ❤️ by <b>Zamal</b>
-        </div>
+        <center><b>Warning: </b> Extracting text and images from your document and generating embeddings may take some time due to the use of OCR and multimodal LLMs for image description<center>
         """
     )
+    
+    # ... (The rest of your Tabs and UI components go here.)
+    
+    gr.HTML('<div style="text-align: center; margin-top: 20px;">Made with ❤️ by <b>Zamal</b></div>')
 
 demo.queue(max_size=10).launch()