import streamlit as st import os from supabase import create_client, Client from datetime import datetime import json # Thiết lập page config st.set_page_config( page_title="Multi-Agent System - Gia sư Toán AI", page_icon="🤖", layout="wide" ) def init_supabase_client() -> Client: """ Khởi tạo Supabase client """ url = os.getenv("SUPABASE_URL") key = os.getenv("SUPABASE_KEY") if not url or not key: st.error("Không tìm thấy SUPABASE_URL hoặc SUPABASE_KEY trong file .env") st.stop() return create_client(url, key) def display_system_architecture(): """ Hiển thị kiến trúc hệ thống """ st.markdown("""

🤖 An Adaptive Multi-Agent Tutoring System

Hệ thống gia sư thông minh với kiến trúc đa tác nhân thích ứng

""", unsafe_allow_html=True) # Placeholder cho hình ảnh system architecture st.markdown("### 📊 Kiến trúc Hệ thống") # Container cho hình ảnh với styling đẹp with st.container(): col1, col2, col3 = st.columns([1, 3, 1]) with col2: st.image("images/system.jpg", use_container_width=True) def display_agents(): """ Hiển thị chi tiết từng Agent với giao diện được tối ưu hóa """ # Header section st.markdown("""

🤖 Chi tiết các AI Agents

Khám phá hệ sinh thái AI agents thông minh và chuyên biệt

""", unsafe_allow_html=True) # CSS được tối ưu hóa - loại bỏ các effect phức tạp st.markdown(""" """, unsafe_allow_html=True) # Định nghĩa thông tin các agents agents = [ { "number": "1", "name": "Informer Agent", "icon": "🧠", "gradient": "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", "color": "#667eea", "role": "Chuyên gia giải toán với khả năng truy xuất thông tin thông minh", "image": "images/informer_agent.png", "features": [ "RAG Pipeline: Sử dụng Retrieval-Augmented Generation để tìm kiếm thông tin từ sách giáo khoa", "Embedding Search: Tìm kiếm ngữ nghĩa thông minh với Vietnamese bi-encoder", "Detailed Solutions: Sinh lời giải chi tiết, từng bước dễ hiểu", "Context Awareness: Hiểu ngữ cảnh câu hỏi để đưa ra câu trả lời phù hợp" ] }, { "number": "2", "name": "Practice Agent", "icon": "📝", "gradient": "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)", "color": "#f093fb", "role": "Chuyên gia tạo bài tập và đề xuất tài liệu học tập", "image": "images/practice_agent.png", "features": [ "Exercise Generation: Tạo bài tập mới phù hợp với điểm yếu của học sinh", "Video Recommendation: Đề xuất video học tập từ knowledge base", "Adaptive Difficulty: Điều chỉnh độ khó bài tập theo trình độ", "Creative Problems: Soạn câu hỏi sáng tạo, không có trong sách" ] }, { "number": "3", "name": "Insight Agent", "icon": "🔍", "gradient": "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)", "color": "#4facfe", "role": "Chuyên gia phân tích tâm lý và học tập của học sinh", "image": "images/insight_agent.png", "features": [ "Weakness Analysis: Phân tích điểm yếu từ lịch sử hội thoại", "Sentiment Detection: Nhận diện cảm xúc và tâm trạng học sinh", "Learning Pattern: Phát hiện patterns trong cách học của học sinh", "Personalized Insights: Đưa ra những insight cá nhân hóa" ] }, { "number": "4", "name": "Verifier Agent", "icon": "✅", "gradient": "linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)", "color": "#a8edea", "role": "Chuyên gia kiểm tra chất lượng và tính chính xác", "image": "images/verifier_agent.png", "features": [ "Solution Verification: Kiểm tra tính đúng đắn của lời giải", "Error Detection: Phát hiện và chỉ ra lỗi sai", "Quality Assurance: Đảm bảo chất lượng câu trả lời", "Correction Suggestions: Đưa ra gợi ý sửa lỗi" ] }, { "number": "5", "name": "Tutor Agent (Orchestrator)", "icon": "🎯", "gradient": "linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)", "color": "#fcb69f", "role": "Trung tâm điều phối và quản lý toàn bộ hệ thống", "image": "images/tutor_agent.png", "features": [ "Intent Classification: Phân loại ý định người dùng (greeting, math_question, practice, stress, etc.)", "Agent Orchestration: Điều phối các agent khác theo luồng phù hợp", "Conversation Management: Quản lý bối cảnh và luồng hội thoại", "Proactive Learning: Chủ động đề xuất bài tập khi phát hiện cơ hội", "Emotional Support: Hỗ trợ tâm lý khi học sinh gặp khó khăn" ] } ] # Hiển thị từng agent for i, agent in enumerate(agents): # Container chính st.markdown(f"""
{agent['icon']} Agent {agent['number']}: {agent['name']}
Vai trò: {agent['role']}
""", unsafe_allow_html=True) # Body với layout 2 cột col1, col2 = st.columns([2, 1]) with col1: st.markdown(f"""
🔧 Chức năng chính
    """, unsafe_allow_html=True) for feature in agent['features']: parts = feature.split(': ', 1) if len(parts) == 2: st.markdown(f"""
  • {parts[0]}: {parts[1]}
    • """, unsafe_allow_html=True) else: st.markdown(f"""
  • {feature}
    • """, unsafe_allow_html=True) st.markdown("""
""", unsafe_allow_html=True) with col2: try: st.image(agent['image'], use_container_width=True, caption=f"Agent {agent['number']}: {agent['name']}") except: st.markdown(f"""
{agent['icon']}
Agent {agent['number']} Image
{agent['image']}
""", unsafe_allow_html=True) # Đóng container st.markdown("
", unsafe_allow_html=True) # Spacing giữa các agents if i < len(agents) - 1: st.markdown("
", unsafe_allow_html=True) def display_system_components(): """ Hiển thị các thành phần của hệ thống """ st.markdown("## 🏗️ Các Thành phần Hệ thống") # Orchestration Hub with st.container(): st.markdown("""

