UI update

app.py

@@ -243,6 +243,7 @@ Answer:"""
             raise RuntimeError(f"Failed to process PDF '{pdf_path}': {e}") from e
 
     # --- GRADIO INTERFACE (NEW UI DESIGN) ---
+    import gradio as gr
 
     def gradio_interface(self):
         def query_interface_wrapper(api_key: str, query: str, state: str) -> str:
@@ -274,6 +275,7 @@ Answer:"""
             print(f"DEBUG: Error loading states for selection: {e}")
             radio_choices = ["Error: Critical failure loading states"]
             initial_value_radio = None
+
         example_queries_base = [
             ["What are the rules for security deposit returns?", "California"],
             ["Can a landlord enter my apartment without notice?", "New York"],
@@ -294,7 +296,7 @@ Answer:"""
         /* 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 light theme */
+        /* Root variables for light theme */
         :root {
             --primary-color: #FF8C00;
             --primary-hover: #E07B00;
@@ -312,11 +314,30 @@ Answer:"""
             --error-text: #E05C00;
         }
 
+        /* Dark theme variables */
+        [data-theme="dark"] {
+            --primary-color: #FF8C00;
+            --primary-hover: #FFB366;
+            --background-primary: #1A1A1A;
+            --background-secondary: #2D2D2D;
+            --text-primary: #E0E0E0;
+            --text-secondary: #A0A0A0;
+            --border-color: #454545;
+            --border-focus: #FF8C00;
+            --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
+            --shadow-md: 0 4px 10px rgba(0,0,0,0.4);
+            --shadow-lg: 0 10px 20px rgba(0,0,0,0.5);
+            --error-bg: #3A2A2A;
+            --error-border: #FF8C00;
+            --error-text: #FF8C00;
+        }
+
         body, html {
             background-color: var(--background-secondary) !important;
             color: var(--text-primary) !important;
             transition: background-color 0.3s, color 0.3s;
         }
+
         .gradio-container {
             max-width: 900px !important;
             margin: 0 auto !important;
@@ -326,9 +347,11 @@ Answer:"""
             box-shadow: none !important;
             color: var(--text-primary) !important;
         }
+
         .main-dashboard-container > * {
             background-color: var(--background-primary) !important;
         }
+
         .app-header-wrapper {
             background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
             border: 2px solid var(--border-color) !important;
@@ -341,6 +364,7 @@ Answer:"""
             text-align: center !important;
             color: var(--text-primary) !important;
         }
+
         .app-header-wrapper::before {
             content: '';
             position: absolute;
@@ -353,6 +377,7 @@ Answer:"""
             opacity: 0.8;
             pointer-events: none;
         }
+
         .app-header-logo {
             font-size: 8.5rem !important;
             margin-bottom: 0.75rem !important;
@@ -362,11 +387,13 @@ Answer:"""
             z-index: 1;
             animation: float-icon 3s ease-in-out infinite alternate;
         }
+
         @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: 3rem !important;
@@ -380,6 +407,7 @@ Answer:"""
             display: inline-block;
             max-width: 100%;
         }
+
         .app-header-tagline {
             font-size: 1.25rem !important;
             color: var(--text-secondary) !important;
@@ -390,11 +418,13 @@ Answer:"""
             position: relative;
             z-index: 1;
         }
+
         .main-dashboard-container {
             display: flex !important;
             flex-direction: column !important;
             gap: 1.25rem !important;
         }
+
         .dashboard-card-section {
             background-color: var(--background-primary) !important;
             border: 2px solid var(--border-color) !important;
@@ -405,10 +435,12 @@ Answer:"""
             cursor: default;
             color: var(--text-primary) !important;
         }
+
         .dashboard-card-section:hover {
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-3px) !important;
         }
+
         .full-width-center {
             display: flex !important;
             justify-content: center !important;
@@ -417,6 +449,7 @@ Answer:"""
             flex-direction: column !important;
             background-color: transparent !important;
         }
+
         .section-title-gradient-bar {
             background-color: var(--background-secondary) !important;
             padding: 1.25rem 1.75rem !important;
@@ -428,6 +461,7 @@ Answer:"""
             width: 100%;
             color: var(--text-primary) !important;
         }
+
         .section-title {
             font-family: 'Poppins', sans-serif !important;
             font-size: 1.7rem !important;
@@ -441,13 +475,15 @@ Answer:"""
             text-align: center !important;
             letter-spacing: -0.01em !important;
         }
