Update app.py

app.py

@@ -6,13 +6,6 @@ import requests
 
 from pypdf import PdfReader
 from sentence_transformers import SentenceTransformer
-from getpass import getpass
-
-################################################################################
-# 0. Optionally Prompt for Gemini Key in Colab (SECURE)
-################################################################################
-# key_input = getpass("Enter your Gemini API key: ")
-# os.environ["GEMINI_API_KEY"] = key_input
 
 ################################################################################
 # 1. PDF Parsing and Chunking
@@ -25,7 +18,7 @@ def extract_pdf_text(pdf_file) -> str:
         all_text.append(text.strip())
     return "\n".join(all_text)
 
-def chunk_text(text, chunk_size=400, overlap=50):
+def chunk_text(text, chunk_size=300, overlap=50):
     words = text.split()
     chunks = []
     start = 0
@@ -123,7 +116,7 @@ def process_pdf(pdf_file):
     if not text:
         return None, "No text found in PDF."
 
-    chunks = chunk_text(text, chunk_size=400, overlap=50)
+    chunks = chunk_text(text, chunk_size=300, overlap=50)
     if not chunks:
         return None, "No valid text to chunk."
 
@@ -142,63 +135,88 @@ def chat_with_paper(query, state):
 
 demo_theme = gr.themes.Soft(primary_hue="slate")
 
-# Custom CSS changes:
+# Custom CSS:
 # 1. Lightest blue background
 # 2. Green buttons
-# 3. Thick black border around the entire interface
-# 4. Large, bold, centered title
-# 5. Welcome message directly under the title
+# 3. Thick black border, centered content
+# 4. Large, bold, center-aligned title
+# 5. Representative icon at top, bigger font for welcome text
 css_code = """
-/* Make the background a very light blue */
 body {
-    background-color: #E6F7FF; /* Lightest blue shade, tweak as needed */
+    background-color: #E6F7FF !important; /* Lightest blue */
+    margin: 0; 
+    padding: 0;
 }
 
-/* Add a thick black border around the Gradio interface container */
+/* Center the entire Gradio container and give a thick black border */
 .block > .inside {
-    border: 4px solid black; /* thick black border */
-    padding: 20px; /* some spacing from edges */
-    border-radius: 10px; /* optional rounding corners */
-    background-color: #FFFFFF; /* keep container white so text is clear */
+    margin: auto !important;
+    max-width: 900px !important; /* You can increase/decrease the max-width for your preference */
+    border: 4px solid black !important; /* Thick black border */
+    border-radius: 10px !important;
+    background-color: #FFFFFF !important; /* White container for clarity */
+    padding: 20px !important;
 }
 
-/* Title heading: big, bold, centered */
-#title-heading {
-    text-align: center;
-    font-size: 2.8rem; /* bigger font than before */
-    font-weight: 900; /* extra bold */
-    margin-bottom: 10px;
-    margin-top: 0;
+/* Title heading: bigger, bolder, centered */
+#app-title {
+    text-align: center !important;
+    font-size: 3rem !important;
+    font-weight: 900 !important;
+    margin-bottom: 0.5rem !important;
+    margin-top: 0.5rem !important;
 }
 
-/* Welcome text right under the title */
-#welcome-text {
-    text-align: center;
-    font-size: 1.3rem;
-    color: #444;
-    margin-bottom: 25px;
-    margin-top: 0.5rem;
-    font-weight: 500;
+/* Welcome text: slightly smaller, but still bold, centered */
+#app-welcome {
+    text-align: center !important;
+    font-size: 1.5rem !important;
+    color: #444 !important;
+    margin-bottom: 25px !important;
+    font-weight: 700 !important;
 }
 
-/* Buttons should be green */
+/* Buttons: green background, white text */
 button {
-    background-color: #3CB371 !important; /* mediumseagreen or any green shade */
-    color: #fff !important; 
+    background-color: #3CB371 !important; /* Medium sea green */
+    color: #ffffff !important;
     border: none !important;
     font-weight: 600 !important;
     cursor: pointer;
 }
 
-/* Button hover effect */
+/* Button hover effect: darker green */
 button:hover {
-    background-color: #2E8B57 !important; /* slightly darker green on hover */
+    background-color: #2E8B57 !important;
+}
+
+/* Optional: center the text in textboxes, if you like */
+textarea, input[type="text"] {
+    text-align: center !important;
+}
+
+/* Icon container styling */
+#icon-container {
+    text-align: center !important;
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
 }
 """
 
 with gr.Blocks(theme=demo_theme, css=css_code) as demo:
-    gr.Markdown("<div id='title-heading'>AI-Powered Personal Research Assistant</div>")
-    gr.Markdown("<div id='welcome-text'>Welcome! How may I help you?</div>")
+    # Representative icon/image at the top
+    # Replace the 'src' with any other icon URL you prefer
+    gr.Markdown("""
+    <div id="icon-container">
+        <img src="https://i.ibb.co/3Wp3yBZ/ai-icon.png" alt="AI icon" style="width:100px;">
+    </div>
+    """)
+    
+    # App title (large, bold, centered)
+    gr.Markdown("<div id='app-title'>AI-Powered Personal Research Assistant</div>")
+    
+    # Welcome text right under the title
+    gr.Markdown("<div id='app-welcome'>Welcome! How may I help you?</div>")
 
     state = gr.State()