Update app.py

app.py

@@ -126,52 +126,68 @@ def lite_runner(topic):
 # ---------------------------
 # App UI Setup Using Gradio Soft Theme with Centered Layout
 # ---------------------------
-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
+with gr.Blocks(
+    theme=gr.themes.Soft(text_size=sizes.text_md)), 
+    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:
     gr.Markdown(
         """
-        <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 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;">
+                    Explore GitHub repositories with deep semantic search.<br>
+                    Check out our <a href="https://github.com/zamalali/DeepGit" target="_blank">GitHub</a> for more details.
+                </p>
+            </div>
         </div>
         """,
         elem_id="header"
     )
-    
-    # (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>"""
+
+    # 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, 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
     )
-    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>
-        """
+    
+    research_input.submit(
+        fn=lite_runner,
+        inputs=[research_input],
+        outputs=[status_display, detail_display],
+        api_name="deepgit_lite_submit",
+        show_progress=True
     )
-    gr.Markdown(
+    
+    gr.HTML(
         """
-        <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>
+        <div id="footer">
+            Made with ❤️ by <b>Zamal</b>
+        </div>
         """
     )
-    
-    # ... (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()