Update app.py

app.py

@@ -1130,163 +1130,149 @@ def add_agentic_ai_info():
 
 def create_chatbot():
     """Create the Gradio interface for the chatbot"""
-    # 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);
-        color: #212529;
-        font-family: 'Inter', 'Segoe UI', sans-serif;
-    }}
-
-    /* Dark mode support */
-    @media (prefers-color-scheme: dark) {{
+        :root {{
+            --primary-color: {primary_color};
+            --secondary-color: {secondary_color};
+            --success-color: {success_color};
+            --light-bg: {light_color};
+            --dark-bg: {dark_color};
+            --text-light: #212529;
+            --text-dark: #f1f1f1;
+        }}
+
         .gradio-container {{
-            background-color: #1e1e1e;
-            color: #f1f1f1;
+            background-color: var(--light-bg);
+            color: var(--text-light);
+            font-family: 'Inter', 'Segoe UI', sans-serif;
+        }}
+
+        .gr-markdown-output, .gr-textbox textarea {{
+            color: var(--text-light);
+            background-color: white;
+        }}
+
+        @media (prefers-color-scheme: dark) {{
+            .gradio-container {{
+                background-color: var(--dark-bg);
+                color: var(--text-dark);
+            }}
+            .gr-markdown-output, .gr-textbox textarea {{
+                color: var(--text-dark);
+                background-color: #1e1e1e;
+            }}
+            .card {{
+                background-color: #2c2c2c;
+            }}
         }}
+
+        #title {{
+            font-size: 32px;
+            font-weight: 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: #2c2c2c;
-            color: #f1f1f1;
+            background-color: white;
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.08);
+            margin-bottom: 20px;
         }}
