Update app.py

app.py

@@ -9,23 +9,18 @@ import torch
 import torchvision
 import subprocess
 
-# 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)
     except FileNotFoundError:
         print("Poppler not found. Installing...")
-        # Run the setup commands
         subprocess.run("apt-get update", shell=True)
         subprocess.run("apt-get install -y poppler-utils", shell=True)
 
-# Call the Poppler installation check
 install_poppler()
 
-# Install flash-attn if not already installed
 subprocess.run('pip install flash-attn --no-build-isolation', env={'FLASH_ATTENTION_SKIP_CUDA_BUILD': "TRUE"}, shell=True)
 
-# Load the RAG Model and the Qwen2-VL-2B-Instruct model
 RAG = RAGMultiModalModel.from_pretrained("vidore/colpali")
 model = Qwen2VLForConditionalGeneration.from_pretrained("Qwen/Qwen2-VL-2B-Instruct",
                                                         trust_remote_code=True, torch_dtype=torch.bfloat16).cuda().eval()
@@ -33,24 +28,20 @@ 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)  # pdf_file.name gives the file path
+    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
     )
 
-    # Search the query in the RAG model
     results = RAG.search(user_query, k=1)
     if not results:
         return "No results found.", num_images
 
-    # Retrieve the page number and process image
     image_index = results[0]["page_num"] - 1
     messages = [
         {
@@ -65,7 +56,6 @@ def process_pdf_and_query(pdf_file, user_query):
         }
     ]
 
-    # Generate text with the Qwen model
     text = processor.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
     image_inputs, video_inputs = process_vision_info(messages)
     inputs = processor(
@@ -76,8 +66,7 @@ def process_pdf_and_query(pdf_file, user_query):
         return_tensors="pt",
     )
     inputs = inputs.to("cuda")
-
-    # Generate the output response
+    
     generated_ids = model.generate(**inputs, max_new_tokens=50)
     generated_ids_trimmed = [
         out_ids[len(in_ids):] for in_ids, out_ids in zip(inputs.input_ids, generated_ids)
@@ -88,36 +77,87 @@ def process_pdf_and_query(pdf_file, user_query):
 
     return output_text[0], num_images
 
-
-with gr.Blocks(theme='freddyaboulton/dracula_revamped') as demo:
-    gr.HTML("<h1 style='text-align: center; font-size: 30px;'><a href='https://github.com/arad1367'>Multimodal RAG with Image Query - By Pejman Ebrahimi</a></h1>")
-    gr.Markdown("Multimodal RAG is a technique that combines both textual and visual data to provide more accurate and comprehensive results. In this application, we use ColPali, a multimodal retriever, and Byaldi, a new library by answer.ai to easily use ColPali. We also use Qwen/Qwen2-VL-2B-Instruct LLM.")
-
-    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")  
-
-    submit_btn = gr.Button("Submit", variant="primary")
-    submit_btn.style(full_width=True)
-
-    duplicate_btn = gr.DuplicateButton(value="Duplicate Space for private use", elem_classes="duplicate-button")
-    duplicate_btn.style(full_width=True)
-
-    submit_btn.click(fn=process_pdf_and_query, inputs=[pdf_input, query_input], outputs=[output_text, output_images])
-
-    footer = """
-    <div style="text-align: center; margin-top: 20px;">
-        <a href="https://www.linkedin.com/in/pejman-ebrahimi-4a60151a7/" target="_blank">LinkedIn</a> |
-        <a href="https://github.com/arad1367" target="_blank">GitHub</a> |
-        <a href="https://arad1367.pythonanywhere.com/" target="_blank">Live demo of my PhD defense</a> |
-        <a href="https://huggingface.co/Qwen/Qwen2-VL-2B-Instruct" target="_blank">Qwen/Qwen2-VL-2B-Instruct</a> |
-        <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
-    </div>
-    """
+css = """
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+}
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+.title {
+    font-size: 24px;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+}
+.submit-btn {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+}
+.submit-btn:hover {
+    background-color: #45a049;
+}
+.duplicate-button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    margin-top: 20px;
+}
+"""
+
+explanation = """
+<div style="background-color: #f9f9f9; padding: 15px; border-radius: 5px; margin-bottom: 20px;">
+    <h3>About Multimodal RAG</h3>
+    <p>Multimodal RAG (Retrieval-Augmented Generation) combines text and image processing to provide more context-aware responses. This demo uses:</p>
+    <ul>
+        <li><strong>ColPali</strong>: A multimodal retriever for efficient information retrieval from images and text.</li>
+        <li><strong>Byaldi</strong>: A new library by answer.ai that simplifies the use of ColPali.</li>
+        <li><strong>Qwen/Qwen2-VL-2B-Instruct</strong>: A large language model capable of processing both text and visual inputs.</li>
+    </ul>
+    <p>This combination allows for more accurate and context-aware responses to queries about uploaded PDFs.</p>
+</div>
+"""
+
+footer = """
+<div style="text-align: center; margin-top: 20px;">
+    <a href="https://www.linkedin.com/in/pejman-ebrahimi-4a60151a7/" target="_blank">LinkedIn</a> |
+    <a href="https://github.com/arad1367" target="_blank">GitHub</a> |
+    <a href="https://arad1367.pythonanywhere.com/" target="_blank">Live demo of my PhD defense</a> |
+    <a href="https://huggingface.co/Qwen/Qwen2-VL-2B-Instruct" target="_blank">Qwen/Qwen2-VL-2B-Instruct</a> |
+    <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
+</div>
+"""
+
+with gr.Blocks(css=css, theme='freddyaboulton/dracula_revamped') as demo:
+    gr.HTML('<h1 style="text-align: center; font-size: 32px;"><a href="https://github.com/arad1367" target="_blank" style="text-decoration: none; color: inherit;">Multimodal RAG with Image Query - By Pejman Ebrahimi</a></h1>')
+    gr.HTML(explanation)
+    pdf_input = gr.File(label="Upload PDF")
+    query_input = gr.Textbox(label="Enter your query", placeholder="Ask a question about the PDF")
+    submit_btn = gr.Button("Submit", elem_classes="submit-btn")
+    output_text = gr.Textbox(label="Model Answer")
+    output_images = gr.Textbox(label="Number of Images in PDF")
+    
+    submit_btn.click(process_pdf_and_query, inputs=[pdf_input, query_input], outputs=[output_text, output_images])
+    
+    gr.DuplicateButton(value="Duplicate Space for private use", elem_classes="duplicate-button")
     gr.HTML(footer)
 
-demo.launch(debug=True)  
+demo.launch(debug=True)