UI v20

app.py

@@ -5,7 +5,6 @@ from functools import lru_cache
 import re
 
 import gradio as gr
-# import gradio.themes as themes # Not directly used for theme dropdown, but kept if you had other theme-related utilities.
 
 try:
     # Assuming vector_db.py exists in the same directory or is installed
@@ -260,11 +259,12 @@ Answer:"""
 
             # Check if the answer already contains an error message (from deeper within process_query)
             if "<div class='error-message'>" in answer:
-                return answer # Return the pre-formatted error message directly
+                # Error messages are returned directly as they contain their own styling
+                return answer
             else:
-                # Format the successful response with the new UI structure
-                formatted_response = f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><hr class='divider'>{answer}"
-                return formatted_response
+                # Wrap successful response in a div with an animation class
+                formatted_response_content = f"<div class='response-header'><span class='response-icon'>📜</span>Response for {state}</div><hr class='divider'>{answer}"
+                return f"<div class='animated-output-content'>{formatted_response_content}</div>"
 
         try:
             available_states_list = self.get_states()
@@ -297,21 +297,20 @@ Answer:"""
 
 
         # Custom CSS for better UI design, clear boundaries, and text alignment for HuggingFace
-        # This CSS overrides Gradio defaults to create the desired look and feel.
         custom_css = """
         /* Import legible fonts from Google Fonts */
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
         
-        /* Root variables for consistent theming - adjusted for calm_seafoam feel */
+        /* Root variables for consistent theming - adjusted for very light calm_seafoam feel */
         :root {
-            --primary-color: #4CAF50; /* A pleasant green */
-            --primary-hover: #45a049;
-            --background-primary: #F0F8F8; /* Light seafoam background */
-            --background-secondary: #E8F0F0; /* Slightly darker for contrast */
-            --text-primary: #2C3E50; /* Darker text for readability */
-            --text-secondary: #5F7C8A; /* Muted text */
-            --border-color: #B2D8D8; /* Seafoam border */
-            --border-focus: #4CAF50; /* Focus color matches primary */
+            --primary-color: #3cb371; /* Medium Sea Green (vibrant seafoam) */
+            --primary-hover: #339966;
+            --background-primary: hsl(180, 100%, 98%); /* Very light seafoam for main cards */
+            --background-secondary: hsl(180, 100%, 96%); /* Slightly darker for overall app background */
+            --text-primary: hsl(210, 20%, 20%); /* Dark blue-gray for main text */
+            --text-secondary: hsl(210, 10%, 45%); /* Muted blue-gray for secondary text */
+            --border-color: hsl(180, 30%, 85%); /* Subtle seafoam gray for borders */
+            --border-focus: #3cb371; /* Focus color matches primary */
             --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
             --shadow-md: 0 4px 10px rgba(0,0,0,0.1);
             --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
@@ -321,7 +320,6 @@ Answer:"""
         }
         
         /* Dark mode variables - for consistency if a dark mode toggle were present */
-        /* calm_seafoam theme itself is light, but if a `dark` class is applied to body: */
         body.dark {
             --background-primary: #1F303A; /* Dark blue-green */
             --background-secondary: #2C404B;
@@ -358,30 +356,61 @@ Answer:"""
             margin-bottom: 1.5rem !important;
             text-align: center !important; /* Center text within header */
             box-shadow: var(--shadow-md) !important;
+            position: relative; /* For potential pseudo-element effects */
+            overflow: hidden; /* For any overflow animations */
+        }
+        .app-header-wrapper::before { /* Subtle background pattern for dynamism */
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at top left, rgba(60,179,113,0.05) 0%, transparent 40%),
+                        radial-gradient(circle at bottom right, rgba(60,179,113,0.05) 0%, transparent 40%);
+            z-index: 0;
+            opacity: 0.8;
+            pointer-events: none;
         }
+
         .app-header-logo {
-            font-size: 3.5rem !important; /* Larger icon */
+            font-size: 4.5rem !important; /* Larger icon */
             margin-bottom: 0.75rem !important;
             display: block !important;
             color: var(--primary-color) !important; /* Theme color */
+            position: relative;
+            z-index: 1; /* Bring icon to front of pseudo-element */
+            /* Animation for dynamism */
+            animation: float-icon 3s ease-in-out infinite alternate;
+        }
+        /* Keyframes for floating icon */
+        @keyframes float-icon {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-5px); }
+            100% { transform: translateY(0px); }
         }
+
         .app-header-title {
             font-family: 'Poppins', sans-serif !important;
-            font-size: 2.8rem !important; /* Larger title */
+            font-size: 3rem !important; /* Even larger title */
             font-weight: 800 !important; /* Bolder */
             color: var(--text-primary) !important;
             margin: 0 0 0.75rem 0 !important;
             line-height: 1.1 !important;
-            letter-spacing: -0.02em !important; /* Slightly tighter spacing */
+            letter-spacing: -0.03em !important; /* Tighter spacing */
+            position: relative;
+            z-index: 1;
         }
         .app-header-tagline {
-            font-size: 1.2rem !important;
+            font-size: 1.25rem !important; /* Slightly larger tagline */
             color: var(--text-secondary) !important;
             font-weight: 400 !important;
             margin: 0 !important;
             max-width: 700px; /* Constrain tagline width */
             margin-left: auto;
             margin-right: auto;
+            position: relative;
+            z-index: 1;
         }
 
         /* Main container with consistent spacing */
@@ -390,24 +419,26 @@ Answer:"""
             flex-direction: column !important;
             gap: 1.25rem !important; /* Consistent spacing between cards */
         }