+
         .dashboard-card-content-area {
             padding: 0 1.75rem 1.75rem 1.75rem !important;
             background-color: var(--background-primary) !important;
             box-sizing: border-box;
             width: 100%;
-            color: var(--text-primary) !important;
+            color部分: color: var(--text-primary) !important;
         }
+
         .dashboard-card-section p {
             line-height: 1.7 !important;
             color: var(--text-primary) !important;
@@ -458,10 +494,12 @@ Answer:"""
             padding: 0 !important;
             white-space: normal !important;
         }
+
         .dashboard-card-section strong, .dashboard-card-section b {
             font-weight: 700 !important;
             color: var(--primary-color) !important;
         }
+
         .gr-block, .gr-box, .gr-prose, .gr-form, .gr-panel,
         .gr-columns, .gr-column,
         .gradio-html, .gradio-markdown, .gradio-textbox, .gradio-radio, .gradio-button {
@@ -471,6 +509,7 @@ Answer:"""
             overflow-wrap: break-word;
             word-break: break-word;
         }
+
         .gradio-textbox textarea,
         .gradio-textbox input,
         .gradio-radio label,
@@ -478,9 +517,11 @@ Answer:"""
             background-color: var(--background-primary) !important;
             color: var(--text-primary) !important;
         }
+
         .gradio-textbox {
             margin-bottom: 0.5rem !important;
         }
+
         .gradio-textbox textarea,
         .gradio-textbox input {
             border: 2px solid var(--border-color) !important;
@@ -492,22 +533,27 @@ Answer:"""
             transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
             box-shadow: var(--shadow-sm) !important;
         }
+
         .gradio-textbox .scroll-hide {
             background-color: var(--background-primary) !important;
         }
+
         .gradio-textbox textarea:focus,
         .gradio-textbox input:focus {
             outline: none !important;
             border-color: var(--border-focus) !important;
             box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.2) !important;
         }
+
         .gradio-radio {
             padding: 0 !important;
             margin-top: 1rem !important;
         }
+
         .gradio-radio input[type="radio"] {
             display: none !important;
         }
+
         .gradio-radio label {
             display: flex !important;
             justify-content: center !important;
@@ -524,17 +570,20 @@ Answer:"""
             width: 100 !important;
             box-sizing: border-box !important;
         }
+
         .gradio-radio label span.text-lg {
             font-weight: 600 !important;
             color: var(--text-primary) !important;
             font-size: 0.98rem !important;
         }
+
         .gradio-radio label:hover {
             background-color: var(--background-secondary) !important;
             border-color: var(--primary-color) !important;
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-2px) !important;
         }
+
         .gradio-radio input[type="radio"]:checked + label {
             background-color: var(--primary-color) !important;
             color: var(--text-primary) !important;
@@ -542,12 +591,15 @@ Answer:"""
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-1px) !important;
         }
+
         .gradio-radio input[type="radio"]:checked + label span.text-lg {
             color: var(--text-primary) !important;
         }
+
         .gradio-radio .gr-form {
             padding: 0 !important;
         }
+
         .gradio-textbox label,
         .gradio-radio > label {
             font-weight: 600 !important;
@@ -557,6 +609,7 @@ Answer:"""
             display: block !important;
             text-align: left !important;
         }
+
         .gr-prose {
             font-size: 0.9rem !important;
             color: var(--text-secondary) !important;
@@ -564,22 +617,26 @@ Answer:"""
             text-align: left !important;
             background-color: transparent !important;
         }
+
         .input-column {
             display: flex !important;
             flex-direction: column !important;
             gap: 1.25rem !important;
             margin-bottom: 0.5rem !important;
         }
+
         .input-field {
             flex: none !important;
             width: 100% !important;
         }
+
         .button-row {
             display: flex !important;
             gap: 1rem !important;
             justify-content: flex-end !important;
             margin-top: 1.5rem !important;
         }
