Spaces:
Sleeping
Sleeping
| 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(""" | |
| <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| padding: 2rem; | |
| border-radius: 15px; | |
| margin-bottom: 2rem; | |
| text-align: center;'> | |
| <h1 style='color: white; margin-bottom: 1rem; font-size: 2.5rem;'> | |
| 🤖 An Adaptive Multi-Agent Tutoring System | |
| </h1> | |
| <p style='color: #f0f0f0; font-size: 1.2rem; margin-bottom: 0;'> | |
| Hệ thống gia sư thông minh với kiến trúc đa tác nhân thích ứng | |
| </p> | |
| </div> | |
| """, 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(""" | |
| <div style="margin: 3rem 0 2rem 0;"> | |
| <h2 style="text-align: center; color: #333; margin-bottom: 0.5rem; font-size: 2.5rem;"> | |
| 🤖 Chi tiết các AI Agents | |
| </h2> | |
| <p style="text-align: center; color: #666; font-size: 1.1rem; margin-bottom: 2rem;"> | |
| Khám phá hệ sinh thái AI agents thông minh và chuyên biệt | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # CSS được tối ưu hóa - loại bỏ các effect phức tạp | |
| st.markdown(""" | |
| <style> | |
| .agent-container { | |
| background: white; | |
| border-radius: 15px; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| margin-bottom: 2rem; | |
| overflow: hidden; | |
| border: 1px solid rgba(0,0,0,0.05); | |
| } | |
| .agent-header { | |
| padding: 2rem; | |
| color: white; | |
| } | |
| .agent-title { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| font-size: 1.8rem; | |
| font-weight: 600; | |
| } | |
| .agent-title-icon { | |
| font-size: 2.5rem; | |
| margin-right: 1rem; | |
| } | |
| .agent-role { | |
| background: rgba(255,255,255,0.2); | |
| padding: 1rem; | |
| border-radius: 10px; | |
| font-size: 1.1rem; | |
| border: 1px solid rgba(255,255,255,0.2); | |
| } | |
| .agent-body { | |
| padding: 2rem; | |
| background: #fafafa; | |
| } | |
| .agent-features { | |
| background: white; | |
| border-radius: 12px; | |
| padding: 1.5rem; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.05); | |
| border: 1px solid rgba(0,0,0,0.05); | |
| } | |
| .features-title { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 1.5rem; | |
| font-size: 1.3rem; | |
| font-weight: 600; | |
| color: #333; | |
| } | |
| .features-list { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .feature-item { | |
| padding: 0.8rem 0; | |
| border-bottom: 1px solid rgba(0,0,0,0.05); | |
| display: flex; | |
| align-items: flex-start; | |
| } | |
| .feature-item:last-child { | |
| border-bottom: none; | |
| } | |
| .feature-bullet { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| margin-right: 1rem; | |
| margin-top: 0.5rem; | |
| flex-shrink: 0; | |
| } | |
| .feature-text { | |
| flex: 1; | |
| line-height: 1.6; | |
| } | |
| .feature-name { | |
| font-weight: 600; | |
| margin-right: 0.5rem; | |
| } | |
| .image-placeholder { | |
| background: rgba(255,255,255,0.9); | |
| border: 2px dashed #ddd; | |
| border-radius: 12px; | |
| padding: 2rem; | |
| text-align: center; | |
| height: 250px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .placeholder-icon { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| opacity: 0.7; | |
| } | |
| .placeholder-text { | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| color: #333; | |
| } | |
| .placeholder-path { | |
| font-size: 0.9rem; | |
| color: #666; | |
| font-family: monospace; | |
| background: rgba(0,0,0,0.05); | |
| padding: 0.3rem 0.8rem; | |
| border-radius: 15px; | |
| } | |
| </style> | |
| """, 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""" | |
| <div class="agent-container"> | |
| <div class="agent-header" style="background: {agent['gradient']};"> | |
| <div class="agent-title"> | |
| <span class="agent-title-icon">{agent['icon']}</span> | |
| <span>Agent {agent['number']}: {agent['name']}</span> | |
| </div> | |
| <div class="agent-role"> | |
| <strong>Vai trò:</strong> {agent['role']} | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Body với layout 2 cột | |
| col1, col2 = st.columns([2, 1]) | |
| with col1: | |
| st.markdown(f""" | |
| <div class="agent-body"> | |
| <div class="agent-features"> | |
| <div class="features-title"> | |
| <span style="margin-right: 0.5rem;">🔧</span> | |
| <span>Chức năng chính</span> | |
| </div> | |
| <ul class="features-list"> | |
| """, unsafe_allow_html=True) | |
| for feature in agent['features']: | |
| parts = feature.split(': ', 1) | |
| if len(parts) == 2: | |
| st.markdown(f""" | |
| <li class="feature-item"> | |
| <div class="feature-bullet" style="background: {agent['color']};"></div> | |
| <div class="feature-text"> | |
| <span class="feature-name" style="color: {agent['color']};">{parts[0]}:</span> | |
| <span>{parts[1]}</span> | |
| </div> | |
| </li> | |
| """, unsafe_allow_html=True) | |
| else: | |
| st.markdown(f""" | |
| <li class="feature-item"> | |
| <div class="feature-bullet" style="background: {agent['color']};"></div> | |
| <div class="feature-text">{feature}</div> | |
| </li> | |
| """, unsafe_allow_html=True) | |
| st.markdown(""" | |
| </ul> | |
| </div> | |
| </div> | |
| """, 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""" | |
| <div class="agent-body"> | |
| <div class="image-placeholder"> | |
| <div class="placeholder-icon" style="color: {agent['color']};">{agent['icon']}</div> | |
| <div class="placeholder-text">Agent {agent['number']} Image</div> | |
| <div class="placeholder-path">{agent['image']}</div> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Đóng container | |
| st.markdown("</div>", unsafe_allow_html=True) | |
| # Spacing giữa các agents | |
| if i < len(agents) - 1: | |
| st.markdown("<div style='margin: 2rem 0;'></div>", 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(""" | |
| <div style='background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%); | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| margin-bottom: 1rem;'> | |
| <h3 style='color: white; margin-bottom: 0.5rem;'> | |
| 🎯 Orchestration Hub | |
| </h3> | |
| <p style='color: #f0f0f0; margin-bottom: 0;'> | |
| Trung tâm điều phối và quản lý tất cả các tác nhân trong hệ thống | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Hai flows chính | |
| col1, col2 = st.columns(2) | |
| with col1: | |
| st.markdown(""" | |
| <div style='background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| margin-bottom: 1rem;'> | |
| <h3 style='color: #8B0000; margin-bottom: 1rem;'> | |
| 📝 Flow A: Problem-Solving | |
| </h3> | |
| <div style='background: rgba(255,255,255,0.2); padding: 1rem; border-radius: 8px;'> | |
| <h4 style='color: #8B0000; margin-bottom: 0.5rem;'>RAG & Verification</h4> | |
| <ul style='color: #2F4F4F; margin-bottom: 0;'> | |
| <li>Xử lý truy vấn RAG</li> | |
| <li>Giải quyết yêu cầu</li> | |
| <li>Xác thực và soạn thảo</li> | |
| <li>Cung cấp câu trả lời cuối cùng</li> | |
| </ul> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| with col2: | |
| st.markdown(""" | |
| <div style='background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| margin-bottom: 1rem;'> | |
| <h3 style='color: #2F4F4F; margin-bottom: 1rem;'> | |
| 🎯 Flow B: Personalization | |
| </h3> | |
| <div style='background: rgba(255,255,255,0.2); padding: 1rem; border-radius: 8px;'> | |
| <h4 style='color: #2F4F4F; margin-bottom: 0.5rem;'>Learning Engine</h4> | |
| <ul style='color: #2F4F4F; margin-bottom: 0;'> | |
| <li>Phân tích thông tin người dùng</li> | |
| <li>Gửi chủ đề phù hợp</li> | |
| <li>Truy vấn dữ liệu</li> | |
| <li>Tạo bài tập cá nhân hóa</li> | |
| </ul> | |
| </div> | |
| </div> | |
| """, 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""" | |
| <div style='width: 70px; | |
| height: 70px; | |
| background: {step['color']}; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto;'> | |
| <span style='font-size: 1.8rem;'>{step['icon']}</span> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| with col2: | |
| st.markdown(f""" | |
| <div style='background: {step['color']}20; | |
| padding: 1rem; | |
| border-radius: 10px; | |
| margin-bottom: 1rem; | |
| border-left: 4px solid {step['color']};'> | |
| <h4 style='color: #333; margin-bottom: 0.5rem;'> | |
| Bước {step['step']}: {step['title']} | |
| </h4> | |
| <p style='color: #666; margin-bottom: 0;'> | |
| {step['description']} | |
| </p> | |
| </div> | |
| """, 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(""" | |
| <div style='text-align: center; margin: 1rem 0;'> | |
| <span style='font-size: 1.5rem; color: #ccc;'>⬇️</span> | |
| </div> | |
| """, 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(""" | |
| <div style='background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| margin-bottom: 1rem;'> | |
| <h4 style='color: white; margin-bottom: 1rem;'> | |
| 🔍 RAG (Retrieval-Augmented Generation) | |
| </h4> | |
| <ul style='color: #f0f0f0; margin-bottom: 0;'> | |
| <li>Truy xuất thông tin từ cơ sở dữ liệu</li> | |
| <li>Tăng cường khả năng sinh text</li> | |
| <li>Đảm bảo tính chính xác cao</li> | |
| <li>Xác thực câu trả lời</li> | |
| </ul> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.markdown(""" | |
| <div style='background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| margin-bottom: 1rem;'> | |
| <h4 style='color: white; margin-bottom: 1rem;'> | |
| 🎯 Personalization Engine | |
| </h4> | |
| <ul style='color: #f0f0f0; margin-bottom: 0;'> | |
| <li>Phân tích điểm yếu học sinh</li> | |
| <li>Tạo bài tập cá nhân hóa</li> | |
| <li>Theo dõi tiến độ học tập</li> | |
| <li>Đề xuất nội dung phù hợp</li> | |
| </ul> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| with col2: | |
| st.markdown(""" | |
| <div style='background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| margin-bottom: 1rem;'> | |
| <h4 style='color: white; margin-bottom: 1rem;'> | |
| 🧠 Adaptive Learning | |
| </h4> | |
| <ul style='color: #f0f0f0; margin-bottom: 0;'> | |
| <li>Học thích ứng theo năng lực</li> | |
| <li>Điều chỉnh độ khó tự động</li> | |
| <li>Phản hồi thời gian thực</li> | |
| <li>Tối ưu hóa trải nghiệm</li> | |
| </ul> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.markdown(""" | |
| <div style='background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| margin-bottom: 1rem;'> | |
| <h4 style='color: white; margin-bottom: 1rem;'> | |
| 📊 User Profile Management | |
| </h4> | |
| <ul style='color: #f0f0f0; margin-bottom: 0;'> | |
| <li>Lưu trữ lịch sử học tập</li> | |
| <li>Phân tích pattern học tập</li> | |
| <li>Cập nhật thông tin real-time</li> | |
| <li>Báo cáo tiến độ chi tiết</li> | |
| </ul> | |
| </div> | |
| """, 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""" | |
| <div style='background: {benefit['color']}20; | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| margin-bottom: 1rem; | |
| border-left: 4px solid {benefit['color']}; | |
| height: 130px;'> | |
| <div style='display: flex; align-items: center; margin-bottom: 0.5rem;'> | |
| <span style='font-size: 1.8rem; margin-right: 0.5rem;'>{benefit['icon']}</span> | |
| <h4 style='color: #333; margin: 0;'>{benefit['title']}</h4> | |
| </div> | |
| <p style='color: #666; margin: 0; font-size: 0.9rem;'> | |
| {benefit['description']} | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| with col2: | |
| if i + 1 < len(benefits): | |
| benefit = benefits[i + 1] | |
| st.markdown(f""" | |
| <div style='background: {benefit['color']}20; | |
| padding: 1.5rem; | |
| border-radius: 10px; | |
| margin-bottom: 1rem; | |
| border-left: 4px solid {benefit['color']}; | |
| height: 130px;'> | |
| <div style='display: flex; align-items: center; margin-bottom: 0.5rem;'> | |
| <span style='font-size: 1.8rem; margin-right: 0.5rem;'>{benefit['icon']}</span> | |
| <h4 style='color: #333; margin: 0;'>{benefit['title']}</h4> | |
| </div> | |
| <p style='color: #666; margin: 0; font-size: 0.9rem;'> | |
| {benefit['description']} | |
| </p> | |
| </div> | |
| """, 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(""" | |
| <div style='text-align: center; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| padding: 2rem; | |
| border-radius: 15px; | |
| margin-top: 2rem;'> | |
| <h3 style='color: white; margin-bottom: 1rem;'> | |
| 🚀 Trải nghiệm Hệ thống Multi-Agent ngay hôm nay! | |
| </h3> | |
| <p style='color: #f0f0f0; font-size: 1.1rem; margin-bottom: 0;'> | |
| 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. | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| if __name__ == "__main__": | |
| main() |