Update app.py

app.py

@@ -1,102 +1,301 @@
-import os
-import openai
 import gradio as gr
+from langchain.prompts import ChatPromptTemplate
+from langchain_huggingface import HuggingFaceEndpoint
+from langchain.schema import HumanMessage, SystemMessage
+import os
+import time
+import logging
+import re
+
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+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")
+)
+
+math_template = ChatPromptTemplate.from_messages([
+  ("system", """{system_message}
+
+You are an expert math tutor. For every math problem:
+1. Break it down into key concepts
+2. Breifly explain concepts
+3. Outline the process for solving a similar problem
+
+Be comprehensive and educational. Structure your response clearly."""),
+  ("human", "{question}")
+])
+
+research_template = ChatPromptTemplate.from_messages([
+  ("system", """{system_message}
+
+You are a research skills mentor. Help students with:
+- Determining the validity of sources
+- Evaluating source credibility and bias if a source is mentioned
+- Proper citation formats (APA, MLA, Chicago, etc.)
+- Research strategies and methodologies
+- Academic writing techniques and structure
+- Database navigation and search strategies
+
+Provide detailed, actionable advice with specific examples."""),
+  ("human", "{question}")
+])
+
+study_template = ChatPromptTemplate.from_messages([
+  ("system", """{system_message}
+
+You are a study skills coach. Help students with:
+- Effective study methods for different learning styles
+- Time management and scheduling techniques
+- Memory techniques and retention strategies
+- Test preparation and exam strategies
+- Note-taking methods and organization
+- Learning style optimization
+- 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}")
+])
+
+general_template = ChatPromptTemplate.from_messages([
+  ("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)
+🔍 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}")
+])
+
+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"
+
+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]"
+
+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'
+)
+
+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: center;
+      align-items: flex-end;
+      gap: 10px;
+      max-width: 700px;
+      margin-left: auto;
+      margin-right: auto;
+  }
+  
+  .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;
+  }
+  
+  .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;
+  }
+  
+  @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...",
+              container=False,
+              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):
+      for response in respond_with_enhanced_streaming(message, history):
+          history.append([message, response])
+          yield history, ""
+      
+  msg.submit(respond_and_update, [msg, chatbot], [chatbot, msg])
+  send_btn.click(respond_and_update, [msg, chatbot], [chatbot, msg])
 
-openai.api_key = os.environ.get("OPENAI_API_KEY")
-
-# Gradio + OpenAI Chatbot
-def chat_with_openai(message, history):
-    history_openai_format = [
-        {"role": "user" if h["role"] == "user" else "assistant", "content": h["content"]}
-        for h in history
-    ]
-
-    history_openai_format.append({"role": "user", "content": message})
-
-    response = openai.chat.completions.create(
-        model="gpt-4o-mini",
-        messages=history_openai_format,
-    )
-
-    return response.choices[0].message["content"]
-
-# Custom CSS
-css = """
-/* Chat container */
-#chatbot {
-    height: 600px !important;
-    overflow-y: auto !important;
-    border-radius: 16px !important;
-    border: 1pt solid #d1d5db !important;
-    padding: 15px !important;
-    background: white !important;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
-}
-
-/* Messages */
-.message {
-    border-radius: 12px !important;
-    padding: 10px 15px !important;
-    margin: 8px 0 !important;
-}
-.message.user {
-    background: #f1f5f9 !important; /* light slate */
-    color: #0f172a !important;
-}
-.message.assistant {
-    background: #e0f2fe !important; /* light blue */
-    color: #1e3a8a !important;
-}
-
-/* Textbox (force textarea style) */
-.custom-textbox textarea {
-    border-radius: 12px !important;
-    border: 1pt solid #64748b !important;  /* slate border */
-    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;
-    min-height: 100px !important;  /* rectangle instead of flat line */
-    resize: vertical !important;
-}
-.custom-textbox textarea:focus {
-    border-color: #3b82f6 !important; /* blue focus */
-    box-shadow: 0 4px 8px rgba(59,130,246,0.2) !important;
-}
-
-/* Send button */
-button {
-    border-radius: 12px !important;
-    background: #3b82f6 !important;
-    color: white !important;
-    padding: 12px 18px !important;
-    font-size: 16px !important;
-    border: none !important;
-    transition: background 0.3s ease !important;
-}
-button:hover {
-    background: #2563eb !important;
-}
-"""
-
-# Gradio UI
-with gr.Blocks(css=css) as demo:
-    chatbot = gr.Chatbot(elem_id="chatbot", bubble_full_width=False, height=600)
-
-    with gr.Row():
-        msg = gr.Textbox(
-            placeholder="Ask me about math, research, study strategies, or any educational topic...",
-            container=False,
-            show_label=False,
-            elem_classes=["custom-textbox"],
-            lines=3,
-            max_lines=6
-        )
-        submit = gr.Button("Send", scale=0)
-
-    msg.submit(chat_with_openai, [msg, chatbot], chatbot)
-    submit.click(chat_with_openai, [msg, chatbot], chatbot)
-
-demo.launch()
+if __name__ == "__main__":
+  logger.info("Starting EduBot...")
+  demo.launch()