Update app.py

app.py

@@ -628,31 +628,42 @@ def greet():
 def create_interface():
     with gr.Blocks(
         title="🌾 AgriBot - AI Agricultural Assistant",
-        theme=gr.themes.Base(
+        theme=gr.themes.Default(
             primary_hue="green",
             secondary_hue="emerald",
-            neutral_hue="gray",
-            font=[gr.themes.GoogleFont("Inter"), "Arial", "sans-serif"]
+            neutral_hue="slate",
         ),
         css="""
+        /* Dark Theme Variables */
+        :root {
+            --dark-bg: #0f172a;
+            --dark-card: #1e293b;
+            --dark-border: #334155;
+            --dark-text: #f1f5f9;
+            --dark-accent: #10b981;
+            --dark-hover: #2dd4bf;
+            --dark-shadow: rgba(0, 0, 0, 0.5);
+        }
+        
         /* Main Container Styling */
         .gradio-container {
             max-width: 1400px !important;
             margin: 0 auto !important;
             padding: 20px !important;
-            background: linear-gradient(135deg, #f0f8f0 0%, #e8f5e8 100%) !important;
+            background: var(--dark-bg) !important;
+            color: var(--dark-text) !important;
         }
         
         /* Header Styling */
         .main-header {
             text-align: center;
             padding: 30px 20px;
-            background: linear-gradient(135deg, #2d5016 0%, #4a7c3c 50%, #5d8b4a 100%);
+            background: linear-gradient(135deg, #0d9488 0%, #059669 50%, #047857 100%);
             border-radius: 15px;
             margin-bottom: 25px;
             color: white !important;
-            box-shadow: 0 8px 32px rgba(45, 80, 22, 0.3);
-            border: 1px solid rgba(255, 255, 255, 0.2);
+            box-shadow: 0 8px 32px rgba(13, 148, 136, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.1);
         }
         
         .main-header h1 {
@@ -664,7 +675,7 @@ def create_interface():
         }
         
         .main-header p {
-            color: #e8f5e8 !important;
+            color: #d1fae5 !important;
             font-size: 1.2rem !important;
             margin: 0 !important;
             font-weight: 400 !important;
@@ -679,29 +690,29 @@ def create_interface():
         }
         
         .feature-card {
-            background: white !important;
+            background: var(--dark-card) !important;
             padding: 25px !important;
             border-radius: 12px !important;
-            border-left: 5px solid #4CAF50 !important;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
+            border-left: 5px solid var(--dark-accent) !important;
+            box-shadow: 0 4px 15px var(--dark-shadow) !important;
             transition: transform 0.3s ease, box-shadow 0.3s ease !important;
-            color: #2d5016 !important;
+            color: var(--dark-text) !important;
         }
         
         .feature-card:hover {
             transform: translateY(-5px) !important;
-            box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
+            box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2) !important;
         }
         
         .feature-card h3 {
-            color: #2d5016 !important;
+            color: var(--dark-accent) !important;
             font-size: 1.3rem !important;
             font-weight: 600 !important;
             margin-bottom: 10px !important;
         }
         
         .feature-card p {
-            color: #4a7c3c !important;
+            color: #cbd5e1 !important;
             font-size: 1rem !important;
             line-height: 1.5 !important;
             margin: 0 !important;
@@ -709,18 +720,18 @@ def create_interface():
         
         /* Chat Container */
         .chat-container {
-            background: white !important;
+            background: var(--dark-card) !important;
             border-radius: 15px !important;
             padding: 25px !important;
-            box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
+            box-shadow: 0 8px 32px var(--dark-shadow) !important;
             margin-bottom: 20px !important;
         }
         
         /* Chatbot Styling */
         .chatbot-container {
-            border: 2px solid #e8f5e8 !important;
+            border: 2px solid var(--dark-border) !important;
             border-radius: 12px !important;
-            background: #fafffe !important;
+            background: var(--dark-card) !important;
         }
         
         /* Override Gradio's default message styling */
@@ -729,86 +740,66 @@ def create_interface():
         }
         
         .chatbot .message.user {
-            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
-            color: #0d47a1 !important;
-            border: 1px solid #90caf9 !important;
+            background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%) !important;
+            color: white !important;
+            border: 1px solid #3b82f6 !important;
             margin-left: 15% !important;
             padding: 15px 20px !important;
             border-radius: 15px 15px 5px 15px !important;
-            box-shadow: 0 2px 8px rgba(13, 71, 161, 0.2) !important;
+            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
             font-weight: 500 !important;
         }
         
         .chatbot .message.bot {
-            background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%) !important;
-            color: #1b5e20 !important;
-            border: 1px solid #a5d6a7 !important;
+            background: linear-gradient(135deg, #065f46 0%, #064e3b 100%) !important;
+            color: white !important;
+            border: 1px solid #10b981 !important;
             margin-right: 15% !important;
             padding: 15px 20px !important;
             border-radius: 15px 15px 15px 5px !important;
-            box-shadow: 0 2px 8px rgba(27, 94, 32, 0.2) !important;
+            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
             font-weight: 500 !important;
         }
         
         /* Force text color in chat messages */
         .chatbot .message.user * {
-            color: #0d47a1 !important;
+            color: white !important;
         }
         
         .chatbot .message.bot * {
-            color: #1b5e20 !important;
+            color: white !important;
         }
         
         /* Ensure chat text is always visible */
         .gradio-chatbot .chatbot .message {
-            color: inherit !important;
+            color: white !important;
         }
         
         .gradio-chatbot .chatbot .message p {
-            color: inherit !important;
+            color: white !important;
             margin: 5px 0 !important;
             line-height: 1.5 !important;
         }
         
-        /* User message styling */
-        .gradio-chatbot .user {
-            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%) !important;
-            color: #0d47a1 !important;
-            border: 1px solid #90caf9 !important;
-            border-radius: 15px 15px 5px 15px !important;
-            margin-left: 15% !important;
-            margin-right: 5% !important;
-        }
-        
-        /* Bot message styling */
-        .gradio-chatbot .bot {
-            background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%) !important;
-            color: #1b5e20 !important;
-            border: 1px solid #a5d6a7 !important;
-            border-radius: 15px 15px 15px 5px !important;
-            margin-right: 15% !important;
-            margin-left: 5% !important;
-        }
-        
         /* Input Styling */
         .input-container {
-            background: white !important;
+            background: var(--dark-card) !important;
             border-radius: 12px !important;
-            border: 2px solid #e8f5e8 !important;
+            border: 2px solid var(--dark-border) !important;
             padding: 5px !important;
             margin-top: 15px !important;
         }
         
         .input-container:focus-within {
-            border-color: #4CAF50 !important;
-            box-shadow: 0 0 10px rgba(76, 175, 80, 0.2) !important;
+            border-color: var(--dark-accent) !important;
+            box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
         }
         
         /* Input text styling */
         .input-container textarea,
         .input-container input {
-            color: #2d5016 !important;
-            background: white !important;
+            color: white !important;
+            background: var(--dark-card) !important;
             border: none !important;
             font-size: 1rem !important;
             font-weight: 500 !important;
@@ -816,33 +807,33 @@ def create_interface():
         
         .input-container textarea::placeholder,
         .input-container input::placeholder {
-            color: #6b7280 !important;
+            color: #94a3b8 !important;
             opacity: 0.8 !important;
         }
         
         /* Override any Gradio input styling */
         .gradio-textbox {
-            background: white !important;
+            background: var(--dark-card) !important;
         }
         
         .gradio-textbox textarea {
-            color: #2d5016 !important;
-            background: white !important;
-            border: 2px solid #e8f5e8 !important;
+            color: white !important;
+            background: var(--dark-card) !important;
+            border: 2px solid var(--dark-border) !important;
             border-radius: 8px !important;
             padding: 12px !important;
             font-size: 1rem !important;
         }
         
         .gradio-textbox textarea:focus {
-            border-color: #4CAF50 !important;
-            box-shadow: 0 0 10px rgba(76, 175, 80, 0.2) !important;
+            border-color: var(--dark-accent) !important;
+            box-shadow: 0 0 10px rgba(16, 185, 129, 0.3) !important;
             outline: none !important;
         }
         
         /* Button Styling */
         .btn-primary {
-            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
+            background: linear-gradient(135deg, var(--dark-accent) 0%, #059669 100%) !important;
             color: white !important;
             border: none !important;
             border-radius: 8px !important;
@@ -850,17 +841,17 @@ def create_interface():
             font-weight: 600 !important;
             font-size: 1rem !important;
             transition: all 0.3s ease !important;
-            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3) !important;
+            box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
         }
         
         .btn-primary:hover {
-            background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%) !important;
+            background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
             transform: translateY(-2px) !important;
-            box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4) !important;
+            box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
         }
         
         .btn-secondary {
-            background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
+            background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
             color: white !important;
             border: none !important;
             border-radius: 8px !important;
@@ -870,26 +861,26 @@ def create_interface():
         }
         
         .btn-secondary:hover {
-            background: linear-gradient(135deg, #5a6268 0%, #495057 100%) !important;
+            background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
             transform: translateY(-2px) !important;
         }
         
         /* Sidebar Styling */
         .sidebar {
-            background: white !important;
+            background: var(--dark-card) !important;
             border-radius: 15px !important;
             padding: 25px !important;
-            box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important;
+            box-shadow: 0 8px 32px var(--dark-shadow) !important;
             height: fit-content !important;
         }
         
         .sidebar h3 {
-            color: #2d5016 !important;
+            color: var(--dark-accent) !important;
             font-size: 1.4rem !important;
             font-weight: 600 !important;
             margin-bottom: 15px !important;
             padding-bottom: 10px !important;
-            border-bottom: 2px solid #e8f5e8 !important;
+            border-bottom: 2px solid var(--dark-border) !important;
         }
         
         .sidebar ul {
@@ -899,36 +890,36 @@ def create_interface():
         }
         
         .sidebar li {
-            color: #4a7c3c !important;
+            color: #cbd5e1 !important;
             padding: 8px 0 !important;
-            border-bottom: 1px solid #f0f8f0 !important;
+            border-bottom: 1px solid var(--dark-border) !important;
             font-size: 0.95rem !important;
             line-height: 1.4 !important;
         }
         
         .sidebar strong {
-            color: #2d5016 !important;
+            color: var(--dark-accent) !important;
             font-weight: 600 !important;
         }
         
         /* Examples Section */
         .examples-section {
-            background: #f8fffe !important;
+            background: #1a2b3c !important;
             padding: 20px !important;
             border-radius: 10px !important;
             margin-top: 20px !important;
-            border: 1px solid #e8f5e8 !important;
+            border: 1px solid var(--dark-border) !important;
         }
         
         /* Footer Styling */
         .footer {
             text-align: center;
             padding: 25px;
-            background: linear-gradient(135deg, #2d5016 0%, #4a7c3c 100%);
+            background: linear-gradient(135deg, #0d9488 0%, #059669 100%);
             border-radius: 15px;
             margin-top: 30px;
             color: white !important;
-            box-shadow: 0 8px 32px rgba(45, 80, 22, 0.3);
+            box-shadow: 0 8px 32px rgba(13, 148, 136, 0.3);
         }
         
         .footer p {
@@ -938,10 +929,31 @@ def create_interface():
         }
         
         .footer strong {
-            color: #e8f5e8 !important;
+            color: #d1fae5 !important;
             font-size: 1.2rem !important;
         }
         
+        /* Labels and Text */
+        .gr-textbox label, .gr-chatbot label {
+            color: var(--dark-text) !important;
+            font-weight: 600 !important;
+        }
+        
+        /* Loading Animation */
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid var(--dark-border);
+            border-radius: 50%;
+            border-top-color: var(--dark-accent);
+            animation: spin 1s ease-in-out infinite;
+        }
+        
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        
         /* Responsive Design */
         @media (max-width: 768px) {
             .gradio-container {
@@ -968,32 +980,12 @@ def create_interface():
             .feature-card {
                 padding: 20px !important;
             }
-        }
-        
-        /* Text Visibility Fixes */
-        .gr-textbox textarea {
-            color: #2d5016 !important;
-            background: white !important;
-        }
-        
-        .gr-textbox label {
-            color: #2d5016 !important;
-            font-weight: 600 !important;
-        }
-        
-        /* Loading Animation */
-        .loading {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            border: 3px solid #e8f5e8;
-            border-radius: 50%;
-            border-top-color: #4CAF50;
-            animation: spin 1s ease-in-out infinite;
-        }
-        
-        @keyframes spin {
-            to { transform: rotate(360deg); }
+            
+            .chatbot .message.user,
+            .chatbot .message.bot {
+                margin-left: 5% !important;
+                margin-right: 5% !important;
+            }
         }
         """
     ) as iface:
@@ -1087,9 +1079,9 @@ def create_interface():
                         </ul>
                     </div>
                     
-                    <div style="margin-top: 20px; padding: 15px; background: #f0f8f0; border-radius: 8px; text-align: center;">
-                        <p style="margin: 0; color: #2d5016; font-weight: 600;">🤖 AI Status</p>
-                        <p style="margin: 5px 0 0 0; color: #4a7c3c; font-size: 0.9rem;">Ready to help!</p>
+                    <div style="margin-top: 20px; padding: 15px; background: #1a2b3c; border-radius: 8px; text-align: center;">
+                        <p style="margin: 0; color: var(--dark-accent); font-weight: 600;">🤖 AI Status</p>
+                        <p style="margin: 5px 0 0 0; color: #94a3b8; font-size: 0.9rem;">Ready to help!</p>
                     </div>
                 </div>
                 """)
@@ -1097,7 +1089,7 @@ def create_interface():
         # Quick action buttons
         gr.HTML("""
         <div style="margin: 20px 0; text-align: center;">
-            <h3 style="color: #2d5016; margin-bottom: 15px;">🚀 Quick Start Topics</h3>
+            <h3 style="color: var(--dark-accent); margin-bottom: 15px;">🚀 Quick Start Topics</h3>
         </div>
         """)