Upload 19 files

README.md

@@ -1,13 +1,220 @@
----
-title: NexusLearnAI
-emoji: 📊
-colorFrom: gray
-colorTo: gray
-sdk: gradio
-sdk_version: 5.23.1
-app_file: app.py
-pinned: false
-license: apache-2.0
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# LLM Educational Assistant Platform
+
+An educational assistant platform built on Gradio, utilizing large language models to help students better understand complex concepts. Through concept decomposition and visualization, it provides personalized learning experiences for students.
+
+## Features
+
+1. **User Profile Customization**
+   - Input grade, subject, and learning needs
+   - Receive personalized learning experiences and explanations
+
+2. **Concept Decomposition and Visualization**
+   - Break down complex problems into basic concepts
+   - Visualize concept relationships through tree diagrams or network graphs
+   - Intuitively display dependencies and connections between concepts
+
+3. **Interactive Learning Experience**
+   - Click on any sub-concept to get detailed explanations
+   - View targeted examples and exercises
+   - Get recommendations for relevant learning resources
+
+4. **Progress Saving and Caching**
+   - Cache generated concept explanations to improve response speed
+   - Save learning records for easy review and revision
+
+## Installation and Running
+
+### Prerequisites
+
+- Python 3.7+ 
+- pip (Python package manager)
+
+```angular2html
+conda create -n ai_new_dream python=3.11
+pip install -r requirements.txt
+export OPENAI_API_KEY="your-secret-api-key"
+```
+### Automatic Installation and Running
+
+**Linux/Mac:**
+```bash
+# Add execution permission
+chmod +x run.sh
+
+# Run startup script
+./run.sh
+```
+
+**Windows:**
+```
+# Double-click to run, or run in command prompt
+run.bat
+```
+
+### Manual Installation and Running
+
+```bash
+# Create virtual environment
+python -m venv venv
+
+# Activate virtual environment
+# On Windows:
+venv\Scripts\activate
+# On Linux/Mac:
+source venv/bin/activate
+
+# Install dependencies
+pip install -r requirements.txt
+
+# Run application
+python app.py
+```
+
+## Project Structure
+
+```
+.
+├── app.py              # Main application file
+├── prompts.py          # LLM prompt templates
+├── llm_utils.py        # LLM utility functions
+├── visualization.py    # Concept graph visualization module
+├── cache_utils.py      # Caching utilities
+├── concept_handler.js  # JavaScript for concept click handling
+├── requirements.txt    # Project dependencies
+├── run.sh              # Linux/Mac startup script
+└── run.bat             # Windows startup script
+```
+
+## Integrated LLM
+
+This application is integrated with the OpenAI API using the `gpt4omini` model. The implementation is in the `call_llm` function in the `llm_utils.py` file:
+
+```python
+def call_llm(prompt: str) -> str:
+    """Call the OpenAI API with gpt4omini model"""
+    try:
+        from openai import OpenAI
+        client = OpenAI(api_key="YOUR_API_KEY")
+        response = client.chat.completions.create(
+            model="gpt4omini",
+            messages=[
+                {"role": "system", "content": "You are a helpful education assistant."},
+                {"role": "user", "content": prompt}
+            ]
+        )
+        return response.choices[0].message.content
+    except Exception as e:
+        # Fallback to mock data if API call fails
+        print(f"Error calling OpenAI API: {e}")
+        # ...
+```
+
+If the API call fails, the system falls back to mock data to demonstrate functionality.
+
+## Customization and Extension
+
+- **Adding New Subjects**: Add new subject options in the `subject_input` options in `app.py`
+- **Adjusting Prompt Templates**: Modify the prompt templates in `prompts.py` to implement specific teaching styles or methods
+- **Enhancing Visualization**: Modify the visualization functions in `visualization.py` to implement richer concept graph representations
+- **Changing LLM Model**: To use a different model, update the `model` parameter in the `call_llm` function in `llm_utils.py`
+
+## Contributions and Feedback
+
+Questions, suggestions, or code contributions are welcome to help improve this educational assistant platform!
+
+## 教育LLM应用
+
+这是一个基于大语言模型的教育应用，旨在帮助学生分解和理解复杂的学术概念。
+
+### 功能特点
+
+- 根据学生的年级和学科自动调整内容难度
+- 将复杂问题分解为相互关联的子概念
+- 生成可视化的知识图谱
+- 为每个概念提供详细解释、示例、学习资源和练习题
+
+### 如何运行
+
+#### 使用脚本运行（推荐）
+
+1. 确保您已安装Python 3.7或更高版本
+2. 在终端中导航到项目目录
+
+对于Mac/Linux用户:
+```bash
+chmod +x run.sh  # 添加执行权限
+./run.sh         # 运行脚本
+```
+
+对于Windows用户:
+```
+run.bat
+```
+
+#### 手动设置
+
+1. 创建并激活虚拟环境:
+```bash
+python -m venv venv
+source venv/bin/activate  # Mac/Linux
+venv\Scripts\activate     # Windows
+```
+
+2. 安装依赖:
+```bash
+pip install -r requirements.txt
+```
+
+3. 启动应用:
+```bash
+python app.py
+```
+
+### 配置OpenAI API
+
+应用使用OpenAI API进行概念分解和解释。在`config.py`文件中设置您的API密钥：
+
+```python
+OPENAI_API_KEY = "您的API密钥"  # 替换为您的实际API密钥
+```
+
+您也可以调整其他配置参数：
+- `OPENAI_MODEL`: 要使用的OpenAI模型名称
+- `OPENAI_TIMEOUT`: API调用超时时间（秒）
+- `OPENAI_MAX_RETRIES`: 请求失败时的最大重试次数
+- `DEBUG_MODE`: 是否启用调试输出
+- `USE_FALLBACK_DATA`: API失败时是否使用备用数据
+- `CACHE_ENABLED`: 是否启用响应缓存
+
+### 系统架构
+
+应用由以下主要组件组成：
+
+1. **app.py** - 主应用文件，包含Gradio界面
+2. **llm_utils.py** - LLM调用和处理函数
+3. **visualization.py** - 知识图谱可视化
+4. **prompts.py** - LLM提示模板
+5. **cache_utils.py** - 响应缓存功能
+6. **config.py** - 应用配置
+7. **concept_handler.py** - 备用模拟数据（API失败时使用）
+
+### 自定义和扩展
+
+您可以通过以下方式自定义应用：
+
+1. **添加新学科**: 扩展prompts.py中的领域特定提示
+2. **调整提示模板**: 修改prompts.py中的系统和用户提示
+3. **增强可视化**: 在visualization.py中调整知识图谱的生成
+4. **更改模型**: 在config.py中指定不同的OpenAI模型
+
+### 故障排除
+
+如果遇到连接错误：
+1. 检查您的API密钥是否正确
+2. 确认您的网络连接正常
+3. 检查模型名称是否正确（例如："gpt-4o-mini"）
+4. 查看应用的调试输出（启用DEBUG_MODE）
+
+### 贡献
+
+欢迎提交问题报告和拉取请求来改进这个项目。 

