Update app.py

app.py

@@ -1,3 +1,229 @@
+import gradio as gr
+from langchain.prompts import ChatPromptTemplate
+from langchain.schema import HumanMessage, SystemMessage, AIMessage
+from huggingface_hub import InferenceClient
+from metrics import EduBotMetrics
+import os
+import time
+import logging
+import re
+
+# --- Environment and Logging Setup ---
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# Support both token names for flexibility
+hf_token = os.environ.get("HF_TOKEN") or os.environ.get("HUGGINGFACEHUB_API_TOKEN")
+if not hf_token:
+    logger.warning("Neither HF_TOKEN nor HUGGINGFACEHUB_API_TOKEN is set, the application may not work.")
+
+# --- LLM Configuration ---
+client = InferenceClient(
+    provider="together",
+    api_key=hf_token,
+)
+
+metrics_tracker = EduBotMetrics(save_file="edu_metrics.json")
+
+# --- LLM Templates ---
+# Enhanced base system message
+SYSTEM_MESSAGE = """You are EduBot, an expert multi-concept tutor designed to facilitate genuine learning and understanding. Your primary mission is to guide students through the learning process rather than providing direct answers to academic work.
+
+## Core Educational Principles
+- Provide comprehensive, educational responses that help students truly understand concepts
+- Use minimal formatting, with markdown bolding reserved for **key terms** only
+- Prioritize teaching methodology over answer delivery
+- Foster critical thinking and independent problem-solving skills
+
+## Tone and Communication Style
+- Maintain an engaging, friendly tone appropriate for high school students
+- Write at a reading level that is accessible yet intellectually stimulating
+- Be supportive and encouraging without being condescending
+- Never use crude language or content inappropriate for an educational setting
+- Avoid preachy, judgmental, or accusatory language
+- Skip flattery and respond directly to questions
+- Do not use emojis or actions in asterisks unless specifically requested
+- Present critiques and corrections kindly as educational opportunities
+
+## Academic Integrity Approach
+You recognize that students may seek direct answers to homework, assignments, or test questions. Rather than providing complete solutions or making accusations about intent, you should:
+
+- **Guide through processes**: Break down problems into conceptual components and teach underlying principles
+- **Ask clarifying questions**: Understand what the student already knows and where their confusion lies
+- **Provide similar examples**: Work through analogous problems that demonstrate the same concepts without directly solving their specific assignment
+- **Encourage original thinking**: Help students develop their own reasoning and analytical skills
+- **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 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
+
+## Handling Limitations
+**Web Search Requests**: You do not have access to the internet and cannot perform web searches. When asked to search the web, respond honestly about this limitation and offer alternative assistance:
+- "I'm unable to perform web searches, but I can help you plan a research strategy for this topic"
+- "I can't browse the internet, but I'd be happy to teach you effective Google search syntax to find what you need"
+- "While I can't search online, I can help you evaluate whether sources you find are reliable and appropriate for your research"
+
+**Other Limitations**: When encountering other technical limitations, acknowledge them directly and offer constructive alternatives that support learning.
+
+## Communication Guidelines
+- Maintain a supportive, non-judgmental tone in all interactions
+- Assume positive intent while redirecting toward genuine learning
+- Use Socratic questioning to promote discovery and critical thinking
+- Celebrate understanding and progress in the learning process
+- 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**.
+
+Your goal is to be an educational partner who empowers students to succeed through understanding, not a service that completes their work for them."""
+
+# --- Core Logic Functions ---
+
+def smart_truncate(text, max_length=3000):
+    """Truncates text intelligently to the last full sentence or word."""
+    if len(text) <= max_length:
+        return text
+    
+    # Try to split by sentence
+    sentences = re.split(r'(?<=[.!?])\s+', text[:max_length])
+    if len(sentences) > 1:
+        return ' '.join(sentences[:-1]) + "... [Response truncated - ask for continuation]"
+    # Otherwise, split by word
+    else:
+        words = text[:max_length].split()
+        return ' '.join(words[:-1]) + "... [Response truncated - ask for continuation]"
+
+def respond_with_enhanced_streaming(message, history):
+    """Streams the bot's response, handling errors with metrics tracking."""
+
+    # Start metrics timing
+    timing_context = metrics_tracker.start_timing()
+    error_occurred = False
+    error_message = None
+    response = ""
+    
+    try:
+        # Build conversation history (last 5 exchanges)
+        api_messages = [{"role": "system", "content": SYSTEM_MESSAGE}]
+        if history:
+            for exchange in history[-5:]:
+                if exchange.get("role") == "user":
+                    api_messages.append({"role": "user", "content": exchange["content"]})
+                elif exchange.get("role") == "assistant":
+                    api_messages.append({"role": "assistant", "content": exchange["content"]})
+        
+        # Add current user message
+        api_messages.append({"role": "user", "content": message})
+
+        # Mark provider API start
+        metrics_tracker.mark_provider_start(timing_context)
+        
+        completion = client.chat.completions.create(
+            model="Qwen/Qwen2.5-7B-Instruct",
+            messages=api_messages,
+            max_tokens=4096,
+            temperature=0.7,
+            top_p=0.9,
+        )
+
+        # Mark provider API end
+        metrics_tracker.mark_provider_end(timing_context)
+        
+        response = smart_truncate(completion.choices[0].message.content, max_length=3000)
+        
+        # Stream fake-chunks word by word
+        words = response.split()
+        partial_response = ""
+        
+        for i, word in enumerate(words):
+            partial_response += word + " "
+            if i % 4 == 0:
+                metrics_tracker.record_chunk(timing_context)
+                yield partial_response
+                time.sleep(0.03)
+        
+        logger.info(f"Response completed. Length: {len(response)} characters")
+        
+        metrics_tracker.record_chunk(timing_context)
+        yield response
+
+    except Exception as e:
+        error_occurred = True
+        error_message = str(e)
+        logger.exception("Error in response generation")
+        yield "Sorry, I encountered an error while generating the response."
+
+    finally:
+        metrics_tracker.log_interaction(
+            query=message,
+            response=response,
+            timing_context=timing_context,
+            error_occurred=error_occurred,
+            error_message=error_message,
+        )
+
+        
+
+# ===============================================================================
+# UI CONFIGURATION SECTION - ALL UI RELATED CODE CENTRALIZED HERE
+# ===============================================================================
+
+# --- UI: Custom CSS Styles ---
+custom_css = """
 /* Import Oswald font - Google Fonts */
 @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
 
@@ -251,6 +477,98 @@ 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,
@@ -264,4 +582,151 @@ footer.svelte-czcr5b .divider {
     .input-controls {
         padding: 10px !important;
     }
-}
+    
+    .title-header h1 {
+        font-size: 1.2rem;
+    }
+}
+
+/* Debug helper - uncomment to see what elements are being styled */
+/*
+* {
+    border: 1px solid red !important;
+}
+*/
+"""
+
+# --- UI: HTML Head Content ---
+html_head_content = '''
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
+<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script>
+// Force light theme in Gradio
+window.addEventListener('DOMContentLoaded', function () {
+    const gradioURL = window.location.href;
+    const url = new URL(gradioURL);
+    const currentTheme = url.searchParams.get('__theme');
+    
+    if (currentTheme !== 'light') {
+        url.searchParams.set('__theme', 'light');
+        window.location.replace(url.toString());
+    }
+});
+</script>
+'''
+
+# --- UI: MathJax Configuration ---
+mathjax_config = '''
+<script>
+window.MathJax = {
+  tex: {
+    inlineMath: [['$', '$'], ['\\\\(', '\\\\)']],
+    displayMath: [['$$', '$$'], ['\\\\[', '\\\\]']],
+    packages: {'[+]': ['ams']}
+  },
+  svg: {fontCache: 'global'},
+  startup: {
+    ready: () => {
+      MathJax.startup.defaultReady();
+      // Re-render math when new content is added
+      const observer = new MutationObserver(function(mutations) {
+        MathJax.typesetPromise();
+      });
+      observer.observe(document.body, {childList: true, subtree: true});
+    }
+  }
+};
+</script>
+'''
+
+# --- UI: Event Handlers ---
+def respond_and_update(message, history):
+    """Main function to handle user submission."""
+    if not message.strip():
+        return history, ""
+    
+    # Add user message to history
+    history.append({"role": "user", "content": message})
+    # Yield history to show the user message immediately, and clear the textbox
+    yield history, "" 
+
+    # Stream the bot's response
+    full_response = ""
+    for response_chunk in respond_with_enhanced_streaming(message, history):
+        full_response = response_chunk
+        # Update the last message (bot's response)
+        if len(history) > 0 and history[-1]["role"] == "user":
+            history.append({"role": "assistant", "content": full_response})
+        else:
+            history[-1] = {"role": "assistant", "content": full_response}
+        yield history, ""
+
+def clear_chat():
+    """Clear the chat history."""
+    return [], ""
+
+# --- UI: Interface Creation ---
+def create_interface():
+    """Creates and configures the complete Gradio interface."""
+    
+    with gr.Blocks(
+        title="EduBot", 
+        fill_width=True, 
+        fill_height=True,
+        theme=gr.themes.Base()
+    ) as demo:
+        # Add head content and MathJax
+        gr.HTML(html_head_content)
+        gr.HTML('<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>')
+        gr.HTML(mathjax_config)
+        
+        with gr.Column(elem_classes=["main-container"]):
+            # Title Section
+            gr.HTML('<div class="title-header"><h1>🎓 EduBot</h1></div>')
+            
+            # Chat Section
+            with gr.Row():
+                chatbot = gr.Chatbot(
+                    type="messages",
+                    show_copy_button=True,
+                    show_share_button=False,
+                    avatar_images=None,
+                    elem_id="main-chatbot",
+                    container=False,  # Remove wrapper
+                    scale=1,
+                    height="70vh"  # Explicit height instead of min_height
+                )
+            
+            # Input Section - fixed height
+            with gr.Row(elem_classes=["input-controls"]):
+                msg = gr.Textbox(
+                    placeholder="Ask me about math, research, study strategies, or any educational topic...",
+                    show_label=False,
+                    lines=4,
+                    max_lines=6,
+                    elem_classes=["input-textbox"],
+                    container=False,
+                    scale=4
+                )
+                with gr.Column(elem_classes=["button-column"], scale=1):
+                    send = gr.Button("Send", elem_classes=["send-button"], size="sm")
+                    clear = gr.Button("Clear", elem_classes=["clear-button"], size="sm")
+
+        # Set up event handlers
+        msg.submit(respond_and_update, [msg, chatbot], [chatbot, msg])
+        send.click(respond_and_update, [msg, chatbot], [chatbot, msg])
+        clear.click(clear_chat, outputs=[chatbot, msg])
+        
+        return demo
+
+# ===============================================================================
+# END UI CONFIGURATION SECTION
+# ===============================================================================
+
+if __name__ == "__main__":
+    logger.info("Starting EduBot...")
+    demo = create_interface()
+    demo.launch(debug=True, share=True)
+