Update app.py

app.py

@@ -7,32 +7,39 @@ import time
 import logging
 import re
 
+# --- Environment and Logging Setup ---
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
 
+# Make sure to set your Hugging Face API token in your environment variables
+# For example: export HUGGINGFACEHUB_API_TOKEN='your_token_here'
+if "HUGGINGFACEHUB_API_TOKEN" not in os.environ:
+    logger.warning("HUGGINGFACEHUB_API_TOKEN not set, the application may not work.")
+
+# --- LLM and Template Configuration ---
 llm = HuggingFaceEndpoint(
-  repo_id="HuggingFaceH4/zephyr-7b-beta",
-  temperature=0.7,
-  top_p=0.9,
-  repetition_penalty=1.1,
-  model_kwargs={"max_length": 1024},
-  huggingfacehub_api_token=os.getenv("HUGGINGFACEHUB_API_TOKEN")
+    repo_id="HuggingFaceH4/zephyr-7b-beta",
+    temperature=0.7,
+    top_p=0.9,
+    repetition_penalty=1.1,
+    model_kwargs={"max_length": 1024},
+    huggingfacehub_api_token=os.getenv("HUGGINGFACEHUB_API_TOKEN")
 )
 
 math_template = ChatPromptTemplate.from_messages([
-  ("system", """{system_message}
+    ("system", """{system_message}
 
 You are an expert math tutor. For every math problem:
 1. Break it down into key concepts
-2. Breifly explain concepts
+2. Briefly explain concepts
 3. Outline the process for solving a similar problem
 
 Be comprehensive and educational. Structure your response clearly."""),
-  ("human", "{question}")
+    ("human", "{question}")
 ])
 
 research_template = ChatPromptTemplate.from_messages([
-  ("system", """{system_message}
+    ("system", """{system_message}
 
 You are a research skills mentor. Help students with:
 - Determining the validity of sources
@@ -43,11 +50,11 @@ You are a research skills mentor. Help students with:
 - Database navigation and search strategies
 
 Provide detailed, actionable advice with specific examples."""),
-  ("human", "{question}")
+    ("human", "{question}")
 ])
 
 study_template = ChatPromptTemplate.from_messages([
-  ("system", """{system_message}
+    ("system", """{system_message}
 
 You are a study skills coach. Help students with:
 - Effective study methods for different learning styles
@@ -59,260 +66,201 @@ You are a study skills coach. Help students with:
 - Offer short quiz sessions where you pose one to two questions at a time, then provide feedback on the students answers.
 
 Provide comprehensive, personalized advice with practical examples."""),
-  ("human", "{question}")
+    ("human", "{question}")
 ])
 
 general_template = ChatPromptTemplate.from_messages([
-  ("system", """{system_message}
+    ("system", """{system_message}
 
 You are EduBot, a comprehensive AI learning assistant. You help students with:
-📐 Mathematics (Concise explainations rooted in understanding the concepts and process rather than answering the math problem directly)
+📐 Mathematics (Concise explanations rooted in understanding the concepts and process rather than answering the math problem directly)
 🔍 Research skills (source guidance, research advice, evaluation, and citation)
 📚 Study strategies (effective learning techniques and exam preparation)
 🛠️ Educational tools (guidance on learning resources and technologies)
 
 Always be encouraging, patient, thorough, and comprehensive."""),
-  ("human", "{question}")
+    ("human", "{question}")
 ])
 
+# --- Core Logic Functions ---
 def detect_subject(message):
-  message_lower = message.lower()
-  
-  math_keywords = ['math', 'solve', 'calculate', 'equation', 'formula', 'algebra', 'geometry', 'calculus', 'derivative', 'integral', 'theorem', 'proof']
-  research_keywords = ['research', 'source', 'citation', 'bibliography', 'reference', 'academic', 'paper', 'essay', 'thesis', 'database', 'journal']
-  study_keywords = ['study', 'memorize', 'exam', 'test', 'quiz', 'review', 'learn', 'remember', 'focus', 'motivation', 'notes']
-  
-  if any(keyword in message_lower for keyword in math_keywords):
-      return math_template, "🧮 Math Mode"
-  elif any(keyword in message_lower for keyword in research_keywords):
-      return research_template, "🔍 Research Mode"
-  elif any(keyword in message_lower for keyword in study_keywords):
-      return study_template, "📚 Study Mode"
-  else:
-      return general_template, "🎓 General Mode"
+    """Detects the subject of the user's message based on keywords."""
+    message_lower = message.lower()
+    
+    math_keywords = ['math', 'solve', 'calculate', 'equation', 'formula', 'algebra', 'geometry', 'calculus', 'derivative', 'integral', 'theorem', 'proof']
+    research_keywords = ['research', 'source', 'citation', 'bibliography', 'reference', 'academic', 'paper', 'essay', 'thesis', 'database', 'journal']
+    study_keywords = ['study', 'memorize', 'exam', 'test', 'quiz', 'review', 'learn', 'remember', 'focus', 'motivation', 'notes']
+    
+    if any(keyword in message_lower for keyword in math_keywords):
+        return math_template, "🧮 Math Mode"
+    elif any(keyword in message_lower for keyword in research_keywords):
+        return research_template, "🔍 Research Mode"
+    elif any(keyword in message_lower for keyword in study_keywords):
+        return study_template, "📚 Study Mode"
+    else:
+        return general_template, "🎓 General Mode"
 
 def smart_truncate(text, max_length=3000):
-  if len(text) <= max_length:
-      return text
-  
-  sentences = re.split(r'(?<=[.!?]) +', text[:max_length])
-  if len(sentences) > 1:
-      return ' '.join(sentences[:-1]) + "... [Response truncated - ask for continuation]"
-  else:
-      words = text[:max_length].split()
-      return ' '.join(words[:-1]) + "... [Response truncated - ask for continuation]"
+    """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):
-  try:
-      template, mode = detect_subject(message)
-      chain = template | llm
-      
-      yield f"*{mode}*\n\nGenerating response..."
-      
-      logger.info(f"Processing {mode} query: {message[:50]}...")
-      
-      response = chain.invoke({
-          "question": message,
-          "system_message": "You are EduBot, an expert AI learning assistant. Provide comprehensive, educational responses that help students truly understand concepts."
-      })
-      
-      response = smart_truncate(response, max_length=3000)
-      
-      words = response.split()
-      partial_response = f"*{mode}*\n\n"
-      
-      for i, word in enumerate(words):
-          partial_response += word + " "
-          
-          if i % 4 == 0:
-              yield partial_response
-              time.sleep(0.03)
-      
-      final_response = f"*{mode}*\n\n{response}"
-      logger.info(f"Response completed. Length: {len(response)} characters")
-      yield final_response
-      
-  except Exception as e:
-      logger.exception("Error in LangChain response generation")
-      yield f"Sorry, I encountered an error: {str(e)[:150]}"
-
-theme = gr.themes.Glass(
-  primary_hue="amber",
-  text_size="md",
-  radius_size="md",
-).set(
-  shadow_drop='*shadow_drop_lg',
-  shadow_drop_lg='*shadow_drop',
-  shadow_spread='*shadow_drop_lg',
-  block_info_text_weight='500',
-  button_border_width='*block_border_width'
-)
+    """Streams the bot's response, detecting the subject and handling errors."""
+    try:
+        template, mode = detect_subject(message)
+        chain = template | llm
+        
+        yield f"*{mode}*\n\nGenerating response..."
+        
+        logger.info(f"Processing {mode} query: {message[:50]}...")
+        
+        response = chain.invoke({
+            "question": message,
+            "system_message": "You are EduBot, an expert AI learning assistant. Provide comprehensive, educational responses that help students truly understand concepts."
+        })
+        
+        response = smart_truncate(response, max_length=3000)
+        
+        # Stream the response word by word
+        words = response.split()
+        partial_response = f"*{mode}*\n\n"
+        
+        for i, word in enumerate(words):
+            partial_response += word + " "
+            
+            # Update the stream periodically
+            if i % 4 == 0:
+                yield partial_response
+                time.sleep(0.03)
+        
+        final_response = f"*{mode}*\n\n{response}"
+        logger.info(f"Response completed. Length: {len(response)} characters")
+        yield final_response
+        
+    except Exception as e:
+        logger.exception("Error in LangChain response generation")
+        yield f"Sorry, I encountered an error: {str(e)[:150]}"
 
-with gr.Blocks(theme=theme, css="""
-  .main-container {
-      max-width: 900px;
-      margin: 0 auto;
-      padding: 1rem;
-      height: 100vh;
-      display: flex;
-      flex-direction: column;
-  }
-  .title {
-      text-align: center;
-      font-size: clamp(1.8rem, 4vw, 2.5rem);
-      font-weight: bold;
-      color: #d97706;
-      margin-bottom: 1rem;
-      flex-shrink: 0;
-  }
-  .chat-container {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      min-height: 0;
-      margin-bottom: 1rem;
-  }
-  .gradio-chatbot {
-      flex: 1 !important;
-      height: auto !important;
-      min-height: 400px;
-      max-height: calc(100vh - 250px);
-  }
-  
-  .gradio-chatbot .message-wrap .avatar-container {
-      display: none !important;
-  }
-  
-  .input-row {
-      flex-shrink: 0;
-      margin-top: 0.5rem;
-      display: flex;
-      justify-content: stretch;
-      align-items: flex-end;
-      gap: 10px;
-      max-width: 700px;
-      margin-left: auto;
-      margin-right: auto;
-  }
-  
-  .custom-textarea {
-       width: 100% !important;
-       min-width: 600px !important;
-   }
-   
-   .custom-textarea textarea {
-       border-radius: 20px !important;
-       border: 2px solid #64748b !important;
-       padding: 15px 20px !important;
-       font-size: 16px !important;
-       background: white !important;
-       outline: none !important;
-       box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
-       transition: all 0.3s ease !important;
-       resize: vertical !important;
-       font-family: inherit !important;
-       width: 100% !important;
-       min-width: 600px !important;
-       min-height: 120px !important;
-       max-height: 240px !important;
-   }
-   
-   .custom-textarea textarea:focus {
-       border-color: #475569 !important;
-       box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.1) !important;
-   }
-   
-   .custom-textarea label {
-       display: none !important;
-   }
-  
-  .send-button {
-    border-radius: 50% !important;
-    width: 50px !important;
-    height: 50px !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    flex-shrink: 0 !important;
-    align-self: flex-end !important;
-  }
-  
-  @media (max-width: 768px) {
-      .main-container {
-          padding: 0.5rem;
-      }
-      .title {
-          font-size: 1.5rem;
-          margin-bottom: 0.5rem;
-      }
-      .gradio-chatbot {
-          min-height: 300px;
-          max-height: calc(100vh - 200px);
-      }
-      .input-row {
-          margin-top: 0.25rem;
-          max-width: 100%;
-          padding: 0 0.5rem;
-      }
-      .custom-textarea textarea {
-          padding: 12px 15px !important;
-          font-size: 14px !important;
-      }
-  }
-  
-  @media (min-width: 769px) and (max-width: 1024px) {
-      .gradio-chatbot {
-          min-height: 450px;
-          max-height: calc(100vh - 230px);
-      }
-  }
-  
-  @media (min-width: 1025px) {
-      .gradio-chatbot {
-          min-height: 500px;
-          max-height: calc(100vh - 250px);
-      }
-  }
-""") as demo:
-  
-  with gr.Column(elem_classes=["main-container"]):
-      gr.HTML('<div class="title">🎓 EduBot</div>')
-      
-      with gr.Column(elem_classes=["chat-container"]):
-          chatbot = gr.Chatbot(
-              show_copy_button=True,
-              avatar_images=[None, None],
-              placeholder="Hi! I'm EduBot. What would you like to learn today? 📚",
-              container=True,
-              elem_classes=["gradio-chatbot"]
-          )
-      
-      with gr.Row(elem_classes=["input-row"]):
-          msg = gr.Textbox(
-              placeholder="Ask me about math, research, study strategies, or any educational topic...",
-              show_label=False,
-              lines=4,
-              max_lines=8,
-              elem_classes=["custom-textarea"]
-          )
-          send_btn = gr.Button("📤", variant="primary", elem_classes=["send-button"])
-  
-  def respond_and_update(message, history):
-    # Add the user's message to history with a placeholder for the bot's response
-    history.append([message, None])
-    
-    # This first yield makes the user's message appear immediately
-    yield history, "" 
-
-    full_response = ""
-    # Stream the bot's full response
-    for response_chunk in respond_with_enhanced_streaming(message, history):
-        full_response = response_chunk
-        # Continuously update the bot's message in the last row of history
-        history[-1][1] = full_response
-        # Yield the updated history and clear the input textbox
-        yield history, ""
+# --- Gradio UI and CSS ---
+custom_css = """
+/* Main container and background */
+.gradio-container {
+    background-color: rgb(240, 236, 230) !important;
+}
+
+/* Centered chat interface */
+.chat-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 1rem;
+    height: calc(100vh - 40px);
+    display: flex;
+    flex-direction: column;
+}
+
+/* Model name title */
+.model-name {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: black;
+    margin-bottom: 1rem;
+    text-align: left;
+}
+
+/* Chatbot styling */
+.gradio-chatbot {
+    flex: 1;
+    overflow-y: auto;
+}
+
+/* General message bubble styling */
+.gradio-chatbot .message {
+    border-radius: 18px !important;
+    padding: 12px !important;
+    color: black !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+}
+
+/* Model's chat bubble color */
+.gradio-chatbot .message.bot {
+    background-color: rgb(240, 185, 103) !important;
+}
+
+/* User's chat bubble color */
+.gradio-chatbot .message.user {
+    background-color: rgb(242, 238, 233) !important;
+}
+
+/* Hide the default Gradio avatars */
+.gradio-chatbot .avatar-container {
+    display: none !important;
+}
+
+/* Input textbox styling */
+.custom-textarea textarea {
+    background-color: rgb(242, 238, 233) !important;
+    border: 2px solid rgb(28, 18, 5) !important;
+    border-radius: 20px !important;
+    color: black !important;
+    padding: 15px !important;
+    font-size: 16px !important;
+    box-shadow: none !important;
+}
+
+/* Remove the label from the textbox */
+.custom-textarea label {
+    display: none !important;
+}
+"""
+
+with gr.Blocks(css=custom_css) as demo:
+    with gr.Column(elem_classes=["chat-container"]):
+        # Model Name in the top-left corner
+        gr.HTML('<div class="model-name">🎓 EduBot</div>')
+        
+        # The main chatbot interface
+        chatbot = gr.Chatbot(
+            elem_classes=["gradio-chatbot"],
+            show_copy_button=True,
+            avatar_images=[None, None], # Avatars are hidden by CSS but this is good practice
+            placeholder="Hi! I'm EduBot. What would you like to learn today? 📚"
+        )
+        
+        # The user input textbox
+        msg = gr.Textbox(
+            placeholder="Ask me about math, research, study strategies, or any educational topic...",
+            show_label=False,
+            lines=2,
+            elem_classes=["custom-textarea"]
+        )
+
+    def respond_and_update(message, history):
+        """Main function to handle user submission."""
+        # Add user message to history
+        history.append([message, None])
+        # 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
+            history[-1][1] = full_response
+            yield history, ""
+
+    # Set up the "send on Enter" event
+    msg.submit(respond_and_update, [msg, chatbot], [chatbot, msg])
 
 if __name__ == "__main__":
-  logger.info("Starting EduBot...")
-  demo.launch()
+    logger.info("Starting EduBot...")
+    demo.launch(debug=True)