app.py

@@ -13,483 +13,31 @@ 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;
-    }
+def ensure_assets_directory():
+    """确保assets目录存在并包含必要的静态文件"""
+    # 创建assets目录
+    os.makedirs("assets", exist_ok=True)
     
-    .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;
-}
+    # 将CSS内容写入文件
+    css_path = os.path.join("assets", "style.css")
+    if not os.path.exists(css_path):
+        with open(css_path, "w", encoding="utf-8") as f:
+            f.write(custom_css)  # 使用之前定义的custom_css内容
+
+# 读取CSS文件
+def load_css():
+    """读取CSS文件内容"""
+    css_path = os.path.join("assets", "style.css")
+    try:
+        with open(css_path, "r", encoding="utf-8") as f:
+            return f.read()
+    except Exception as e:
+        print(f"读取CSS文件失败: {str(e)}")
+        return ""  # 如果读取失败，返回空字符串
 
-/* 旋转动画 */
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-"""
+# 在应用启动时初始化
+ensure_assets_directory()
+custom_css = load_css()
 
 # Custom JavaScript code
 custom_js = """
@@ -1698,11 +1246,4 @@ def create_interface():
 if __name__ == "__main__":
     demo = create_interface()
     
-    # 检查是否在Hugging Face空间中运行
-    if os.getenv("SPACE_ID"):
-        # Hugging Face空间环境
-        demo.launch()
-    else:
-        # 本地环境
-        import uvicorn
-        uvicorn.run(app, host="0.0.0.0", port=7861)
+    demo.launch()