🎯 Orchestration Hub

Trung tâm điều phối và quản lý tất cả các tác nhân trong hệ thống

""", unsafe_allow_html=True) # Hai flows chính col1, col2 = st.columns(2) with col1: st.markdown("""

📝 Flow A: Problem-Solving

RAG & Verification

""", unsafe_allow_html=True) with col2: st.markdown("""

🎯 Flow B: Personalization

Learning Engine

""", unsafe_allow_html=True) def display_workflow_details(): """ Hiển thị chi tiết quy trình làm việc - được tối ưu hóa """ st.markdown("## 🔄 Quy trình Hoạt động") # Workflow steps workflow_steps = [ { "step": "1", "title": "Nhận câu hỏi từ học sinh", "description": "Hệ thống nhận và phân tích câu hỏi từ người dùng", "icon": "❓", "color": "#FF6B6B" }, { "step": "2", "title": "Orchestration Hub phân tích", "description": "Trung tâm điều phối quyết định luồng xử lý phù hợp", "icon": "🎯", "color": "#4ECDC4" }, { "step": "3", "title": "Xử lý song song", "description": "Flow A giải quyết vấn đề, Flow B cá nhân hóa trải nghiệm", "icon": "⚡", "color": "#45B7D1" }, { "step": "4", "title": "Cập nhật hồ sơ học sinh", "description": "Hệ thống cập nhật thông tin học tập và điểm yếu", "icon": "📊", "color": "#96CEB4" }, { "step": "5", "title": "Trả lời cuối cùng", "description": "Cung cấp câu trả lời được xác thực và cá nhân hóa", "icon": "✅", "color": "#FECA57" } ] for i, step in enumerate(workflow_steps): # Tạo layout cho từng bước col1, col2 = st.columns([1, 4]) with col1: st.markdown(f"""
{step['icon']}
""", unsafe_allow_html=True) with col2: st.markdown(f"""

Bước {step['step']}: {step['title']}

{step['description']}

""", unsafe_allow_html=True) # Thêm mũi tên giữa các bước (trừ bước cuối) if i < len(workflow_steps) - 1: st.markdown("""
⬇️
""", unsafe_allow_html=True) def display_technical_features(): """ Hiển thị các tính năng kỹ thuật """ st.markdown("## 🛠️ Tính năng Kỹ thuật") col1, col2 = st.columns(2) with col1: st.markdown("""

🔍 RAG (Retrieval-Augmented Generation)

""", unsafe_allow_html=True) st.markdown("""

🎯 Personalization Engine

""", unsafe_allow_html=True) with col2: st.markdown("""

🧠 Adaptive Learning

""", unsafe_allow_html=True) st.markdown("""

📊 User Profile Management

""", unsafe_allow_html=True) def display_benefits(): """ Hiển thị lợi ích của hệ thống - được tối ưu hóa """ st.markdown("## 🌟 Lợi ích của Hệ thống") benefits = [ { "icon": "🎯", "title": "Học tập cá nhân hóa", "description": "Mỗi học sinh nhận được trải nghiệm học tập được tùy chỉnh theo nhu cầu riêng", "color": "#FF6B6B" }, { "icon": "⚡", "title": "Phản hồi tức thì", "description": "Hệ thống đa tác nhân cho phép xử lý song song, đưa ra phản hồi nhanh chóng", "color": "#4ECDC4" }, { "icon": "🧠", "title": "Học thích ứng thông minh", "description": "AI phân tích và điều chỉnh phương pháp dạy theo tiến bộ của từng học sinh", "color": "#45B7D1" }, { "icon": "📊", "title": "Theo dõi tiến độ chi tiết", "description": "Báo cáo và phân tích tiến độ học tập giúp tối ưu hóa quá trình học", "color": "#96CEB4" }, { "icon": "🔍", "title": "Độ chính xác cao", "description": "Hệ thống RAG và xác thực đảm bảo thông tin chính xác và đáng tin cậy", "color": "#FECA57" }, { "icon": "🌐", "title": "Mở rộng dễ dàng", "description": "Kiến trúc đa tác nhân cho phép mở rộng và thêm tính năng mới linh hoạt", "color": "#FF9FF3" } ] # Hiển thị benefits trong lưới 2x3 for i in range(0, len(benefits), 2): col1, col2 = st.columns(2) with col1: if i < len(benefits): benefit = benefits[i] st.markdown(f"""
{benefit['icon']}

{benefit['title']}

{benefit['description']}

""", unsafe_allow_html=True) with col2: if i + 1 < len(benefits): benefit = benefits[i + 1] st.markdown(f"""
{benefit['icon']}

{benefit['title']}

{benefit['description']}

""", unsafe_allow_html=True) def main(): """ Hàm chính của trang Multi-Agent System """ # Hiển thị kiến trúc hệ thống display_system_architecture() # Hiển thị các tác nhân display_agents() # Hiển thị các thành phần hệ thống display_system_components() # Hiển thị quy trình hoạt động display_workflow_details() # Hiển thị tính năng kỹ thuật display_technical_features() # Hiển thị lợi ích display_benefits() # Footer st.markdown("---") st.markdown("""

🚀 Trải nghiệm Hệ thống Multi-Agent ngay hôm nay!

Hệ thống gia sư AI thông minh với kiến trúc đa tác nhân tiên tiến, mang đến trải nghiệm học tập cá nhân hóa và hiệu quả nhất.

""", unsafe_allow_html=True) if __name__ == "__main__": main()