Update app.py

app.py

@@ -1131,134 +1131,83 @@ def add_agentic_ai_info():
 def create_chatbot():
     """Create the Gradio interface for the chatbot"""
     # Generate a random session ID for the user
-    import uuid
     session_id = str(uuid.uuid4())
     
-    # Define theme colors and styling with support for both light and dark themes
-    custom_css = """
-        :root {
-            /* Light theme variables (default) */
-            --background-color: #f8f9fa;
-            --card-background: #ffffff;
-            --text-color: #343a40;
-            --secondary-text-color: #6c757d;
-            --primary-color: #4a6fa5;
-            --secondary-color: #6c757d;
-            --success-color: #28a745;
-            --border-color: #dee2e6;
-            --shadow-color: rgba(0,0,0,0.08);
-            --info-background: #e7f5fe;
-            --progress-background: #e9ecef;
-            --completed-background: #d4edda;
-        }
-        
-        /* Dark theme preferences */
-        @media (prefers-color-scheme: dark) {
-            :root {
-                --background-color: #121212;
-                --card-background: #1e1e1e;
-                --text-color: #e0e0e0;
-                --secondary-text-color: #adb5bd;
-                --primary-color: #5d87c6;  /* Lighter shade for dark mode */
-                --secondary-color: #8b959e;
-                --success-color: #3cb054;
-                --border-color: #495057;
-                --shadow-color: rgba(0,0,0,0.2);
-                --info-background: #2b3f54;
-                --progress-background: #343a40;
-                --completed-background: #255c33;
-            }
-        }
-        
-        .gradio-container { 
-            background-color: var(--background-color); 
+    # Define theme colors and styling
+    primary_color = "#4a6fa5"
+    secondary_color = "#6c757d"
+    success_color = "#28a745"
+    light_color = "#f8f9fa"
+    dark_color = "#343a40"
+    
+    custom_css = f"""
+        :root {{
+            --primary-color: {primary_color};
+            --secondary-color: {secondary_color};
+            --success-color: {success_color};
+            --light-color: {light_color};
+            --dark-color: {dark_color};
+        }}
+        .gradio-container {{ 
+            background-color: var(--light-color); 
             font-family: 'Inter', 'Segoe UI', sans-serif; 
-            color: var(--text-color);
-        }
-        
-        #title { 
+        }}
+        #title {{ 
             font-size: 32px; 
             font-weight: bold; 
             text-align: center; 
             padding-top: 20px; 
             color: var(--primary-color);
             margin-bottom: 0;
-        }
-        
-        #subtitle { 
+        }}
+        #subtitle {{ 
             font-size: 18px; 
             text-align: center; 
             margin-bottom: 20px; 
-            color: var(--secondary-text-color); 
-        }
-        
-        .card {
-            background-color: var(--card-background);
+            color: var(--secondary-color); 
+        }}
+        .card {{
+            background-color: white;
             padding: 20px;
             border-radius: 12px;
-            box-shadow: 0 4px 10px var(--shadow-color);
+            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
             margin-bottom: 20px;
-            color: var(--text-color);
-        }
-        
-        .tabs {
+        }}
+        .tabs {{
             margin-top: 20px;
-        }
-        
-        .gr-button-primary { 
+        }}
+        .gr-button-primary {{ 
             background-color: var(--primary-color) !important; 
-        }
-        
-        .gr-button-secondary { 
+        }}
+        .gr-button-secondary {{ 
             background-color: var(--secondary-color) !important; 
-        }
-        
-        .gr-button-success { 
+        }}
+        .gr-button-success {{ 
             background-color: var(--success-color) !important; 
-        }
-        
-        .footer {
+        }}
+        .footer {{
             text-align: center;
             margin-top: 30px;
             padding: 10px;
             font-size: 14px;
-            color: var(--secondary-text-color);
-        }
-        
-        .progress-module {
+            color: var(--secondary-color);
+        }}
+        .progress-module {{
             padding: 10px;
             margin: 5px 0;
             border-radius: 5px;
-            background-color: var(--progress-background);
-            color: var(--text-color);
-        }
-        
-        .progress-module.completed {
-            background-color: var(--completed-background);
-        }
-        
-        .info-box {
-            background-color: var(--info-background);
+            background-color: #e9ecef;
+        }}
+        .progress-module.completed {{
+            background-color: #d4edda;
+        }}
+        .info-box {{
+            background-color: #e7f5fe;
             border-left: 4px solid var(--primary-color);
             padding: 15px;
             margin: 15px 0;
             border-radius: 4px;
-            color: var(--text-color);
-        }
-        
-        /* Ensure contrast for Markdown content */
-        .markdown p, .markdown h1, .markdown h2, .markdown h3, .markdown h4 {
-            color: var(--text-color) !important;
-        }
-        
-        .markdown a {
-            color: var(--primary-color) !important;
-        }
-        
-        .markdown code {
-            background-color: var(--progress-background) !important;
-            color: var(--text-color) !important;
-        }
+        }}
     """
     with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="blue")) as demo:
         gr.HTML("<div id='title'>🎓 AI Teaching Assistant</div>")