-        /* Card sections with clear boundaries (boundeyes) */
+        /* Card sections with clear boundaries (boundeyes) and subtle dynamic effects */
         .dashboard-card-section {
             background: var(--background-primary) !important;
             border: 2px solid var(--border-color) !important; /* Distinct border */
             border-radius: 12px !important;
             padding: 1.75rem !important; /* Consistent padding */
             box-shadow: var(--shadow-sm) !important; /* Subtle shadow */
-            transition: all 0.2s ease !important;
+            transition: all 0.3s ease-out !important; /* Smoother transition */
+            cursor: default; /* Indicate not directly clickable (unless examples) */
         }
         .dashboard-card-section:hover {
-            box-shadow: var(--shadow-md) !important; /* Enhanced shadow on hover */
+            box-shadow: var(--shadow-md) !important;
+            transform: translateY(-3px) !important; /* More pronounced lift */
         }
 
         /* Centered section titles with improved typography */
         .sub-section-title {
             font-family: 'Poppins', sans-serif !important;
-            font-size: 1.6rem !important;
-            font-weight: 700 !important;
+            font-size: 1.7rem !important; /* Slightly larger */
+            font-weight: 700 !important; /* Bolder */
             color: var(--text-primary) !important;
             text-align: center !important; /* Centered text */
             margin: 0 0 1.25rem 0 !important; /* More space below title */
@@ -444,7 +475,7 @@ Answer:"""
             font-size: 0.98rem !important;
             font-family: 'Inter', sans-serif !important;
             color: var(--text-primary) !important;
-            transition: all 0.2s ease !important;
+            transition: border-color 0.2s ease, box-shadow 0.2s ease !important; /* Smooth transitions */
             box-shadow: var(--shadow-sm) !important;
         }
         .gradio-textbox textarea:focus,
@@ -453,7 +484,7 @@ Answer:"""
         .gradio-dropdown .primary-wrap.focused { /* Apply focus style to dropdown wrap */
             outline: none !important;
             border-color: var(--border-focus) !important; /* Distinct border on focus */
-            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15) !important; /* Soft glow on focus */
+            box-shadow: 0 0 0 4px rgba(60, 179, 113, 0.2) !important; /* Broader, softer glow on focus */
         }
 
         /* Label styling for better readability */
@@ -482,7 +513,7 @@ Answer:"""
             flex: 1 !important;
         }
 
-        /* Button styling improvements */
+        /* Button styling improvements with active state for dynamism */
         .button-row {
             display: flex !important;
             gap: 1rem !important;
@@ -494,7 +525,7 @@ Answer:"""
             border-radius: 9px !important; /* Slightly more rounded */
             font-weight: 600 !important; /* Bolder text */
             font-size: 1rem !important;
-            transition: all 0.25s ease !important;
+            transition: all 0.2s ease-out !important; /* Smooth transition for hover/active */
             cursor: pointer !important;
             border: 2px solid transparent !important;
             text-align: center !important; /* Ensure button text is centered */
@@ -509,6 +540,10 @@ Answer:"""
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-2px) !important; /* Subtle lift effect on hover */
         }
+        .gr-button-primary:active { /* Press down effect on click */
+            transform: translateY(1px) !important;
+            box-shadow: none !important;
+        }
         .gr-button-secondary {
             background: transparent !important;
             color: var(--text-primary) !important;
@@ -519,21 +554,41 @@ Answer:"""
             border-color: var(--primary-color) !important;
             transform: translateY(-2px) !important;
         }
