UI update

app.py

@@ -245,19 +245,14 @@ Answer:"""
     # --- GRADIO INTERFACE (NEW UI DESIGN) ---
     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:
                 return "<div class='error-message'><span class='error-icon'></span>Please select a valid state from the list.</div>"
             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:
@@ -290,10 +285,8 @@ Answer:"""
             example_queries.append(["What basic rights do tenants have?", "California"])
 
         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 (light mode) */
+
         :root {
             --primary-color: #FF8C00;
             --primary-hover: #E07B00;
@@ -310,8 +303,7 @@ Answer:"""
             --error-border: #FFD2B2;
             --error-text: #E05C00;
         }
-        
-        /* Dark mode variables */
+
         @media (prefers-color-scheme: dark) {
             body {
                 --primary-color: #FFA500;
@@ -330,7 +322,7 @@ Answer:"""
                 --error-text: #FF6666;
             }
         }
-        
+
         body, html {
             background-color: var(--background-secondary) !important;
             color: var(--text-primary) !important;
@@ -913,7 +905,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"):
@@ -923,7 +914,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"):
@@ -939,7 +929,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"):
@@ -964,7 +953,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"):
@@ -973,7 +961,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"):
@@ -987,7 +974,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"""