+
         .gradio-button {
             padding: 0.85rem 1.8rem !important;
             border-radius: 9px !important;
@@ -591,34 +648,41 @@ Answer:"""
             text-align: center !important;
             color: var(--text-primary) !important;
         }
+
         .gr-button-primary {
             background-color: var(--primary-color) !important;
             color: white !important;
             box-shadow: var(--shadow-sm) !important;
         }
+
         .gr-button-primary:hover {
             background-color: var(--primary-hover) !important;
             box-shadow: var(--shadow-md) !important;
             transform: translateY(-2px) !important;
         }
+
         .gr-button-primary:active {
             transform: translateY(1px) !important;
             box-shadow: none !important;
         }
+
         .gr-button-secondary {
             background-color: transparent !important;
             color: var(--text-primary) !important;
             border-color: var(--border-color) !important;
         }
+
         .gr-button-secondary:hover {
             background-color: var(--background-secondary) !important;
             border-color: var(--primary-color) !important;
             transform: translateY(-2px) !important;
         }
+
         .gr-button-secondary:active {
             transform: translateY(1px) !important;
             box-shadow: none !important;
         }
+
         .output-content-wrapper {
             background-color: var(--background-primary) !important;
             border: 2px solid var(--border-color) !important;
@@ -631,6 +695,7 @@ Answer:"""
             justify-content: center;
             align-items: center;
         }
+
         .animated-output-content {
             opacity: 0;
             animation: fadeInAndSlideUp 0.7s ease-out forwards;
@@ -641,10 +706,12 @@ Answer:"""
             text-align: left !important;
             color: var(--text-primary) !important;
         }
+
         @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;
@@ -657,15 +724,18 @@ Answer:"""
             width: 100%;
             justify-content: flex-start;
         }
+
         .response-icon {
             font-size: 1.5rem !important;
             color: var(--primary-color) !important;
         }
+
         .divider {
             border: none !important;
             border-top: 1px dashed var(--border-color) !important;
             margin: 1rem 0 !important;
         }
+
         .error-message {
             background-color: var(--error-bg) !important;
             border: 2px solid var(--error-border) !important;
@@ -682,21 +752,25 @@ Answer:"""
             width: 100%;
             box-sizing: border-box;
         }
+
         .error-message a {
             color: var(--error-text) !important;
             text-decoration: underline !important;
         }
+
         .error-icon {
             font-size: 1.4rem !important;
             line-height: 1 !important;
             margin-top: 0.1rem !important;
         }
+
         .error-details {
             font-size: 0.85rem !important;
             color: var(--error-text) !important;
             margin-top: 0.5rem !important;
             opacity: 0.8;
         }
+
         .placeholder {
             background-color: var(--background-primary) !important;
             border: 2px dashed var(--border-color) !important;
@@ -709,12 +783,14 @@ Answer:"""
             width: 100%;
             box-sizing: border-box;
         }
+
         .examples-section .gr-samples-table {
             border: 2px solid var(--border-color) !important;
             border-radius: 8px !important;
             overflow: hidden !important;
             margin-top: 1rem !important;
         }
+
         .examples-section .gr-samples-table th,
         .examples-section .gr-samples-table td {
             padding: 0.9rem !important;
@@ -723,11 +799,13 @@ Answer:"""
             text-align: left !important;
             color: var(--text-primary) !important;
         }
+
         .examples-section .gr-samples-table th {
             background-color: var(--background-secondary) !important;
             font-weight: 700 !important;
             color: var(--text-primary) !important;
         }
+
         .examples-section .gr-samples-table td {
             background-color: var(--background-primary) !important;
             color: var(--text-primary) !important;
@@ -735,15 +813,18 @@ Answer:"""
             cursor: pointer !important;
             transition: background 0.2s ease, transform 0.1s ease !important;
         }
+
         .examples-section .gr-samples-table tr:hover td {
             background-color: var(--background-secondary) !important;
             transform: translateX(5px);
         }
+
         .gr-examples .gr-label,
         .gr-examples .label-wrap,
         .gr-examples .gr-accordion-header {
             display: none !important;
         }
