Update app.py

app.py

@@ -55,7 +55,7 @@ You recognize that students may seek direct answers to homework, assignments, or
 - **Suggest study strategies**: Recommend effective learning approaches for the subject matter
 
 ## Response Guidelines
-- **For math problems**: Explain concepts, provide formula derivations, and guide through problem-solving steps without computing final numerical answers
+- **For math problems**: Explain concepts, provide formula derivations, and guide through problem-solving steps without computing final numerical answers. Always use LaTeX formatting for mathematical expressions: inline with $...$ and display with $$...$$ 
 - **For multiple-choice questions**: Discuss the concepts being tested and help students understand how to analyze options rather than identifying the correct choice
 - **For essays or written work**: Discuss research strategies, organizational techniques, and critical thinking approaches rather than providing content or thesis statements
 - **For factual questions**: Provide educational context and encourage students to synthesize information rather than stating direct answers
@@ -76,58 +76,15 @@ You recognize that students may seek direct answers to homework, assignments, or
 - Encourage students to explain their thinking and reasoning
 - Provide honest, accurate feedback even when it may not be what the student wants to hear
 
-## Modes
-**Select the mode that best matches the user's needs.**
-
-**Math Mode**
-LaTeX formatting is enabled for math. You must provide LaTeX formatting for all math, either as inline LaTeX or centered display LaTeX.
-You will address requests to solve, aid in understanding, or explore mathematical context. Use logical ordering for content, providing necessary terms and definitions as well as concept explanations along with math to foster understanding of core concepts. Rather than specifically answering the math problem provided, begin with solving a similar problem that requires the same steps and foundational mathematical knowledge, then prompt the user to work through the problem themselves. If the user insists you solve the problem, engage in a two-way conversation where you provide the steps but request the user solve for the answer one step at a time.
-LaTeX should always be used for math.
-LaTeX Examples:
-- Inline: "The slope is $m = \\frac{{y_2 - y_1}}{{x_2 - x_1}}$ in this case."
-- Display: "The quadratic formula is: $x = \\frac{{-b \\pm \\sqrt{{b^2-4ac}}}}{{2a}}$"
-Always use double backslashes (\\\\) for LaTeX commands like \\\\frac, \\\\sqrt, \\\\int, etc.
-
-**Research Mode**
-Your main goal is to help the user learn to research topics, a critical skill. Function as a partner rather than a search engine.
-Over the course of the conversation, guide the user through a seven-step research process:
-1) **Identifying a topic**
-2) **Finding background information**
-3) **Developing a research design**
-4) **Collecting data**
-5) **Analyzing data**
-6) **Drawing conclusions**
-7) **Disseminating findings**
-You may provide formatted citations if the user asks for them and provides the needed information. If not all information is provided but citations are requested, follow up with guidance on how to obtain the information to generate a citation. By default, you will not provide citations.
-Example citations:
-APA Style
-In-text: (Smith, 2023, p. 45)
-Reference: Smith, J. A. (2023). Book title. Publisher.
-MLA Style
-In-text: (Smith 45)
-Works Cited: Smith, John A. Book Title. Publisher, 2023.
-Chicago Style
-Footnote: ¹John A. Smith, Book Title (Publisher, 2023), 45.
-Bibliography: Smith, John A. Book Title. Publisher, 2023.
-Harvard Style
-In-text: (Smith 2023, p. 45)
-Reference: Smith, J.A. (2023) Book title. Publisher.
-IEEE Style
-In-text: [1]
-Reference: [1] J. A. Smith, Book Title. Publisher, 2023.
-In this mode you may not use LaTeX formatting.
-
-**Study Mode**
-Engage the user in a mix of two teaching styles: student-centered and inquiry-based learning.
-Student Centered: Adjust to reflect the student's reading level and level of understanding of a topic as the conversation progresses. Do not assume the user is an expert but instead assume they may have familiarity but desire to learn more about the topic they are studying. Provide definitions for terms you use in a conversational way, gradually shifting to using just the terms without definitions as the user becomes more familiar with them.
-Inquiry-based learning: Engage the user through questions that compel them to consider what they want to know and then explore the topics through guided conversation.
-Over the course of the conversation, prompt the user with a question to gauge their growing knowledge or progress on the topic. 
-For example: 
-After two to three turns of conversation discussing a topic, pick a specific term or concept from the conversation history to craft either a multiple-choice or written answer question for the user with no other comments along with it. If the student is correct, congratulate them on their progress and inquire about their next learning goal on the topic. If the user fails the question, return with a short response that explains the correct answer in a kind tone.
-In this mode you may not use LaTeX formatting.
-
-**General/Other Mode**
-You are EduBot, a comprehensive AI learning assistant. Help users leverage educational tools and resources to enrich their education. Offer yourself as a resource for the student, prompting them to request help with **math topics**, **research strategy**, or **studying a topic**.
+## Subject-Specific Guidelines
+
+**Mathematics**: Use LaTeX formatting for all mathematical expressions. Provide step-by-step conceptual guidance, work through similar examples, and help students understand underlying principles rather than just getting answers.
+
+**Research & Writing**: Guide students through the research process, teach evaluation of sources, help with organization and structure, but encourage original thinking and writing.
+
+**Science**: Focus on understanding concepts, scientific method, and critical thinking. Help students learn to analyze data and draw conclusions.
+
+**Study Skills**: Provide evidence-based learning strategies, time management techniques, and effective study methods tailored to different subjects and learning styles.
 
 Your goal is to be an educational partner who empowers students to succeed through understanding, not a service that completes their work for them."""
 
@@ -208,6 +165,7 @@ def respond_with_enhanced_streaming(message, history):
         yield "Sorry, I encountered an error while generating the response."
 
     finally:
+        # FIXED: Removed the 'mode' parameter - using centralized system prompt
         metrics_tracker.log_interaction(
             query=message,
             response=response,
@@ -216,8 +174,6 @@ def respond_with_enhanced_streaming(message, history):
             error_message=error_message,
         )
 
-        
-
 # ===============================================================================
 # UI CONFIGURATION SECTION - ALL UI RELATED CODE CENTRALIZED HERE
 # ===============================================================================
@@ -227,6 +183,20 @@ custom_css = """
 /* Import Oswald font - Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
 
+/* CRITICAL: Override Gradio's default theme with maximum specificity */
+.gradio-container, .gradio-container *, 
+[class*="gradio-container"], [class*="gradio-container"] *,
+.app, .app *, body, body * {
+    background-color: rgb(240, 236, 230) !important;
+    font-family: "Oswald", sans-serif !important;
+    color: #120f0e !important;
+}
+
+/* Force override of any gray backgrounds */
+[class*="bg-"], [style*="background"], div, section, main, article {
+    background-color: rgb(240, 236, 230) !important;
+}
+
 /* HIDE the HTML components that create scrollbars */
 #component-1, #component-2, #component-3 {
     display: none !important;
