UI update

app.py

@@ -244,9 +244,10 @@ Answer:"""
 
  
 
+    import gradio as gr
+
     def gradio_interface(self):
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
-            # Basic client-side validation for immediate feedback (redundant but good UX)
             if not api_key or not api_key.strip() or not api_key.startswith("sk-"):
                 return "<div class='error-message'><span class='error-icon'>⚠️</span>Please provide a valid OpenAI API key (starting with 'sk-'). <a href='https://platform.openai.com/api-keys' target='_blank'>OpenAI</a>.</div>"
             if not state or state is None:
@@ -254,11 +255,9 @@ Answer:"""
             if not query or not query.strip():
                 return "<div class='error-message'><span class='error-icon'>⚠️</span>Please enter your question in the text box.</div>"
 
-            # Call the core processing logic
             result = self.process_query(query=query, state=state, openai_api_key=api_key)
             answer = result.get("answer", "<div class='error-message'><span class='error-icon'>⚠️</span>An unexpected error occurred.</div>")
 
-            # Check if the answer already contains an error message
             if "<div class='error-message'>" in answer:
                 return answer
             else:
@@ -292,34 +291,30 @@ Answer:"""
 
         custom_css = """
         /* Import modern fonts */
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Open+Sans:wght@600;700;800&display=swap');
 
         /* Define custom properties for light and dark themes */
         :root {
-            --background-primary: #FAFAFA;
-            --background-secondary: #F1F5F9;
-            --text-primary: #2D3748;
-            --text-secondary: #718096;
-            --title-color: #1A1A1A;
-            --accent-primary: #2C7A7B;
-            --accent-hover: #234E52;
-            --border-color: #E2E8F0;
+            --background-primary: #F7F7F7;
+            --background-secondary: #EDF2F7;
+            --text-primary: #1A1A1A;
+            --text-secondary: #4A5568;
+            --accent-primary: #38A169;
+            --border-color: #CBD5E0;
             --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
             --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
-            --error-bg: #FEE2E2;
-            --error-text: #DC2626;
+            --error-bg: #FEF2F2;
+            --error-text: #E53E3E;
         }
 
-        /* Dark theme variables */
         @media (prefers-color-scheme: dark) {
             :root {
-                --background-primary: #1A1A1A;
-                --background-secondary: #2D3748;
-                --text-primary: #D1D5DB;
+                --background-primary: #2D3748;
+                --background-secondary: #4A5568;
+                --text-primary: #FFFFFF;
                 --text-secondary: #A0AEC0;
-                --title-color: #E5E5E5;
-                --border-color: #4A5568;
-                --error-bg: #7F1D1D;
+                --border-color: #718096;
+                --error-bg: #63171B;
             }
         }
 
@@ -327,7 +322,7 @@ Answer:"""
         html, body, .gradio-container {
             background-color: var(--background-primary) !important;
             color: var(--text-primary) !important;
-            font-family: 'Inter', sans-serif !important;
+            font-family: 'Roboto', sans-serif !important;
             margin: 0 !important;
             padding: 0 !important;
         }
@@ -337,7 +332,6 @@ Answer:"""
             margin: 2rem auto !important;
             padding: 2rem !important;
             border-radius: 12px !important;
-            background-color: var(--background-primary) !important;
             box-shadow: var(--shadow-md) !important;
         }
 
