Update app.py

app.py

@@ -80,61 +80,75 @@ def process_pdf_and_query(pdf_file, user_query):
 css = """
 body {
     font-family: Arial, sans-serif;
-    background-color: #f0f0f0;
+    background-color: #2b2b2b;
+    color: #e0e0e0;
 }
 .container {
     max-width: 800px;
     margin: 0 auto;
     padding: 20px;
-    background-color: white;
+    background-color: #363636;
     border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    box-shadow: 0 0 10px rgba(0,0,0,0.3);
 }
 .title {
     font-size: 24px;
     font-weight: bold;
     text-align: center;
     margin-bottom: 20px;
+    color: #50fa7b;
 }
 .submit-btn {
-    background-color: #4CAF50;
-    color: white;
+    background-color: #50fa7b;
+    color: #282a36;
     padding: 10px 20px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-size: 16px;
+    font-weight: bold;
 }
 .submit-btn:hover {
-    background-color: #45a049;
+    background-color: #45c967;
 }
 .duplicate-button {
-    background-color: #4CAF50;
-    color: white;
+    background-color: #8be9fd;
+    color: #282a36;
     padding: 10px 20px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-size: 16px;
+    font-weight: bold;
     margin-top: 20px;
 }
+.duplicate-button:hover {
+    background-color: #79c7d8;
+}
+a {
+    color: #8be9fd;
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
 """
 
 explanation = """
-<div style="background-color: #f9f9f9; padding: 15px; border-radius: 5px; margin-bottom: 20px;">
-    <h3>About Multimodal RAG</h3>
+<div style="background-color: #44475a; padding: 15px; border-radius: 5px; margin-bottom: 20px; color: #f8f8f2;">
+    <h3 style="color: #50fa7b;">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>
+        <li><strong style="color: #ffb86c;">ColPali</strong>: A multimodal retriever for efficient information retrieval from images and text.</li>
+        <li><strong style="color: #ffb86c;">Byaldi</strong>: A new library by answer.ai that simplifies the use of ColPali.</li>
+        <li><strong style="color: #ffb86c;">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;">
+<div style="text-align: center; margin-top: 20px; color: #f8f8f2;">
     <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> |
@@ -147,7 +161,7 @@ footer = """
 """
 
 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('<h1 style="text-align: center; font-size: 32px;"><a href="https://github.com/arad1367" target="_blank" style="text-decoration: none; color: #50fa7b;">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")