@@ -260,18 +230,12 @@ custom_css = """
     display: none !important;
 }
 
-/* Apply Oswald globally - Use universal selector instead of version-specific */
-*, *::before, *::after {
-    font-family: "Oswald", sans-serif !important;
-    color: #120f0e !important;
-}
-
 .title-header {
     background-color: rgb(240, 236, 230) !important;
-    padding: 10px 20px;
+    padding: 10px 20px !important;
     margin: 0 !important;
-    border-bottom: 1pt solid #59524f;
-    text-align: left;
+    border-bottom: 1pt solid #59524f !important;
+    text-align: left !important;
     flex-shrink: 0 !important;
     height: 60px !important;
     display: flex !important;
@@ -280,18 +244,19 @@ custom_css = """
 }
 
 .title-header h1 {
-    font-size: 1.5rem;
+    font-size: 1.5rem !important;
     font-weight: 600 !important;
     color: #120f0e !important;
-    margin: 0;
-    padding: 0;
+    margin: 0 !important;
+    padding: 0 !important;
+    background-color: transparent !important;
 }
 
 /* Input controls styling - acts as footer */
-.input-controls {
+.input-controls, .input-controls * {
     padding: 15px 20px !important;
     background-color: rgb(240, 236, 230) !important;
-    border-top: 1pt solid #59524f;
+    border-top: 1pt solid #59524f !important;
     flex-shrink: 0 !important;
     width: 100% !important;
 }
@@ -334,9 +299,11 @@ custom_css = """
     margin-top: 0 !important;
 }
 
-/* Chat styling - Use more universal selectors */
+/* Chatbot container - maximum override power */
+[data-testid="chatbot"], 
 .gradio-chatbot,
-[class*="chatbot"] {
+[class*="chatbot"],
+.chatbot-container {
     background-color: #d9d1ce !important;
     border: 1pt solid #59524f !important;
     border-radius: 6px !important;
@@ -347,48 +314,50 @@ custom_css = """
     margin: 15px 20px !important;
 }
 
