Update app.py

app.py

@@ -88,12 +88,13 @@ def process_pdf_and_query(pdf_file, user_query):
 
     return output_text[0], num_images
 
+# Define the Gradio Interface
+pdf_input = gr.File(label="Upload PDF")  # Single PDF file input
+query_input = gr.Textbox(label="Enter your query", placeholder="Ask a question about the PDF")  # User query input
+output_text = gr.Textbox(label="Model Answer")  # Output for the model's answer
+output_images = gr.Textbox(label="Number of Images in PDF")  # Output for number of images
 
-pdf_input = gr.File(label="Upload PDF") 
-query_input = gr.Textbox(label="Enter your query", placeholder="Ask a question about the PDF") 
-output_text = gr.Textbox(label="Model Answer")  
-output_images = gr.Textbox(label="Number of Images in PDF")  
-
+# Footer HTML
 footer = """
 <div style="text-align: center; margin-top: 20px;">
     <a href="https://www.linkedin.com/in/pejman-ebrahimi-4a60151a7/" target="_blank">LinkedIn</a> |
@@ -107,6 +108,7 @@ footer = """
 </div>
 """
 
+# Explanation about Multimodal RAG
 explanation = """
 <div style="text-align: center; margin-bottom: 20px;">
     <h2 style="font-weight: bold; font-size: 24px;">Multimodal RAG (Retrieval-Augmented Generation)</h2>
@@ -119,18 +121,46 @@ explanation = """
 </div>
 """
 
+# Launch the Gradio app with additional features
 demo = gr.Interface(
     fn=process_pdf_and_query, 
-    inputs=[pdf_input, query_input],  
-    outputs=[output_text, output_images],  
+    inputs=[pdf_input, query_input],  # List of inputs
+    outputs=[output_text, output_images],  # List of outputs
     title="Multimodal RAG with Image Query - By <a href='https://github.com/arad1367'>Pejman Ebrahimi</a>",
     theme='freddyaboulton/dracula_revamped',
 )
 
+# Add additional elements to the interface
 with demo:
-    gr.HTML(explanation)  
-    gr.HTML(footer)  
-    gr.DuplicateButton(value="Duplicate Space for private use", elem_classes="duplicate-button", elem_id="duplicate-button")  # Duplicate button
-    gr.Button("Submit", elem_classes="submit-button", style={"background-color": "green", "color": "white"})  # Custom Submit Button
+    gr.HTML(explanation)  # Explanation section
+    gr.HTML(footer)  # Footer section
+    gr.DuplicateButton(value="Duplicate Space for private use", elem_classes="duplicate-button")  # Duplicate button
+    submit_button = gr.Button("Submit", elem_classes="submit-button")  # Custom Submit Button
+
+# Custom CSS for styling the button
+css = """
+<style>
+    .submit-button {
+        background-color: green;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+    }
+    .duplicate-button {
+        background-color: lightgreen;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+    }
+</style>
+"""
+gr.HTML(css)
 
-demo.launch(debug=True)  
+# Launch the Gradio app
+demo.launch(debug=True)  # Start the interface