Update app.py

app.py

@@ -1127,9 +1127,90 @@ def add_agentic_ai_info():
     
     Agentic AI represents an evolution from AI as a passive tool to AI as an active collaborator that can work independently while remaining aligned with human goals and values.
     """
+
 def create_chatbot():
     """Create the Gradio interface for the chatbot"""
-    with gr.Blocks() as demo:
+    # Generate a random session ID for the user
+    session_id = str(uuid.uuid4())
+    
+    # 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; 
+        }}
+        #title {{ 
+            font-size: 32px; 
+            font-wedef create_chatbot()ight: bold; 
+            text-align: center; 
+            padding-top: 20px; 
+            color: var(--primary-color);
+            margin-bottom: 0;
+        }}
+        #subtitle {{ 
+            font-size: 18px; 
+            text-align: center; 
+            margin-bottom: 20px; 
+            color: var(--secondary-color); 
+        }}
+        .card {{
+            background-color: white;
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
+            margin-bottom: 20px;
+        }}
+        .tabs {{
+            margin-top: 20px;
+        }}
+        .gr-button-primary {{ 
+            background-color: var(--primary-color) !important; 
+        }}
+        .gr-button-secondary {{ 
+            background-color: var(--secondary-color) !important; 
+        }}
+        .gr-button-success {{ 
+            background-color: var(--success-color) !important; 
+        }}
+        .footer {{
+            text-align: center;
+            margin-top: 30px;
+            padding: 10px;
+            font-size: 14px;
+            color: var(--secondary-color);
+        }}
+        .progress-module {{
+            padding: 10px;
+            margin: 5px 0;
+            border-radius: 5px;
+            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;
+        }}
+    """
+    
+    with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="blue")) as demo:
         gr.HTML("<div id='title'>🎓 AI Teaching Assistant</div>")
         gr.HTML("<div id='subtitle'>Your personalized learning companion for Python, Data Science & AI</div>")