Update app.py

app.py

@@ -121,42 +121,67 @@ def chat_with_portfolio(message, history):
 
 # Aesthetics
 # Purple Gradient
+# Modern Glassmorphism CSS for Gradio 5
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap');
 
-* {
-    font-family: 'Quicksand', sans-serif !important;
-}
+/* Global Font and Body */
+* { font-family: 'Quicksand', sans-serif !important; }
 
+/* The Main Background */
 .gradio-container {
-    /* Vibrant purple-to-blue gradient */
-    background: linear-gradient(135deg, #a78bfa 0%, #6366f1 50%, #3b82f6 100%);
-    background-attachment: fixed;
+    background: linear-gradient(135deg, #a78bfa 0%, #6366f1 50%, #3b82f6 100%) !important;
+    background-attachment: fixed !important;
+}
+
+/* Glassmorphism for the Chat bubbles */
+.message {
+    background: rgba(255, 255, 255, 0.15) !important;
+    backdrop-filter: blur(12px) !important;
+    -webkit-backdrop-filter: blur(12px) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    border-radius: 20px !important;
+    color: white !important;
+}
+
+/* Fix the Input Box so it's also Glassy */
+footer { display: none !important; } /* Hides the 'built with Gradio' footer */
+
+#input-box textarea {
+    background: rgba(255, 255, 255, 0.1) !important;
+    backdrop-filter: blur(8px) !important;
+    color: white !important;
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
+}
+
+/* IMPORTANT: Fixes the "Giant Icon" bug by containing the button size */
+button.primary {
+    max-width: 150px !important;
+    height: auto !important;
 }
 
-/* Adding a slight white tint to the chat area for better contrast */
-.chatbot {
-    background-color: rgba(255, 255, 255, 0.1) !important;
-    backdrop-filter: blur(8px);
-    border-radius: 15px;
+/* Glass effect for the examples buttons */
+.load-example-btn {
+    background: rgba(255, 255, 255, 0.1) !important;
+    border: 1px solid rgba(255, 255, 255, 0.2) !important;
+    color: white !important;
 }
 """
 
-# Layout Gradio UI
 with gr.Blocks(theme=gr.themes.Soft(), css=custom_css) as demo:
+    # Title with specific white color for contrast
+    gr.Markdown("<h1 style='text-align: center; color: white;'>🐈‍⬛ Chat with Adda-Bot</h1>")
+    
     gr.ChatInterface(
         fn=chat_with_portfolio,
-        title="🐈‍⬛ Chat with Adda-Bot",
-        description="Ask me anything about Adda's portfolio, experience, and background!",
+        description="<span style='color: white;'>Ask me anything about Adda's portfolio!</span>",
         examples=[
             "What is Adda's experience with Python?",
             "Tell me about her education.",
             "What projects has Adda worked on?"
         ],
-        # If you want to fix the 'Tuples' warning from the log, add this:
-        type="messages" 
+        type="messages", # Ensures modern formatting
     )
 
-# Apply the 'Pretty' settings here
 if __name__ == "__main__":
     demo.launch()