┌─────────────────────────────────────────────────────────────┐
│ 📊 Student Performance Analysis & Recommendations │
│ AI-Powered Personalized Learning Insights │
├─────────────────────────────────────────────────────────────┤
│ │
│ [Select Student: S001 ▼] │
│ │
│ ┌─── Performance Summary ─────────────────────┐ │
│ │ Strengths: Math (A), Verbal (B) │ │
│ │ Areas for Improvement: Non-verbal (C) │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ───────────────────────────────────────────────────── │
│ │
│ 💬 AI Study Buddy ← NEW! │
│ Ask questions, get personalized advice, and stay │
│ motivated! │
│ │
│ ▼ 💬 Chat with Your Study Buddy [Expand] │
│ ┌─────────────────────────────────────────────┐ │
│ │ Chat interface appears here │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ───────────────────────────────────────────────────── │
│ │
│ 🎯 Topic-Based Learning Insights │
│ ... │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────┐
│ 💬 AI Study Buddy │
│ Ask questions, get personalized advice, and stay │
│ motivated! │
│ │
│ ▶ 💬 Chat with Your Study Buddy [Click to open] │
└─────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────┐
│ ▼ 💬 Chat with Your Study Buddy │
├────────────────────────────────────────────────────────────┤
│ │
│ ### 💬 Chat with Your AI Study Buddy │
│ Ask me anything about your performance, study tips, or │
│ what to focus on! │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ 👋 Hey Student S001! I'm your AI Study Buddy! │ │
│ │ I've analyzed your performance (you're at 68.5% │ │
│ │ overall) and I'm here to help you improve. │ │
│ │ Ask me anything! 🚀 │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ 💡 Try asking: │
│ [📊 Why am I struggling?] [🎯 What should I focus on?] │
│ [📚 Study tips for me?] │
│ │
│ ───────────────────────────────────────────────────── │
│ │
│ 💬 Type your question here... │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ e.g., Why did I score low in Math? │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ [Send 📤] [Clear Chat 🗑️] │
│ │
└────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────┐
│ Welcome Message (Blue Background) │
├────────────────────────────────────────────────────────┤
│ 👋 Hey Student S001! I'm your AI Study Buddy! │
│ I've analyzed your performance (you're at 68.5% │
│ overall) and I'm here to help you improve. Ask me │
│ anything! 🚀 │
└────────────────────────────────────────────────────────┘
↓ Student clicks button ↓
┌────────────────────────────────────────────────────────┐
│ 🧑🎓 You: │
│ Why am I struggling with certain subjects? │
└────────────────────────────────────────────────────────┘
↓ AI responds ↓
┌────────────────────────────────────────────────────────┐
│ 🤖 Study Buddy: │
│ Great question! Looking at your data, you're doing │
│ well in Math (75%) and Verbal (82%), but struggling │
│ with Non-verbal reasoning (45%). Specifically, you │
│ scored low on pattern recognition (38%). This is │
│ common! Let's work on spatial awareness together. 🧩 │
└────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────┐
│ 🧑🎓 You: │
│ What should I practice first? │
└────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────┐
│ 🤖 Study Buddy: │
│ Let's start with pattern recognition since you're at │
│ 38% there! 🎯 I recommend: │
│ 1. Spend 30 minutes daily on visual patterns │
│ 2. Try Brilliant's logic puzzles (free tier) │
│ 3. Practice with shape sequences │
│ │
│ Your strong math skills (75%) will help! Ready? │
└────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────┐
│ 🧑🎓 You: │
│ Yes! Any specific websites? │
└────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────┐
│ 🤖 Study Buddy: │
│ Awesome enthusiasm! 🌟 Check out: │
│ • Brilliant.org/logic - Interactive puzzles │
│ • Lumosity.com - Brain training │
│ • Peak app - Pattern games │
│ │
│ Start with 15 min/day and increase gradually. You've │
│ got this! 💪 │
└────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────┐
│ 🧑🎓 You: │
│ I feel like I'm really bad at comprehension :( │
└────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────┐
│ 🤖 Study Buddy: │
│ Hey, don't be so hard on yourself! 💙 Your │
│ comprehension is at 55% - that's average, not bad! │
│ Plus, your vocabulary is strong (70%), which is a │
│ great foundation. We just need to work on main idea │
│ questions where you scored 42%. You're improving, │
│ and I'm here to help! Let's tackle this together! 🚀 │
└────────────────────────────────────────────────────────┘
┌─ Student Messages ─────────────────┐
│ Background: #f5f5f5 (Light Gray) │
│ Text: Black │
│ Border: Rounded (10px) │
│ Margin: Left side │
└────────────────────────────────────┘
┌─ AI Messages ──────────────────────┐
│ Background: #e8f5e9 (Light Green) │
│ Text: Black │
│ Border: Rounded (10px) │
│ Margin: Right side │
└────────────────────────────────────┘
┌─ Welcome Message ──────────────────┐
│ Background: #e3f2fd (Light Blue) │
│ Text: #1976d2 (Dark Blue) │
│ Border: Rounded (10px) │
│ Font: Medium weight │
└────────────────────────────────────┘
- 🧑🎓 Student messages
- 🤖 AI Study Buddy messages
- 👋 Welcome greeting
- 💬 Chat bubble
- 📊 Data/statistics
- 🎯 Focus/target
- 📚 Study/books
- 🚀 Motivation/progress
- 💪 Strength/effort
- 🌟 Success/achievement
- 💡 Ideas/tips
- 🧩 Puzzles/patterns
┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ 📊 Why am I │ │ 🎯 What should │ │ 📚 Study tips │
│ struggling? │ │ I focus on? │ │ for me? │
└──────────────────┘ └──────────────────┘ └──────────────────┘
(Blue hover) (Blue hover) (Blue hover)
┌──────────────┐ ┌──────────────┐
│ Send 📤 │ │ Clear Chat 🗑️│
│ (Primary) │ │ (Secondary) │
└──────────────┘ └──────────────┘
┌─────────────────────────────────────────────────────────┐
│ Student messages: 50px margin-left │
│ AI messages: 50px margin-right │
│ Full width: Comfortable reading │
│ Buttons: Side by side │
└─────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────┐
│ Student messages: 20px margin-left │
│ AI messages: 20px margin-right │
│ Narrower width: Still readable │
│ Buttons: Side by side │
└──────────────────────────────────────────┘
┌────────────────────────────┐
│ Messages: Full width │
│ Minimal margins │
│ Buttons: Stacked vertically│
└────────────────────────────┘
New message → Fade in from bottom → Smooth scroll to view
Click → Button press effect → Processing spinner → Response appears
Student sends message → "🤔 Thinking..." → AI response
┌─────────────────────────────────────────────────────┐
│ Streamlit UI │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ chat_buddy.py Module │ │
│ │ │ │
│ │ ┌───────────────────────────────────────┐ │ │
│ │ │ render_chat_interface() │ │ │
│ │ │ - Display chat history │ │ │
│ │ │ - Handle user input │ │ │
│ │ │ - Show quick buttons │ │ │
│ │ └───────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌───────────────────────────────────────┐ │ │
│ │ │ get_ai_response() │ │ │
│ │ │ - Build conversation context │ │ │
│ │ │ - Call OpenRouter API │ │ │
│ │ │ - Return formatted response │ │ │
│ │ └───────────────────────────────────────┘ │ │
│ │ │ │
│ │ ┌───────────────────────────────────────┐ │ │
│ │ │ Session State Storage │ │ │
│ │ │ - chat_history[] │ │ │
│ │ │ - chat_context{} │ │ │
│ │ │ - student_data │ │ │
│ │ └───────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────┘ │
│ ↓ │
│ ┌─────────────────────────────────────────────┐ │
│ │ OpenRouter API │ │
│ │ (Gemini 2.0 Flash) │ │
│ └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘
Student selects → Performance data → Set chat context
│ loaded │
↓ ↓
Chat interface ← Welcome message ← AI initialized
│
↓
┌─────────────────────────────────────────────┐
│ Student can: │
│ • Click quick-start button │
│ • Type custom question │
│ • View chat history │
└─────────────────────────────────────────────┘
│
↓
Question sent → Build prompt → API call → Get response
│ with data to AI │
↓ ↓
Add to history ← Format response ← Parse AI output
│
↓
Display in chat bubble → Scroll to view → Ready for next question
Click expander header to show/hide chat interface
Three pre-made questions for easy starting
Type custom questions in the input field
Click to send message (or press Enter)
Reset conversation to start fresh
Auto-scrolls to newest message
• 15px padding inside chat bubbles
• 10px margin between messages
• 20px margin around quick-start buttons
• 50px margin-left/right for desktop messages
• Message text: 16px, regular weight
• User/AI labels: Bold weight
• Icons: 20px size
• Input placeholder: Italic, gray
• Border radius: 10px (rounded corners)
• Box shadow: None (flat design)
• Border: None (clean look)
Visit http://localhost:8502 and:
- Select any student (e.g., S001)
- Scroll past the performance summary
- Look for "💬 AI Study Buddy" section
- Click "💬 Chat with Your Study Buddy" to expand
- Try the quick-start buttons or type your own question!
The future of personalized learning is here! 🎉🤖