+        .gr-button-secondary:active { /* Press down effect on click */
+            transform: translateY(1px) !important;
+            box-shadow: none !important;
+        }
 
-        /* Output styling with clear boundaries (boundeyes are clear) */
+        /* Output styling with clear boundaries (boundeyes are clear) and dynamic fade-in */
         .output-content-wrapper {
             background: var(--background-primary) !important;
             border: 2px solid var(--border-color) !important; /* Clear border */
             border-radius: 8px !important;
             padding: 1.5rem !important;
             min-height: 150px !important; /* More space for output */
-            font-size: 1rem !important;
-            line-height: 1.7 !important;
             color: var(--text-primary) !important;
-            overflow-wrap: break-word; /* Ensure long words wrap */
-            word-break: break-word; /* Ensure long words wrap */
-            white-space: pre-wrap; /* Preserve formatting for newlines in markdown */
+            /* Ensure the inner animated content fits well */
+            display: flex;
+            flex-direction: column;
+            justify-content: center; /* Center content vertically if small */
+            align-items: center; /* Center content horizontally if small */
+        }
+        /* The div holding the actual response content, enabling fade-in animation */
+        .animated-output-content {
+            opacity: 0;
+            animation: fadeInAndSlideUp 0.7s ease-out forwards; /* More pronounced animation */
+            width: 100%; /* Take full width of parent */
+            /* Preserve formatting within the animated content */
+            white-space: pre-wrap;
+            overflow-wrap: break-word;
+            word-break: break-word;
+            text-align: left !important; /* Ensure text is left-aligned within this div */
+        }
+        @keyframes fadeInAndSlideUp {
+            from { opacity: 0; transform: translateY(15px); }
+            to { opacity: 1; transform: translateY(0); }
         }
+
         .response-header {
             font-size: 1.3rem !important;
             font-weight: 700 !important;
@@ -552,7 +607,6 @@ Answer:"""
             border-top: 1px dashed var(--border-color) !important; /* Dashed divider for visual separation */
             margin: 1rem 0 !important;
         }
-
         /* Error message styling */
         .error-message {
             background: var(--error-bg) !important;
@@ -566,6 +620,9 @@ Answer:"""
             font-size: 0.95rem !important;
             font-weight: 500 !important;
             line-height: 1.6 !important;
+            text-align: left !important; /* Ensure error message text is left aligned */
+            width: 100%; /* Take full width of parent */
+            box-sizing: border-box; /* Include padding/border in width */
         }
         .error-message a {
             color: var(--error-text) !important;
@@ -592,9 +649,11 @@ Answer:"""
             color: var(--text-secondary) !important;
             font-style: italic !important;
             font-size: 1.1rem !important;
+            width: 100%; /* Ensure it takes full width of parent */
+            box-sizing: border-box; /* Include padding/border in width */
         }
 
-        /* Examples table styling */
+        /* Examples table styling with dynamic hover */
         .examples-section .gr-samples-table {
             border: 2px solid var(--border-color) !important;
             border-radius: 8px !important;
@@ -618,9 +677,11 @@ Answer:"""
             color: var(--text-primary) !important;
             border-top: 1px solid var(--border-color) !important;
             cursor: pointer !important;
+            transition: background 0.2s ease, transform 0.1s ease !important; /* Smooth transitions */
         }
         .examples-section .gr-samples-table tr:hover td {
             background: var(--background-secondary) !important;
+            transform: translateX(5px); /* Subtle slide on hover */
         }
         /* Hide Gradio default elements for examples for cleaner look */
         .gr-examples .gr-label,
@@ -754,10 +815,10 @@ Answer:"""
                         clear_button = gr.Button("Clear", variant="secondary", elem_classes=["gr-button-secondary"])
                         submit_button = gr.Button("Submit Query", variant="primary", elem_classes=["gr-button-primary"])
 
-                # Output Display Card
+                # Output Display Card - Using gr.HTML for better animation control
                 with gr.Group(elem_classes="dashboard-card-section"):
                     gr.Markdown("<h3 class='sub-section-title'>Legal Assistant's Response</h3>") # Centered by CSS
-                    output = gr.Markdown(
+                    output = gr.HTML( # Changed to gr.HTML to wrap content with animation class
                         value="<div class='placeholder'>The answer will appear here after submitting your query.</div>",
                         elem_classes="output-content-wrapper" # Custom class for output styling
                     )