-        .info-box {{
-            background-color: #1a1f24;
-            border-left-color: #5daeff;
+
+        .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 {{
-            background-color: #2d2d2d;
+            padding: 10px;
+            margin: 5px 0;
+            border-radius: 5px;
+            background-color: #e9ecef;
         }}
+
         .progress-module.completed {{
-            background-color: #224422;
+            background-color: #d4edda;
         }}
-        .footer {{
-            color: #aaaaaa;
+
+        .info-box {{
+            background-color: #e7f5fe;
+            border-left: 4px solid var(--primary-color);
+            padding: 15px;
+            margin: 15px 0;
+            border-radius: 4px;
         }}
-    }}
-
-    #title {{
-        font-size: 32px;
-        font-weight: 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;
-        color: white !important;
-    }}
-
-    .gr-button-secondary {{
-        background-color: var(--secondary-color) !important;
-        color: white !important;
-    }}
-
-    .gr-button-success {{
-        background-color: var(--success-color) !important;
-        color: white !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>")
-        
-        # Tabs for different sections
-        with gr.Tabs(elem_classes=["tabs"]) as tabs:
-            # Profile Tab
+
+        with gr.Tabs(elem_classes=["tabs"]):
             with gr.Tab("Profile & Goals"):
                 with gr.Column(elem_classes=["card"]):
                     gr.HTML("<h3>Complete Your Learning Profile</h3>")
-                    
+
                     with gr.Row():
                         with gr.Column(scale=1):
-                            age_input = gr.Textbox(
-                                label="Age", 
-                                placeholder="e.g. 20",
-                                lines=1
-                            )
+                            age_input = gr.Textbox(label="Age", placeholder="e.g. 20", lines=1)
                         with gr.Column(scale=2):
                             knowledge_level_input = gr.Dropdown(
                                 choices=["Beginner", "Intermediate", "Advanced", "Expert"],
                                 label="Knowledge Level",
                                 value="Beginner"
                             )
-                    
+
                     goals_input = gr.Textbox(
-                        label="Learning Goals", 
-                        placeholder="e.g. I want to become a data scientist and work with machine learning models",
+                        label="Learning Goals",
+                        placeholder="e.g. I want to become a data scientist...",
                         lines=2
                     )
-                    
+
                     interests_input = gr.Textbox(
-                        label="Specific Interests", 
-                        placeholder="e.g. Python, data visualization, neural networks",
+                        label="Specific Interests",
+                        placeholder="e.g. Python, data visualization...",
                         lines=2
                     )
-                    
+
                     with gr.Row():
                         with gr.Column(scale=1):
                             study_time_input = gr.Dropdown(
@@ -1296,15 +1282,17 @@ def create_chatbot():
                             )
                         with gr.Column(scale=2):
                             learning_style_input = gr.Dropdown(
-                                choices=["Visual", "Reading/Writing", "Hands-on Projects", "Video Tutorials", "Interactive Exercises", "Combination"],
+                                choices=[
+                                    "Visual", "Reading/Writing", "Hands-on Projects",
+                                    "Video Tutorials", "Interactive Exercises", "Combination"
+                                ],
                                 label="Preferred Learning Style",
                                 value="Combination"
                             )
-                    
+
                     profile_submit_btn = gr.Button("Save Profile & Generate Recommendations", variant="primary")
                     profile_output = gr.Markdown(label="Personalized Recommendations")
-            
-            # Chat Tab
+
             with gr.Tab("Learning Assistant"):
                 with gr.Row():
                     with gr.Column(elem_classes=["card"]):
@@ -1313,110 +1301,74 @@ def create_chatbot():
                             placeholder="Ask anything about Python, Data Science, AI...",
                             lines=3
                         )
-                        
                         with gr.Row():
                             chat_submit_btn = gr.Button("Send Message", variant="primary")
                             chat_clear_btn = gr.Button("Clear Chat", variant="secondary")
-                        
                         chat_output = gr.Markdown(label="Assistant Response")
-            
-            # Resources Tab
+
             with gr.Tab("Resources & Recommendations"):
                 with gr.Column(elem_classes=["card"]):
                     gr.HTML("<h3>Your Learning Resources</h3>")
                     refresh_recommendations_btn = gr.Button("Refresh Recommendations", variant="primary")
                     recommendations_output = gr.Markdown(label="Personalized Recommendations")
-            
-            # Practice Tab
+
             with gr.Tab("Practice & Assessment"):
                 with gr.Column(elem_classes=["card"]):
                     gr.HTML("<h3>Generate a Quiz</h3>")
-                    
                     with gr.Row():
-                        quiz_topic_input = gr.Textbox(
-                            label="Quiz Topic", 
-                            placeholder="e.g. Python Lists",
-                            lines=1
-                        )
+                        quiz_topic_input = gr.Textbox(label="Quiz Topic", placeholder="e.g. Python Lists")
                         quiz_difficulty_input = gr.Dropdown(
                             choices=["Beginner", "Intermediate", "Advanced"],
                             label="Difficulty Level",
                             value="Beginner"
                         )
-                    
                     generate_quiz_btn = gr.Button("Generate Quiz", variant="primary")
                     quiz_output = gr.Markdown(label="Quiz")
-            
-            # Study Plan Tab
+
             with gr.Tab("Study Plan"):
                 with gr.Column(elem_classes=["card"]):
                     gr.HTML("<h3>Generate a Personalized Study Plan</h3>")
-                    
                     with gr.Row():
-                        plan_topic_input = gr.Textbox(
-                            label="Study Topic", 
-                            placeholder="e.g. Data Science",
-                            lines=1
-                        )
+                        plan_topic_input = gr.Textbox(label="Study Topic", placeholder="e.g. Data Science")
                         plan_time_input = gr.Dropdown(
                             choices=["1-3", "4-6", "7-10", "10+"],
                             label="Hours Available Weekly",
                             value="4-6"
                         )
-                    
                     generate_plan_btn = gr.Button("Generate Study Plan", variant="primary")
                     plan_output = gr.Markdown(label="Personalized Study Plan")
-        
-        gr.HTML("""<div class="footer">
-            AI Teaching Assistant | Version 2.0 | © 2025 | Powered by Groq AI
-        </div>""")
-        
+
+        gr.HTML("""<div class="footer">AI Teaching Assistant | Version 2.0 | © 2025 | Powered by Groq AI</div>""")
+
         # Event handlers
-        profile_submit_btn.click(
-            user_onboarding,
-            inputs=[
-                gr.State(session_id), 
-                age_input, 
-                goals_input, 
-                knowledge_level_input,
-                interests_input,
-                study_time_input,
-                learning_style_input
-            ],
-            outputs=profile_output
-        )
-        
-        chat_submit_btn.click(
-            chatbot_interface,
-            inputs=[gr.State(session_id), chat_input],
-            outputs=chat_output
-        )
-        
-        chat_clear_btn.click(
-            lambda: "",
-            inputs=[],
-            outputs=[chat_output, chat_input]
-        )
-        
-        refresh_recommendations_btn.click(
-            generate_recommendations,
-            inputs=[gr.State(session_id)],
-            outputs=recommendations_output
-        )
-        
-        generate_quiz_btn.click(
-            handle_quiz_request,
-            inputs=[gr.State(session_id), quiz_topic_input, quiz_difficulty_input],
-            outputs=quiz_output
-        )
-        
-        generate_plan_btn.click(
-            handle_study_plan_request,
-            inputs=[gr.State(session_id), plan_topic_input, plan_time_input],
-            outputs=plan_output
-        )
-    
+        profile_submit_btn.click(user_onboarding, 
+                                 inputs=[
+                                     gr.State(session_id), age_input, goals_input, 
+                                     knowledge_level_input, interests_input,
+                                     study_time_input, learning_style_input
+                                 ], 
+                                 outputs=profile_output)
+
+        chat_submit_btn.click(chatbot_interface,
+                              inputs=[gr.State(session_id), chat_input],
+                              outputs=chat_output)
+
+        chat_clear_btn.click(lambda: "", inputs=[], outputs=[chat_output, chat_input])
+
+        refresh_recommendations_btn.click(generate_recommendations,
+                                          inputs=[gr.State(session_id)],
+                                          outputs=recommendations_output)
+
+        generate_quiz_btn.click(handle_quiz_request,
+                                inputs=[gr.State(session_id), quiz_topic_input, quiz_difficulty_input],
+                                outputs=quiz_output)
+
+        generate_plan_btn.click(handle_study_plan_request,
+                                inputs=[gr.State(session_id), plan_topic_input, plan_time_input],
+                                outputs=plan_output)
+
     return demo
+
 if __name__ == "__main__":
     app = create_chatbot()
-    app.launch()
+    app.launch()