Update app.py

app.py

@@ -9,7 +9,7 @@ import torch
 import torchvision
 import subprocess
 
-# Run the commands from setup.sh to install poppler-utils -- This is necessary --> Noted by Pejman! --> I found this way instead of setup.sh
+# Run the commands from setup.sh to install poppler-utils
 def install_poppler():
     try:
         subprocess.run(["pdfinfo"], check=True, stdout=subprocess.PIPE, stderr=subprocess.PIPE)
@@ -34,13 +34,13 @@ processor = AutoProcessor.from_pretrained("Qwen/Qwen2-VL-2B-Instruct", trust_rem
 @spaces.GPU()
 def process_pdf_and_query(pdf_file, user_query):
     # Convert the PDF to images
-    images = convert_from_path(pdf_file.name) 
+    images = convert_from_path(pdf_file.name)  
     num_images = len(images)
 
     # Indexing the PDF in RAG
     RAG.index(
         input_path=pdf_file.name,
-        index_name="image_index",  # index will be saved at index_root/index_name/
+        index_name="image_index",  
         store_collection_with_index=False,
         overwrite=True
     )
@@ -88,11 +88,47 @@ def process_pdf_and_query(pdf_file, user_query):
 
     return output_text[0], num_images
 
+css = """
+<style>
+    .title {
+        text-align: center;
+        font-size: 32px;
+        font-weight: bold;
+        margin-bottom: 20px;
+    }
+    .duplicate-button {
+        background-color: #FFD700; /* Yellow */
+        color: black;
+        border: none;
+        padding: 10px 20px;
+        cursor: pointer;
+        font-size: 16px;
+        border-radius: 5px;
+    }
+    .gr-button {
+        background-color: #4CAF50; /* Green */
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        cursor: pointer;
+        font-size: 16px;
+        border-radius: 5px;
+    }
+</style>
+"""
+
 description = """
-**Multimodal RAG** is a retrieval-augmented generation (RAG) model that works with multiple modalities, such as text and images, to retrieve relevant information from a knowledge base and generate coherent responses. In this demo, we use **ColPali**, a multimodal retriever capable of efficiently retrieving from large datasets, along with **Qwen2-VL-2B-Instruct**, a powerful large language model for answering questions based on the retrieved information.
-Byaldi, developed by **Answer.ai**, is used to simplify the integration of ColPali into our pipeline.
+<div style="text-align: center; margin-bottom: 20px;">
+    <p>Welcome to the Multimodal RAG interface! This tool allows you to query PDF documents using a combination of image and text information.</p>
+    <p>We utilize ColPali as a multimodal retriever, and Byaldi is a new library by Answer.ai that simplifies the use of ColPali. Our system incorporates the Qwen/Qwen2-VL-2B-Instruct LLM for generating insightful responses based on the information retrieved.</p>
+</div>
 """
 
+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 = """
 <div style="text-align: center; margin-top: 20px;">
     <a href="https://www.linkedin.com/in/pejman-ebrahimi-4a60151a7/" target="_blank">LinkedIn</a> |
@@ -102,24 +138,23 @@ footer = """
     <a href="https://github.com/AnswerDotAI/byaldi" target="_blank">Byaldi</a> |
     <a href="https://github.com/illuin-tech/colpali" target="_blank">ColPali</a>
     <br>
-    Made with 💖 by Pejman Ebrahimi
+    Made with 💖 by <a href="https://github.com/arad1367" target="_blank">Pejman Ebrahimi</a>
 </div>
 """
 
-with gr.Blocks(theme='freddyaboulton/dracula_revamped') as demo:
-    gr.Markdown("<h1 style='text-align: center; font-weight: bold;'>Multimodal RAG with Image Query - By <a href='https://github.com/arad1367' target='_blank'>Pejman Ebrahimi</a></h1>")
-    gr.Markdown(description)
-    
-    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")  
-    duplicate_button = gr.DuplicateButton(value="Duplicate Space for private use", elem_classes="duplicate-button")
+# Launch the Gradio app
+demo = gr.Interface(
+    fn=process_pdf_and_query, 
+    inputs=[pdf_input, query_input], 
+    outputs=[output_text, output_images],  
+    title="<div class='title'>Multimodal RAG with Image Query</div>", 
+    description=description,  
+    theme='freddyaboulton/dracula_revamped',  
+    css=css  
+)
 
-    gr.Row([pdf_input, query_input])
-    gr.Row([output_text, output_images])
-    gr.Row([duplicate_button])
+demo.add_component(gr.DuplicateButton(value="Duplicate Space for private use", elem_classes="duplicate-button"))
 
-    gr.HTML(footer)
+demo.add_component(gr.HTML(footer))
 
-demo.launch(debug=True)
+demo.launch(debug=True)