-/* Message styling - More universal approach */
-.message.bot .markdown,
-[class*="message"][class*="bot"] .markdown,
-.message.assistant .markdown,
-[class*="message"][class*="assistant"] .markdown {
+/* Message styling with maximum specificity */
+.message.bot, .message.bot *,
+.message.assistant, .message.assistant *,
+[class*="message"][class*="bot"], [class*="message"][class*="bot"] *,
+[class*="message"][class*="assistant"], [class*="message"][class*="assistant"] * {
     background-color: #f09c7d !important;
     color: #120f0e !important;
     border-radius: 8px !important;
     padding: 12px 16px !important;
     border: 1pt solid #59524f !important;
-    max-width: 70%;
-    margin-left: 0;
-    margin-right: auto;
-    word-wrap: break-word;
+    max-width: 70% !important;
+    margin-left: 0 !important;
+    margin-right: auto !important;
+    word-wrap: break-word !important;
     font-weight: 400 !important;
     margin-bottom: 10px !important;
 }
 
-.message.user .markdown,
-[class*="message"][class*="user"] .markdown {
+.message.user, .message.user *,
+[class*="message"][class*="user"], [class*="message"][class*="user"] * {
     background-color: #a69189 !important;
     color: #120f0e !important;
     border-radius: 8px !important;
     padding: 12px 16px !important;
     border: 1pt solid #59524f !important;
-    max-width: 70%;
-    margin-left: auto;
-    margin-right: 0;
-    word-wrap: break-word;
+    max-width: 70% !important;
+    margin-left: auto !important;
+    margin-right: 0 !important;
+    word-wrap: break-word !important;
     font-weight: 400 !important;
     margin-bottom: 10px !important;
 }
 
-/* Input controls styling */
-.input-textbox textarea {
+/* Textbox styling with nuclear-level override */
+textarea, textarea *,
+input[type="text"], input[type="text"] *,
+.textbox, .textbox *,
+[class*="textbox"], [class*="textbox"] * {
     background-color: #f0ece6 !important;
     border: 1pt solid #59524f !important;
     border-radius: 6px !important;
     color: #120f0e !important;
     font-family: "Oswald", sans-serif !important;
     padding: 10px !important;
-    resize: none !important;
 }
 
 .input-textbox textarea:focus {
@@ -401,33 +370,38 @@ custom_css = """
     min-width: 80px !important;
 }
 
-.send-button, .clear-button {
-   border: 1pt solid #59524f !important;
-   border-radius: 6px !important;
-   font-weight: 500 !important;
-   padding: 8px 16px !important;
-   margin-bottom: 5px !important;
-   width: 100% !important;
+/* Buttons with nuclear override */
+button, button *,
+.btn, .btn *,
+[class*="button"], [class*="button"] * {
+    font-family: "Oswald", sans-serif !important;
+    color: #120f0e !important;
+    border: 1pt solid #59524f !important;
+    border-radius: 6px !important;
+    font-weight: 500 !important;
+    padding: 8px 16px !important;
+    margin-bottom: 5px !important;
+    width: 100% !important;
 }
 
-.send-button {
-   background-color: #f09c7d !important;
-   color: #120f0e !important;
+.send-button, .send-button * {
+    background-color: #f09c7d !important;
+    color: #120f0e !important;
 }
 
 .send-button:hover {
-   background-color: #e8895a !important;
-   border-color: #4a3f3c !important;
+    background-color: #e8895a !important;
+    border-color: #4a3f3c !important;
 }
 
-.clear-button {
-   background-color: #a69189 !important;
-   color: #120f0e !important;
+.clear-button, .clear-button * {
+    background-color: #a69189 !important;
+    color: #120f0e !important;
 }
 
 .clear-button:hover {
-   background-color: #8f7d73 !important;
-   border-color: #4a3f3c !important;
+    background-color: #8f7d73 !important;
+    border-color: #4a3f3c !important;
 }
 
 /* Add fallback body styling */
@@ -442,6 +416,35 @@ body {
     background-color: rgb(240, 236, 230) !important;
 }
 
+/* Force override CSS custom properties */
+:root {
+    --background-fill-primary: rgb(240, 236, 230) !important;
+    --background-fill-secondary: #d9d1ce !important;
+    --color-accent: #f09c7d !important;
+    --color-accent-soft: #a69189 !important;
+    --body-text-color: #120f0e !important;
+    --block-background-fill: rgb(240, 236, 230) !important;
+    --panel-background-fill: rgb(240, 236, 230) !important;
+}
+
+/* Override any default Gradio grays */
+.bg-white,
+.bg-gray-50,
+.bg-gray-100,
+.bg-gray-200,
+[class*="bg-white"],
+[class*="bg-gray"] {
+    background-color: rgb(240, 236, 230) !important;
+}
+
+/* Text color overrides */
+.text-gray-700,
+.text-gray-800,
+.text-gray-900,
+[class*="text-gray"] {
+    color: #120f0e !important;
+}
+
 /* Ensure Gradio footer is visible and properly positioned */
 footer.svelte-czcr5b {
     display: flex !important;
@@ -477,106 +480,14 @@ footer.svelte-czcr5b .divider {
     padding-bottom: 50px !important;
 }
 
-/* Additional universal selectors for better coverage */
-.svelte-container,
-[class*="svelte"],
-.block,
-[class*="block"] {
-    background-color: rgb(240, 236, 230) !important;
-}
-
-/* Target textboxes more broadly */
-textarea,
-input[type="text"],
-.textbox,
-[class*="textbox"] {
-    background-color: #f0ece6 !important;
-    border: 1pt solid #59524f !important;
-    border-radius: 6px !important;
-    color: #120f0e !important;
-    font-family: "Oswald", sans-serif !important;
-}
-
-/* Target buttons more broadly */
-button,
-.btn,
-[class*="button"] {
-    font-family: "Oswald", sans-serif !important;
-    color: #120f0e !important;
-}
-
-/* Ensure chatbot container gets the right background */
-[data-testid="chatbot"],
-.chatbot-container,
-[class*="chatbot"] {
-    background-color: #d9d1ce !important;
-    border: 1pt solid #59524f !important;
-}
-
-/* Message bubbles - even more comprehensive */
-.message,
-[class*="message"],
-.chat-message,
-[class*="chat"] [class*="message"] {
-    font-family: "Oswald", sans-serif !important;
-}
-
-/* Bot/Assistant messages */
-.message.bot,
-.message.assistant,
-[class*="message"][class*="bot"],
-[class*="message"][class*="assistant"],
-.bot-message,
-.assistant-message {
-    background-color: #f09c7d !important;
-    color: #120f0e !important;
-}
-
-/* User messages */
-.message.user,
-[class*="message"][class*="user"],
-.user-message {
-    background-color: #a69189 !important;
-    color: #120f0e !important;
-}
-
-/* Force override any Gradio theme variables */
-:root {
-    --background-fill-primary: rgb(240, 236, 230) !important;
-    --background-fill-secondary: #d9d1ce !important;
-    --color-accent: #f09c7d !important;
-    --color-accent-soft: #a69189 !important;
-    --body-text-color: #120f0e !important;
-    --block-background-fill: rgb(240, 236, 230) !important;
-    --panel-background-fill: rgb(240, 236, 230) !important;
-}
-
-/* Override any default Gradio grays */
-.bg-white,
-.bg-gray-50,
-.bg-gray-100,
-.bg-gray-200,
-[class*="bg-white"],
-[class*="bg-gray"] {
-    background-color: rgb(240, 236, 230) !important;
-}
-
-/* Text color overrides */
-.text-gray-700,
-.text-gray-800,
-.text-gray-900,
-[class*="text-gray"] {
-    color: #120f0e !important;
-}
-
 /* Responsive design */
 @media (max-width: 768px) {
-    .message.bot .markdown,
-    .message.user .markdown,
-    [class*="message"][class*="bot"] .markdown,
-    [class*="message"][class*="user"] .markdown,
-    [class*="message"][class*="assistant"] .markdown {
-        max-width: 85%;
+    .message.bot, .message.bot *,
+    .message.user, .message.user *,
+    [class*="message"][class*="bot"], [class*="message"][class*="bot"] *,
+    [class*="message"][class*="user"], [class*="message"][class*="user"] *,
+    [class*="message"][class*="assistant"], [class*="message"][class*="assistant"] * {
+        max-width: 85% !important;
     }
     
     .input-controls {
@@ -584,16 +495,9 @@ button,
     }
     
     .title-header h1 {
-        font-size: 1.2rem;
+        font-size: 1.2rem !important;
     }
 }
-
-/* Debug helper - uncomment to see what elements are being styled */
-/*
-* {
-    border: 1px solid red !important;
-}
-*/
 """
 
 # --- UI: HTML Head Content ---
@@ -671,11 +575,23 @@ def clear_chat():
 def create_interface():
     """Creates and configures the complete Gradio interface."""
     
+    # Force light theme and disable default styling
+    theme = gr.themes.Base().set(
+        background_fill_primary="rgb(240, 236, 230)",
+        background_fill_secondary="#d9d1ce",
+        color_accent="#f09c7d",
+        color_accent_soft="#a69189",
+        body_text_color="#120f0e",
+        block_background_fill="rgb(240, 236, 230)",
+        panel_background_fill="rgb(240, 236, 230)"
+    )
+    
     with gr.Blocks(
         title="EduBot", 
         fill_width=True, 
         fill_height=True,
-        theme=gr.themes.Base()
+        theme=theme,
+        css=custom_css
     ) as demo:
         # Add head content and MathJax
         gr.HTML(html_head_content)
@@ -694,12 +610,12 @@ def create_interface():
                     show_share_button=False,
                     avatar_images=None,
                     elem_id="main-chatbot",
-                    container=False,  # Remove wrapper
+                    container=False,
                     scale=1,
-                    height="70vh"  # Explicit height instead of min_height
+                    height="70vh"
                 )
             
-            # Input Section - fixed height
+            # Input Section
             with gr.Row(elem_classes=["input-controls"]):
                 msg = gr.Textbox(
                     placeholder="Ask me about math, research, study strategies, or any educational topic...",
@@ -728,5 +644,4 @@ def create_interface():
 if __name__ == "__main__":
     logger.info("Starting EduBot...")
     demo = create_interface()
-    demo.launch(debug=True, share=True)
-    
+    demo.launch(debug=True, share=True)