+
         .app-footer-wrapper {
             background: linear-gradient(145deg, var(--background-primary) 0%, var(--background-secondary) 100%) !important;
             border: 2px solid var(--border-color) !important;
@@ -754,6 +835,7 @@ Answer:"""
             text-align: center !important;
             color: var(--text-primary) !important;
         }
+
         .app-footer p {
             margin: 0 !important;
             max-width: 90% !important;
@@ -764,60 +846,128 @@ Answer:"""
             text-align: center !important;
             white-space: normal !important;
         }
+
         .app-footer strong, .app-footer b {
             font-weight: 700 !important;
             color: var(--primary-color) !important;
         }
+
         .app-footer a {
             color: var(--primary-color) !important;
             text-decoration: underline !important;
             font-weight: 600 !important;
         }
+
         .app-footer a:hover {
             text-decoration: none !important;
         }
+
+        /* Theme toggle button styles */
+        .theme-toggle {
+            position: fixed;
+            top: 1rem;
+            right: 1rem;
+            padding: 0.5rem 1rem;
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 0.9rem;
+            font-weight: 600;
+            transition: background-color 0.2s ease;
+        }
+
+        .theme-toggle:hover {
+            background-color: var(--primary-hover);
+        }
+
         @media (max-width: 768px) {
             .gradio-container {
                 padding: 1rem !important;
             }
+
             .app-header-title {
                 font-size: 2.2rem !important;
             }
+
             .app-header-tagline {
                 font-size: 1rem !important;
             }
+
             .section-title {
                 font-size: 1.4rem !important;
             }
+
             .input-column {
                 flex-direction: column !important;
             }
+
             .button-row {
                 flex-direction: column !important;
             }
+
             .gradio-button {
                 width: 100% !important;
             }
-            .dashboard-card-section {
-            }
+
             .section-title-gradient-bar {
                 padding: 0.1rem 1rem !important;
             }
+
             .dashboard-card-content-area {
                 padding: 0 1rem 1rem 1rem !important;
             }
+
             .output-content-wrapper {
                 min-height: 120px !important;
             }
+
             .placeholder {
                 padding: 1.5rem 1rem !important;
                 font-size: 1rem !important;
             }
+
+            .theme-toggle {
+                top: 0.5rem;
+                right: 0.5rem;
+                padding: 0.4rem 0.8rem;
+                font-size: 0.8rem;
+            }
         }
         """
 
-        # MODIFIED LINE: Added theme_mode="light"
-        with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant", theme_mode="light") as demo:
+        with gr.Blocks(css=custom_css, title="Landlord-Tenant Rights Assistant") as demo:
+            # Theme toggle button
+            gr.HTML(
+                """
+                <button class="theme-toggle" onclick="toggleTheme()">Toggle Theme</button>
+                <script>
+                    function setTheme(theme) {
+                        document.documentElement.setAttribute('data-theme', theme);
+                        localStorage.setItem('theme', theme);
+                    }
+
+                    function toggleTheme() {
+                        const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
+                        const newTheme = currentTheme === 'light' ? 'dark' : 'light';
+                        setTheme(newTheme);
+                    }
+
+                    // Check system preference or saved preference
+                    const savedTheme = localStorage.getItem('theme');
+                    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                    const initialTheme = savedTheme || (prefersDark ? 'dark' : 'light');
+                    setTheme(initialTheme);
+
+                    // Listen for system theme changes
+                    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+                        setTheme(e.matches ? 'dark' : 'light');
+                    });
+                </script>
+                """
+            )
+
             with gr.Group(elem_classes="app-header-wrapper"):
                 gr.Markdown(
                     """
@@ -910,7 +1060,7 @@ Answer:"""
                     <style>
                         .custom-link {{
                             font-weight: bold !important;
-                            color: orange !important;
+                            color: var(--primary-color) !important;
                             text-decoration: underline;
                         }}
                     </style>
@@ -925,7 +1075,7 @@ Answer:"""
                 outputs=output,
                 api_name="submit_query"
             )
-            
+
             clear_button.click(
                 fn=lambda: (
                     "", "", initial_value_radio, "<div class='placeholder'>Inputs cleared. Ready for your next question.</div>"
@@ -935,7 +1085,6 @@ Answer:"""
             )
 
             return demo
-
 # --- Main Execution Block (UNCHANGED from original logic) ---
 if __name__ == "__main__":
     logging.info("Starting Landlord-Tenant Rights Bot application...")