updated UI_v38

app.py

@@ -6,7 +6,8 @@ import re
 
 import gradio as gr
 try:
-    from vector_db import VectorDatabase # Assuming this is in the same directory or installed
+    # Assuming vector_db.py exists in the same directory or is installed
+    from vector_db import VectorDatabase 
 except ImportError:
     print("Error: Could not import VectorDatabase from vector_db.py.")
     print("Please ensure vector_db.py exists in the same directory and is correctly defined.")
@@ -241,9 +242,9 @@ Answer:"""
     # --- GRADIO INTERFACE (Complete Overhaul for Cohesion, Legibility, and Advanced Look) ---
     def gradio_interface(self):
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
-            # Basic client-client-side validation for immediate feedback
+            # 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'>Get one here</a>.</div>"
+                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'>Get one free from OpenAI</a>.</div>"
             if not state or state == "Select a state..." or "Error" in state:
                 return "<div class='error-message'><span class='error-icon'>⚠️</span>Please select a valid state from the dropdown.</div>"
             if not query or not query.strip():
@@ -274,6 +275,8 @@ Answer:"""
             ["What are the rules for security deposit returns?", "California"],
             ["Can a landlord enter my apartment without notice?", "New York"],
             ["My landlord hasn't made necessary repairs. What can I do?", "Texas"],
+            ["How much notice must a landlord give to raise rent?", "Florida"],
+            ["What is an implied warranty of habitability?", "Illinois"]
         ]
         example_queries = []
         if available_states_list and "Error" not in available_states_list[0] and len(available_states_list) > 0:
@@ -298,8 +301,8 @@ Answer:"""
             --card-section-bg-dark: #2A2A40;
             --text-primary-dark: #EAEAF0;
             --text-secondary-dark: #A0A0B0;
-            --accent-main-dark: #FFC107;
-            --accent-hover-dark: #E0A800;
+            --accent-main-dark: #FFC107; /* Goldenrod/Amber */
+            --accent-hover-dark: #E0A800; /* Darker Goldenrod */
             --border-dark: #3F3F5A;
             --shadow-dark: 0 1.2rem 3.5rem rgba(0,0,0,0.6);
             --focus-ring-dark: rgba(255, 193, 7, 0.4);
@@ -313,8 +316,8 @@ Answer:"""
             --card-section-bg-light: #F8F9FA;
             --text-primary-light: #212529;
             --text-secondary-light: #6C757D;
-            --accent-main-light: #007bff;
-            --accent-hover-light: #0056b3;
+            --accent-main-light: #007bff; /* Standard Blue */
+            --accent-hover-light: #0056b3; /* Darker Blue */
             --border-light: #DDE2E8;
             --shadow-light: 0 0.8rem 2.5rem rgba(0,0,0,0.15);
             --focus-ring-light: rgba(0, 123, 255, 0.3);
@@ -640,6 +643,7 @@ Answer:"""
             :focus-visible { outline-color: var(--accent-main-light) !important; box_shadow: 0 0 0 8px var(--focus-ring-light) !important; }
         }
         .gradio-button span:focus { outline: none !important; }
+        /* Hide default Gradio example labels and related elements for cleaner presentation */
         .gr-examples .gr-label, .gr-examples button.gr-button-filter, .gr-examples .label-wrap,
         .gr-examples div[data-testid*="label-text"], .gr-examples span[data-testid*="label-text"],
         .gr-examples div[class*="label"], .gr-examples .gr-example-label,
@@ -654,7 +658,7 @@ Answer:"""
             font-size: 0 !important; line-height: 0 !important; position: absolute !important;
             pointer-events: none !important;
         }
-        /* Responsive Adjustments (meticulously refined) - KEPT AS IS */
+        /* Responsive Adjustments (meticulously refined) */
         @media (max-width: 1024px) {
             .gradio-container > .flex.flex-col { max-width: 960px; padding: 0 1.5rem !important; }
             .app-header-title { font-size: 3.8rem; } .app-header-tagline { font-size: 1.5rem; }
@@ -686,7 +690,7 @@ Answer:"""
             .output-card .placeholder { padding: 2.5rem 1.5rem; font-size: 1.1rem; }
             .examples-section { padding-top: 1.2rem; }
             .examples-section .gr-examples-table th, .examples-section .gr-examples-table td { padding: 0.9rem 1.1rem !important; font-size: 1.0rem !important; }
-            .app-footer-wrapper { margin-top: 0.5rem; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); padding-top: 2rem; padding-bottom: 2rem; }
+            .app-footer-wrapper { margin-top: 0.6rem; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); padding-top: 2rem; padding-bottom: 2rem; }
             .app-footer { padding: 0 1rem !important; }
         }
         @media (max-width: 480px) {
@@ -741,9 +745,10 @@ Answer:"""
                 with gr.Group(elem_classes="dashboard-card-section"):
                     gr.Markdown("<h3 class='sub-section-title'>OpenAI API Key</h3>") # Centered by CSS
                     api_key_input = gr.Textbox(
-                        label="", 
+                        label="", # Label hidden by CSS, custom label below
                         type="password", placeholder="Enter your API key (e.g., sk-...)",
-                        info="Required to process your query. Securely used per request, not stored. <a href='https://platform.openai.com/api-keys' target='_blank'>Get one free from OpenAI</a>.", lines=1
+                        info="Required to process your query. Securely used per request, not stored. <a href='https://platform.openai.com/api-keys' target='_blank'>Get one free from OpenAI</a>.", lines=1,
+                        elem_classes=["input-field-group"]
                     )
 
                 # --- Section 3: Query Input and State Selection Card ---
@@ -753,12 +758,14 @@ Answer:"""
                         with gr.Column(elem_classes="input-field", scale=3):
                             query_input = gr.Textbox(
                                 label="Question", placeholder="E.g., What are the rules for security deposit returns in my state?",
-                                lines=5, max_lines=10
+                                lines=5, max_lines=10,
+                                elem_classes=["input-field-group"]
                             )
                         with gr.Column(elem_classes="input-field", scale=1): 
                             state_input = gr.Dropdown(
                                 label="Select State", choices=dropdown_choices, value=initial_value,
-                                allow_custom_value=False
+                                allow_custom_value=False,
+                                elem_classes=["input-field-group"]
                             )
                     with gr.Row(elem_classes="button-row"):
                         clear_button = gr.Button("Clear", variant="secondary", elem_classes=["gr-button-secondary"])
@@ -779,7 +786,8 @@ Answer:"""
                         gr.Examples(
                             examples=example_queries, inputs=[query_input, state_input],
                             examples_per_page=5,
-                            label="", 
+                            label="", # Label hidden by CSS
+                            elem_classes=["gr-examples-table"] # Custom class for table styling
                         )
                     else:
                         gr.Markdown("<div class='placeholder'>Sample questions could not be loaded.</div>")