Update app.py

app.py

@@ -115,34 +115,150 @@ def initialize_vector_store(_api_key):
 
 
 def main():
-    st.set_page_config(page_title="Papal Encyclicals RAG", page_icon="📄", layout="centered")
+    st.set_page_config(
+        page_title="Papal Encyclicals RAG",
+        page_icon="📄",
+        layout="centered",
+        initial_sidebar_state="collapsed"
+    )
     
-    # Custom CSS for white background and black text
+    # Custom CSS for clean, professional appearance
     st.markdown(
         """
         <style>
+        /* Hide Streamlit header, footer, and menu */
+        #MainMenu {visibility: hidden;}
+        header {visibility: hidden;}
+        footer {visibility: hidden;}
+        .stDeployButton {display: none;}
+        
+        /* Remove top padding caused by hidden header */
+        .block-container {
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+            max-width: 800px;
+        }
+        
+        /* Clean white background */
         .stApp {
-            background-color: white;
-            color: black;
+            background-color: #ffffff;
         }
-        .stMarkdown, .stText, p, span, label, h1, h2, h3 {
-            color: black !important;
+        
+        /* Typography */
+        .main-title {
+            font-size: 2.5rem;
+            font-weight: 600;
+            color: #1a1a1a;
+            text-align: center;
+            margin-bottom: 0.5rem;
+            padding-top: 1rem;
+        }
+        
+        .subtitle {
+            font-size: 1rem;
+            color: #666666;
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+        
+        /* Success message styling */
+        .stSuccess {
+            background-color: #f0f9f4;
+            border: 1px solid #86efac;
+            border-radius: 8px;
+            padding: 0.75rem 1rem;
         }
+        
+        /* Input field styling */
         .stTextInput > div > div > input {
-            color: black;
-            background-color: white;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            padding: 0.75rem 1rem;
+            font-size: 1rem;
+            transition: border-color 0.2s ease;
+        }
+        
+        .stTextInput > div > div > input:focus {
+            border-color: #4a90d9;
+            box-shadow: 0 0 0 2px rgba(74, 144, 217, 0.1);
+        }
+        
+        /* Section headers */
+        .section-header {
+            font-size: 1.1rem;
+            font-weight: 500;
+            color: #333333;
+            margin-top: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        
+        /* Answer box styling */
+        .answer-container {
+            background-color: #fafafa;
+            border: 1px solid #e8e8e8;
+            border-radius: 10px;
+            padding: 1.5rem;
+            margin-top: 1rem;
+        }
+        
+        .answer-label {
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: #888888;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 0.75rem;
         }
-        .stSpinner > div > div {
-            color: black;
+        
+        .answer-text {
+            font-size: 1rem;
+            color: #333333;
+            line-height: 1.7;
+        }
+        
+        /* Divider */
+        hr {
+            border: none;
+            border-top: 1px solid #eaeaea;
+            margin: 1.5rem 0;
+        }
+        
+        /* Status indicator */
+        .status-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            background-color: #f0f9f4;
+            color: #166534;
+            padding: 0.5rem 1rem;
+            border-radius: 20px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            margin-bottom: 2rem;
+        }
+        
+        .status-dot {
+            width: 8px;
+            height: 8px;
+            background-color: #22c55e;
+            border-radius: 50%;
+        }
+        
+        /* Hide label for cleaner look */
+        .stTextInput label {
+            font-size: 0.95rem;
+            color: #444444;
+            font-weight: 500;
+            margin-bottom: 0.5rem;
         }
         </style>
         """,
         unsafe_allow_html=True
     )
     
-    st.header("Papal Encyclicals RAG")
-    st.markdown("")
-    st.markdown("---")
+    # Header
+    st.markdown('<h1 class="main-title">Papal Encyclicals RAG</h1>', unsafe_allow_html=True)
+    st.markdown('<p class="subtitle">Ask questions about papal encyclicals and get answers based on the source document</p>', unsafe_allow_html=True)
 
     # Check for API key
     api_key = GOOGLE_API_KEY
@@ -159,40 +275,48 @@ def main():
         st.stop()
 
     # Initialize vector store (cached, runs only once)
-    with st.spinner("Loading document... Please wait."):
+    with st.spinner("Loading document..."):
         success, message = initialize_vector_store(api_key)
     
     if not success:
         st.error(message)
         st.stop()
 
-    # Display success status
-    st.success(f"Document loaded: {PDF_FILE_PATH}")
+    # Display status badge
+    st.markdown(
+        f'''
+        <div class="status-badge">
+            <span class="status-dot"></span>
+            Document loaded: {PDF_FILE_PATH}
+        </div>
+        ''',
+        unsafe_allow_html=True
+    )
     
     # Question input
-    st.subheader("Ask a question related to papal encyclicals.")
     user_question = st.text_input(
-        "Enter your question about papal encyclicals:",
-        placeholder="e.g., What are the main topics discussed?",
-        help="The AI will only answer based on the content of the uploaded PDF"
+        "Your question",
+        placeholder="e.g., What are the main themes discussed in the encyclicals?",
+        help="The AI will only answer based on the content of the uploaded PDF",
+        label_visibility="visible"
     )
     
     if user_question:
         with st.spinner("Searching for answer..."):
             try:
                 answer = user_input(user_question, api_key)
-                st.markdown("### Answer:")
-                st.write(answer)
+                st.markdown(
+                    f'''
+                    <div class="answer-container">
+                        <div class="answer-label">Answer</div>
+                        <div class="answer-text">{answer}</div>
+                    </div>
+                    ''',
+                    unsafe_allow_html=True
+                )
             except Exception as e:
                 st.error(f"Error getting answer: {str(e)}")
 
-    # Footer
-    st.markdown("---")
-    st.markdown(
-        "<div style='text-align: center'><small></small></div>",
-        unsafe_allow_html=True
-    )
-
 
 if __name__ == "__main__":
     main()