@@ -348,57 +342,39 @@ Answer:"""
             border-radius: 12px !important;
             padding: 2rem !important;
             margin-bottom: 2rem !important;
-            position: relative;
             text-align: center !important;
             box-shadow: var(--shadow-sm) !important;
-            overflow: hidden;
-        }
-
-        .app-header-wrapper::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: radial-gradient(circle at top left, rgba(44, 122, 123, 0.2), transparent 70%);
-            z-index: 0;
-            opacity: 0.8;
+            position: relative;
         }
 
         .app-header-logo {
             font-size: 5rem !important;
             color: var(--accent-primary) !important;
             margin-bottom: 1rem !important;
-            position: relative;
-            z-index: 1;
-            animation: bounce 2s infinite ease-in-out;
+            animation: pulse 2s infinite ease-in-out;
         }
 
-        @keyframes bounce {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(-10px); }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
         }
 
         .app-header-title {
-            font-family: 'Poppins', sans-serif !important;
-            font-size: 2.8rem !important;
+            font-family: 'Open Sans', sans-serif !important;
+            font-size: 2.5rem !important;
             font-weight: 700 !important;
-            color: var(--title-color) !important; /* Ensure high contrast with background */
+            color: var(--text-primary) !important;
             margin: 0 !important;
             line-height: 1.2 !important;
-            text-shadow: 1px 1px 2px rgba(0,0,0,0.1) !important;
-            position: relative;
-            z-index: 1;
+            text-shadow: 1px 1px 3px rgba(0,0,0,0.1) !important;
         }
 
         .app-header-tagline {
-            font-size: 1.2rem !important;
+            font-size: 1.1rem !important;
             color: var(--text-secondary) !important;
             margin-top: 0.5rem !important;
             font-weight: 400 !important;
-            position: relative;
-            z-index: 1;
         }
 
         /* Main Dashboard Layout */
@@ -431,7 +407,7 @@ Answer:"""
         }
 
         .section-title {
-            font-family: 'Poppins', sans-serif !important;
+            font-family: 'Open Sans', sans-serif !important;
             font-size: 1.6rem !important;
             font-weight: 600 !important;
             color: var(--text-primary) !important;
@@ -462,7 +438,7 @@ Answer:"""
         .gradio-textbox textarea:focus,
         .gradio-textbox input:focus {
             border-color: var(--accent-primary) !important;
-            box-shadow: 0 0 0 3px rgba(44, 122, 123, 0.2) !important;
+            box-shadow: 0 0 0 3px rgba(56, 161, 105, 0.2) !important;
             outline: none !important;
         }
 
@@ -485,7 +461,7 @@ Answer:"""
         .gradio-radio input[type="radio"]:checked + label {
             background-color: var(--accent-primary) !important;
             color: white !important;
-            border-color: var(--accent-hover) !important;
+            border-color: var(--accent-primary) !important;
         }
 
         .gradio-button {
@@ -503,7 +479,7 @@ Answer:"""
         }
 
         .gr-button-primary:hover {
-            background-color: var(--accent-hover) !important;
+            background-color: #2F855A !important; /* Darker green */
             transform: translateY(-2px) !important;
         }
 
@@ -621,9 +597,8 @@ Answer:"""
         }
         """
 
-        # Use a professional Gradio theme with custom hues
         custom_theme = gr.themes.Soft(
-            primary_hue="teal",
+            primary_hue="green",
             secondary_hue="gray",
             neutral_hue="stone"
         )
@@ -640,7 +615,6 @@ Answer:"""
                 )
 
             with gr.Column(elem_classes="main-dashboard-container"):
-                # How This Assistant Works Box
                 with gr.Group(elem_classes="dashboard-card-section"):
                     gr.Markdown("<h3 class='section-title'>How This Assistant Works</h3>", elem_classes="full-width-center section-title-gradient-bar")
                     with gr.Column(elem_classes="dashboard-card-content-area"):
@@ -650,7 +624,6 @@ Answer:"""
                             """
                         )
 
-                # OpenAI API Key Input Card
                 with gr.Group(elem_classes="dashboard-card-section"):
                     gr.Markdown("<h3 class='section-title'>OpenAI API Key</h3>", elem_classes="full-width-center section-title-gradient-bar")
                     with gr.Column(elem_classes="dashboard-card-content-area"):
@@ -666,7 +639,6 @@ Answer:"""
                             elem_classes="gr-prose"
                         )
 
-                # Query Input and State Selection Card
                 with gr.Group(elem_classes="dashboard-card-section"):
                     gr.Markdown("<h3 class='section-title'>Ask Your Question</h3>", elem_classes="full-width-center section-title-gradient-bar")
                     with gr.Column(elem_classes="dashboard-card-content-area"):
@@ -691,7 +663,6 @@ 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
                 with gr.Group(elem_classes="dashboard-card-section"):
                     gr.Markdown("<h3 class='section-title'>Legal Assistant's Response</h3>", elem_classes="full-width-center section-title-gradient-bar")
                     with gr.Column(elem_classes="dashboard-card-content-area"):
@@ -700,7 +671,6 @@ Answer:"""
                             elem_classes="output-content-wrapper"
                         )
 
-                # Example Questions Section
                 with gr.Group(elem_classes="dashboard-card-section examples-section"):
                     gr.Markdown("<h3 class='section-title'>Example Questions</h3>", elem_classes="full-width-center section-title-gradient-bar")
                     with gr.Column(elem_classes="dashboard-card-content-area"):
@@ -714,7 +684,6 @@ Answer:"""
                         else:
                             gr.Markdown("<div class='placeholder'>Sample questions could not be loaded. Please ensure the vector database is populated.</div>")
 
-            # Footer Section
             with gr.Group(elem_classes="app-footer-wrapper"):
                 gr.Markdown(
                     f"""