UI Overhaul

Selected a new font and refined the color palette. All components were moved to one Gradio block and organized using Gradio rows and columns.

app.py

@@ -25,22 +25,17 @@ client = InferenceClient(
 
 metrics_tracker = EduBotMetrics(save_file="edu_metrics.json")
 
+# --- LLM Templates ---
 math_template = ChatPromptTemplate.from_messages([
     ("system", """{system_message}
 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 with minimal text content. Use a logical ordering fro content, providing necessary terms and definitions as well as concept explanations along with math to foster an understanding of core concepts. Rather than specifically answering the math problem provided, you will 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, you should engage in a two-way conversation where you provide the steps but request the user to solve for the answer one step at a time. Prioritize guidance and learning over directly feeding the user answers.
-
 LaTeC 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.
-
-
 Be concise and direct with an overall friendly and engaging tone. Use minimal formatting, with markdown bolding reserved for **key terms** only."""),
     ("human", "{question}")
 ])
@@ -48,9 +43,7 @@ Be concise and direct with an overall friendly and engaging tone. Use minimal fo
 research_template = ChatPromptTemplate.from_messages([
     ("system", """{system_message}
 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**
@@ -59,35 +52,23 @@ Over the course of the conversation, guide the user through a seven-step researc
 5) **Analyzing data**
 6) **Drawing conclusions**
 7) **Disseminating findings**
-
 You may also 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.
-
 Exampel 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.
-
 Be concise and direct with an overall friendly and engaging tone. Use minimal formatting, with markdown bolding reserved for **key terms** only. In this mode you may not use LaTeX formatting."""),
     ("human", "{question}")
 ])
@@ -95,18 +76,12 @@ Be concise and direct with an overall friendly and engaging tone. Use minimal fo
 study_template = ChatPromptTemplate.from_messages([
     ("system", """{system_message}
 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.
-
 Be concise and direct with an overall friendly and engaging tone. Use minimal formatting, with markdown bolding reserved for **key terms** only. In this mode you may not use LaTeX formatting."""),
     ("human", "{question}")
 ])
@@ -114,9 +89,7 @@ Be concise and direct with an overall friendly and engaging tone. Use minimal fo
 general_template = ChatPromptTemplate.from_messages([
     ("system", """{system_message}
 General 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**.
-
 Be concise and direct with an overall friendly and engaging tone. Use minimal formatting, with markdown bolding reserved for **key terms** only."""),
     ("human", "{question}")
 ])
@@ -233,7 +206,6 @@ def smart_truncate(text, max_length=3000):
         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, detecting the subject and handling errors."""
 
@@ -336,68 +308,151 @@ def respond_with_enhanced_streaming(message, history):
             error_message=error_message
         )
 
-# --- Fixed Gradio UI and CSS ---
+# ===============================================================================
+# 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');
+
+/* Oswald font classes */
+.oswald-light { 
+    font-family: "Oswald", sans-serif; 
+    font-optical-sizing: auto; 
+    font-weight: 300; 
+    font-style: normal; 
+}
+.oswald-regular { 
+    font-family: "Oswald", sans-serif; 
+    font-optical-sizing: auto; 
+    font-weight: 400; 
+    font-style: normal; 
+}
+.oswald-medium { 
+    font-family: "Oswald", sans-serif; 
+    font-optical-sizing: auto; 
+    font-weight: 500; 
+    font-style: normal; 
+}
+.oswald-semibold { 
+    font-family: "Oswald", sans-serif; 
+    font-optical-sizing: auto; 
+    font-weight: 600; 
+    font-style: normal; 
+}
+.oswald-bold { 
+    font-family: "Oswald", sans-serif; 
+    font-optical-sizing: auto; 
+    font-weight: 700; 
+    font-style: normal; 
+}
+
 /* Main container styling */
 .gradio-container {
     background-color: rgb(240, 236, 230) !important;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-family: "Oswald", sans-serif !important;
+    font-optical-sizing: auto !important;
+    font-weight: 400 !important;
+    font-style: normal !important;
+    color: #120f0e !important;
+}
+
+/* Apply Oswald to all text elements */
+*, *::before, *::after {
+    font-family: "Oswald", sans-serif !important;
+    font-optical-sizing: auto !important;
+    color: #120f0e !important;
 }
 
 /* Title styling */
 .title-header {
     background-color: rgb(240, 236, 230);
     padding: 20px;
-    border-bottom: 2px solid rgba(28, 18, 5, 0.1);
+    border-bottom: 2pt solid #59524f;
     text-align: left;
 }
-
 .title-header h1 {
     font-size: 1.8rem;
-    font-weight: bold;
-    color: black;
+    font-weight: 600 !important;
+    color: #120f0e !important;
     margin: 0;
     max-height: 80;
+    font-family: "Oswald", sans-serif !important;
 }
 
 /* Chat container */
 .chat-container {
     min-height: 900px;
-    background-color: rgb(240, 236, 230);
+    background-color: #d9d1ce !important;
+    border: 2pt solid #59524f !important;
+    border-radius: 10px;
+    padding: 20px;
 }
 
 /* Chatbot styling */
 .gradio-chatbot {
-    background-color: transparent !important;
-    border: none !important;
+    background-color: #d9d1ce !important;
+    border: 2pt solid #59524f !important;
+    border-radius: 10px !important;
     padding: 20px !important;
+    font-family: "Oswald", sans-serif !important;
 }
 
 /* Message styling */
 .gradio-chatbot .message.bot .markdown {
     background-color: rgb(240, 185, 103) !important;
-    color: black !important;
+    color: #120f0e !important;
     border-radius: 18px !important;
     padding: 12px 16px !important;
     box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
-    border: none !important;
+    border: 2pt solid #59524f !important;
     max-width: 70%;
     margin-left: 0;
     margin-right: auto;
     word-wrap: break-word;
+    font-family: "Oswald", sans-serif !important;
+    font-weight: 400 !important;
 }
 
 .gradio-chatbot .message.user .markdown {
     background-color: rgb(242, 238, 233) !important;
-    color: black !important;
+    color: #120f0e !important;
     border-radius: 18px !important;
     padding: 12px 16px !important;
     box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
-    border: none !important;
+    border: 2pt solid #59524f !important;
     max-width: 70%;
     margin-left: auto;
     margin-right: 0;
     word-wrap: break-word;
+    font-family: "Oswald", sans-serif !important;
+    font-weight: 400 !important;
+}
+
+/* Apply Oswald to all markdown content */
+.gradio-chatbot .markdown p,
+.gradio-chatbot .markdown h1,
+.gradio-chatbot .markdown h2,
+.gradio-chatbot .markdown h3,
+.gradio-chatbot .markdown h4,
+.gradio-chatbot .markdown h5,
+.gradio-chatbot .markdown h6,
+.gradio-chatbot .markdown ul,
+.gradio-chatbot .markdown ol,
+.gradio-chatbot .markdown li,
+.gradio-chatbot .markdown strong,
+.gradio-chatbot .markdown em,
+.gradio-chatbot .markdown code {
+    font-family: "Oswald", sans-serif !important;
+    color: #120f0e !important;
+}
+
+/* Mode indicators with Oswald */
+.gradio-chatbot .markdown strong {
+    font-weight: 600 !important;
+    color: #120f0e !important;
 }
 
 /* Hide avatars */
@@ -408,135 +463,186 @@ custom_css = """
 /* Input section styling */
 .input-section {
     background-color: rgb(240, 236, 230);
-    border-top: 2px solid rgba(28, 18, 5, 0.1);
+    border-top: 2pt solid #59524f;
     padding: 20px;
 }
 
-/* Button styling */
-.clear-button, .send-button {
-    background-color: rgb(28, 18, 5) !important;
-    color: white !important;
-    border: none !important;
+/* Button styling with new colors */
+.clear-button {
+    background-color: #ada3a0 !important;
+    color: #120f0e !important;
+    border: 2pt solid #59524f !important;
     border-radius: 10px !important;
     padding: 8px 16px !important;
     cursor: pointer !important;
     margin: 5px !important;
+    font-family: "Oswald", sans-serif !important;
+    font-weight: 500 !important;
+    font-optical-sizing: auto !important;
 }
 
-.clear-button:hover, .send-button:hover {
-    background-color: rgba(28, 18, 5, 0.8) !important;
+.clear-button:hover {
+    background-color: rgba(173, 163, 160, 0.8) !important;
 }
 
 .send-button {
-    background-color: rgb(51, 102, 204) !important;
+    background-color: #f09c7d !important;
+    color: #120f0e !important;
+    border: 2pt solid #59524f !important;
+    border-radius: 10px !important;
+    padding: 8px 16px !important;
+    cursor: pointer !important;
+    margin: 5px !important;
+    font-family: "Oswald", sans-serif !important;
+    font-weight: 500 !important;
+    font-optical-sizing: auto !important;
 }
 
 .send-button:hover {
-    background-color: rgba(51, 102, 204, 0.8) !important;
+    background-color: rgba(240, 156, 125, 0.8) !important;
 }
 
-/* Textbox styling - keep it simple */
+/* Textbox styling with new colors */
 .input-textbox {
-    background-color: rgb(242, 238, 233) !important;
-    border: 2px solid rgb(28, 18, 5) !important;
+    background-color: #d9d1ce !important;
+    border: 2pt solid #59524f !important;
     border-radius: 20px !important;
 }
 
 .input-textbox textarea {
-    background-color: transparent !important;
+    background-color: #d9d1ce !important;
     border: none !important;
-    color: black !important;
+    color: #120f0e !important;
     padding: 15px !important;
     font-size: 16px !important;
+    font-family: "Oswald", sans-serif !important;
+    font-weight: 400 !important;
+    font-optical-sizing: auto !important;
+}
+
+.input-textbox textarea::placeholder {
+    font-family: "Oswald", sans-serif !important;
+    font-weight: 300 !important;
+    color: rgba(18, 15, 14, 0.6) !important;
+}
+
+/* Ensure all input elements use Oswald and new colors */
+input, textarea, button, select {
+    font-family: "Oswald", sans-serif !important;
+    font-optical-sizing: auto !important;
+    color: #120f0e !important;
 }
 """
 
-# Create the interface with proper structure
-with gr.Blocks(css=custom_css, title="EduBot") as demo:
-     # Add MathJax for LaTeX rendering
-    gr.HTML('<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>')
-    gr.HTML('<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>')
-    gr.HTML('''
-    <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>
-    ''')
-    
-    # Title Section
-    gr.HTML('<div class="title-header"><h1>🎓 EduBot</h1></div>')
+# --- 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>
+'''
+
+# --- 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, ""
     
-    # Chat Section
-    with gr.Row(elem_classes=["chat-container"]):
-        chatbot = gr.Chatbot(
-            type="messages",
-            show_copy_button=True,
-            show_share_button=False,
-            avatar_images=None,
-            height=880
-        )
+    # 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."""
     
-    # Input Section
-    with gr.Column(elem_classes=["input-section"]):
+    with gr.Blocks(css=custom_css, title="EduBot", fill_width=True, fill_height=True) 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)
+        
+        # Row 1: Title Section
         with gr.Row():
-            clear = gr.Button("Clear", elem_classes=["clear-button"])
-            send = gr.Button("Send", elem_classes=["send-button"])
-        msg = gr.Textbox(
-            placeholder="Ask me about math, research, study strategies, or any educational topic...",
-            show_label=False,
-            lines=3,
-            max_lines=8,
-            elem_classes=["input-textbox"]
-        )
-
-    def respond_and_update(message, history):
-        """Main function to handle user submission."""
-        if not message.strip():
-            return history, ""
+            gr.HTML('<div class="title-header"><h1>🎓 EduBot</h1></div>')
         
-        # 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 [], ""
-
-    # Set up the "send on Enter" event and send button click
-    msg.submit(respond_and_update, [msg, chatbot], [chatbot, msg])
-    send.click(respond_and_update, [msg, chatbot], [chatbot, msg])
-    
-    # Set up the clear button
-    clear.click(clear_chat, outputs=[chatbot, msg])
+        # Row 2: Chat Section
+        with gr.Row():
+            chatbot = gr.Chatbot(
+                type="messages",
+                show_copy_button=True,
+                show_share_button=False,
+                avatar_images=None,
+                height=880,
+                elem_classes=["chat-container"]
+            )
+        
+        # Row 3: Input Section
+        with gr.Row(elem_classes=["input-section"]):
+            with gr.Column(scale=4):
+                msg = gr.Textbox(
+                    placeholder="Ask me about math, research, study strategies, or any educational topic...",
+                    show_label=False,
+                    lines=3,
+                    max_lines=8,
+                    elem_classes=["input-textbox"]
+                )
+            with gr.Column(scale=1):
+                send = gr.Button("Send", elem_classes=["send-button"])
+                clear = gr.Button("Clear", elem_classes=["clear-button"])
+
+        # 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)