assets/script.js

@@ -0,0 +1,39 @@
+// 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 });
+    }
+});

assets/style.css

@@ -0,0 +1,474 @@
+/* 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); }
+}

requirements.txt

@@ -1,8 +1,299 @@
+accelerate==0.25.0
+acres==0.1.0
+aiofiles==23.2.1
+aiohttp==3.9.1
+aiosignal==1.3.1
+altair==5.5.0
+amightygirl.paapi5-python-sdk==1.0.0
+annotated-types==0.6.0
+anyio==3.7.1
+anytree==2.12.1
+APScheduler==3.10.4
+asttokens==3.0.0
+async-timeout==4.0.3
+attrs==23.1.0
+Authlib==1.3.2
+backcall==0.2.0
+bcrypt==4.2.0
+beautifulsoup4==4.12.2
+BingImageCreator==0.5.0
+bleach==6.2.0
+blinker==1.8.2
+blis==1.0.1
+boto3==1.35.52
+botocore==1.35.52
+cachelib==0.9.0
+catalogue==2.0.10
+certifi==2024.8.30
+cffi==1.16.0
+chardet==5.2.0
+charset-normalizer==3.3.2
+ci-info==0.3.0
+click==8.1.7
+cloudpathlib==0.20.0
+command-not-found==0.3
+confection==0.1.5
+configobj==5.0.9
+configparser==7.1.0
+contourpy==1.3.1
+cryptography==3.4.8
+curl-cffi==0.5.10
+cycler==0.12.1
+cymem==2.0.10
+dataclasses-json==0.5.14
+dbus-python==1.2.18
+decorator==5.1.1
+defusedxml==0.7.1
+Deprecated==1.2.14
+diffusers==0.24.0
+distro==1.7.0
+distro-info===1.1build1
+docopt==0.6.2
+duckduckgo-search==4.1.0
+EdgeGPT==0.6.10
+et_xmlfile==2.0.0
+etelemetry==0.3.1
+exceptiongroup==1.2.0
+executing==2.2.0
+faiss-cpu==1.7.4
+faiss-gpu==1.7.2
 fastapi==0.115.12
+fastjsonschema==2.21.1
+ffmpy==0.5.0
+filelock==3.13.1
+fitz==0.0.1.dev2
+Flask==3.0.3
+Flask-APScheduler==1.13.1
+Flask-Caching==2.3.0
+Flask-Cors==5.0.0
+Flask-JWT-Extended==4.6.0
+Flask-Limiter==3.8.0
+Flask-WTF==1.2.2
+fonttools==4.55.0
+frontend==0.0.3
+frozenlist==1.4.1
+fsspec==2023.12.2
+GoogleBard==2.1.0
+gpt4-openai-api==0.9.0
 gradio==5.23.1
+gradio_client==1.8.0
+greenlet==3.0.1
+groovy==0.1.2
+gunicorn==23.0.0
+gyp==0.1
+h11==0.14.0
+httpcore==1.0.2
+httplib2==0.20.2
+httpx==0.25.2
+hugchat==0.3.8
+huggingface-hub==0.29.3
+idna==3.8
+importlib-metadata==4.6.4
+importlib_resources==6.4.5
+iniconfig==2.0.0
+ipython==8.12.3
+isodate==0.6.1
+itsdangerous==2.2.0
+jedi==0.19.2
+jeepney==0.7.1
+Jinja2==3.1.2
+jmespath==1.0.1
+joblib==1.4.2
+jsonpatch==1.33
+jsonpointer==2.4
+jsonschema==4.23.0
+jsonschema-specifications==2024.10.1
+jupyter_client==8.6.3
+jupyter_core==5.7.2
+jupyterlab_pygments==0.3.0
+keyring==23.5.0
+kiwisolver==1.4.7
 langchain==0.0.352
+langchain-community==0.0.3
+langchain-core==0.1.1
+langchain-experimental==0.0.47
+langcodes==3.5.0
+langsmith==0.0.71
+language_data==1.3.0
+lark==1.1.8
+# Editable install with no version control (latex_marker==0.1)
+-e /mnt/d/知识库/Obsidian Vault/Upenn学习资源/Upenn 课程/HW 8000/tex2bbox
+launchpadlib==1.10.16
+lazr.restfulclient==0.14.4
+lazr.uri==1.0.6
+limits==3.13.0
+looseversion==1.3.0
+lxml==4.9.3
+marisa-trie==1.2.1
+markdown-it-py==3.0.0
+markdownify==0.11.6
+MarkupSafe==2.1.3
+marshmallow==3.20.1
 matplotlib==3.7.3
+matplotlib-inline==0.1.7
+mdurl==0.1.2
+mistune==3.1.3
+more-itertools==8.10.0
+mpmath==1.3.0
+multidict==6.0.4
+murmurhash==1.0.11
+mypy-extensions==1.0.0
+narwhals==1.32.0
+nbclient==0.10.2
+nbconvert==7.16.6
+nbformat==5.10.4
+nest-asyncio==1.5.8
+netifaces==0.11.0
 networkx==3.1
-openai==1.68.2
-pydantic==2.10.6
-uvicorn==0.34.0
+nibabel==5.3.2
+nipype==1.9.1
+nltk==3.9.1
+numexpr==2.8.8
+numpy==1.26.0
+nvidia-cublas-cu12==12.1.3.1
+nvidia-cuda-cupti-cu12==12.1.105
+nvidia-cuda-nvrtc-cu12==12.1.105
+nvidia-cuda-runtime-cu12==12.1.105
+nvidia-cudnn-cu12==8.9.2.26
+nvidia-cufft-cu12==11.0.2.54
+nvidia-curand-cu12==10.3.2.106
+nvidia-cusolver-cu12==11.4.5.107
+nvidia-cusparse-cu12==12.1.0.106
+nvidia-nccl-cu12==2.18.1
+nvidia-nvjitlink-cu12==12.3.101
+nvidia-nvtx-cu12==12.1.105
+oauthlib==3.2.0
+openai==1.12.0
+openapi-schema-pydantic==1.2.4
+openpyxl==3.1.5
+ordered-set==4.1.0
+orjson==3.10.16
+outcome==1.3.0.post0
+packaging==23.2
+pandas==2.1.4
+pandocfilters==1.5.1
+parso==0.8.4
+pathlib==1.0.1
+pexpect==4.9.0
+pickleshare==0.7.5
+Pillow==10.0.0
+pipreqs==0.5.0
+platformdirs==4.3.7
+playwright==1.40.0
+pluggy==1.3.0
+preshed==3.0.9
+prompt-toolkit==3.0.43
+prov==2.0.1
+psutil==5.9.6
+ptyprocess==0.7.0
+pure_eval==0.2.3
+puremagic==1.28
+py==1.11.0
+pycparser==2.21
+pydantic==2.4.2
+pydantic_core==2.10.1
+pydot==3.0.3
+pydub==0.25.1
+pyee==11.0.1
+Pygments==2.17.2
+PyGObject==3.42.1
+PyJWT==2.3.0
+PyLaTeX==1.4.2
+pylatexenc==2.10
+PyMuPDF==1.25.0
+PyMySQL==1.1.1
+pyparsing==3.2.0
+PySocks==1.7.1
+pytest==7.4.3
+pytest-base-url==2.0.0
+pytest-playwright==0.4.3
+python-apt==2.4.0+ubuntu1
+python-dateutil==2.9.0.post0
+python-dotenv==1.0.0
+python-multipart==0.0.20
+python-slugify==8.0.1
+pytz==2023.3.post1
+pyxnat==1.6.2
+PyYAML==5.4.1
+pyzmq==26.3.0
+rdflib==6.3.2
+redis==5.2.0
+referencing==0.36.2
+regex==2023.10.3
+requests==2.31.0
+requests-toolbelt==1.0.0
+retry==0.9.2
+rich==13.7.0
+rpds-py==0.23.1
+ruff==0.11.2
+s3transfer==0.10.3
+safehttpx==0.1.6
+safetensors==0.4.1
+scikit-learn==1.5.2
+scipy==1.14.1
+seaborn==0.13.2
+SecretStorage==3.3.1
+selenium==4.16.0
+semantic-version==2.10.0
+sentence-transformers==3.3.0
+shellingham==1.5.4
+simplejson==3.19.3
+six==1.16.0
+smart-open==7.0.5
+sniffio==1.3.0
+socksio==1.0.0
+sortedcontainers==2.4.0
+soupsieve==2.5
+spacy==3.8.2
+spacy-legacy==3.0.12
+spacy-loggers==1.0.5
+SQLAlchemy==2.0.23
+srsly==2.4.8
+stack-data==0.6.3
+starlette==0.46.1
+sympy==1.12
+systemd-python==234
+tabulate==0.9.0
+tenacity==8.2.3
+text-unidecode==1.3
+thinc==8.3.2
+threadpoolctl==3.5.0
+tiktoken==0.8.0
+tinycss2==1.4.0
+tokenizers==0.20.3
+tomli==2.0.1
+tomlkit==0.12.0
+torch==2.1.2
+tornado==6.4.2
+tqdm==4.66.1
+traitlets==5.14.3
+traits==6.4.3
+transformers==4.46.2
+trio==0.23.2
+trio-websocket==0.11.1
+triton==2.1.0
+typer==0.14.0
+typing-inspect==0.9.0
+typing_extensions==4.12.2
+tzdata==2023.3
+tzlocal==5.2
+ubuntu-advantage-tools==8001
+ufw==0.36.1
+unattended-upgrades==0.1
+undetected-chromedriver==3.5.4
+urllib3==2.2.2
+uvicorn==0.23.2
+wadllib==1.3.6
+wasabi==1.1.3
+wcwidth==0.2.12
+weasel==0.4.1
+webencodings==0.5.1
+websockets==11.0.3
+Werkzeug==3.0.4
+wikipedia==1.4.0
+wrapt==1.16.0
+wsproto==1.2.0
+WTForms==3.2.1
+yarg==0.1.9
+yarl==1.9.4
+zipp==1.0.0

style.css

@@ -0,0 +1,48 @@
+/* Global styles */
+:root {
+    --primary-color: #3498db;
+    --secondary-color: #2c3e50;
+    --background-color: #f7f9fc;
+    --border-color: #e0e0e0;
+    --shadow-color: rgba(0,0,0,0.1);
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif !important;
+    color: #333 !important;
+    background-color: var(--background-color) !important;
+}
+
+/* 强制应用容器样式 */
+.gradio-container {
+    max-width: 100% !important;
+    padding: 0 !important;
+}
+
+/* 确保section样式 */
+.section {
+    background: white !important;
+    border-radius: 15px !important;
+    padding: 20px !important;
+    margin-bottom: 20px !important;
+    box-shadow: 0 2px 4px var(--shadow-color) !important;
+}
+
+/* 确保卡片样式 */
+.concept-card {
+    transition: all 0.3s ease !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 12px !important;
+    padding: 16px !important;
+    margin-bottom: 16px !important;
+    cursor: pointer !important;
+    background-color: white !important;
+    box-shadow: 0 2px 5px var(--shadow-color) !important;
+}
+
+.concept-card:hover {
+    box-shadow: 0 5px 15px var(--shadow-color) !important;
+    transform: translateY(-3px) !important;
+}
+
+/* 其他样式保持不变，但添加 !important */ 

visualization.py

@@ -16,7 +16,7 @@ matplotlib.use('Agg')
 # Set up Chinese font support
 # Try to find suitable Chinese fonts
 font_found = False
-chinese_fonts = ['DejaVu Sans', 'SimHei', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'AR PL UMing CN', 'STSong', 'NSimSun', 'FangSong', 'KaiTi']
+chinese_fonts = ['SimHei', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'AR PL UMing CN', 'STSong', 'NSimSun', 'FangSong', 'KaiTi']
 for font in chinese_fonts:
     try:
         matplotlib.font_manager.findfont(font)