Create app.py

app.py

@@ -0,0 +1,1702 @@
+"""
+Educational LLM Application Based on Gradio
+"""
+
+import os
+import gradio as gr
+from typing import Dict, Any, List, Tuple, Optional
+from visualization import create_network_graph
+from llm_utils import decompose_concepts, get_concept_explanation, call_llm
+from concept_handler import MOCK_DECOMPOSITION_RESULT, MOCK_EXPLANATION_RESULT
+from config import DEBUG_MODE
+from fastapi import FastAPI
+from fastapi.responses import JSONResponse
+import json
+
+# Custom CSS styles
+custom_css = """
+/* Global styles */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+    color: #333;
+    background-color: #f7f9fc;
+}
+
+/* Heading styles */
+h1 {
+    color: #2c3e50;
+    font-weight: 700;
+    margin-bottom: 1rem;
+}
+
+h2, h3, h4 {
+    color: #3498db;
+    font-weight: 600;
+}
+
+/* Button styles */
+button.primary {
+    background: linear-gradient(135deg, #3498db, #2980b9);
+    border: none;
+    box-shadow: 0 4px 6px rgba(52, 152, 219, 0.3);
+}
+
+button.secondary {
+    background: #ecf0f1;
+    color: #2980b9;
+    border: 1px solid #bdc3c7;
+}
+
+button:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+}
+
+/* Input fields enhancement */
+input, textarea, select {
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 10px;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+}
+
+input:focus, textarea:focus, select:focus {
+    border-color: #3498db;
+    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.25);
+}
+
+/* Tab styles */
+.tabs {
+    border-bottom: 2px solid #e0e0e0;
+}
+
+.tab-selected {
+    color: #3498db;
+    border-bottom: 2px solid #3498db;
+}
+
+/* Concept card styles */
+.concept-card {
+    transition: all 0.3s ease;
+    border: 1px solid #e0e0e0;
+    border-radius: 12px;
+    padding: 16px;
+    margin-bottom: 16px;
+    cursor: pointer;
+    background-color: #fff;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+}
+
+.concept-card:hover {
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    transform: translateY(-3px);
+    border-color: #bdc3c7;
+}
+
+.selected-card {
+    border-color: #3498db;
+    background-color: rgba(52, 152, 219, 0.05);
+    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
+}
+
+.concept-title {
+    font-weight: bold;
+    margin-bottom: 8px;
+    color: #2c3e50;
+    font-size: 1.1em;
+}
+
+.concept-desc {
+    font-size: 0.95em;
+    color: #7f8c8d;
+    line-height: 1.5;
+}
+
+/* Knowledge graph styles */
+#concept-graph {
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 16px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+}
+
+#concept-graph img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 8px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+}
+
+#concept-graph img:hover {
+    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+}
+
+/* Example box styles */
+.example-box {
+    background-color: #f1f8fe;
+    border-left: 4px solid #3498db;
+    padding: 15px;
+    margin: 15px 0;
+    border-radius: 0 8px 8px 0;
+}
+
+.example-box h4 {
+    margin-top: 0;
+    color: #2980b9;
+}
+
+/* Resource item styles */
+.resource-item {
+    padding: 12px;
+    margin: 10px 0;
+    border-bottom: 1px dashed #e0e0e0;
+    transition: all 0.2s ease;
+}
+
+.resource-item:hover {
+    background-color: #f9f9f9;
+}
+
+/* Details and answers styles */
+details {
+    margin: 10px 0;
+    padding: 10px;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    background-color: #f9f9f9;
+}
+
+summary {
+    cursor: pointer;
+    color: #3498db;
+    font-weight: 600;
+    padding: 5px;
+}
+
+summary:hover {
+    color: #2980b9;
+}
+
+/* Layout container styles */
+.container {
+    background-color: #fff;
+    border-radius: 12px;
+    padding: 20px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+    margin-bottom: 20px;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .concept-card {
+        padding: 12px;
+    }
+    
+    .example-box {
+        padding: 12px;
+    }
+}
+
+/* Answer box styles */
+.answer-box {
+    background-color: #f8f9fa;
+    border-radius: 12px;
+    padding: 20px;
+    margin: 15px 0;
+    border: 1px solid #e9ecef;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.answer-content {
+    margin-bottom: 15px;
+    line-height: 1.6;
+    color: #2c3e50;
+}
+
+.answer-content h4 {
+    color: #3498db;
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+
+.main-concept {
+    background-color: #e3f2fd;
+    padding: 10px 15px;
+    border-radius: 8px;
+    color: #1976d2;
+    font-size: 0.95em;
+}
+
+.main-concept strong {
+    color: #1565c0;
+}
+
+/* Answer section styles */
+.answer-section {
+    margin-top: 20px;
+    background: white;
+    border-radius: 15px;
+    padding: 20px;
+}
+
+.answer-box {
+    background-color: #f8f9fa;
+    border-radius: 12px;
+    padding: 20px;
+    margin: 15px 0;
+    border: 1px solid #e9ecef;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    transition: all 0.3s ease;
+}
+
+.answer-box:hover {
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.answer-content {
+    margin-bottom: 15px;
+    line-height: 1.6;
+    color: #2c3e50;
+    font-size: 1.1em;
+}
+
+.main-concept {
+    background-color: #e3f2fd;
+    padding: 12px 16px;
+    border-radius: 8px;
+    color: #1976d2;
+    font-size: 0.95em;
+    margin-top: 15px;
+    border: 1px solid rgba(25, 118, 210, 0.1);
+}
+
+.main-concept strong {
+    color: #1565c0;
+    font-weight: 600;
+}
+
+/* Loading animation styles */
+.loading {
+    padding: 20px;
+    text-align: center;
+    color: #666;
+    font-size: 1.1em;
+    position: relative;
+}
+
+.loading:after {
+    content: '...';
+    position: absolute;
+    animation: dots 1.5s steps(5, end) infinite;
+}
+
+@keyframes dots {
+    0%, 20% { content: '.'; }
+    40% { content: '..'; }
+    60% { content: '...'; }
+    80%, 100% { content: ''; }
+}
+
+.loading::before {
+    content: '';
+    display: block;
+    width: 30px;
+    height: 30px;
+    border: 3px solid #3498db;
+    border-top-color: transparent;
+    border-radius: 50%;
+    margin: 0 auto 10px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* 概念详解面板样式 */
+.concept-explanation {
+    padding: 20px;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.explanation-content {
+    line-height: 1.6;
+    margin: 15px 0;
+    color: #2c3e50;
+}
+
+.examples-section {
+    margin-top: 20px;
+}
+
+.example-box {
+    background: #f8f9fa;
+    border-left: 4px solid #3498db;
+    padding: 15px;
+    margin: 15px 0;
+    border-radius: 0 8px 8px 0;
+}
+
+.example-problem {
+    margin-bottom: 10px;
+    color: #2c3e50;
+}
+
+.example-solution {
+    color: #34495e;
+    padding: 10px;
+    background: rgba(52, 152, 219, 0.05);
+    border-radius: 4px;
+}
+
+/* 加载动画样式 */
+.loading {
+    text-align: center;
+    padding: 20px;
+}
+
+.loading-spinner {
+    border: 3px solid #f3f3f3;
+    border-top: 3px solid #3498db;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 10px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.loading-text {
+    color: #666;
+    font-size: 0.9em;
+}
+
+/* 新增的样式 */
+.concept-explanation-container {
+    margin-top: 20px;
+    padding: 15px;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    transition: all 0.3s ease;
+    max-height: 600px;  /* 固定最大高度 */
+    overflow-y: auto;   /* 添加垂直滚动条 */
+    
+    /* 自定义滚动条样式 */
+    scrollbar-width: thin;
+    scrollbar-color: #3498db #f1f1f1;
+}
+
+/* Webkit浏览器的滚动条样式 */
+.concept-explanation-container::-webkit-scrollbar {
+    width: 8px;
+}
+
+.concept-explanation-container::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 4px;
+}
+
+.concept-explanation-container::-webkit-scrollbar-thumb {
+    background: #3498db;
+    border-radius: 4px;
+}
+
+.concept-explanation-container::-webkit-scrollbar-thumb:hover {
+    background: #2980b9;
+}
+
+.concept-explanation-container h3 {
+    color: #2c3e50;
+    margin-bottom: 15px;
+    position: sticky;
+    top: 0;
+    background: white;
+    padding: 10px 0;
+    z-index: 1;
+}
+
+/* 内容区域样式 */
+.card-explanation {
+    padding: 20px;
+    background: white;
+    border-radius: 12px;
+}
+
+.explanation-section, .key-points-section, .examples-section, 
+.practice-section, .resources-section {
+    margin-top: 20px;
+    padding: 15px;
+    background: #f8f9fa;
+    border-radius: 8px;
+}
+
+.explanation-section h4, .key-points-section h4, 
+.examples-section h4, .practice-section h4, 
+.resources-section h4 {
+    color: #2c3e50;
+    margin-bottom: 10px;
+}
+
+/* 修改generate_card_explanation函数中的标题文本 */
+.explanation-section h4:before { content: "📚 Concept Explanation"; }
+.key-points-section h4:before { content: "🎯 Key Points"; }
+.examples-section h4:before { content: "📝 Example Analysis"; }
+.practice-section h4:before { content: "✍️ Practice Problems"; }
+.resources-section h4:before { content: "📚 Learning Resources"; }
+
+/* 加载动画容器 */
+.loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+/* 加载动画旋转器 */
+.loading-spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 20px;
+}
+
+/* 加载文本 */
+.loading-text {
+    color: #666;
+    font-size: 1.1em;
+    margin-top: 10px;
+}
+
+/* 旋转动画 */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+"""
+
+# Custom JavaScript code
+custom_js = """
+// Handle concept card clicks
+function conceptClick(conceptId) {
+    // Find the hidden input field and update its value
+    const conceptSelection = document.getElementById('concept-selection');
+    if (conceptSelection) {
+        conceptSelection.value = conceptId;
+        conceptSelection.dispatchEvent(new Event('input', { bubbles: true }));
+        
+        // Highlight the selected card
+        document.querySelectorAll('.concept-card').forEach(card => {
+            card.classList.remove('selected-card');
+            if (card.getAttribute('data-concept-id') === conceptId) {
+                card.classList.add('selected-card');
+            }
+        });
+    }
+}
+
+// Enhance image display after loading
+document.addEventListener('DOMContentLoaded', function() {
+    const graphContainer = document.getElementById('concept-graph');
+    if (graphContainer) {
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.addedNodes && mutation.addedNodes.length > 0) {
+                    const img = graphContainer.querySelector('img');
+                    if (img) {
+                        img.style.maxWidth = '100%';
+                        img.style.height = 'auto';
+                        img.style.borderRadius = '8px';
+                        img.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
+                    }
+                }
+            });
+        });
+        
+        observer.observe(graphContainer, { childList: true, subtree: true });
+    }
+});
+"""
+
+# Create cache directory
+os.makedirs("cache", exist_ok=True)
+
+# Global state storage
+class AppState:
+    def __init__(self):
+        self.user_profile = {}
+        self.current_concepts_data = None
+        self.nodes_dict = {}
+        self.concepts_explanations = {}  # Cache for generated concept explanations
+        self.concepts_expansions = {}  # Cache for generated concept expansions
+        self.card_explanations = {}  # 新增：缓存卡片点击生成的解释内容
+        
+    def update_user_profile(self, grade: str, subject: str, needs: str) -> Dict[str, str]:
+        """Update user profile"""
+        self.user_profile = {
+            "grade": grade,
+            "subject": subject,
+            "needs": needs
+        }
+        return self.user_profile
+    
+    def set_concepts_data(self, concepts_data: Dict[str, Any], nodes_dict: Dict[str, Any]):
+        """Set current concept data and node dictionary"""
+        self.current_concepts_data = concepts_data
+        self.nodes_dict = nodes_dict
+    
+    def cache_concept_explanation(self, concept_id: str, explanation_data: Dict[str, Any]):
+        """Cache concept explanation data"""
+        self.concepts_explanations[concept_id] = explanation_data
+    
+    def get_cached_explanation(self, concept_id: str) -> Optional[Dict[str, Any]]:
+        """Get cached concept explanation if it exists"""
+        return self.concepts_explanations.get(concept_id)
+    
+    def cache_concept_expansion(self, concept_id: str, expansion_data: Dict[str, Any]):
+        """Cache concept expansion data"""
+        self.concepts_expansions[concept_id] = expansion_data
+    
+    def get_cached_expansion(self, concept_id: str) -> Optional[Dict[str, Any]]:
+        """Get cached concept expansion if it exists"""
+        return self.concepts_expansions.get(concept_id)
+    
+    def cache_card_explanation(self, concept_id: str, explanation_text: str):
+        """缓存卡片点击的解释内容"""
+        self.card_explanations[concept_id] = explanation_text
+    
+    def get_cached_card_explanation(self, concept_id: str) -> Optional[str]:
+        """获取缓存的卡片解释内容"""
+        return self.card_explanations.get(concept_id)
+
+# Initialize application state
+app_state = AppState()
+
+# CreateFastAPI应用
+app = FastAPI()
+
+# 修改 FastAPI 路由部分
+@app.post("/trigger_llm")
+async def trigger_llm(data: dict):
+    try:
+        concept_id = data.get("concept_id")
+        if not concept_id:
+            return JSONResponse({"error": "Missing concept_id"}, status_code=400)
+            
+        # 生成解释内容
+        explanation_content = generate_card_explanation(concept_id)
+        
+        # 只返回生成的内容，让前端处理UI更新
+        return JSONResponse({
+            "status": "success",
+            "content": explanation_content
+        })
+        
+    except Exception as e:
+        return JSONResponse({"error": str(e)}, status_code=500)
+
+# Helper function for formatting concept cards
+def generate_concept_cards(concept_map: Dict) -> str:
+    """Generate HTML for concept cards with enhanced styling"""
+    cards_html = '<div class="concept-cards-container">'
+    
+    for concept in concept_map.get("sub_concepts", []):
+        difficulty_class = f"difficulty-{concept.get('difficulty', 'basic')}"
+        concept_id = concept['id']
+        concept_name = concept['name']
+        concept_description = concept['description']
+        
+        # 修改fetch回调部分
+        cards_html += f"""
+        <div class="concept-card {difficulty_class}" 
+             data-concept-id="{concept_id}" 
+             onclick="(function(id) {{ 
+                 console.log('点击概念卡片:', id);
+                 
+                 // 更新UI状态
+                 document.querySelectorAll('.concept-card').forEach(card => {{
+                     card.classList.remove('selected-card');
+                     if (card.getAttribute('data-concept-id') === id) {{
+                         card.classList.add('selected-card');
+                     }}
+                 }});
+                 
+                 // 显示加载动画
+                 const directAnswer = document.querySelector('.answer-box');
+                 if (directAnswer) {{
+                     const existingContainers = document.querySelectorAll('.concept-explanation-container');
+                     existingContainers.forEach(container => container.remove());
+                     
+                     const loadingContainer = document.createElement('div');
+                     loadingContainer.className = 'concept-explanation-container';
+                     loadingContainer.innerHTML = `
+                         <div class="loading">
+                             <div class="loading-spinner"></div>
+                             <div class="loading-text">正在加载概念解释...</div>
+                         </div>
+                     `;
+                     directAnswer.parentNode.insertBefore(loadingContainer, directAnswer.nextSibling);
+                 }}
+                 
+                 // 触发Gradio事件以获取缓存或生成新内容
+                 const cardSelectionInput = document.getElementById('card-selection');
+                 if (cardSelectionInput) {{
+                     cardSelectionInput.value = id;
+                     cardSelectionInput.dispatchEvent(new Event('input', {{ bubbles: true }}));
+                 }}
+                 
+             }})('{concept_id}')">
+            <div class="concept-header">
+                <h3>{concept_name}</h3>
+                <span class="difficulty-badge">{concept.get('difficulty', 'basic')}</span>
+            </div>
+            <p>{concept_description}</p>
+        </div>
+        """
+    
+    cards_html += """
+    <style>
+    .concept-cards-container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        gap: 15px;
+        padding: 10px;
+    }
+    
+    .concept-card {
+        background: white;
+        border-radius: 10px;
+        padding: 15px;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        border: 1px solid #e9ecef;
+    }
+    
+    .concept-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 10px;
+    }
+    
+    .difficulty-badge {
+        padding: 4px 8px;
+        border-radius: 12px;
+        font-size: 0.8em;
+        font-weight: 500;
+    }
+    
+    .difficulty-basic .difficulty-badge {
+        background: #e3f2fd;
+        color: #1976d2;
+    }
+    
+    .difficulty-intermediate .difficulty-badge {
+        background: #fff3e0;
+        color: #f57c00;
+    }
+    
+    .difficulty-advanced .difficulty-badge {
+        background: #ffebee;
+        color: #d32f2f;
+    }
+    </style>
+    """
+    
+    return cards_html
+
+# Function definitions
+def update_profile(grade, subject, needs):
+    app_state.update_user_profile(grade, subject, needs)
+    return f"*Current user profile: {grade} {subject} student - Learning needs: {needs if needs else 'Not specified'}*"
+
+# 添加新的函数用于生成解释
+def generate_explanation(question: str, concept_map: Dict[str, Any], user_profile: Dict[str, str]) -> str:
+    """
+    Generate explanation for the question using LLM
+    
+    Args:
+        question: Original question
+        concept_map: Concept map data
+        user_profile: User profile information
+        
+    Returns:
+        Generated explanation
+    """
+    system_prompt = """You are an expert educational AI tutor. Please provide a clear and concise answer 
+    to the student's question, considering their grade level and subject background. 
+    
+    Your response must be in JSON format with the following structure:
+    {
+        "explanation": "Your detailed explanation here"
+    }
+    
+    The explanation should be:
+    1. Direct and focused on the question
+    2. Appropriate for the student's level
+    3. Connected to the main concept
+    4. Easy to understand
+    """
+    
+    user_prompt = f"""
+    Please provide a JSON response explaining the following question:
+    
+    Question: {question}
+    
+    Student Background:
+    - Grade Level: {user_profile['grade']}
+    - Subject: {user_profile['subject']}
+    - Learning Needs: {user_profile.get('needs', 'Not specified')}
+    
+    Main Concept: {concept_map.get('main_concept', '')}
+    
+    Remember to format your response as a JSON object with an "explanation" field.
+    """
+    
+    try:
+        response = call_llm(system_prompt, user_prompt)
+        return response.get("explanation", "No explanation could be generated.")
+    except Exception as e:
+        if DEBUG_MODE:
+            print(f"Error generating explanation: {str(e)}")
+        return "Could not generate explanation at this time."
+
+# 修改 analyze_question 函数
+def analyze_question(question, grade, subject, learning_needs):
+    """
+    Analyze question and return results as HTML
+    
+    Returns:
+        Tuple of (answer_section, question_answer, concept_graph, concept_cards, concepts_section, error_msg, card_explanation_section)
+    """
+    try:
+        # 首先返回加载状态
+        yield (
+            gr.update(visible=True),  # 显示答案区域
+            gr.update(value="<div class='loading'>Analyzing your question...</div>"),  # 显示加载信息
+            gr.update(value="<div class='loading'>Generating concept map...</div>"),  # 显示加载信息
+            gr.update(value="<div class='loading'>Preparing concept cards...</div>"),  # 显示加载信息
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(visible=False)  # 隐藏卡片解释区域
+        )
+
+        user_profile = {
+            "grade": grade,
+            "subject": subject,
+            "needs": learning_needs
+        }
+        
+        concept_map = decompose_concepts(user_profile, question)
+        
+        # 检查是否需要生成解释
+        explanation = concept_map.get("Explanation", "").strip()
+        if not explanation:
+            explanation = generate_explanation(question, concept_map, user_profile)
+            concept_map["Explanation"] = explanation
+        
+        # 创建节点字典
+        nodes_dict = {
+            concept["id"]: {
+                "name": concept["name"], 
+                "description": concept["description"]
+            }
+            for concept in concept_map["sub_concepts"]
+        }
+        
+        # 存储到应用状态
+        app_state.set_concepts_data(concept_map, nodes_dict)
+        
+        # 格式化解答HTML
+        answer_html = f"""
+        <div class="answer-content">
+            {concept_map["Explanation"]}
+        </div>
+        <div class="main-concept">
+            <strong>Main Concept:</strong> {concept_map.get("main_concept", "")}
+        </div>
+        """
+        
+        # 生成可视化图
+        graph_data_url = create_network_graph(concept_map)
+        graph_html = f"""
+        <div class="concept-graph-container">
+            <img src="{graph_data_url}" alt="Concept Knowledge Graph" />
+        </div>
+        """
+        
+        # 生成概念卡片HTML
+        cards_html = generate_concept_cards(concept_map)
+        
+        # 返回最终结果
+        yield (
+            gr.update(visible=True),
+            gr.update(value=answer_html),
+            gr.update(value=graph_html),
+            gr.update(value=cards_html),
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(visible=False)  # 隐藏卡片解释区域
+        )
+        
+    except Exception as e:
+        if DEBUG_MODE:
+            print(f"Error analyzing question: {str(e)}")
+            import traceback
+            print(traceback.format_exc())
+        
+        yield (
+            gr.update(visible=False),
+            gr.update(value=""),
+            gr.update(value=""),
+            gr.update(value=""),
+            gr.update(visible=False),
+            gr.update(visible=True, value=f"Error: {str(e)}"),
+            gr.update(visible=False)  # 出错时也隐藏卡片解释区域
+        )
+
+def format_explanation(explanation_data):
+    """
+    Format explanation data into HTML
+    
+    Args:
+        explanation_data: Dictionary with explanation data
+        
+    Returns:
+        Formatted explanation text
+    """
+    if not explanation_data:
+        return "No explanation available"
+    
+    explanation = explanation_data.get("explanation", "No explanation available")
+    return explanation
+
+def show_concept_explanation(concept_id):
+    if not concept_id or concept_id not in app_state.nodes_dict:
+        return {
+            explanation_section: gr.update(visible=False),
+            error_msg: gr.update(visible=True, value="⚠️ Invalid concept ID")
+        }
+    
+    # Get concept information
+    concept_info = app_state.nodes_dict[concept_id]
+    concept_name = concept_info["name"]
+    concept_description = concept_info["description"]
+    
+    # First check from cache
+    explanation_data = app_state.get_cached_explanation(concept_id)
+    
+    if not explanation_data:
+        try:
+            # 使用 llm_utils 替代 llm_chain
+            user_profile = {
+                "grade": app_state.user_profile.get("grade", "High School"),
+                "subject": app_state.user_profile.get("subject", "Math"),
+                "needs": app_state.user_profile.get("needs", "")
+            }
+            
+            explanation_data = get_concept_explanation(
+                user_profile,
+                concept_id,
+                concept_name,
+                concept_description
+            )
+            
+            # 缓存结果
+            app_state.cache_concept_explanation(concept_id, explanation_data)
+            
+        except Exception as e:
+            if DEBUG_MODE:
+                print(f"Error explaining concept: {str(e)}")
+            return {
+                explanation_header: f"### {concept_name} Concept Explanation",
+                explanation_content: f"Error generating explanation: {str(e)}",
+                examples_content: "",
+                resources_content: "",
+                practice_content: "",
+                concepts_section: gr.update(visible=False),
+                explanation_section: gr.update(visible=True),
+                error_msg: gr.update(visible=False)
+            }
+    
+    # 从explanation_data提取和格式化内容
+    explanation = explanation_data.get("explanation", "No explanation available")
+    
+    # Format examples
+    examples_html = "<div class='examples-container'>"
+    for idx, example in enumerate(explanation_data.get("examples", [])):
+        examples_html += f"""
+        <div class="example-box">
+            <h4>Example {idx+1} ({example.get('difficulty', 'Difficulty not specified')})</h4>
+            <p><strong>Problem:</strong> {example.get('problem', 'None')}</p>
+            <p><strong>Solution:</strong> <pre style="white-space: pre-wrap;">{example.get('solution', 'None')}</pre></p>
+        </div>
+        """
+    examples_html += "</div>"
+    
+    # Format resources
+    resources_html = "<div class='resources-container'>"
+    if explanation_data.get("resources"):
+        for res in explanation_data.get("resources", []):
+            link_html = f"<a href='{res.get('link', '#')}' target='_blank'>View Resource</a>" if res.get('link') else ""
+            resources_html += f"""
+            <div class="resource-item">
+                <p><strong>{res.get('type', 'Resource')}:</strong> {res.get('title', 'Unnamed resource')}</p>
+                <p>{res.get('description', 'No description')}</p>
+                {link_html}
+            </div>
+            """
+    else:
+        resources_html += "<p>No related learning resources available</p>"
+    resources_html += "</div>"
+    
+    # Format practice problems
+    practice_html = "<div class='practice-container'>"
+    if explanation_data.get("practice_questions"):
+        for idx, question in enumerate(explanation_data.get("practice_questions", [])):
+            practice_html += f"""
+            <div class="example-box">
+                <h4>Practice Problem {idx+1} ({question.get('difficulty', 'Difficulty not specified')})</h4>
+                <p><strong>Question:</strong> {question.get('question', 'None')}</p>
+                <details>
+                    <summary>View Answer</summary>
+                    <p>{question.get('answer', 'None')}</p>
+                </details>
+            </div>
+            """
+    else:
+        practice_html += "<p>No practice problems available</p>"
+    practice_html += "</div>"
+    
+    return {
+        explanation_header: f"### {concept_name} Concept Explanation",
+        explanation_content: explanation,
+        examples_content: examples_html,
+        resources_content: resources_html,
+        practice_content: practice_html,
+        concepts_section: gr.update(visible=False),
+        explanation_section: gr.update(visible=True),
+        error_msg: gr.update(visible=False)
+    }
+
+def back_to_concepts():
+    return {
+        concepts_section: gr.update(visible=True),
+        explanation_section: gr.update(visible=False)
+    }
+
+# JS function to handle click events
+def handle_concept_click(concept_id):
+    if concept_id:
+        return show_concept_explanation(concept_id)
+    return None
+
+# 添加新函数，用于生成详细的概念解释
+def generate_card_explanation(concept_id: str) -> str:
+    """生成详细的概念解释
+    
+    Args:
+        concept_id: 概念ID
+        
+    Returns:
+        HTML格式的解释内容
+    """
+    try:
+        print(f"开始生成概念解释: {concept_id}")
+        
+        # 获取概念信息
+        concept_info = app_state.nodes_dict.get(concept_id)
+        if not concept_info:
+            raise ValueError(f"找不到概念信息: {concept_id}")
+            
+        concept_name = concept_info["name"]
+        concept_description = concept_info["description"]
+        
+        # 获取前置概念
+        prerequisites = []
+        if app_state.current_concepts_data and "relationships" in app_state.current_concepts_data:
+            for rel in app_state.current_concepts_data["relationships"]:
+                if rel.get("target") == concept_id and rel.get("type") == "prerequisite":
+                    source_id = rel.get("source")
+                    if source_id in app_state.nodes_dict:
+                        prerequisites.append(app_state.nodes_dict[source_id]["name"])
+        
+        # 修改system_prompt，明确指定所有必需字段
+        system_prompt = """You are an expert educational tutor. Please provide a clear and detailed explanation of the concept based on the student's grade level.
+
+Your response MUST be in the following JSON format and MUST include ALL of these fields:
+{
+    "explanation": "Detailed concept explanation",
+    "key_points": ["key point 1", "key point 2", ...],
+    "examples": [
+        {
+            "problem": "Example problem",
+            "solution": "Detailed solution steps",
+            "difficulty": "basic/intermediate/advanced"
+        }
+    ],
+    "practice": [
+        {
+            "question": "Practice question",
+            "answer": "Answer with explanation",
+            "difficulty": "basic/intermediate/advanced"
+        }
+    ],
+    "resources": [
+        {
+            "type": "Video/Article/Interactive/Book",
+            "title": "Resource title",
+            "description": "Brief description of the resource",
+            "link": "Optional URL to the resource"
+        }
+    ]
+}
+
+All fields are required. For resources, provide at least one learning resource that would help students understand this concept better.
+
+Ensure that:
+1. The explanation is appropriate for the student's grade level
+2. Use appropriate terminology
+3. Include specific examples
+4. Provide clear solution steps
+5. Include relevant learning resources"""
+        
+        user_prompt = f"""Please explain this concept and provide ALL required information including explanation, key points, examples, practice questions, and learning resources:
+
+Concept Name: {concept_name}
+Concept Description: {concept_description}
+Prerequisites: {', '.join(prerequisites) if prerequisites else 'None'}
+
+Student Background:
+- Grade Level: {app_state.user_profile.get('grade', 'High School')}
+- Subject: {app_state.user_profile.get('subject', 'Math')}
+- Learning Needs: {app_state.user_profile.get('needs', 'Comprehensive understanding')}
+
+Remember to include all required sections in your response."""
+
+        print("正在调用LLM生成解释...")  # 添加调试日志
+        
+        # 导入并调用LLM
+        from llm_utils import call_llm
+        try:
+            response = call_llm(system_prompt, user_prompt)
+            print("LLM响应:", response)  # 添加调试日志
+            
+            if not isinstance(response, dict):
+                raise ValueError("LLM返回的响应格式不正确")
+                
+        except Exception as llm_error:
+            print(f"调用LLM时出错: {str(llm_error)}")
+            raise
+        
+        # 修改formatted_explanation部分
+        formatted_explanation = f"""
+        <div class="card-explanation">
+            <h3>{concept_name}</h3>
+            
+            <div class="explanation-section">
+                <h4>📚 Concept Explanation</h4>
+                <div class="content-box">
+                    {response.get('explanation', 'No explanation available')}
+                </div>
+            </div>
+            
+            <div class="key-points-section">
+                <h4>🎯 Key Points</h4>
+                <ul>
+                    {''.join([f'<li>{point}</li>' for point in response.get('key_points', [])])}
+                </ul>
+            </div>
+            
+            <div class="examples-section">
+                <h4>📝 Example Analysis</h4>
+                {''.join([
+                    f'''
+                    <div class="example-box">
+                        <div class="example-header">
+                            <span class="difficulty-badge">{example.get('difficulty', 'Basic')}</span>
+                        </div>
+                        <div class="example-problem">
+                            <strong>Example:</strong>{example.get('problem', '')}
+                        </div>
+                        <div class="solution-box">
+                            <strong>Solution:</strong>{example.get('solution', '')}
+                        </div>
+                    </div>
+                    '''
+                    for example in response.get('examples', [])
+                ])}
+            </div>
+            
+            <div class="practice-section">
+                <h4>✍️ Practice Problems</h4>
+                {''.join([
+                    f'''
+                    <div class="exercise-box">
+                        <div class="exercise-header">
+                            <span class="difficulty-badge">{practice.get('difficulty', 'Basic')}</span>
+                        </div>
+                        <div class="question">
+                            <strong>Problem:</strong>{practice.get('question', '')}
+                        </div>
+                        <details class="answer-details">
+                            <summary>View Answer</summary>
+                            <div class="solution-box">
+                                {practice.get('answer', '')}
+                            </div>
+                        </details>
+                    </div>
+                    '''
+                    for practice in response.get('practice', [])
+                ])}
+            </div>
+
+            <div class="resources-section">
+                <h4>📚 Learning Resources</h4>
+                {''.join([
+                    f'''
+                    <div class="resource-box">
+                        <div class="resource-header">
+                            <span class="resource-type">{resource.get('type', 'Resource')}</span>
+                        </div>
+                        <div class="resource-content">
+                            <strong>{resource.get('title', '')}</strong>
+                            <p>{resource.get('description', '')}</p>
+                            {f'<a href="{resource.get("link")}" target="_blank">View Resource</a>' if resource.get('link') else ''}
+                        </div>
+                    </div>
+                    '''
+                    for resource in response.get('resources', [])
+                ])}
+            </div>
+        </div>
+
+        <style>
+        .card-explanation {{
+            padding: 20px;
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }}
+        
+        .explanation-section, .key-points-section, .examples-section, 
+        .practice-section, .resources-section {{
+            margin-top: 20px;
+            padding: 15px;
+            background: #f8f9fa;
+            border-radius: 8px;
+        }}
+        
+        .content-box {{
+            line-height: 1.6;
+            color: #2c3e50;
+        }}
+        
+        .example-box, .exercise-box, .resource-box {{
+            background-color: #f1f8ff;
+            border-left: 4px solid #2196f3;
+            padding: 15px;
+            margin: 10px 0;
+            border-radius: 0 8px 8px 0;
+        }}
+        
+        .difficulty-badge, .resource-type {{
+            display: inline-block;
+            padding: 4px 8px;
+            border-radius: 12px;
+            font-size: 0.85em;
+            background: #e3f2fd;
+            color: #1976d2;
+            margin-bottom: 10px;
+        }}
+        
+        .solution-box {{
+            margin-top: 10px;
+            padding: 10px;
+            background: rgba(52, 152, 219, 0.05);
+            border-radius: 4px;
+        }}
+        
+        .answer-details summary {{
+            cursor: pointer;
+            color: #2196f3;
+            margin: 10px 0;
+        }}
+        
+        .resource-content a {{
+            display: inline-block;
+            margin-top: 10px;
+            color: #2196f3;
+            text-decoration: none;
+            padding: 5px 10px;
+            border: 1px solid #2196f3;
+            border-radius: 4px;
+        }}
+        
+        .resource-content a:hover {{
+            background: #e3f2fd;
+        }}
+        </style>
+        """
+        
+        # 缓存结果
+        app_state.cache_card_explanation(concept_id, formatted_explanation)
+        print(f"已缓存概念解释内容")
+        
+        return formatted_explanation
+        
+    except Exception as e:
+        import traceback
+        error_msg = f"生成解释时出错: {str(e)}"
+        print(error_msg)
+        print(traceback.format_exc())
+        return f"""<div class="error-message">
+            <h3>无法生成详细解释</h3>
+            <p>{error_msg}</p>
+            <h4>基本概念信息:</h4>
+            <p><strong>{concept_name}</strong>: {concept_description}</p>
+        </div>"""
+
+def handle_card_selection(concept_id: str) -> Dict:
+    """处理卡片选择事件并生成概念解释
+    
+    Args:
+        concept_id: 选中的概念ID
+        
+    Returns:
+        包含面板更新和内容的字典
+    """
+    try:
+        print(f"处理卡片选择: {concept_id}")
+        
+        # 首先检查缓存
+        cached_explanation = app_state.get_cached_card_explanation(concept_id)
+        if cached_explanation:
+            print("使用缓存的解释内容")
+            # 直接返回缓存的内容，不需要生成加载动画
+            return {
+                concept_detail_panel: gr.update(visible=True),
+                concept_detail_content: gr.update(value=cached_explanation, visible=True)
+            }
+            
+        # 获取概念信息
+        if not concept_id or concept_id not in app_state.nodes_dict:
+            raise ValueError(f"无效的概念ID: {concept_id}")
+            
+        # 显示加载动画
+        loading_html = """
+        <div class="loading">
+            <div class="loading-spinner"></div>
+            <div class="loading-text">正在生成概念解释...</div>
+        </div>
+        """
+        
+        # 先返回加载状态
+        yield {
+            concept_detail_panel: gr.update(visible=True),
+            concept_detail_content: gr.update(value=loading_html, visible=True)
+        }
+            
+        print("开始生成新的解释内容")
+        explanation_content = generate_card_explanation(concept_id)
+        
+        # 缓存生成的内容
+        app_state.cache_card_explanation(concept_id, explanation_content)
+        print(f"已缓存概念 {concept_id} 的解释内容")
+        
+        # 返回生成的内容
+        return {
+            concept_detail_panel: gr.update(visible=True),
+            concept_detail_content: gr.update(value=explanation_content, visible=True)
+        }
+        
+    except Exception as e:
+        import traceback
+        print(f"生成解释时出错: {str(e)}")
+        print(traceback.format_exc())
+        error_content = f"""
+        <div class="error-message">
+            <h3>生成解释时出错</h3>
+            <p>{str(e)}</p>
+        </div>
+        """
+        return {
+            concept_detail_panel: gr.update(visible=True),
+            concept_detail_content: gr.update(value=error_content, visible=True)
+        }
+
+def create_interface():
+    """
+    Create enhanced Gradio interface with better layout and styling
+    """
+    global expanded_concept_section, expanded_concept_name, expanded_concept_description
+    global key_points, examples, misconceptions, learning_tips, close_expanded
+    
+    # Custom CSS with improved styling
+    custom_css = """
+    /* Global styles */
+    body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
+        color: #333;
+        background-color: #f7f9fc;
+    }
+
+    /* Section styling */
+    .section {
+        background: white;
+        border-radius: 15px;
+        padding: 20px;
+        margin-bottom: 20px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    }
+    
+    .header-section {
+        background: linear-gradient(135deg, #2193b0, #6dd5ed);
+        color: white;
+        padding: 20px;
+        border-radius: 15px;
+        margin-bottom: 30px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    
+    .question-section {
+        background: #f8f9fa;
+    }
+    
+    /* Concept graph styling */
+    .concept-graph-container {
+        margin: 20px 0;
+        text-align: center;
+    }
+    .concept-graph-container img {
+        max-width: 100%;
+        border-radius: 10px;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+    }
+    
+    /* Button styles */
+    .primary-button {
+        background: linear-gradient(135deg, #3498db, #2980b9);
+        border: none;
+        color: white;
+        padding: 10px 20px;
+        border-radius: 5px;
+        cursor: pointer;
+        box-shadow: 0 4px 6px rgba(52, 152, 219, 0.3);
+        transition: all 0.3s ease;
+    }
+    
+    .primary-button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
+    }
+    
+    /* Tab styles */
+    .tabs {
+        border-bottom: 2px solid #e0e0e0;
+    }
+    
+    .tab-selected {
+        color: #3498db;
+        border-bottom: 2px solid #3498db;
+    }
+    
+    /* Error message styling */
+    .error-message {
+        color: #d32f2f;
+        background: #ffebee;
+        padding: 10px;
+        border-radius: 5px;
+        margin: 10px 0;
+        border-left: 4px solid #d32f2f;
+    }
+    
+    /* Concept card styles */
+    .concept-card {
+        transition: all 0.3s ease;
+        border: 1px solid #e0e0e0;
+        border-radius: 12px;
+        padding: 16px;
+        margin-bottom: 16px;
+        cursor: pointer;
+        background-color: #fff;
+        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+    }
+
+    .concept-card:hover {
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+        transform: translateY(-3px);
+        border-color: #bdc3c7;
+    }
+
+    .selected-card {
+        border-color: #3498db;
+        background-color: rgba(52, 152, 219, 0.05);
+        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.3);
+    }
+    """
+
+    # 自定义 JavaScript - 移动到HTML头部
+    custom_js_html = """
+    <script type="text/javascript">
+    // 确保函数在全局作用域定义
+    window.conceptCardClick = function(conceptId) {
+        console.log('卡片点击:', conceptId);
+        
+        // 找到隐藏输入框并更新
+        const cardSelectionInput = document.getElementById('card-selection');
+        if (cardSelectionInput) {
+            cardSelectionInput.value = conceptId;
+            cardSelectionInput.dispatchEvent(new Event('input', { bubbles: true }));
+            
+            // 更新选中样式
+            document.querySelectorAll('.concept-card').forEach(card => {
+                card.classList.remove('selected-card');
+                if (card.getAttribute('data-concept-id') === conceptId) {
+                    card.classList.add('selected-card');
+                }
+            });
+        }
+    }
+    
+    document.addEventListener('DOMContentLoaded', function() {
+        // 增强图像显示
+        const graphContainer = document.getElementById('concept-graph');
+        if (graphContainer) {
+            const observer = new MutationObserver(function(mutations) {
+                mutations.forEach(function(mutation) {
+                    if (mutation.addedNodes && mutation.addedNodes.length > 0) {
+                        const img = graphContainer.querySelector('img');
+                        if (img) {
+                            img.style.maxWidth = '100%';
+                            img.style.height = 'auto';
+                            img.style.borderRadius = '8px';
+                            img.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
+                        }
+                    }
+                });
+            });
+            
+            observer.observe(graphContainer, { childList: true, subtree: true });
+        }
+    });
+    </script>
+    """
+
+    with gr.Blocks(css=custom_css, title="Educational LLM Assistant") as demo:
+        # 添加自定义 JavaScript - 确保作为头部内容
+        gr.HTML(custom_js_html, elem_id="custom-js")
+        
+        # Header section
+        with gr.Row(elem_classes="header-section"):
+            with gr.Column(scale=2):
+                gr.Markdown("# 🎓 Educational LLM Assistant")
+                gr.Markdown("Interactive Learning Through AI-Powered Concept Breakdown")
+        
+        # Main content container
+        with gr.Row():
+            # Left column - Profile and Question
+            with gr.Column(scale=1):
+                # Profile section
+                with gr.Group(elem_classes="section"):
+                    gr.Markdown("### 👤 Learning Profile")
+                    with gr.Row():
+                        grade_input = gr.Dropdown(
+                            choices=["Elementary", "Middle School", "High School", "College", "Graduate"],
+                            label="Grade Level",
+                            value="High School"
+                        )
+                        subject_input = gr.Dropdown(
+                            choices=["Math", "Physics", "Chemistry", "Biology", "Computer Science"],
+                            label="Subject",
+                            value="Math"
+                        )
+                    needs_input = gr.TextArea(
+                        label="Learning Goals",
+                        placeholder="What do you want to achieve?",
+                        lines=3
+                    )
+                    profile_btn = gr.Button("Save Profile", elem_classes="primary-button")
+                    profile_status = gr.Markdown("*No profile set*")
+                
+                # Question section
+                with gr.Group(elem_classes="section question-section"):
+                    gr.Markdown("### ❓ Your Question")
+                    question_input = gr.TextArea(
+                        label="Enter your question",
+                        placeholder="What would you like to learn about?",
+                        lines=4
+                    )
+                    question_submit_btn = gr.Button(
+                        "Analyze Question",
+                        elem_classes="primary-button"
+                    )
+                
+                # Answer section
+                with gr.Group(visible=False, elem_classes="section answer-section") as answer_section:
+                    gr.Markdown("### 📝 Direct Answer")
+                    question_answer = gr.HTML(
+                        value="",
+                        elem_classes="answer-box"
+                    )
+                
+                # 新增可视化生成面板
+                with gr.Group(visible=False) as concept_detail_panel:
+                    gr.Markdown("### 🎯 概念详解")
+                    concept_detail_content = gr.HTML(
+                        value="",
+                        elem_classes="concept-detail-box"
+                    )
+            
+            # Right column - Concept Map and Explanation
+            with gr.Column(scale=2):
+                # Concept map section
+                with gr.Group(visible=False, elem_classes="section") as concepts_section:
+                    gr.Markdown("### 🔍 Knowledge Map")
+                    # 使用HTML代替Plot
+                    concept_graph = gr.HTML(
+                        label="Concept Graph",
+                        elem_id="concept-graph",
+                        elem_classes="concept-graph-container"
+                    )
+                    
+                    with gr.Row():
+                        concept_cards = gr.HTML(
+                            label="Related Concepts",
+                            elem_classes="concept-cards-area"
+                        )
+                
+                # Explanation section
+                with gr.Group(visible=False, elem_classes="section") as explanation_section:
+                    explanation_header = gr.Markdown("### 📚 Concept Explanation")
+                    
+                    with gr.Tabs(elem_classes="tabs") as explanation_tabs:
+                        with gr.TabItem("📖 Explanation", elem_classes="tab-content"):
+                            explanation_content = gr.Markdown()
+                        with gr.TabItem("📝 Examples", elem_classes="tab-content"):
+                            examples_content = gr.HTML()
+                        with gr.TabItem("🔖 Resources", elem_classes="tab-content"):
+                            resources_content = gr.HTML()
+                        with gr.TabItem("✏️ Practice", elem_classes="tab-content"):
+                            practice_content = gr.HTML()
+                    
+                    back_btn = gr.Button(
+                        "← Back to Concept Map",
+                        elem_classes="primary-button"
+                    )
+                
+                # 添加扩展内容部分
+                with gr.Group(visible=False, elem_classes="section") as expanded_concept_section:
+                    gr.Markdown("### 📚 Expanded Concept Details")
+                    expanded_concept_name = gr.Markdown("")
+                    expanded_concept_description = gr.Markdown("")
+                    with gr.Accordion("Key Points", open=True):
+                        key_points = gr.Markdown("")
+                    with gr.Accordion("Examples", open=True):
+                        examples = gr.Markdown("")
+                    with gr.Accordion("Common Misconceptions", open=True):
+                        misconceptions = gr.Markdown("")
+                    with gr.Accordion("Learning Tips", open=True):
+                        learning_tips = gr.Markdown("")
+                    close_expanded = gr.Button("Back to Concepts", variant="secondary")
+        
+        # Error message
+        error_msg = gr.Markdown(visible=False, elem_classes="error-message")
+        
+        # 隐藏的概念选择输入框
+        concept_selection = gr.Textbox(visible=False, elem_id="concept-selection")
+        
+        # 新增的卡片点击选择输入框
+        card_selection = gr.Textbox(visible=False, elem_id="card-selection")
+        
+        # Event bindings
+        profile_btn.click(
+            update_profile,
+            [grade_input, subject_input, needs_input],
+            profile_status
+        )
+        
+        question_submit_btn.click(
+            fn=analyze_question,
+            inputs=[question_input, grade_input, subject_input, needs_input],
+            outputs=[
+                answer_section, 
+                question_answer, 
+                concept_graph, 
+                concept_cards, 
+                concepts_section, 
+                error_msg,
+                # 重置卡片解释部分
+                concept_detail_panel
+            ],
+            api_name=False,
+            show_progress=True,
+        )
+        
+        concept_selection.change(
+            fn=handle_concept_click,
+            inputs=[concept_selection],
+            outputs=[
+                explanation_header, 
+                explanation_content, 
+                examples_content, 
+                resources_content, 
+                practice_content, 
+                concepts_section, 
+                explanation_section, 
+                error_msg
+            ]
+        )
+        
+        # 新增的卡片点击事件处理
+        card_selection.input(
+            fn=handle_card_selection,
+            inputs=[card_selection],
+            outputs=[
+                concept_detail_panel,
+                concept_detail_content
+            ],
+            api_name="handle_card_click"
+        )
+        
+        back_btn.click(
+            fn=back_to_concepts,
+            inputs=None,
+            outputs=[concepts_section, explanation_section]
+        )
+
+        close_expanded.click(
+            fn=lambda: {
+                expanded_concept_section: gr.update(visible=False),
+                concepts_section: gr.update(visible=True)
+            },
+            inputs=[],
+            outputs=[expanded_concept_section, concepts_section]
+        )
+
+    # 添加FastAPI集成
+    gr.mount_gradio_app(app, demo, path="/")
+    
+    return demo
+
+if __name__ == "__main__":
+    demo = create_interface()
+    # 使用uvicorn启动
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7861)