Initial commit

.dockerignore

@@ -0,0 +1,47 @@
+# 排除特定文件夹
+hf_ai_teaching_assistant/
+VectorRAG/
+
+# 版本控制
+.git
+.gitignore
+.gitattributes
+
+# 环境变量和敏感信息
+.env
+*.env
+
+# 缓存和临时文件
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+.pytest_cache/
+.coverage
+htmlcov/
+
+# 系统文件
+.DS_Store
+Thumbs.db
+*.swp
+*.swo
+*~
+
+# 日志文件
+*.log
+logs/
+log/
+
+# 数据库文件
+*.sqlite3
+*.db
+
+# 上传的示例文件，应该在运行时创建
+uploads/*.pdf
+uploads/*.txt
+
+# 编辑器配置
+.vscode/
+.idea/
+*.sublime-* 

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,75 @@
+# 环境变量文件（包含API密钥）
+.env
+*.env
+
+# 排除特定文件夹
+/hf_ai_teaching_assistant/
+hf_ai_teaching_assistant/
+
+# 上传的文件目录
+/uploads/
+uploads/
+*.pdf
+*.txt
+*.doc
+*.docx
+
+# 虚拟环境
+.venv/
+venv/
+ENV/
+env/
+.virtualenv/
+virtualenv/
+.python-version
+
+# Python缓存文件
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+.pytest_cache/
+.coverage
+htmlcov/
+
+# 系统文件
+.DS_Store
+Thumbs.db
+*.swp
+*.swo
+*~
+
+# 日志文件
+*.log
+logs/
+log/
+
+# 数据库文件
+*.sqlite3
+*.db
+VectorRAG/chroma.sqlite3
+
+# 个人配置文件
+.vscode/
+.idea/
+*.sublime-*
+
+# 临时文件
+temp/
+tmp/
+
+# 编译生成的文件
+dist/
+build/
+*.egg-info/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# 其他可能包含敏感信息的文件
+config.json
+secrets.json
+credentials.json
+token.json
+*_key.json

Dockerfile

@@ -0,0 +1,19 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY . .
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+# 确保上传目录存在
+RUN mkdir -p uploads
+
+# 设置环境变量
+ENV PYTHONUNBUFFERED=1
+
+# 暴露端口
+EXPOSE 7860
+
+# 启动命令
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "gemini_chatbot:app"]

README.md

@@ -0,0 +1,51 @@
+---
+title: Gemini AI Teaching Assistant
+emoji: 🤖
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 7860
+pinned: false
+license: mit
+---
+
+# Gemini AI Teaching Assistant
+
+An intelligent teaching assistant powered by Google's Gemini API, designed to help educators organize teaching materials and interact with educational content.
+
+## Features
+
+- Upload and process PDF and TXT documents
+- Automatic summarization and tagging of documents
+- Interactive knowledge map visualization
+- Dynamic knowledge folder organization
+- Generate word clouds from document content
+- Chat with AI about uploaded documents
+
+## Usage
+
+1. Upload your teaching materials (PDF/TXT)
+2. View automatically generated summaries and tags
+3. Browse your knowledge folders organized by tags
+4. Use the knowledge map to visualize connections
+5. Chat with the AI assistant about your documents
+
+## Setup for Hugging Face
+
+1. Fork this repository to your Hugging Face account
+2. Add your Google Gemini API key as a secret in your Hugging Face space:
+   - Go to Settings > Repository Secrets
+   - Add a new secret with name `GOOGLE_API_KEY` and your API key as the value
+
+## Technology
+
+- Flask web framework
+- Google Gemini API for AI capabilities
+- PDF text extraction
+- Natural language processing
+- Interactive visualizations
+
+## Requirements
+
+- Google API key for Gemini API (required for functionality)
+- Minimum 2GB RAM Space recommended

app.py

@@ -0,0 +1,181 @@
+import chainlit as cl
+import requests
+import google.generativeai as genai
+import os
+import json
+from typing import List
+import tempfile
+
+# Langflow API configuration
+LANGFLOW_URL = "http://127.0.0.1:7861/api/v1/run/YOUR_NEW_FLOW_ID"  # 替换为新的 Flow ID
+HEADERS = {
+    "Content-Type": "application/json"
+}
+
+# Gemini API configuration
+GOOGLE_API_KEY = os.getenv("GOOGLE_API_KEY", "your_api_key_here")
+genai.configure(api_key=GOOGLE_API_KEY)
+model = genai.GenerativeModel('gemini-pro')
+
+# 初始化文件存储
+@cl.on_chat_start
+async def start():
+    # 初始化空的文件列表
+    cl.user_session.set("uploaded_files", [])
+    
+    # 创建文件上传组件
+    await cl.Message(
+        content="欢迎！您可以上传文件或直接提问。我会同时使用 Langflow 和 Gemini 来回答。",
+        actions=[
+            cl.Action(name="upload_file", label="上传文件", description="上传PDF或TXT文件进行分析")
+        ]
+    ).send()
+
+# 处理文件上传动作
+@cl.action_callback("upload_file")
+async def handle_upload_action():
+    # 在此处要求用户上传文件
+    files = await cl.AskFileMessage(
+        content="请选择要上传的文件(PDF或TXT)",
+        accept=["application/pdf", "text/plain"],
+        max_size_mb=20,
+        timeout=180,
+    ).send()
+
+    if not files:
+        await cl.Message("没有收到文件或上传已取消。").send()
+        return
+
+    # 处理上传的文件
+    await process_files(files)
+
+# 处理文件的函数
+async def process_files(files: List):
+    uploaded_files = cl.user_session.get("uploaded_files", [])
+    
+    for file in files:
+        # 创建临时文件
+        with tempfile.NamedTemporaryFile(delete=False, suffix=f".{file.name.split('.')[-1]}") as temp_file:
+            temp_file.write(file.content)
+            temp_path = temp_file.name
+        
+        # 提取文件内容
+        content = ""
+        
+        if file.name.lower().endswith('.pdf'):
+            try:
+                import PyPDF2
+                with open(temp_path, 'rb') as f:
+                    reader = PyPDF2.PdfReader(f)
+                    for page in reader.pages:
+                        content += page.extract_text() or ""
+            except Exception as e:
+                await cl.Message(f"读取PDF文件时出错: {str(e)}").send()
+                content = f"[无法读取PDF内容: {str(e)}]"
+                
+        elif file.name.lower().endswith('.txt'):
+            try:
+                with open(temp_path, 'r', encoding='utf-8') as f:
+                    content = f.read()
+            except Exception as e:
+                await cl.Message(f"读取TXT文件时出错: {str(e)}").send()
+                content = f"[无法读取TXT内容: {str(e)}]"
+        
+        # 清理临时文件
+        os.unlink(temp_path)
+        
+        # 将内容限制在合理范围内（对于大文件）
+        if len(content) > 10000:
+            content_to_save = content[:10000] + "... [内容被截断]"
+        else:
+            content_to_save = content
+        
+        # 获取文件摘要
+        try:
+            summary = await get_summary_from_gemini(content[:10000])
+        except Exception as e:
+            summary = f"生成摘要失败: {str(e)}"
+            
+        # 将文件添加到已上传列表
+        uploaded_files.append({
+            "name": file.name,
+            "content": content_to_save,
+            "summary": summary
+        })
+    
+    # 更新session中的文件列表
+    cl.user_session.set("uploaded_files", uploaded_files)
+    
+    # 显示当前所有上传的文件
+    files_list = "\n".join([f"- {f['name']}:\n  摘要: {f['summary'][:100]}..." for f in uploaded_files])
+    await cl.Message(f"已上传的文件:\n{files_list}").send()
+    
+    # 提示用户可以开始提问
+    await cl.Message("您现在可以问我关于这些文件的问题了！").send()
+
+# 从Gemini获取摘要
+async def get_summary_from_gemini(text):
+    try:
+        prompt = f"请提供以下文档的简短摘要（不超过100字）:\n\n{text[:10000]}"
+        response = model.generate_content(prompt)
+        return response.text
+    except Exception as e:
+        return f"无法生成摘要: {str(e)}"
+
+@cl.on_message
+async def main(message: str):
+    try:
+        # 获取所有已上传的文件
+        uploaded_files = cl.user_session.get("uploaded_files", [])
+        
+        # 准备发送给 Langflow 的数据
+        payload = {
+            "input_value": message,
+            "output_type": "chat",
+            "input_type": "chat",
+            "files": uploaded_files  # 添加文件信息到请求中
+        }
+        
+        # Langflow 处理
+        try:
+            response = requests.post(LANGFLOW_URL, json=payload, headers=HEADERS, timeout=30)
+            response.raise_for_status()
+            langflow_response = response.json().get('output', 'No response')
+            await cl.Message(content=f"Langflow 回复：\n{langflow_response}").send()
+        except Exception as langflow_err:
+            # 如果Langflow处理失败，记录错误但继续Gemini处理
+            await cl.Message(content=f"Langflow API 错误: {str(langflow_err)}", type="error").send()
+        
+        # 如果有文件，将文件内容添加到 Gemini 的上下文中
+        if uploaded_files:
+            context = f"Context from uploaded files:\n"
+            for file in uploaded_files:
+                # 使用摘要而不是全文，避免超出提示长度限制
+                context += f"\nFile: {file['name']}\nSummary: {file.get('summary', '无摘要')}\n"
+            prompt = f"{context}\n\nUser question: {message}"
+        else:
+            prompt = message
+            
+        # Gemini 处理
+        gemini_response = model.generate_content(prompt).text
+        await cl.Message(content=f"Gemini 回复：\n{gemini_response}").send()
+
+    except Exception as e:
+        await cl.Message(content=f"处理错误: {str(e)}", type="error").send()
+
+# 清除文件的功能
+@cl.action_callback("clear_files")
+async def clear_files():
+    cl.user_session.set("uploaded_files", [])
+    await cl.Message("已清除所有上传的文件记录。").send()
+
+# 显示文件列表的功能
+@cl.action_callback("list_files")
+async def list_files():
+    uploaded_files = cl.user_session.get("uploaded_files", [])
+    if uploaded_files:
+        files_list = "\n".join([f"- {f['name']}" for f in uploaded_files])
+        await cl.Message(f"当前上传的文件:\n{files_list}").send()
+    else:
+        await cl.Message("当前没有上传的文件。").send()
+    

folder_chat_flow_google_hf_FIXED_v2_副本.json

@@ -0,0 +1,283 @@
+{
+  "id": "ca3e4a9c-11c0-42ea-8557-581b877445df",
+  "name": "文档自动分类与提问",
+  "description": "文档上传后自动摘要、关键词分类，并支持基于 folder 的问答。",
+  "tags": [
+    "document",
+    "folder",
+    "chat",
+    "langflow"
+  ],
+  "endpoint_name": "Langflow API",
+  "is_component": false,
+  "last_tested_version": "1.3.3",
+  "data": {
+    "nodes": [
+      {
+        "id": "file",
+        "type": "File",
+        "position": {
+          "x": 0,
+          "y": 0
+        },
+        "data": {
+          "node": {
+            "id": "file",
+            "type": "File",
+            "data": {
+              "inputs": {},
+              "template": ""
+            }
+          }
+        }
+      },
+      {
+        "id": "split",
+        "type": "Split Text",
+        "position": {
+          "x": 200,
+          "y": 0
+        },
+        "data": {
+          "node": {
+            "id": "split",
+            "type": "Split Text",
+            "data": {
+              "inputs": {},
+              "template": ""
+            }
+          }
+        }
+      },
+      {
+        "id": "prompt_summary",
+        "type": "Prompt",
+        "position": {
+          "x": 400,
+          "y": -100
+        },
+        "data": {
+          "node": {
+            "id": "prompt_summary",
+            "type": "Prompt",
+            "data": {
+              "inputs": {},
+              "template": "请总结以下文档内容：\n\n{{text}}"
+            }
+          }
+        }
+      },
+      {
+        "id": "llm_summary",
+        "type": "Google Generative AI",
+        "position": {
+          "x": 600,
+          "y": -100
+        },
+        "data": {
+          "node": {
+            "id": "llm_summary",
+            "type": "Google Generative AI",
+            "data": {
+              "inputs": {},
+              "template": ""
+            }
+          }
+        }
+      },
+      {
+        "id": "prompt_keywords",
+        "type": "Prompt",
+        "position": {
+          "x": 400,
+          "y": 100
+        },
+        "data": {
+          "node": {
+            "id": "prompt_keywords",
+            "type": "Prompt",
+            "data": {
+              "inputs": {},
+              "template": "请从以下文本中提取 3-5 个关键词：\n\n{{text}}"
+            }
+          }
+        }
+      },
+      {
+        "id": "llm_keywords",
+        "type": "Google Generative AI",
+        "position": {
+          "x": 600,
+          "y": 100
+        },
+        "data": {
+          "node": {
+            "id": "llm_keywords",
+            "type": "Google Generative AI",
+            "data": {
+              "inputs": {},
+              "template": ""
+            }
+          }
+        }
+      },
+      {
+        "id": "hf_embeddings",
+        "type": "HuggingFace Embeddings",
+        "position": {
+          "x": 800,
+          "y": 0
+        },
+        "data": {
+          "node": {
+            "id": "hf_embeddings",
+            "type": "HuggingFace Embeddings",
+            "data": {
+              "inputs": {},
+              "template": ""
+            }
+          }
+        }
+      },
+      {
+        "id": "chroma",
+        "type": "Chroma DB",
+        "position": {
+          "x": 1000,
+          "y": 0
+        },
+        "data": {
+          "node": {
+            "id": "chroma",
+            "type": "Chroma DB",
+            "data": {
+              "inputs": {},
+              "template": ""
+            }
+          }
+        }
+      },
+      {
+        "id": "agent",
+        "type": "Agent",
+        "position": {
+          "x": 1200,
+          "y": 0
+        },
+        "data": {
+          "node": {
+            "id": "agent",
+            "type": "Agent",
+            "data": {
+              "inputs": {},
+              "template": ""
+            }
+          }
+        }
+      },
+      {
+        "id": "chat_input",
+        "type": "Chat Input",
+        "position": {
+          "x": 1000,
+          "y": -200
+        },
+        "data": {
+          "node": {
+            "id": "chat_input",
+            "type": "Chat Input",
+            "data": {
+              "inputs": {},
+              "template": ""
+            }
+          }
+        }
+      },
+      {
+        "id": "chat_output",
+        "type": "Chat Output",
+        "position": {
+          "x": 1400,
+          "y": 0
+        },
+        "data": {
+          "node": {
+            "id": "chat_output",
+            "type": "Chat Output",
+            "data": {
+              "inputs": {},
+              "template": ""
+            }
+          }
+        }
+      }
+    ],
+    "edges": [
+      {
+        "source": "file",
+        "target": "split",
+        "sourceHandle": "output",
+        "targetHandle": "input"
+      },
+      {
+        "source": "split",
+        "target": "prompt_summary",
+        "sourceHandle": "output",
+        "targetHandle": "input"
+      },
+      {
+        "source": "prompt_summary",
+        "target": "llm_summary",
+        "sourceHandle": "output",
+        "targetHandle": "input"
+      },
+      {
+        "source": "split",
+        "target": "prompt_keywords",
+        "sourceHandle": "output",
+        "targetHandle": "input"
+      },
+      {
+        "source": "prompt_keywords",
+        "target": "llm_keywords",
+        "sourceHandle": "output",
+        "targetHandle": "input"
+      },
+      {
+        "source": "split",
+        "target": "hf_embeddings",
+        "sourceHandle": "output",
+        "targetHandle": "input"
+      },
+      {
+        "source": "hf_embeddings",
+        "target": "chroma",
+        "sourceHandle": "output",
+        "targetHandle": "input"
+      },
+      {
+        "source": "chat_input",
+        "target": "agent",
+        "sourceHandle": "output",
+        "targetHandle": "input"
+      },
+      {
+        "source": "chroma",
+        "target": "agent",
+        "sourceHandle": "output",
+        "targetHandle": "input"
+      },
+      {
+        "source": "agent",
+        "target": "chat_output",
+        "sourceHandle": "output",
+        "targetHandle": "input"
+      }
+    ],
+    "viewport": {
+      "x": 0,
+      "y": 0,
+      "zoom": 1
+    }
+  }
+}

gemini_chatbot.py

@@ -0,0 +1,758 @@
+from flask import Flask, request, jsonify, render_template, redirect, url_for, send_from_directory, session
+import requests
+import os
+import uuid
+from werkzeug.utils import secure_filename
+from dotenv import load_dotenv
+import PyPDF2  # Import PyPDF2
+import logging # Add logging
+import json # Add json for JSON handling
+import sys
+import traceback
+import jieba  # 中文分词
+import re
+from collections import Counter
+from wordcloud import WordCloud
+import matplotlib
+matplotlib.use('Agg')  # 设置Matplotlib为非交互模式
+import matplotlib.pyplot as plt
+from io import BytesIO
+import base64
+
+# 加载环境变量
+load_dotenv()
+
+app = Flask(__name__)
+app.config['UPLOAD_FOLDER'] = 'uploads'
+app.config['ALLOWED_EXTENSIONS'] = {'pdf', 'txt'}  # 仅限PDF和TXT文件
+app.secret_key = os.getenv('FLASK_SECRET_KEY', os.urandom(24)) # Needed for session management
+app.config['MAX_CONTENT_LENGTH'] = 10 * 1024 * 1024  # 10MB 大小限制
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,  # 使用INFO级别减少日志量
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',
+    handlers=[
+        logging.StreamHandler(sys.stdout)
+        # 移除文件处理器，避免权限问题
+    ]
+)
+
+API_KEY = os.getenv("GOOGLE_API_KEY", "")
+API_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash-latest:generateContent" # Using latest Flash model which is good for RAG
+
+# 创建文件夹存储结构
+knowledge_folders = {
+    "Instructional Theories": ["instructional_theory1.pdf", "instructional_theory2.pdf", "instructional_theory3.pdf", "instructional_theory4.pdf"],
+    "Learner Characteristics": ["learner_characteristics1.pdf", "learner_characteristics2.pdf", "learner_characteristics3.pdf"],
+    "Design Models": ["design_model1.pdf", "design_model2.pdf", "design_model3.pdf", "design_model4.pdf", "design_model5.pdf"],
+    "Assessment Methods": ["assessment_method1.pdf", "assessment_method2.pdf"]
+}
+
+def get_dynamic_knowledge_folders(session_files):
+    """Generate dynamic knowledge folder structure based on uploaded files and their tags"""
+    dynamic_folders = {}
+    
+    # 如果没有上传文件，返回空结构
+    if not session_files:
+        return {}
+    
+    # 遍历所有上传的文件
+    for file_info in session_files:
+        filename = file_info.get('filename', '')
+        tags = file_info.get('tags', [])
+        
+        # 如果没有标签，添加到"未分类"文件夹
+        if not tags:
+            if "Uncategorized" not in dynamic_folders:
+                dynamic_folders["Uncategorized"] = []
+            dynamic_folders["Uncategorized"].append(filename)
+            continue
+        
+        # 对每个标签创建或更新文件夹
+        for tag in tags:
+            if tag not in dynamic_folders:
+                dynamic_folders[tag] = []
+            if filename not in dynamic_folders[tag]:
+                dynamic_folders[tag].append(filename)
+    
+    # 记录日志
+    logging.debug(f"Generated dynamic knowledge folders: {dynamic_folders}")
+    
+    return dynamic_folders
+
+def allowed_file(filename):
+    """检查文件类型是否允许上传"""
+    if '.' not in filename:
+        return False
+    ext = filename.rsplit('.', 1)[1].lower()
+    return ext in app.config['ALLOWED_EXTENSIONS']
+
+def extract_text_from_pdf(file_path):
+    """Extract text from a PDF file."""
+    text = ""
+    try:
+        # 检查文件是否存在
+        if not os.path.exists(file_path):
+            logging.error(f"PDF file does not exist: {file_path}")
+            return None
+
+        # 检查文件大小
+        file_size = os.path.getsize(file_path)
+        logging.debug(f"PDF file size: {file_size} bytes")
+        
+        # 检查文件是否为空
+        if file_size == 0:
+            logging.error(f"PDF file is empty: {file_path}")
+            return None
+            
+        logging.debug(f"Opening PDF file: {file_path}")
+        with open(file_path, 'rb') as file:
+            try:
+                reader = PyPDF2.PdfReader(file)
+                logging.debug(f"PDF has {len(reader.pages)} pages")
+                
+                if len(reader.pages) == 0:
+                    logging.warning(f"PDF has no pages: {file_path}")
+                    return None
+                    
+                # 检查文件是否加密
+                if reader.is_encrypted:
+                    logging.error(f"PDF is encrypted: {file_path}")
+                    return None
+                
+                # 提取文本
+                for i, page in enumerate(reader.pages):
+                    page_text = page.extract_text() or ""
+                    text += page_text
+                    logging.debug(f"Extracted {len(page_text)} characters from page {i+1}")
+                
+                if not text.strip():
+                    logging.warning(f"Extracted text is empty from PDF: {file_path}")
+                    return None
+                    
+                logging.info(f"Successfully extracted {len(text)} characters from {file_path}")
+                return text
+            except PyPDF2.errors.PdfReadError as pdf_err:
+                logging.error(f"PyPDF2 read error: {pdf_err}")
+                return None
+    except Exception as e:
+        logging.error(f"Error extracting text from PDF {file_path}: {e}")
+        logging.error(traceback.format_exc())
+        return None
+
+def extract_text_from_txt(file_path):
+    """Extract text from a TXT file."""
+    try:
+        # 检查文件是否存在
+        if not os.path.exists(file_path):
+            logging.error(f"TXT file does not exist: {file_path}")
+            return None
+
+        # 检查文件大小
+        file_size = os.path.getsize(file_path)
+        logging.debug(f"TXT file size: {file_size} bytes")
+        
+        # 检查文件是否为空
+        if file_size == 0:
+            logging.error(f"TXT file is empty: {file_path}")
+            return None
+            
+        logging.debug(f"Opening TXT file: {file_path}")
+        
+        # 尝试不同的编码
+        encodings = ['utf-8', 'gbk', 'latin-1']
+        for encoding in encodings:
+            try:
+                with open(file_path, 'r', encoding=encoding) as file:
+                    text = file.read()
+                    
+                # 如果读取成功且文本不为空
+                if text and len(text.strip()) > 0:
+                    logging.info(f"Successfully extracted {len(text)} characters from {file_path} using {encoding} encoding")
+                    return text
+            except UnicodeDecodeError:
+                logging.debug(f"Failed to decode {file_path} with {encoding} encoding, trying next...")
+                continue
+        
+        logging.warning(f"Failed to extract text with all encodings from {file_path}")
+        return None
+    except Exception as e:
+        logging.error(f"Error extracting text from TXT {file_path}: {e}")
+        logging.error(traceback.format_exc())
+        return None
+
+def get_summary_and_tags_from_gemini(text_content):
+    """Use Gemini API to generate summary and tags from text."""
+    if not API_KEY or not text_content:
+        return "Could not generate summary.", []
+
+    # Use triple quotes for the f-string to handle internal quotes correctly
+    # Double the curly braces for the example JSON to output literal braces
+    prompt = f"""Please summarize the following document and extract up to 5 relevant keywords (tags) as a JSON list. Document content:
+
+{text_content[:10000]}
+
+Respond ONLY with a JSON object containing 'summary' and 'tags' keys, like this: {{ "summary": "Your summary here", "tags": ["tag1", "tag2"] }}. Do not include any other text or markdown formatting."""
+
+    try:
+        response = requests.post(
+            f"{API_URL}?key={API_KEY}",
+            json={
+                "contents": [{"parts": [{"text": prompt}]}],
+                "generationConfig": {
+                    "responseMimeType": "application/json", # Request JSON output
+                }
+            },
+            timeout=45 # Increased timeout for potentially longer processing
+        )
+        response.raise_for_status()
+        data = response.json()
+
+        if 'candidates' in data and data['candidates']:
+            candidate = data['candidates'][0]
+            if 'content' in candidate and 'parts' in candidate['content']:
+                part_text = candidate['content']['parts'][0].get('text', '{}')
+                try:
+                    result_json = json.loads(part_text)
+                    summary = result_json.get("summary", "Summary not generated.")
+                    tags = result_json.get("tags", [])
+                    logging.info(f"Gemini generated summary and tags.")
+                    return summary, tags
+                except json.JSONDecodeError as json_e:
+                    logging.error(f"Error decoding Gemini JSON response: {json_e}\nResponse text: {part_text}")
+                    return "Failed to parse summary response.", []
+        return "Could not get summary from API response.", []
+    except requests.exceptions.RequestException as e:
+        logging.error(f"Gemini API request failed for summary/tags: {e}")
+        return f"API request failed: {e}", []
+    except Exception as e:
+        logging.error(f"Error getting summary/tags: {e}")
+        return f"An error occurred: {e}", []
+
+@app.route('/')
+def home():
+    """Render home page"""
+    # 获取用户上传的文件信息
+    uploaded_files = session.get('uploaded_files', [])
+    
+    # 使用动态文件夹结构替代静态结构
+    dynamic_folders = get_dynamic_knowledge_folders(uploaded_files)
+    
+    # 如果没有上传文件或动态文件夹为空，则使用预设的静态结构作为示例
+    if not dynamic_folders:
+        return render_template('index.html', 
+                              knowledge_folders=knowledge_folders, 
+                              use_static_folders=True,
+                              uploaded_files=[])
+    
+    # 使用动态生成的文件夹结构
+    return render_template('index.html', 
+                          knowledge_folders=dynamic_folders, 
+                          use_static_folders=False,
+                          uploaded_files=uploaded_files)
+
+@app.route('/chat', methods=['POST'])
+def chat():
+    """Handle chat requests"""
+    if not API_KEY:
+        return jsonify({"error": "Please configure Google API key in settings page first"}), 400
+        
+    # Get user input
+    user_message = request.json.get('message', '')
+    if not user_message:
+        return jsonify({"error": "Message cannot be empty"}), 400
+    
+    # Check session for uploaded file context
+    uploaded_files_context = session.get('uploaded_files_context', [])
+    context_text = ""
+    if uploaded_files_context:
+        # Use context from the most recently uploaded file for simplicity
+        # A more complex app might allow selecting which file context to use
+        last_file_context = uploaded_files_context[-1]
+        context_text = f"Use the following document context to answer the question:\n--- DOCUMENT START ---\n{last_file_context['summary']}\n--- DOCUMENT END ---\n\n"
+        logging.info(f"Using context from file: {last_file_context['filename']}")
+
+    # If the user message is just a test connection message, return a simple response
+    if user_message.lower() == 'test connection':
+        return jsonify({"reply": "Connection successful. API is working properly."}), 200
+
+    # Combine context and user message
+    prompt_to_gemini = f"{context_text}User Question: {user_message}"
+
+    # Call Google Gemini API
+    try:
+        response = requests.post(
+            f"{API_URL}?key={API_KEY}",
+            json={
+                "contents": [{"parts": [{"text": prompt_to_gemini}]}]
+            },
+            timeout=30 # Adjusted timeout
+        )
+        
+        # Check response
+        response.raise_for_status()
+        data = response.json()
+        
+        # Handle API response
+        if 'candidates' in data and len(data['candidates']) > 0:
+            candidate = data['candidates'][0]
+            if 'content' in candidate and 'parts' in candidate['content']:
+                parts = candidate['content']['parts']
+                ai_message = "".join([part.get('text', '') for part in parts])
+                logging.info(f"Gemini chat response generated.")
+                # Clear context after use? Or keep for follow-up?
+                # session.pop('uploaded_files_context', None) # Option: Clear context after one use
+                return jsonify({"reply": ai_message})
+        
+        logging.warning("Could not parse Gemini chat response structure.")
+        return jsonify({"error": "Unable to parse API response"}), 500
+        
+    except requests.exceptions.RequestException as e:
+        logging.error(f"Gemini API request failed for chat: {e}")
+        return jsonify({"error": f"API request failed: {str(e)}"}), 500
+    except Exception as e:
+        logging.error(f"Error during chat processing: {e}")
+        return jsonify({"error": f"Error during chat processing: {str(e)}"}), 500
+
+@app.route('/upload', methods=['POST'])
+def upload_file():
+    """Handle file uploads"""
+    try:
+        logging.debug(f"Upload request received. Files: {request.files}")
+        logging.debug(f"Request form data: {request.form}")
+        
+        if 'file' not in request.files:
+            logging.warning("No file part in the request")
+            return jsonify({"error": "No file part found", "success": False}), 400
+        
+        file = request.files['file']
+        logging.debug(f"Received file: {file.filename}, mimetype: {file.mimetype}")
+        
+        if file.filename == '':
+            logging.warning("Empty filename submitted")
+            return jsonify({"error": "No file selected", "success": False}), 400
+        
+        if not allowed_file(file.filename):
+            logging.warning(f"File type not allowed: {file.filename}")
+            return jsonify({"error": f"Unsupported file type. Only supporting: {', '.join(app.config['ALLOWED_EXTENSIONS'])}", "success": False}), 400
+            
+        # Properly handle filename and extension
+        original_filename = file.filename
+        file_ext = os.path.splitext(original_filename)[1].lower()  # Get original file extension with dot(.)
+        
+        # Use secure_filename for base name, then manually add extension
+        safe_filename = secure_filename(os.path.splitext(original_filename)[0]) + file_ext
+        unique_id = str(uuid.uuid4())
+        unique_filename = f"{unique_id}_{safe_filename}"
+        
+        file_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename)
+        
+        # Ensure upload directory exists
+        os.makedirs(os.path.dirname(file_path), exist_ok=True)
+        
+        logging.debug(f"Saving file to: {file_path}")
+        file.save(file_path)
+        logging.info(f"File saved: {file_path}")
+        
+        # Extract text
+        text_content = None
+        if file_ext.lower() == '.pdf':
+            logging.debug(f"Attempting to extract text from PDF: {file_path}")
+            text_content = extract_text_from_pdf(file_path)
+        elif file_ext.lower() == '.txt':
+            logging.debug(f"Attempting to extract text from TXT: {file_path}")
+            text_content = extract_text_from_txt(file_path)
+        
+        if not text_content:
+            logging.warning(f"Could not extract text from {safe_filename}")
+            return jsonify({
+                "error": "Could not extract text from file. Please ensure the file is valid and not encrypted", 
+                "success": False
+            }), 400
+            
+        logging.info(f"Extracted {len(text_content)} characters from {safe_filename}")
+        
+        # Get summary and tags
+        try:
+            logging.debug("Calling Gemini API for summary and tags")
+            summary, tags = get_summary_and_tags_from_gemini(text_content)
+            logging.debug(f"Received summary: {summary[:100]}... and tags: {tags}")
+        except Exception as summary_error:
+            logging.error(f"Error getting summary: {summary_error}")
+            logging.error(traceback.format_exc())
+            summary = "Could not generate summary, but you can still ask questions about the document."
+            tags = []
+        
+        # Store session data - uploaded file context
+        if 'uploaded_files_context' not in session:
+            session['uploaded_files_context'] = []
+            
+        # Add new file context
+        file_context = {
+            'filename': safe_filename,
+            'unique_filename': unique_filename,
+            'summary': summary,
+            'tags': tags  # Add tags to context
+        }
+        session['uploaded_files_context'].append(file_context)
+        
+        # Initialize uploaded_files (for knowledge map)
+        if 'uploaded_files' not in session:
+            session['uploaded_files'] = []
+            
+        # Add file info to uploaded files list
+        session['uploaded_files'].append({
+            'filename': safe_filename,
+            'summary': summary,
+            'tags': tags
+        })
+        
+        # Ensure session changes are saved
+        session.modified = True
+        logging.info(f"Stored context for {safe_filename} in session with {len(tags)} tags")
+        
+        return jsonify({
+            "success": True,
+            "filename": safe_filename,
+            "summary": summary,
+            "tags": tags
+        })
+        
+    except Exception as e:
+        # Catch and log all exceptions
+        logging.error(f"Unexpected error during file upload: {str(e)}")
+        logging.error(traceback.format_exc())
+        return jsonify({
+            "error": f"Error during file upload: {str(e)}", 
+            "success": False
+        }), 500
+
+@app.route('/settings', methods=['GET', 'POST'])
+def settings():
+    """API密钥设置页面"""
+    if request.method == 'POST':
+        # In a real app, store this securely, not globally or just in session.
+        session['api_key'] = request.form.get('api_key', '')
+        # Update the global variable too for immediate effect if needed by current requests
+        global API_KEY
+        API_KEY = session['api_key']
+        return redirect(url_for('home'))
+    
+    # Get key from session if available, else from global/env
+    current_api_key = session.get('api_key', API_KEY)
+    return render_template('settings.html', api_key=current_api_key)
+
+@app.route('/uploads/<filename>')
+def uploaded_file(filename):
+    """Serve uploaded files."""
+    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)
+
+@app.route('/knowledge-map')
+def knowledge_map():
+    """Render the knowledge map page."""
+    return render_template('knowledge_map.html')
+
+@app.route('/api/knowledge-map')
+def get_knowledge_map():
+    """API endpoint to provide knowledge map data."""
+    # 优先使用会话中的uploaded_files数据
+    uploaded_files = session.get('uploaded_files', [])
+    
+    logging.debug(f"Knowledge map API - Session data keys: {session.keys()}")
+    logging.debug(f"Knowledge map API - Files found: {len(uploaded_files)}")
+    
+    # 如果没有上传文件，检查context数据作为备选
+    if not uploaded_files and 'uploaded_files_context' in session:
+        # 从context数据中提取文件信息
+        context_files = session.get('uploaded_files_context', [])
+        for file_info in context_files:
+            uploaded_files.append({
+                'filename': file_info.get('filename', ''),
+                'summary': file_info.get('summary', ''),
+                'tags': file_info.get('tags', [])
+            })
+        logging.debug(f"Used context data as fallback, found {len(uploaded_files)} files")
+    
+    # 如果还是没有上传文件，返回空数据
+    if not uploaded_files:
+        logging.warning("No uploaded files found in session for knowledge map")
+        return jsonify({
+            "centralTopic": "Knowledge Center",
+            "documents": []
+        })
+    
+    # 构建文档数据列表
+    documents = []
+    
+    for file_info in uploaded_files:
+        try:
+            filename = file_info.get('filename', '')
+            summary = file_info.get('summary', '')
+            tags = file_info.get('tags', [])
+            
+            # 确保每个文档至少有一个标签用于分类，如果没有则添加一个默认标签
+            if not tags:
+                tags = ["Uncategorized"]
+            
+            # 添加文档查看链接
+            document_url = url_for('view_document', filename=filename)
+            
+            documents.append({
+                "filename": filename,
+                "summary": summary,
+                "tags": tags,
+                "url": document_url
+            })
+            
+            logging.debug(f"Added document to knowledge map: {filename} with tags: {tags}")
+        except Exception as e:
+            logging.error(f"Error processing file for knowledge map: {e}")
+            logging.error(traceback.format_exc())
+    
+    # 创建与知识文件夹相同的分类结构
+    dynamic_folders = get_dynamic_knowledge_folders(uploaded_files)
+    
+    # 构建知识图谱数据结构
+    knowledge_map_data = {
+        "centralTopic": "Knowledge Center",
+        "documents": documents,
+        "folders": dynamic_folders
+    }
+    
+    return jsonify(knowledge_map_data)
+
+@app.route('/view-document')
+def view_document():
+    """查看文档内容"""
+    filename = request.args.get('filename')
+    
+    if not filename:
+        return jsonify({"error": "未提供文件名"}), 400
+    
+    # 检查文件是否存在于上传文件夹中
+    file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+    
+    # 同时检查原始文件名和通过UUID生成的唯一文件名
+    if not os.path.exists(file_path):
+        # 如果按原始文件名找不到，尝试在会话中查找匹配的唯一文件名
+        uploaded_files_context = session.get('uploaded_files_context', [])
+        unique_filename = None
+        
+        for file_info in uploaded_files_context:
+            if file_info.get('filename') == filename:
+                unique_filename = file_info.get('unique_filename')
+                break
+        
+        if unique_filename:
+            file_path = os.path.join(app.config['UPLOAD_FOLDER'], unique_filename)
+            if not os.path.exists(file_path):
+                return jsonify({"error": f"找不到文件: {filename}"}), 404
+        else:
+            return jsonify({"error": f"找不到文件: {filename}"}), 404
+    
+    # 根据文件类型返回适当的内容
+    if filename.lower().endswith('.pdf'):
+        # 对于PDF文件，重定向到文件查看器
+        return redirect(url_for('uploaded_file', filename=filename))
+    elif filename.lower().endswith('.txt'):
+        # 对于文本文件，读取内容并显示
+        try:
+            with open(file_path, 'r', encoding='utf-8') as file:
+                content = file.read()
+            return render_template('view_document.html', filename=filename, content=content)
+        except UnicodeDecodeError:
+            # 如果UTF-8解码失败，尝试其他编码
+            try:
+                with open(file_path, 'r', encoding='gbk') as file:
+                    content = file.read()
+                return render_template('view_document.html', filename=filename, content=content)
+            except Exception as e:
+                logging.error(f"读取文件时出错: {e}")
+                return jsonify({"error": f"读取文件时出错: {str(e)}"}), 500
+        except Exception as e:
+            logging.error(f"读取文件时出错: {e}")
+            return jsonify({"error": f"读取文件时出错: {str(e)}"}), 500
+    else:
+        return jsonify({"error": "不支持的文件类型"}), 400
+
+# 添加停用词处理功能
+def load_stopwords():
+    """加载停用词列表"""
+    stopwords = set()
+    stopwords_path = os.path.join(os.path.dirname(__file__), 'stopwords.txt')
+    
+    # 如果停用词文件不存在，创建一个基本的停用词列表
+    if not os.path.exists(stopwords_path):
+        basic_stopwords = [
+            'the', 'a', 'an', 'of', 'in', 'on', 'at', 'for', 'to', 'with',
+            'by', 'about', 'as', 'and', 'or', 'but', 'if', 'because', 'as',
+            'until', 'while', 'that', 'which', 'when', 'where', 'how', 'why',
+            'what', 'who', 'whom'
+        ]
+        with open(stopwords_path, 'w', encoding='utf-8') as f:
+            f.write('\n'.join(basic_stopwords))
+        stopwords = set(basic_stopwords)
+    else:
+        with open(stopwords_path, 'r', encoding='utf-8') as f:
+            for line in f:
+                stopwords.add(line.strip())
+    
+    return stopwords
+
+# 词频统计功能
+def get_word_frequency(text, top_n=100, additional_stopwords=None):
+    """对文本进行分词并统计词频，返回前N个高频词"""
+    stopwords = load_stopwords()
+    
+    # 添加额外的停用词
+    if additional_stopwords:
+        for word in additional_stopwords:
+            stopwords.add(word)
+    
+    # 使用正则表达式清理文本，只保留中英文和数字
+    text = re.sub(r'[^\w\s\u4e00-\u9fff]', ' ', text)
+    
+    # 分词，针对中文使用jieba分词
+    words = []
+    for word in jieba.cut(text):
+        word = word.strip()
+        # 过滤停用词、空格和长度为1的词
+        if word and word not in stopwords and len(word) > 1:
+            words.append(word)
+    
+    # 统计词频
+    word_counts = Counter(words)
+    
+    # 返回前N个高频词及其频率
+    return word_counts.most_common(top_n)
+
+# 生成词云图
+def generate_wordcloud(word_freq, width=800, height=400):
+    """根据词频生成词云图，返回base64编码的图像数据"""
+    # 将词频转换为WordCloud需要的格式
+    word_freq_dict = dict(word_freq)
+    
+    # 设置词云图参数
+    wordcloud = WordCloud(
+        width=width,
+        height=height,
+        background_color='white',
+        font_path='/System/Library/Fonts/PingFang.ttc',  # 使用系统字体支持中文
+        max_words=100,
+        prefer_horizontal=0.9,
+        contour_width=3,
+        contour_color='steelblue'
+    )
+    
+    # 生成词云
+    wordcloud.generate_from_frequencies(word_freq_dict)
+    
+    # 将词云图保存到内存
+    img_buffer = BytesIO()
+    plt.figure(figsize=(10, 5))
+    plt.imshow(wordcloud, interpolation='bilinear')
+    plt.axis('off')
+    plt.tight_layout(pad=0)
+    plt.savefig(img_buffer, format='png')
+    plt.close()
+    
+    # 将图像数据转换为base64编码
+    img_buffer.seek(0)
+    img_data = base64.b64encode(img_buffer.getvalue()).decode('utf-8')
+    
+    return img_data
+
+@app.route('/api/wordcloud/<filename>')
+def get_wordcloud(filename):
+    """Generate wordcloud for document and return word frequency and image data"""
+    try:
+        # Set adjustable word frequency count parameter
+        top_n = request.args.get('top_n', default=100, type=int)
+        
+        # Check if file exists
+        file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        if not os.path.exists(file_path):
+            return jsonify({"error": "File not found"}), 404
+        
+        # Extract text content
+        text_content = None
+        if filename.lower().endswith('.pdf'):
+            text_content = extract_text_from_pdf(file_path)
+        elif filename.lower().endswith('.txt'):
+            text_content = extract_text_from_txt(file_path)
+        else:
+            return jsonify({"error": "Unsupported file type"}), 400
+        
+        if not text_content:
+            return jsonify({"error": "Could not extract text from file"}), 400
+        
+        # Extract keywords to exclude from filename
+        # 1. Remove extension
+        basename = os.path.splitext(filename)[0]
+        # 2. Process filename, remove uuid and other special characters
+        clean_name = re.sub(r'^[a-f0-9\-_]+_', '', basename)
+        
+        # 3. Prepare words to exclude
+        filename_words = set()
+        
+        # Add original and cleaned filename
+        filename_words.add(basename)
+        filename_words.add(clean_name)
+        
+        # If filename contains underscores, hyphens or spaces, split into words
+        for word in re.split(r'[_\-\s]+', clean_name):
+            if word and len(word) > 1:
+                filename_words.add(word)
+                
+                # For Chinese filenames, do jieba segmentation
+                if re.search(r'[\u4e00-\u9fff]', word):
+                    for chunk in jieba.cut(word):
+                        if chunk and len(chunk) > 1:
+                            filename_words.add(chunk)
+        
+        # Add uppercase/lowercase/capitalized versions of English words
+        english_words = set()
+        for word in filename_words:
+            if not re.search(r'[\u4e00-\u9fff]', word):  # Non-Chinese words
+                english_words.add(word.lower())
+                english_words.add(word.upper())
+                english_words.add(word.capitalize())
+        filename_words.update(english_words)
+        
+        # Log excluded words
+        logging.info(f"Excluding filename-related words: {filename_words}")
+        
+        # Get word frequency statistics, passing filename-related words as additional stopwords
+        word_freq = get_word_frequency(text_content, top_n=top_n, additional_stopwords=filename_words)
+        
+        # Generate wordcloud
+        wordcloud_img = generate_wordcloud(word_freq)
+        
+        # Return word frequency and wordcloud image data
+        return jsonify({
+            "filename": filename,
+            "word_frequency": word_freq,
+            "wordcloud_image": wordcloud_img
+        })
+    
+    except Exception as e:
+        logging.error(f"Error generating wordcloud: {str(e)}")
+        logging.error(traceback.format_exc())
+        return jsonify({"error": f"Error generating wordcloud: {str(e)}"}), 500
+
+# 确保上传文件夹存在且有正确权限，在创建app后
+uploads_dir = os.path.join(os.path.dirname(os.path.abspath(__file__)), app.config['UPLOAD_FOLDER'])
+if not os.path.exists(uploads_dir):
+    try:
+        os.makedirs(uploads_dir, exist_ok=True)
+        logging.info(f"Created upload directory: {uploads_dir}")
+    except Exception as e:
+        logging.error(f"Failed to create upload directory: {str(e)}")
+
+if __name__ == "__main__":
+    # 获取环境变量中的端口，如果没有则使用默认值5000
+    port = int(os.environ.get("PORT", 7860))
+    # 启动应用，允许来自任何IP的访问，指定端口，并关闭调试模式
+    app.run(host='0.0.0.0', port=port) 

interface

@@ -0,0 +1,151 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { MessageSquareIcon, UploadIcon, BrainIcon, FolderIcon, BookOpenIcon, ClockIcon, SendIcon } from "lucide-react";
+import { useState } from "react";
+
+const GoogleAPI = 'AIzaSyAMqFn0dNAoS75Zo4GUdcD99reEIM2IvzU'
+export default function TeachingAssistantDashboard() {
+  const [message, setMessage] = useState("");
+  const [chatHistory, setChatHistory] = useState([]);
+
+  const handleSend = async () => {
+    if (message.trim() === "") return;
+    const newEntry = { sender: "user", content: message };
+    setChatHistory([...chatHistory, newEntry]);
+    setMessage("");
+
+    try {
+      const response = await fetch(
+        `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${GoogleAPI}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            contents: [{ parts: [{ text: message }] }]
+          })
+        }
+      );
+      const data = await response.json();
+      console.log("Gemini raw response:", data);
+
+      // More robust extraction of AI message
+      let aiMessage = "";
+      if (data.candidates && data.candidates.length > 0) {
+        const candidate = data.candidates[0];
+        // Try nested parts
+        if (candidate.content?.parts) {
+          aiMessage = candidate.content.parts.map(p => p.text).join("\n");
+        }
+        // Fallback to simple text
+        else if (candidate.content?.text) {
+          aiMessage = candidate.content.text;
+        }
+        // Fallback to candidate text
+        else if (candidate.text) {
+          aiMessage = candidate.text;
+        }
+      }
+      // Last resort: stringify whole response
+      if (!aiMessage) {
+        aiMessage = JSON.stringify(data);
+      }
+
+      setChatHistory(prev => [...prev, { sender: "ai", content: aiMessage }] );
+    } catch (error) {
+      console.error("Error connecting to Gemini API:", error);
+      setChatHistory(prev => [...prev, { sender: "ai", content: "[Error connecting to Gemini API]" }]);
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-6 gap-4 p-4 bg-background text-foreground">
+      {/* Sidebar */}
+      <div className="col-span-1 bg-muted rounded-2xl p-4 space-y-4 shadow">
+        <h2 className="text-xl font-semibold">AI Teaching Assistant</h2>
+        <Button variant="ghost" className="w-full justify-start"><UploadIcon className="mr-2" />Upload</Button>
+        <Button variant="ghost" className="w-full justify-start"><FolderIcon className="mr-2" />Folders</Button>
+        <Button variant="ghost" className="w-full justify-start"><BookOpenIcon className="mr-2" />Knowledge Map</Button>
+        <Button variant="ghost" className="w-full justify-start"><MessageSquareIcon className="mr-2" />Chat Assistant</Button>
+        <Button variant="ghost" className="w-full justify-start"><ClockIcon className="mr-2" />Review</Button>
+      </div>
+
+      {/* Main Content */}
+      <div className="col-span-5 space-y-4">
+        {/* Upload Section */}
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-lg font-semibold mb-2">📂 Upload Documents</h3>
+            <Input type="file" multiple />
+            <p className="text-sm text-muted-foreground mt-1">Supported: PDF, PPT, TXT</p>
+          </CardContent>
+        </Card>
+
+        {/* Auto-Summarization */}
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-lg font-semibold mb-2">🧠 Auto-Summarization & Tags</h3>
+            <div className="flex gap-2 flex-wrap">
+              <Badge variant="secondary">Constructivism</Badge>
+              <Badge variant="secondary">Cognitive Load</Badge>
+              <Badge variant="secondary">Assessment Design</Badge>
+              <Badge variant="secondary">Multimedia Principles</Badge>
+            </div>
+            <Textarea className="mt-2" placeholder="Generated summary will appear here..." rows={3} />
+          </CardContent>
+        </Card>
+
+        {/* Folder View */}
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-lg font-semibold mb-2">📁 Knowledge Folders</h3>
+            <ul className="list-disc list-inside space-y-1">
+              <li>Instructional Theories (4 docs)</li>
+              <li>Learner Characteristics (3 docs)</li>
+              <li>Design Models (5 docs)</li>
+              <li>Assessment Methods (2 docs)</li>
+            </ul>
+          </CardContent>
+        </Card>
+
+        {/* Chat Assistant */}
+        <Card>
+          <CardContent className="p-4 space-y-3">
+            <h3 className="text-lg font-semibold">🤖 Chat with AI Assistant</h3>
+            <div className="space-y-2 max-h-40 overflow-y-auto bg-muted p-2 rounded">
+              {chatHistory.map((entry, index) => (
+                <div key={index} className={`text-sm ${entry.sender === "user" ? "text-right" : "text-left"}`}>
+                  <span className="inline-block px-3 py-1 bg-background rounded shadow">{entry.content}</span>
+                </div>
+              ))}
+            </div>
+            <div className="flex items-center gap-2">
+              <Input
+                className="flex-grow"
+                placeholder="Ask about any concept..."
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && handleSend()}
+              />
+              <Button onClick={handleSend} variant="default"><SendIcon size={16} /></Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Spaced Repetition */}
+        <Card>
+          <CardContent className="p-4">
+            <h3 className="text-lg font-semibold mb-2">⏳ Review Reminders</h3>
+            <p className="text-sm">Next review cycle: <strong>Tomorrow (2 docs)</strong> based on Ebbinghaus curve</p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

static/css/style.css

@@ -0,0 +1,1436 @@
+/* Global Reset */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; /* Updated Font */
+}
+
+body {
+    background-color: #f0f2f5; /* Lighter grey background */
+    color: #1c1e21; /* Darker text color */
+    line-height: 1.5;
+    display: flex;
+    height: 100vh;
+    overflow: hidden;
+}
+
+/* Container */
+.container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+}
+
+/* Sidebar */
+.sidebar {
+    width: 260px; /* Slightly wider */
+    background-color: #ffffff; /* White background */
+    color: #333; /* Dark text for sidebar */
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    border-right: 1px solid #e0e0e0; /* Subtle border */
+    flex-shrink: 0;
+}
+
+.sidebar-header {
+    padding: 25px 20px; /* Increased padding */
+    text-align: left; /* Align left */
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.sidebar-header h1 {
+    font-size: 1.6rem; /* Slightly larger */
+    font-weight: 600;
+    color: #0d6efd; /* Accent color */
+}
+
+.sidebar-menu {
+    flex-grow: 1;
+    padding: 15px 0; /* Reduced top/bottom padding */
+}
+
+.sidebar-menu ul {
+    list-style: none;
+}
+
+.sidebar-menu li {
+    margin-bottom: 5px; /* Reduced margin */
+}
+
+.sidebar-menu a {
+    display: flex;
+    align-items: center;
+    padding: 12px 20px; /* Adjusted padding */
+    color: #555; /* Grey text color */
+    text-decoration: none;
+    transition: all 0.2s ease;
+    border-radius: 5px; /* Slight rounding */
+    margin: 0 10px; /* Horizontal margin */
+}
+
+.sidebar-menu a i {
+    margin-right: 12px; /* Increased icon margin */
+    width: 20px;
+    text-align: center;
+    font-size: 1.1em; /* Slightly larger icons */
+    color: #888; /* Lighter icon color */
+}
+
+.sidebar-menu a:hover,
+.sidebar-menu li.active a {
+    background-color: #e7f3ff; /* Light blue background for hover/active */
+    color: #0d6efd; /* Blue text for hover/active */
+}
+
+.sidebar-menu li.active a i,
+.sidebar-menu a:hover i {
+    color: #0d6efd; /* Blue icon for hover/active */
+}
+
+.sidebar-footer {
+    padding: 15px;
+    text-align: center;
+    font-size: 0.8rem;
+    color: #aaa; /* Lighter grey */
+    border-top: 1px solid #e0e0e0;
+}
+
+/* Main Content Area */
+.main-content {
+    flex-grow: 1;
+    padding: 20px;
+    overflow-y: auto; /* Enable vertical scroll */
+    background-color: #f0f2f5;
+    display: flex;
+    flex-direction: column;
+    gap: 20px; /* Space between sections */
+}
+
+/* Card Style */
+.card {
+    background-color: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    padding: 20px;
+    border: 1px solid #e0e0e0; /* Subtle border for cards */
+}
+
+.card h2 {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin-bottom: 15px;
+    color: #333;
+    display: flex;
+    align-items: center;
+}
+
+.card h2 i {
+    margin-right: 10px;
+    color: #0d6efd;
+}
+
+/* Sections Layout */
+.top-section,
+.middle-section {
+    display: flex;
+    gap: 20px;
+}
+
+.top-section > div,
+.middle-section > div {
+    flex: 1;
+    min-width: 0; /* Prevent flex overflow */
+}
+
+/* Upload Panel */
+.upload-panel .file-upload-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.upload-btn {
+    background-color: #0d6efd;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background-color 0.2s ease;
+    margin-bottom: 10px;
+}
+
+.upload-btn:hover {
+    background-color: #0b5ed7;
+}
+
+.supported-files {
+    font-size: 0.85rem;
+    color: #888;
+    margin-bottom: 10px;
+}
+
+/* 文件上传列表容器 */
+.file-list-container {
+    margin-top: 15px;
+    width: 100%;
+}
+
+/* 文件列表表格样式 */
+.file-list-table {
+    list-style: none;
+    padding: 0;
+    width: 100%;
+    border: 1px solid #e0e0e0;
+    border-radius: 5px;
+    background-color: #f8f9fa;
+    overflow: hidden;
+}
+
+#file-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    max-height: 250px;
+    overflow-y: auto;
+    border: 1px solid #e0e0e0;
+    border-radius: 5px;
+    background-color: #f8f9fa;
+}
+
+#file-list:empty {
+    border: none;
+    padding: 0;
+    margin: 0;
+    height: 0;
+}
+
+#file-list li {
+    padding: 10px 15px;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    align-items: center;
+    font-size: 0.9rem;
+    position: relative;
+    background-color: white;
+}
+
+#file-list li:nth-child(odd) {
+    background-color: #f8f9fa;
+}
+
+#file-list li:last-child {
+    border-bottom: none;
+}
+
+#file-list li i {
+    margin-right: 10px;
+    color: #6c757d;
+}
+
+/* 文件信息部分 */
+.file-name {
+    flex-grow: 1;
+    font-weight: 500;
+    color: #333;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 70%;
+}
+
+/* 文件状态样式 */
+.file-status {
+    padding: 3px 8px;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    font-weight: normal;
+    white-space: nowrap;
+    margin-left: auto;
+}
+
+/* 不同状态的样式 */
+.file-status-uploading {
+    color: #0d6efd;
+    background-color: rgba(13, 110, 253, 0.1);
+}
+
+.file-status-success {
+    color: #198754;
+    background-color: rgba(25, 135, 84, 0.1);
+}
+
+.file-status-error {
+    color: #dc3545;
+    background-color: rgba(220, 53, 69, 0.1);
+}
+
+.file-status-retrying {
+    color: #fd7e14;
+    background-color: rgba(253, 126, 20, 0.1);
+}
+
+/* Summary & Tags Panel */
+.summary-tags-panel {
+    display: flex;
+    flex-direction: column;
+}
+
+/* 文件信息部分样式 */
+.file-info-section {
+    margin-bottom: 15px;
+    border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 10px;
+}
+
+.file-info-section h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #444;
+    margin-bottom: 8px;
+    padding-left: 5px;
+    border-left: 3px solid #0d6efd;
+}
+
+#uploaded-filename {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #0d6efd;
+    margin-bottom: 15px;
+    padding-left: 10px;
+    border-left: 4px solid #0d6efd;
+    display: block;
+    width: 100%;
+}
+
+.summary-section h4 {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #444;
+    margin-bottom: 8px;
+    padding-left: 5px;
+    border-left: 3px solid #0d6efd;
+}
+
+/* 文档标签区域 */
+.document-tags-container {
+    margin-top: 10px;
+    margin-bottom: 15px;
+}
+
+.document-tag-group {
+    margin-bottom: 12px;
+    border-left: 2px solid #e7f3ff;
+    padding-left: 8px;
+}
+
+.document-tag-header {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 5px 8px;
+    background-color: #f8f9fa;
+    border-radius: 4px;
+    margin-bottom: 5px;
+}
+
+.document-tag-header:hover {
+    background-color: #e7f3ff;
+}
+
+.document-tag-header i {
+    margin-right: 8px;
+    color: #0d6efd;
+    transition: transform 0.2s ease;
+}
+
+.document-tag-header.active i.fa-chevron-right {
+    transform: rotate(90deg);
+}
+
+.document-tag-name {
+    font-weight: 500;
+    color: #333;
+}
+
+.document-tag-content {
+    display: none;
+    padding: 5px 0 5px 20px;
+}
+
+.document-tag-content.active {
+    display: block;
+}
+
+/* 标签容器放在文件名下面 */
+#tags-container {
+    margin-top: 8px;
+    margin-bottom: 12px;
+}
+
+.tag {
+    display: inline-block;
+    background-color: #e7f3ff; /* Light blue background */
+    color: #0d6efd; /* Blue text */
+    padding: 5px 12px; /* Adjusted padding */
+    border-radius: 15px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    margin-right: 6px;
+    margin-bottom: 6px;
+}
+
+#summary-area {
+    flex-grow: 1;
+    width: 100%;
+    min-height: 150px; /* 增加高度 */
+    padding: 12px 15px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #f8f9fa; /* Light background for textarea */
+    resize: vertical; /* Allow vertical resize */
+    outline: none;
+    font-size: 0.95rem;
+    line-height: 1.5;
+    color: #333;
+    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+    white-space: pre-wrap; /* 保留换行 */
+}
+
+/* Knowledge Folders Panel */
+.knowledge-folders-panel .folder-list {
+    list-style: none;
+    padding: 0;
+}
+
+.knowledge-folders-panel .folder-list li {
+    padding: 8px 0;
+    font-size: 0.95rem;
+    color: #333;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px dashed #eee; /* Dashed separator */
+}
+
+.knowledge-folders-panel .folder-list li:last-child {
+    border-bottom: none;
+}
+
+.knowledge-folders-panel .folder-list i {
+    margin-right: 10px;
+    color: #ffc107; /* Folder icon color */
+}
+
+/* Chat Panel */
+.chat-panel {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden; /* Prevent content overflow */
+    height: 450px; /* Fixed height for chat panel */
+}
+
+.chat-history {
+    flex-grow: 1;
+    padding: 15px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+    background-color: #f8f9fa; /* Light background for chat history */
+    border-radius: 5px;
+    margin-bottom: 15px;
+}
+
+.message {
+    max-width: 85%; /* Slightly wider messages */
+    padding: 10px 15px; /* Adjusted padding */
+    border-radius: 18px;
+    line-height: 1.5;
+    word-wrap: break-word;
+}
+
+.user-message {
+    align-self: flex-end;
+    background-color: #0d6efd; /* Blue user messages */
+    color: white;
+    border-bottom-right-radius: 5px;
+}
+
+.bot-message {
+    align-self: flex-start;
+    background-color: #e9ecef; /* Light grey bot messages */
+    color: #333;
+    border-bottom-left-radius: 5px;
+}
+
+.input-container {
+    padding-top: 15px;
+    display: flex;
+    align-items: center; /* Align items vertically */
+    gap: 10px;
+    border-top: 1px solid #e0e0e0;
+}
+
+#user-input {
+    flex-grow: 1;
+    padding: 10px 15px;
+    border: 1px solid #ccc;
+    border-radius: 20px;
+    background-color: #fff;
+    resize: none;
+    outline: none;
+    min-height: 40px; /* Match button height */
+    max-height: 100px; /* Limit expansion */
+    font-size: 0.95rem;
+}
+
+#send-btn {
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #0d6efd;
+    color: white;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s ease;
+}
+
+#send-btn:hover {
+    background-color: #0b5ed7;
+}
+
+.status-indicator {
+    margin-top: 8px;
+    font-size: 0.8rem;
+    color: #dc3545; /* Default to error color */
+    min-height: 1em;
+}
+
+.status-indicator.success {
+    color: #198754; /* Green for success */
+}
+
+/* Review Panel */
+.review-panel p {
+    font-size: 0.95rem;
+    color: #555;
+}
+
+.review-panel strong {
+    color: #0d6efd;
+}
+
+/* Remove old status indicator style from chat header */
+/* #status-indicator { ... } */
+
+/* Remove old typing indicator styles if they exist */
+/* .typing-indicator { ... } */
+/* .typing-dot { ... } */
+/* @keyframes typingAnimation { ... } */
+
+/* Adjustments for responsiveness if needed */
+@media (max-width: 1200px) {
+    .top-section,
+    .middle-section {
+        flex-direction: column;
+    }
+    .chat-panel {
+        height: auto; /* Allow chat panel height to adjust */
+        min-height: 400px;
+    }
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        width: 100%;
+        height: auto;
+        position: static; /* Or fixed/sticky as needed */
+        border-right: none;
+        border-bottom: 1px solid #e0e0e0;
+    }
+    .main-content {
+        padding: 15px;
+    }
+    body {
+        flex-direction: column;
+        height: auto;
+        overflow: visible;
+    }
+    .container {
+        flex-direction: column;
+        height: auto;
+    }
+}
+
+/* 打字指示器样式 */
+.typing-indicator span {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background-color: #999;
+    border-radius: 50%;
+    margin: 0 2px;
+    animation: typingAnimation 1.4s infinite ease-in-out;
+}
+
+.typing-indicator span:nth-child(1) {
+    animation-delay: 0s;
+}
+
+.typing-indicator span:nth-child(2) {
+    animation-delay: 0.2s;
+}
+
+.typing-indicator span:nth-child(3) {
+    animation-delay: 0.4s;
+}
+
+@keyframes typingAnimation {
+    0%, 60%, 100% { 
+        transform: translateY(0);
+        opacity: 0.6; 
+    }
+    30% { 
+        transform: translateY(-4px);
+        opacity: 1; 
+    }
+}
+
+/* 文件状态样式 */
+.file-status {
+    color: #666;
+    font-size: 0.85rem;
+    font-style: italic;
+}
+
+/* 状态指示器类型 */
+.status-indicator.info {
+    color: #0d6efd;
+}
+
+.status-indicator.success {
+    color: #198754;
+}
+
+.status-indicator.error {
+    color: #dc3545;
+}
+
+/* 添加错误消息样式 */
+.error-message {
+    background-color: #ffe6e6 !important; /* 浅红色背景 */
+    border-left: 3px solid #dc3545; /* 红色左边框 */
+}
+
+.error-message .message-content {
+    color: #721c24; /* 深红色文本 */
+    font-size: 0.9rem;
+    line-height: 1.6;
+}
+
+/* 空标签样式 */
+.tag.empty-tag {
+    background-color: #f0f0f0; /* 灰色背景 */
+    color: #666; /* 灰色文本 */
+}
+
+/* 摘要内容区域样式 */
+.summary-content {
+    width: 100%;
+    min-height: 150px;
+    max-height: 400px;
+    padding: 12px 15px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #f8f9fa;
+    overflow-y: auto;
+    font-size: 0.95rem;
+    line-height: 1.5;
+    color: #333;
+    white-space: pre-wrap;
+}
+
+/* 文件标题样式 - 对应Markdown中的## */
+.summary-content h2 {
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: #0d6efd;
+    margin-top: 15px;
+    margin-bottom: 10px;
+    padding-left: 8px;
+    border-left: 3px solid #0d6efd;
+}
+
+/* 摘要标题样式 - 对应Markdown中的### */
+.summary-content h3 {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: #444;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    padding-left: 5px;
+    border-left: 2px solid #28a745;
+}
+
+/* 摘要中的段落样式 */
+.summary-content p {
+    margin-bottom: 10px;
+}
+
+/* 占位文本样式 */
+.placeholder-text {
+    color: #999;
+    font-style: italic;
+}
+
+/* 文件分隔线样式 */
+.file-divider {
+    height: 1px;
+    background-color: #e0e0e0;
+    margin: 15px 0;
+}
+
+/* 知识图谱页面样式 */
+.knowledge-map-section {
+    height: calc(100vh - 60px);
+    display: flex;
+    flex-direction: column;
+}
+
+.knowledge-map-panel {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow: hidden;
+}
+
+.map-controls {
+    display: flex;
+    align-items: center;
+    padding: 10px 0;
+    margin-bottom: 15px;
+    border-bottom: 1px solid #e0e0e0;
+    flex-wrap: wrap; /* 允许控制项在窄屏幕上换行 */
+}
+
+.control-group {
+    display: flex;
+    align-items: center;
+    margin-right: 20px;
+    margin-bottom: 5px; /* 在换行时提供一些垂直间距 */
+}
+
+.control-group label {
+    margin-right: 8px;
+    font-size: 0.9rem;
+    color: #555;
+}
+
+.map-control-select {
+    padding: 5px 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 0.9rem;
+    background-color: #fff;
+}
+
+.map-control-btn {
+    background-color: #0d6efd;
+    color: white;
+    padding: 5px 12px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: background-color 0.2s ease;
+    margin-right: 10px; /* 按钮之间的间距 */
+    white-space: nowrap; /* 防止文本换行 */
+    display: flex;
+    align-items: center;
+}
+
+.map-control-btn i {
+    margin-right: 5px;
+}
+
+.map-control-btn:hover {
+    background-color: #0b5ed7;
+}
+
+#view-toggle-btn {
+    background-color: #6c757d; /* 不同的颜色以区分功能 */
+}
+
+#view-toggle-btn:hover {
+    background-color: #5a6268;
+}
+
+/* 添加视图模式指示器 */
+.view-mode-indicator {
+    margin-left: auto; /* 推到右边 */
+    font-size: 0.85rem;
+    color: #6c757d;
+    font-style: italic;
+}
+
+/* 节点类型样式 */
+.tag-node {
+    color: #0d6efd;
+}
+
+.document-node {
+    color: #e15759;
+}
+
+.category-node {
+    color: #f28e2c;
+}
+
+.knowledge-map-container {
+    flex-grow: 1;
+    width: 100%;
+    height: 70%;
+    min-height: 400px;
+    border: 1px solid #e0e0e0;
+    border-radius: 5px;
+    background-color: #f8f9fa;
+    overflow: hidden;
+    position: relative;
+}
+
+.map-info {
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid #e0e0e0;
+}
+
+.map-info p {
+    font-size: 0.9rem;
+    color: #666;
+    margin-bottom: 10px;
+}
+
+.node-info {
+    background-color: #f8f9fa;
+    border: 1px solid #e0e0e0;
+    border-radius: 5px;
+    padding: 15px;
+    margin-top: 10px;
+}
+
+.node-info h3 {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 10px;
+    padding-left: 8px;
+    border-left: 3px solid #0d6efd;
+}
+
+.node-details {
+    font-size: 0.95rem;
+    line-height: 1.5;
+    color: #444;
+}
+
+.node-details .tag-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    margin-top: 8px;
+}
+
+.node-details .document-link {
+    display: inline-flex;
+    align-items: center;
+    margin-top: 10px;
+    background-color: #e7f3ff;
+    color: #0d6efd;
+    padding: 6px 12px;
+    border-radius: 4px;
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+}
+
+.node-details .document-link:hover {
+    background-color: #0d6efd;
+    color: white;
+}
+
+/* 词云链接样式 */
+.node-details .wordcloud-link {
+    display: inline-flex;
+    align-items: center;
+    margin-top: 10px;
+    margin-left: 10px;
+    background-color: #e8f5e9;
+    color: #2e7d32;
+    padding: 6px 12px;
+    border-radius: 4px;
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+}
+
+.node-details .wordcloud-link:hover {
+    background-color: #2e7d32;
+    color: white;
+}
+
+/* 文档操作按钮容器 */
+.document-action-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 15px;
+}
+
+.document-action-buttons a i {
+    margin-right: 5px;
+}
+
+/* 知识图谱缩放控制器 */
+.zoom-controllers {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 100;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 4px;
+    padding: 5px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+
+.zoom-btn {
+    width: 36px;
+    height: 36px;
+    border-radius: 4px;
+    background-color: white;
+    border: 1px solid #ddd;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+}
+
+.zoom-btn:hover {
+    background-color: #f0f0f0;
+    border-color: #ccc;
+}
+
+.zoom-btn i {
+    color: #555;
+    font-size: 16px;
+}
+
+.zoom-btn:hover i {
+    color: #0d6efd;
+}
+
+/* 强调当前活动的节点 */
+.active-node-path {
+    stroke-width: 2;
+    stroke: #0d6efd;
+}
+
+/* 在知识图谱容器上添加相对定位以支持缩放控制器定位 */
+.knowledge-map-container.draggable {
+    cursor: grab;
+}
+
+.knowledge-map-container.dragging {
+    cursor: grabbing;
+}
+
+/* 词云图布局样式 */
+.wordcloud-mode .node {
+    font-size: 1.2em;
+    font-weight: bold;
+    transition: transform 0.3s ease, font-size 0.3s ease;
+}
+
+.wordcloud-mode .node:hover {
+    transform: scale(1.1);
+    z-index: 10;
+}
+
+.wordcloud-mode .document-node {
+    color: #0d6efd;
+    font-size: 1.3em;
+}
+
+/* 词云图模态框样式 */
+.wordcloud-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.wordcloud-modal-content {
+    width: 80%;
+    max-width: 900px;
+    max-height: 80vh;
+    background-color: white;
+    border-radius: 8px;
+    overflow: auto;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+}
+
+.wordcloud-modal-header {
+    padding: 15px 20px;
+    border-bottom: 1px solid #e0e0e0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.wordcloud-modal-header h3 {
+    margin: 0;
+    color: #333;
+    font-size: 1.2rem;
+}
+
+.close-modal {
+    background: none;
+    border: none;
+    font-size: 1.2rem;
+    color: #666;
+    cursor: pointer;
+    padding: 5px;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s ease;
+}
+
+.close-modal:hover {
+    background-color: #f0f0f0;
+    color: #333;
+}
+
+.wordcloud-modal-body {
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.loading-indicator {
+    text-align: center;
+    padding: 30px;
+    color: #666;
+}
+
+.loading-indicator i {
+    font-size: 2rem;
+    margin-bottom: 10px;
+    color: #0d6efd;
+}
+
+.wordcloud-image-container {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.wordcloud-image {
+    max-width: 100%;
+    max-height: 400px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+}
+
+.wordcloud-freq-container {
+    border-top: 1px solid #e0e0e0;
+    padding-top: 15px;
+    margin-top: 15px;
+}
+
+.wordcloud-freq-container h4 {
+    margin-bottom: 10px;
+    color: #333;
+    font-size: 1rem;
+}
+
+.word-freq-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    max-height: 150px;
+    overflow-y: auto;
+    padding: 10px;
+    background-color: #f8f9fa;
+    border-radius: 5px;
+}
+
+/* 在词云图布局中强调文档节点 */
+.map-control-select option[value="wordcloud"] {
+    font-weight: bold;
+    color: #0d6efd;
+}
+
+/* 直接生成词云图按钮样式 */
+.generate-cloud-link {
+    display: inline-flex;
+    align-items: center;
+    margin-top: 10px;
+    margin-left: 10px;
+    background-color: #fff0e5;
+    color: #ff6d00;
+    padding: 6px 12px;
+    border-radius: 4px;
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition: all 0.2s ease;
+}
+
+.generate-cloud-link:hover {
+    background-color: #ff6d00;
+    color: white;
+}
+
+/* 相关文档样式 */
+.related-docs {
+    margin-top: 10px;
+    max-height: 300px;
+    overflow-y: auto;
+    border: 1px solid #e0e0e0;
+    border-radius: 5px;
+    padding: 10px;
+    background-color: #f8f9fa;
+}
+
+.related-doc-item {
+    padding: 10px;
+    border-bottom: 1px solid #eee;
+    transition: background-color 0.2s ease;
+}
+
+.related-doc-item:last-child {
+    border-bottom: none;
+}
+
+.related-doc-item:hover {
+    background-color: #f0f0f0;
+}
+
+.doc-title {
+    display: block;
+    font-weight: 500;
+    color: #333;
+    margin-bottom: 5px;
+}
+
+/* 词云图专用样式增强 */
+#knowledge-map-container.wordcloud-mode {
+    background-color: #ffffff !important;
+    border: 1px solid #ddd !important;
+    padding: 10px;
+    overflow: visible !important;
+    min-height: 400px;
+}
+
+/* 词云图样式增强 */
+.wordcloud-mode div {
+    overflow: visible !important;
+}
+
+/* 确保词云图文字可见 */
+.wordcloud-mode text,
+.wordcloud-mode .ec-wordCloud text,
+.wordcloud-mode svg text {
+    fill: #333 !important;
+    fill-opacity: 1 !important;
+    font-weight: bold !important;
+    stroke: none !important;
+    font-family: 'Arial', '微软雅黑', sans-serif !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* 强制显示SVG元素 */
+.wordcloud-mode svg,
+.wordcloud-mode canvas {
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
+}
+
+/* 去除任何可能引起问题的遮挡元素 */
+.wordcloud-mode * {
+    pointer-events: auto !important;
+}
+
+/* 确保词语悬停时的效果 */
+.wordcloud-mode text:hover,
+.wordcloud-mode .ec-wordCloud text:hover {
+    fill: #f00 !important;
+    cursor: pointer;
+    transform: scale(1.1);
+}
+
+/* 词云图词语样式 */
+.ec-wordCloud text {
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-shadow: 0 2px 1px rgba(0,0,0,0.1);
+    fill-opacity: 1 !important; /* 确保文字不透明 */
+    font-weight: bold;
+}
+
+.ec-wordCloud text:hover {
+    fill-opacity: 0.8;
+    transform: scale(1.1);
+    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+/* 当选择词云图模式时应用特殊样式 */
+.wordcloud-mode .ec-wordCloud {
+    transform-origin: center center;
+    animation: wordcloud-appear 1s ease-out;
+}
+
+@keyframes wordcloud-appear {
+    0% {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* 根据字体大小设置不同样式 */
+.ec-wordCloud text[font-size="24"],
+.ec-wordCloud text[font-size="25"],
+.ec-wordCloud text[font-size="26"],
+.ec-wordCloud text[font-size="27"],
+.ec-wordCloud text[font-size="28"],
+.ec-wordCloud text[font-size="29"],
+.ec-wordCloud text[font-size="30"] {
+    opacity: 0.9;
+}
+
+.ec-wordCloud text[font-size="31"],
+.ec-wordCloud text[font-size="32"],
+.ec-wordCloud text[font-size="33"],
+.ec-wordCloud text[font-size="34"],
+.ec-wordCloud text[font-size="35"],
+.ec-wordCloud text[font-size="40"] {
+    opacity: 0.95;
+}
+
+.ec-wordCloud text[font-size="41"],
+.ec-wordCloud text[font-size="42"],
+.ec-wordCloud text[font-size="43"],
+.ec-wordCloud text[font-size="44"],
+.ec-wordCloud text[font-size="45"],
+.ec-wordCloud text[font-size="50"] {
+    opacity: 1;
+    font-weight: bold;
+}
+
+.ec-wordCloud text[font-size="60"],
+.ec-wordCloud text[font-size="70"],
+.ec-wordCloud text[font-size="80"],
+.ec-wordCloud text[font-size="90"],
+.ec-wordCloud text[font-size="100"] {
+    opacity: 1;
+    font-weight: bold;
+    text-shadow: 0 2px 3px rgba(0,0,0,0.2);
+}
+
+/* 知识图谱节点样式由JS控制 */
+
+/* 词云图容器样式 */
+.wordcloud-container {
+    background-color: #ffffff !important;
+    border: 1px solid #e0e0e0 !important;
+    border-radius: 8px !important;
+    padding: 15px !important;
+    min-height: 400px !important;
+    position: relative !important;
+    margin-top: 20px !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* 确保词云图内的文字清晰可见 */
+.wordcloud-container .echarts-for-react text,
+.wordcloud-container text {
+    fill: #333333 !important;
+    font-weight: bold !important;
+    font-family: 'Arial', sans-serif !important;
+    pointer-events: auto !important;
+    cursor: pointer !important;
+    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.8) !important;
+    transition: all 0.2s ease !important;
+}
+
+/* 词云图高亮状态 */
+.wordcloud-container text:hover {
+    fill: #2c85ff !important;
+    transform: scale(1.1) !important;
+}
+
+/* 词云图加载状态 */
+.wordcloud-loading {
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    text-align: center !important;
+    color: #666 !important;
+}
+
+/* 相关文档列表样式 */
+.related-docs {
+    max-height: 300px !important;
+    overflow-y: auto !important;
+    margin-top: 10px !important;
+    border: 1px solid #eee !important;
+    border-radius: 4px !important;
+    padding: 10px !important;
+}
+
+.related-doc-item {
+    padding: 8px !important;
+    border-bottom: 1px solid #eee !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.related-doc-item:last-child {
+    border-bottom: none !important;
+}
+
+.doc-title {
+    font-weight: bold !important;
+    margin-bottom: 5px !important;
+}
+
+.document-action-buttons {
+    display: flex !important;
+    gap: 10px !important;
+    margin-top: 5px !important;
+}
+
+.document-link, .wordcloud-link {
+    color: #2c85ff !important;
+    text-decoration: none !important;
+    font-size: 0.9em !important;
+    display: inline-flex !important;
+    align-items: center !important;
+    gap: 4px !important;
+}
+
+.document-link:hover, .wordcloud-link:hover {
+    text-decoration: underline !important;
+}
+
+/* 树形图节点悬停样式 */
+.node:hover {
+    cursor: pointer !important;
+    filter: brightness(1.1) !important;
+}
+
+/* 添加知识文件夹相关的样式 */
+.folder-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.folder-item {
+    margin-bottom: 10px;
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid #e5e7eb;
+    background-color: #f9fafb;
+}
+
+.folder-header {
+    padding: 10px 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    background-color: #f3f4f6;
+    transition: background-color 0.3s;
+}
+
+.folder-header:hover {
+    background-color: #e5e7eb;
+}
+
+.folder-toggle {
+    transition: transform 0.3s;
+}
+
+.file-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    background-color: #ffffff;
+}
+
+.file-item {
+    padding: 8px 15px 8px 35px;
+    border-top: 1px solid #e5e7eb;
+    display: flex;
+    align-items: center;
+    font-size: 0.9em;
+}
+
+.file-item i {
+    margin-right: 8px;
+    color: #6b7280;
+}
+
+.file-tag {
+    margin-left: 5px;
+    font-size: 0.85em;
+    color: #9ca3af;
+    font-style: italic;
+}
+
+.file-link {
+    color: #3b82f6;
+    text-decoration: none;
+}
+
+.file-link:hover {
+    text-decoration: underline;
+}
+
+.demo-notice {
+    margin-top: 15px;
+    padding: 10px;
+    border-radius: 6px;
+    background-color: #fff7ed;
+    border: 1px solid #ffedd5;
+    color: #c2410c;
+    font-size: 0.9em;
+}
+
+/* 确保已存在的样式不受影响 */ 

static/js/chat.js

@@ -0,0 +1,512 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Get element references
+    const chatHistory = document.getElementById('chat-history');
+    const userInput = document.getElementById('user-input');
+    const sendBtn = document.getElementById('send-btn');
+    const statusIndicator = document.getElementById('status-indicator');
+    const fileUpload = document.getElementById('file-upload');
+    const uploadButton = document.getElementById('upload-button');
+    const fileList = document.getElementById('file-list');
+    const summaryArea = document.getElementById('summary-area');
+    const documentTagsContainer = document.getElementById('document-tags-container');
+    const serverData = document.getElementById('server-data');
+    
+    // Array to store uploaded file information
+    let uploadedFiles = [];
+    
+    // 从服务器数据加载已上传的文件信息
+    if (serverData) {
+        try {
+            const uploadedFilesData = serverData.getAttribute('data-uploaded-files');
+            if (uploadedFilesData) {
+                uploadedFiles = JSON.parse(uploadedFilesData);
+                console.log('Loaded uploaded files from server:', uploadedFiles);
+                
+                // 更新摘要和标签区域
+                if (uploadedFiles.length > 0) {
+                    updateSummaryArea();
+                    updateDocumentTags();
+                }
+            }
+        } catch (error) {
+            console.error('Error parsing uploaded files data:', error);
+        }
+    }
+    
+    // Bind event listeners
+    sendBtn.addEventListener('click', sendMessage);
+    userInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+    
+    // Add delegated event listener to document tags container to handle click events
+    if (documentTagsContainer) {
+        documentTagsContainer.addEventListener('click', (e) => {
+            // Find the closest tag header
+            const header = e.target.closest('.document-tag-header');
+            if (header) {
+                // Toggle active class
+                header.classList.toggle('active');
+                
+                // Find corresponding content area
+                const content = header.nextElementSibling;
+                if (content && content.classList.contains('document-tag-content')) {
+                    content.classList.toggle('active');
+                }
+            }
+        });
+    }
+    
+    // Connect upload button and file input
+    if (uploadButton && fileUpload) {
+        uploadButton.addEventListener('click', () => {
+            fileUpload.click();
+        });
+        
+        fileUpload.addEventListener('change', (e) => {
+            if (fileUpload.files && fileUpload.files.length > 0) {
+                const file = fileUpload.files[0]; // 只处理第一个文件
+                console.log(`Selected file for upload: ${file.name}, type: ${file.type}`);
+                
+                // 验证文件类型
+                const validTypes = [
+                    'application/pdf', 
+                    'text/plain'
+                ];
+                
+                const fileExt = file.name.split('.').pop().toLowerCase();
+                
+                if (!validTypes.includes(file.type) && !(fileExt === 'pdf' || fileExt === 'txt')) {
+                    alert('Please select a PDF or TXT file only');
+                    fileUpload.value = ''; // 清除选择
+                    return;
+                }
+                
+                // Clear selected files to allow selecting the same file again
+                const selectedFile = file;
+                fileUpload.value = '';
+                
+                // Process the file
+                console.log(`Starting to process file: ${selectedFile.name}`);
+                handleFileUpload(selectedFile);
+            }
+        });
+    }
+    
+    // Check API key and enable input
+    checkApiConnection();
+    
+    // Check API connection
+    async function checkApiConnection() {
+        try {
+            setStatusMessage('Checking API connection...', 'info');
+            
+            const response = await fetch('/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ message: 'Test connection' })
+            });
+            
+            const data = await response.json();
+            
+            if (response.status !== 200) {
+                if (data.error && data.error.includes('API key')) {
+                    setStatusMessage('Please configure Google API key in settings page', 'error');
+                } else {
+                    setStatusMessage(data.error || 'Unable to connect to API', 'error');
+                }
+            } else {
+                setStatusMessage('', '');
+                // Enable input
+                userInput.disabled = false;
+                sendBtn.disabled = false;
+            }
+        } catch (error) {
+            console.error('API check failed:', error);
+            setStatusMessage('Server connection error, please try again later', 'error');
+        }
+    }
+    
+    // Send chat message
+    async function sendMessage() {
+        const message = userInput.value.trim();
+        if (!message) return;
+        
+        // Add user message to chat area
+        addMessageToChat(message, 'user');
+        userInput.value = '';
+        
+        // Disable input and show typing indicator
+        toggleInputState(false);
+        const typingIndicator = showTypingIndicator();
+        
+        try {
+            const response = await fetch('/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ message })
+            });
+            
+            // Remove typing indicator
+            hideTypingIndicator(typingIndicator);
+            
+            const data = await response.json();
+            
+            if (response.ok && data.reply) {
+                addMessageToChat(data.reply, 'bot');
+                setStatusMessage('', '');
+            } else {
+                const errorMessage = data.error || 'Unknown error, please try again';
+                setStatusMessage(errorMessage, 'error');
+                console.error('API error:', data);
+            }
+        } catch (error) {
+            hideTypingIndicator(typingIndicator);
+            setStatusMessage('Unable to connect to server, please check your network', 'error');
+            console.error('Request error:', error);
+        } finally {
+            toggleInputState(true);
+            scrollToBottom();
+        }
+    }
+    
+    // Update summary area to display summaries for all files
+    function updateSummaryArea() {
+        if (!summaryArea) return;
+        
+        // Clear current content
+        summaryArea.innerHTML = '';
+        
+        if (uploadedFiles.length === 0) {
+            // Show placeholder text
+            const placeholder = document.createElement('p');
+            placeholder.className = 'placeholder-text';
+            placeholder.textContent = 'Summary will appear after uploading files...';
+            summaryArea.appendChild(placeholder);
+            return;
+        }
+        
+        // Add summary for each uploaded file
+        uploadedFiles.forEach((file, index) => {
+            // Add file separator (except for first file)
+            if (index > 0) {
+                const divider = document.createElement('div');
+                divider.className = 'file-divider';
+                summaryArea.appendChild(divider);
+            }
+            
+            // Add file name title (##)
+            const fileTitle = document.createElement('h2');
+            fileTitle.textContent = file.filename;
+            summaryArea.appendChild(fileTitle);
+            
+            // Add file summary title (###)
+            const summaryTitle = document.createElement('h3');
+            summaryTitle.textContent = 'File Summary';
+            summaryArea.appendChild(summaryTitle);
+            
+            // Add summary content
+            const summaryContent = document.createElement('p');
+            summaryContent.textContent = file.summary || 'Could not generate summary';
+            summaryArea.appendChild(summaryContent);
+        });
+    }
+    
+    // Update document tags area
+    function updateDocumentTags() {
+        if (!documentTagsContainer) return;
+        
+        // Clear current content
+        documentTagsContainer.innerHTML = '';
+        
+        if (uploadedFiles.length === 0) {
+            // Show placeholder text
+            const placeholder = document.createElement('p');
+            placeholder.className = 'placeholder-text';
+            placeholder.textContent = 'Tags will appear after uploading files...';
+            documentTagsContainer.appendChild(placeholder);
+            return;
+        }
+        
+        // Create tag group for each uploaded file
+        uploadedFiles.forEach(file => {
+            // Create document tag group
+            const tagGroup = document.createElement('div');
+            tagGroup.className = 'document-tag-group';
+            
+            // Create collapsible tag header
+            const tagHeader = document.createElement('div');
+            tagHeader.className = 'document-tag-header';
+            tagHeader.innerHTML = `
+                <i class="fas fa-chevron-right"></i>
+                <span class="document-tag-name">${file.filename}</span>
+            `;
+            
+            // Create tag content area
+            const tagContent = document.createElement('div');
+            tagContent.className = 'document-tag-content';
+            
+            // Add tags to content area
+            if (file.tags && file.tags.length > 0) {
+                file.tags.forEach(tag => {
+                    const tagEl = document.createElement('span');
+                    tagEl.className = 'tag';
+                    tagEl.textContent = tag;
+                    tagContent.appendChild(tagEl);
+                });
+            } else {
+                const noTagsEl = document.createElement('span');
+                noTagsEl.className = 'tag empty-tag';
+                noTagsEl.textContent = 'No tags generated';
+                tagContent.appendChild(noTagsEl);
+            }
+            
+            // Add header and content to tag group
+            tagGroup.appendChild(tagHeader);
+            tagGroup.appendChild(tagContent);
+            
+            // Add tag group to container
+            documentTagsContainer.appendChild(tagGroup);
+        });
+    }
+    
+    // Update file list
+    function updateFileList(fileName, status) {
+        if (!fileList) return;
+        
+        // Generate unique file ID for DOM element identification
+        const fileId = fileName.replace(/[^a-zA-Z0-9]/g, '_');
+        
+        // Check if file already exists in list
+        let existingItem = document.querySelector(`#file-list li[data-file-id="${fileId}"]`);
+        
+        // Determine status class
+        let statusClass = '';
+        if (status.includes('Uploading')) {
+            statusClass = 'file-status-uploading';
+        } else if (status.includes('Uploaded')) {
+            statusClass = 'file-status-success';
+        } else if (status.includes('Failed')) {
+            statusClass = 'file-status-error';
+        } else if (status.includes('Retrying')) {
+            statusClass = 'file-status-retrying';
+        }
+        
+        // Create or update file item
+        if (!existingItem) {
+            // Create new file item
+            const fileItem = document.createElement('li');
+            fileItem.dataset.fileId = fileId;
+            fileItem.dataset.filename = fileName;
+            fileItem.innerHTML = `
+                <i class="fas fa-file-alt"></i>
+                <span class="file-name">${fileName}</span>
+                <span class="file-status ${statusClass}">${status}</span>
+            `;
+            fileList.appendChild(fileItem);
+            
+            // Ensure newly added item scrolls into view
+            fileList.scrollTop = fileList.scrollHeight;
+        } else {
+            // Just update status of existing item
+            const statusSpan = existingItem.querySelector('.file-status');
+            if (statusSpan) {
+                statusSpan.textContent = status;
+                statusSpan.className = `file-status ${statusClass}`;
+            }
+        }
+        
+        // Print debug info
+        console.log(`File list updated: ${fileName}, Status: ${status}, Item count: ${fileList.children.length}`);
+    }
+    
+    // Add message to chat history
+    function addMessageToChat(content, sender) {
+        const messageDiv = document.createElement('div');
+        messageDiv.className = `message ${sender}-message`;
+        
+        const contentDiv = document.createElement('div');
+        contentDiv.className = 'message-content';
+        contentDiv.textContent = content;
+        
+        messageDiv.appendChild(contentDiv);
+        chatHistory.appendChild(messageDiv);
+        
+        scrollToBottom();
+    }
+    
+    // Show typing indicator
+    function showTypingIndicator() {
+        const indicator = document.createElement('div');
+        indicator.className = 'message bot-message typing-indicator';
+        indicator.innerHTML = '<div class="message-content"><span>•</span><span>•</span><span>•</span></div>';
+        chatHistory.appendChild(indicator);
+        scrollToBottom();
+        return indicator;
+    }
+    
+    // Hide typing indicator
+    function hideTypingIndicator(indicator) {
+        if (indicator && indicator.parentNode) {
+            indicator.parentNode.removeChild(indicator);
+        }
+    }
+    
+    // Set status message
+    function setStatusMessage(message, type = '') {
+        if (!statusIndicator) return;
+        
+        statusIndicator.textContent = message;
+        statusIndicator.className = 'status-indicator';
+        if (type) {
+            statusIndicator.classList.add(type);
+        }
+    }
+    
+    // Toggle input state (enable/disable)
+    function toggleInputState(enabled) {
+        if (userInput) userInput.disabled = !enabled;
+        if (sendBtn) sendBtn.disabled = !enabled;
+    }
+    
+    // Scroll to bottom of chat history
+    function scrollToBottom() {
+        if (chatHistory) {
+            chatHistory.scrollTop = chatHistory.scrollHeight;
+        }
+    }
+    
+    // Handle file upload
+    async function handleFileUpload(file) {
+        if (!file) return;
+        
+        const fileName = file.name;
+        console.log(`Starting to upload file: ${fileName}`);
+        
+        // Show file name and add to list
+        updateFileList(fileName, 'Uploading...');
+        setStatusMessage('Uploading file...', 'info');
+        
+        // Create FormData object
+        const formData = new FormData();
+        formData.append('file', file);
+        
+        let retryCount = 0;
+        const maxRetries = 2;
+        
+        async function attemptUpload() {
+            try {
+                // Record upload start time
+                const startTime = new Date().getTime();
+                
+                const response = await fetch('/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                // Calculate upload time
+                const uploadTime = (new Date().getTime() - startTime) / 1000;
+                console.log(`File ${fileName} upload request took: ${uploadTime} seconds`);
+                
+                const data = await response.json();
+                
+                if (!response.ok) {
+                    throw new Error(`Upload failed: ${response.status} - ${data.error || 'Unknown error'}`);
+                }
+                
+                if (data.success) {
+                    console.log(`File upload successful: ${fileName}`);
+                    console.log(`Server response:`, data);
+                    
+                    // Show success message
+                    updateFileList(fileName, 'Uploaded');
+                    
+                    // Add to uploaded files list, ensure no duplicates
+                    const fileIndex = uploadedFiles.findIndex(f => f.filename === data.filename);
+                    if (fileIndex >= 0) {
+                        // If already exists, update information
+                        uploadedFiles[fileIndex] = {
+                            filename: data.filename,
+                            summary: data.summary,
+                            tags: data.tags || [],
+                            uploadTime: new Date().toISOString()
+                        };
+                    } else {
+                        // Add new file
+                        uploadedFiles.push({
+                            filename: data.filename,
+                            summary: data.summary,
+                            tags: data.tags || [],
+                            uploadTime: new Date().toISOString()
+                        });
+                    }
+                    
+                    // Update summary area and document tags area
+                    updateSummaryArea();
+                    updateDocumentTags();
+                    setStatusMessage('File uploaded successfully', 'success');
+                    
+                    // Add a prompt to the chat area
+                    const promptMsg = document.createElement('div');
+                    promptMsg.className = 'message bot-message';
+                    promptMsg.innerHTML = `<div class="message-content">I've received your uploaded file "${fileName}". The file summary and tags have been updated. You can continue uploading more files, or ask questions about these files.</div>`;
+                    chatHistory.appendChild(promptMsg);
+                    scrollToBottom();
+                    
+                    // 获取最新的知识文件夹结构
+                    setTimeout(() => {
+                        // 通过API请求获取更新的文件夹结构并更新DOM
+                        fetch('/api/knowledge-map')
+                            .then(response => response.json())
+                            .then(data => {
+                                console.log('Knowledge map refreshed without page reload');
+                                // 通过自定义事件通知知识文件夹结构已更新
+                                const event = new CustomEvent('knowledge-folders-updated', { detail: data });
+                                document.dispatchEvent(event);
+                            })
+                            .catch(error => {
+                                console.error('Error refreshing knowledge map:', error);
+                            });
+                    }, 500);
+                } else {
+                    throw new Error(data.error || 'Upload failed, but server did not provide a specific reason');
+                }
+            } catch (error) {
+                console.error(`Upload error (${fileName}):`, error);
+                
+                if (retryCount < maxRetries) {
+                    retryCount++;
+                    console.log(`File ${fileName} upload failed, attempting retry ${retryCount}`);
+                    setStatusMessage(`Upload failed, retrying (${retryCount}/${maxRetries})...`, 'error');
+                    updateFileList(fileName, `Retrying (${retryCount}/${maxRetries})...`);
+                    // Wait one second before retrying
+                    await new Promise(resolve => setTimeout(resolve, 1000));
+                    return attemptUpload();
+                }
+                
+                // Exceeded retry count, show detailed error
+                console.log(`File ${fileName} upload failed, maximum retry count reached`);
+                setStatusMessage(`Upload error: ${error.message}`, 'error');
+                updateFileList(fileName, 'Upload failed');
+                
+                // Add an error message to the chat
+                const errorMsg = document.createElement('div');
+                errorMsg.className = 'message bot-message error-message';
+                errorMsg.innerHTML = `<div class="message-content">File "${fileName}" upload failed: ${error.message}<br>
+                    Please ensure:<br>
+                    - The file type is PDF or TXT<br>
+                    - The file is not encrypted<br>
+                    - The file size is appropriate<br>
+                    You can try uploading again or use a different file.</div>`;
+                chatHistory.appendChild(errorMsg);
+                scrollToBottom();
+            }
+        }
+        
+        // Start upload attempt
+        await attemptUpload();
+    }
+}); 

static/js/knowledge-map.js

@@ -0,0 +1,1140 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Get DOM elements
+    const mapContainer = document.getElementById('knowledge-map-container');
+    const mapLayout = document.getElementById('map-layout');
+    const mapDepth = document.getElementById('map-depth');
+    const refreshBtn = document.getElementById('refresh-map');
+    const nodeTitle = document.getElementById('node-title');
+    const nodeDetails = document.getElementById('node-details');
+    // Add view toggle button reference
+    const viewToggleBtn = document.createElement('button');
+    viewToggleBtn.id = 'view-toggle-btn';
+    viewToggleBtn.className = 'map-control-btn';
+    viewToggleBtn.innerHTML = '<i class="fas fa-exchange-alt"></i> Switch View';
+    
+    // Add to control group
+    const controlsContainer = document.querySelector('.map-controls');
+    if (controlsContainer) {
+        const viewToggleGroup = document.createElement('div');
+        viewToggleGroup.className = 'control-group';
+        viewToggleGroup.appendChild(viewToggleBtn);
+        controlsContainer.appendChild(viewToggleGroup);
+    }
+    
+    // View mode: tag->doc (default) or doc->tag
+    let viewMode = 'tag-doc';
+
+    // Initialize ECharts instance
+    const myChart = echarts.init(mapContainer, null, {
+        renderer: 'canvas'
+    });
+
+    // Reset chart size on window resize
+    window.addEventListener('resize', () => {
+        myChart.resize();
+    });
+
+    // Chart configuration options
+    let option = {
+        tooltip: {
+            trigger: 'item',
+            formatter: '{b}: {c}'
+        },
+        series: [{
+            type: 'tree',
+            data: [],
+            top: '10%',
+            left: '5%',
+            bottom: '10%',
+            right: '15%',
+            symbolSize: 10,
+            label: {
+                position: 'left',
+                verticalAlign: 'middle',
+                align: 'right',
+                fontSize: 14
+            },
+            leaves: {
+                label: {
+                    position: 'right',
+                    verticalAlign: 'middle',
+                    align: 'left'
+                }
+            },
+            emphasis: {
+                focus: 'descendant'
+            },
+            expandAndCollapse: true,
+            animationDuration: 550,
+            animationDurationUpdate: 750,
+            // Add drag functionality
+            roam: true,  // Allow zooming and panning
+            // Set styles for different level nodes
+            itemStyle: {
+                color: function(params) {
+                    // Set different colors based on node depth
+                    const depth = params.treePathInfo ? params.treePathInfo.length - 1 : 0;
+                    // Define different level colors
+                    const colors = ['#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f'];
+                    return colors[Math.min(depth, colors.length - 1)];
+                }
+            },
+            // Set styles for different level labels
+            levels: [
+                { // Root node
+                    itemStyle: {
+                        color: '#4e79a7',
+                        borderWidth: 0
+                    },
+                    label: {
+                        fontSize: 18,
+                        fontWeight: 'bold'
+                    }
+                },
+                { // First level node
+                    itemStyle: {
+                        color: '#f28e2c',
+                        borderWidth: 1
+                    },
+                    label: {
+                        fontSize: 16,
+                        fontWeight: 'bold'
+                    }
+                },
+                { // Second level node
+                    itemStyle: {
+                        color: '#e15759'
+                    },
+                    label: {
+                        fontSize: 14
+                    }
+                },
+                { // Leaf node (document)
+                    itemStyle: {
+                        color: '#76b7b2'
+                    },
+                    label: {
+                        fontSize: 12
+                    }
+                }
+            ]
+        }]
+    };
+
+    // Set layout type
+    function setLayout(layout) {
+        if (layout === 'tree') {
+            option.series[0].type = 'tree';
+            option.series[0].layout = 'orthogonal';
+            option.series[0].orient = 'LR';
+            // Restore default series settings
+            option.series = [{
+                type: 'tree',
+                data: [],
+                top: '10%',
+                left: '5%',
+                bottom: '10%',
+                right: '15%',
+                symbolSize: 10,
+                label: {
+                    position: 'left',
+                    verticalAlign: 'middle',
+                    align: 'right',
+                    fontSize: 14,
+                    color: '#000' // Default text color
+                },
+                leaves: {
+                    label: {
+                        position: 'right',
+                        verticalAlign: 'middle',
+                        align: 'left',
+                        color: '#000' // Leaf node text color
+                    }
+                },
+                emphasis: {
+                    focus: 'descendant'
+                },
+                expandAndCollapse: true,
+                animationDuration: 550,
+                animationDurationUpdate: 750,
+                roam: true,
+                // Explicitly set node styles
+                itemStyle: {
+                    color: function(params) {
+                        // Set different colors based on node depth
+                        const depth = params.treePathInfo ? params.treePathInfo.length - 1 : 0;
+                        const colors = ['#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f'];
+                        return colors[Math.min(depth, colors.length - 1)];
+                    },
+                    borderWidth: 1,
+                    borderColor: '#999'
+                },
+                lineStyle: {
+                    color: '#999',
+                    width: 1
+                }
+            }];
+        } else if (layout === 'force') {
+            option.series[0].type = 'graph';
+            option.series[0].layout = 'force';
+            option.series[0].force = {
+                repulsion: 100,
+                edgeLength: 50
+            };
+        } else if (layout === 'radial') {
+            option.series[0].type = 'tree';
+            option.series[0].layout = 'radial';
+            option.series[0].orient = undefined;
+        } else if (layout === 'wordcloud') {
+            // Real word cloud mode - Use wordcloud chart type
+            console.log("Switch to word cloud mode");
+            
+            // Completely replace series configuration with word cloud chart
+            option.series = [{
+                type: 'wordCloud',
+                // Word cloud shape can be rectangle or circle
+                shape: 'circle',
+                // Word cloud size
+                left: 'center',
+                top: 'center',
+                width: '70%',
+                height: '70%',
+                // Word cloud background color, set to obvious white
+                backgroundColor: '#ffffff',
+                // Font size range, ensure words visible
+                sizeRange: [24, 80],
+                // Word rotation angle range - Reduce rotation for easier reading
+                rotationRange: [0, 0],  // Set to 0, no rotation
+                // Grid size, for layout optimization, reduce this value for denser words
+                gridSize: 6,
+                // Word cloud text style
+                textStyle: {
+                    fontFamily: 'Arial, sans-serif',
+                    fontWeight: 'bold',
+                    // Fixed text color, no random color
+                    color: '#333'
+                },
+                // Global zoom scale
+                layoutAnimation: false,
+                // Mouse hover effect
+                emphasis: {
+                    focus: 'self',
+                    textStyle: {
+                        shadowBlur: 10,
+                        shadowColor: '#333'
+                    }
+                },
+                // Must attribute, set drawOutOfBound to false to prevent text from being clipped
+                drawOutOfBound: false,
+                // Whether to enable fuzzy antialiasing processing
+                textShadowBlur: 2,
+                textShadowColor: '#fff',
+                // Data will be filled in buildWordcloudData function
+                data: []
+            }];
+        }
+    }
+
+    // Set level depth
+    function setDepth(depth) {
+        if (depth === 'all') {
+            option.series[0].expandAndCollapse = true;
+            option.series[0].initialTreeDepth = -1;
+        } else {
+            option.series[0].expandAndCollapse = true;
+            option.series[0].initialTreeDepth = parseInt(depth);
+        }
+    }
+
+    // Get knowledge map data
+    async function fetchKnowledgeMap() {
+        try {
+            const response = await fetch('/api/knowledge-map');
+            
+            if (!response.ok) {
+                throw new Error('Failed to get knowledge map data');
+            }
+            
+            const data = await response.json();
+            return data;
+        } catch (error) {
+            console.error('Failed to get knowledge map data:', error);
+            return {
+                nodes: [],
+                links: [],
+                error: error.message
+            };
+        }
+    }
+
+    // Truncate long filename
+    function truncateFilename(filename, maxLength = 25) {
+        if (!filename || filename.length <= maxLength) {
+            return filename;
+        }
+        
+        const ext = filename.lastIndexOf('.') > 0 ? filename.slice(filename.lastIndexOf('.')) : '';
+        const nameWithoutExt = filename.slice(0, filename.lastIndexOf('.') > 0 ? filename.lastIndexOf('.') : filename.length);
+        
+        // Keep filename prefix, add ellipsis, then keep extension
+        return nameWithoutExt.slice(0, maxLength - 3 - ext.length) + '...' + ext;
+    }
+
+    // Build knowledge map tree data - Tag to document structure (default view)
+    function buildTagToDocTree(data) {
+        // Process backend returned data, build into tree structure
+        if (data.error) {
+            showError(data.error);
+            return [];
+        }
+        
+        // If empty data, show prompt information
+        if (!data.documents || data.documents.length === 0) {
+            showError('No usable knowledge map data, please upload documents first');
+            return [];
+        }
+        
+        // Build tree structure
+        const rootNode = {
+            name: data.centralTopic || 'Knowledge Center',
+            value: data.documents.length,
+            children: []
+        };
+        
+        // Group processing
+        const tagGroups = {};
+        
+        // First find all tags common in all documents as the first layer
+        const allTags = new Set();
+        data.documents.forEach(doc => {
+            if (doc.tags && doc.tags.length > 0) {
+                doc.tags.forEach(tag => allTags.add(tag));
+            }
+        });
+        
+        // Generate tag hierarchy structure (simulate mind map hierarchy)
+        // Use tag co-occurrence frequency as hierarchy building basis
+        const tagRelations = {};
+        
+        // Calculate tag co-occurrence frequency
+        data.documents.forEach(doc => {
+            if (doc.tags && doc.tags.length > 0) {
+                for (let i = 0; i < doc.tags.length; i++) {
+                    for (let j = i + 1; j < doc.tags.length; j++) {
+                        const tag1 = doc.tags[i];
+                        const tag2 = doc.tags[j];
+                        const key = `${tag1}:${tag2}`;
+                        const reverseKey = `${tag2}:${tag1}`;
+                        
+                        if (tagRelations[key]) {
+                            tagRelations[key]++;
+                        } else if (tagRelations[reverseKey]) {
+                            tagRelations[reverseKey]++;
+                        } else {
+                            tagRelations[key] = 1;
+                        }
+                    }
+                }
+            }
+        });
+        
+        // Find main tags based on co-occurrence frequency
+        let maxCoOccurrence = 0;
+        let primaryTags = [];
+        
+        Object.keys(tagRelations).forEach(key => {
+            if (tagRelations[key] > maxCoOccurrence) {
+                maxCoOccurrence = tagRelations[key];
+                const [tag1, tag2] = key.split(':');
+                primaryTags = [tag1, tag2];
+            }
+        });
+        
+        // If no related tags are found, use the most common tag
+        if (primaryTags.length === 0) {
+            const tagFrequency = {};
+            data.documents.forEach(doc => {
+                if (doc.tags && doc.tags.length > 0) {
+                    doc.tags.forEach(tag => {
+                        tagFrequency[tag] = (tagFrequency[tag] || 0) + 1;
+                    });
+                }
+            });
+            
+            // Find the tag with the highest frequency
+            let maxFreq = 0;
+            let mostFrequentTag = '';
+            
+            Object.keys(tagFrequency).forEach(tag => {
+                if (tagFrequency[tag] > maxFreq) {
+                    maxFreq = tagFrequency[tag];
+                    mostFrequentTag = tag;
+                }
+            });
+            
+            primaryTags = [mostFrequentTag];
+        }
+        
+        // Use main tags as first level nodes
+        primaryTags.forEach(tag => {
+            const tagNode = {
+                name: tag,
+                value: 0,
+                children: []
+            };
+            
+            // Find documents containing the tag
+            const docsWithTag = data.documents.filter(doc => 
+                doc.tags && doc.tags.includes(tag)
+            );
+            
+            tagNode.value = docsWithTag.length;
+            
+            // Add child tag nodes to the tag node
+            const secondaryTags = new Set();
+            docsWithTag.forEach(doc => {
+                if (doc.tags) {
+                    doc.tags.forEach(t => {
+                        if (t !== tag && !primaryTags.includes(t)) {
+                            secondaryTags.add(t);
+                        }
+                    });
+                }
+            });
+            
+            // Add secondary tag nodes
+            secondaryTags.forEach(secondaryTag => {
+                const secondaryNode = {
+                    name: secondaryTag,
+                    value: 0,
+                    children: []
+                };
+                
+                // Find documents containing both first and second level tags
+                const docsWithBothTags = docsWithTag.filter(doc => 
+                    doc.tags && doc.tags.includes(secondaryTag)
+                );
+                
+                secondaryNode.value = docsWithBothTags.length;
+                
+                // Add document nodes to secondary tag
+                docsWithBothTags.forEach(doc => {
+                    secondaryNode.children.push({
+                        name: truncateFilename(doc.filename), // Truncate long filename
+                        fullName: doc.filename, // Save full filename
+                        value: 1,
+                        document: doc,
+                        nodeType: 'document'
+                    });
+                });
+                
+                if (secondaryNode.children.length > 0) {
+                    tagNode.children.push(secondaryNode);
+                }
+            });
+            
+            // Directly add documents without secondary tags to first level tag
+            const docsWithOnlyPrimaryTag = docsWithTag.filter(doc => 
+                doc.tags && doc.tags.filter(t => !primaryTags.includes(t) && secondaryTags.has(t)).length === 0
+            );
+            
+            docsWithOnlyPrimaryTag.forEach(doc => {
+                tagNode.children.push({
+                    name: truncateFilename(doc.filename), // Truncate long filename
+                    fullName: doc.filename, // Save full filename
+                    value: 1,
+                    document: doc,
+                    nodeType: 'document'
+                });
+            });
+            
+            if (tagNode.children.length > 0) {
+                rootNode.children.push(tagNode);
+            }
+        });
+        
+        // Add documents without main tags
+        const docsWithoutPrimaryTags = data.documents.filter(doc => 
+            !doc.tags || !doc.tags.some(tag => primaryTags.includes(tag))
+        );
+        
+        if (docsWithoutPrimaryTags.length > 0) {
+            const otherNode = {
+                name: 'Other Documents',
+                value: docsWithoutPrimaryTags.length,
+                children: []
+            };
+            
+            docsWithoutPrimaryTags.forEach(doc => {
+                otherNode.children.push({
+                    name: truncateFilename(doc.filename), // Truncate long filename
+                    fullName: doc.filename, // Save full filename
+                    value: 1,
+                    document: doc,
+                    nodeType: 'document'
+                });
+            });
+            
+            rootNode.children.push(otherNode);
+        }
+        
+        return [rootNode];
+    }
+
+    // Build document to tag tree structure (reverse view)
+    function buildDocToTagTree(data) {
+        // Process backend returned data, build into tree structure
+        if (data.error) {
+            showError(data.error);
+            return [];
+        }
+        
+        // If empty data, show prompt information
+        if (!data.documents || data.documents.length === 0) {
+            showError('No usable knowledge map data, please upload documents first');
+            return [];
+        }
+        
+        // Build tree structure
+        const rootNode = {
+            name: data.centralTopic || 'Knowledge Center',
+            value: data.documents.length,
+            children: []
+        };
+        
+        // Group documents by document type or topic
+        const docCategories = {};
+        
+        // Find all documents, extract possible classification information
+        data.documents.forEach(doc => {
+            // Try to infer category from filename
+            let category = 'Document Set';
+            
+            // Check file extension
+            if (doc.filename) {
+                const fileExt = doc.filename.split('.').pop().toLowerCase();
+                if (['pdf', 'docx', 'doc'].includes(fileExt)) {
+                    category = 'Text Document';
+                } else if (['ppt', 'pptx'].includes(fileExt)) {
+                    category = 'Presentation';
+                } else if (['xlsx', 'xls', 'csv'].includes(fileExt)) {
+                    category = 'Data File';
+                }
+                
+                // Also try to infer better classification from tags
+                if (doc.tags && doc.tags.length > 0) {
+                    // Find some possible tags that might represent topic
+                    const possibleCategories = ['Education', 'Cognition', 'Learning', 'Media', 'Design', 'Evaluation'];
+                    for (const pc of possibleCategories) {
+                        const matchingTag = doc.tags.find(tag => tag.includes(pc));
+                        if (matchingTag) {
+                            category = matchingTag;
+                            break;
+                        }
+                    }
+                }
+            }
+            
+            // Ensure category exists
+            if (!docCategories[category]) {
+                docCategories[category] = [];
+            }
+            
+            // Add document to category
+            docCategories[category].push(doc);
+        });
+        
+        // Create a tree node for each category
+        Object.keys(docCategories).forEach(category => {
+            const categoryNode = {
+                name: category,
+                value: docCategories[category].length,
+                children: []
+            };
+            
+            // Create a node for each document in the category
+            docCategories[category].forEach(doc => {
+                const docNode = {
+                    name: truncateFilename(doc.filename),
+                    fullName: doc.filename,
+                    value: doc.tags ? doc.tags.length : 0,
+                    document: doc,
+                    nodeType: 'document',
+                    children: []
+                };
+                
+                // Add tags as child nodes for each document
+                if (doc.tags && doc.tags.length > 0) {
+                    doc.tags.forEach(tag => {
+                        docNode.children.push({
+                            name: tag,
+                            value: 1,
+                            nodeType: 'tag',
+                            tagName: tag
+                        });
+                    });
+                } else {
+                    // If no tags, add a "No Tags" node
+                    docNode.children.push({
+                        name: 'No Tags',
+                        value: 1,
+                        nodeType: 'tag',
+                        tagName: 'No Tags'
+                    });
+                }
+                
+                categoryNode.children.push(docNode);
+            });
+            
+            rootNode.children.push(categoryNode);
+        });
+        
+        return [rootNode];
+    }
+
+    // Choose suitable tree building function
+    function buildKnowledgeTree(data) {
+        // Return tree corresponding to current view mode
+        if (viewMode === 'tag-doc') {
+            return buildTagToDocTree(data);
+        } else {
+            return buildDocToTagTree(data);
+        }
+    }
+
+    // Show error message
+    function showError(message) {
+        nodeTitle.textContent = 'Error';
+        nodeDetails.innerHTML = `<p class="error-message">${message}</p>`;
+    }
+
+    // Show node details
+    function showNodeDetails(params) {
+        const data = params.data;
+        const isWordcloudMode = mapLayout.value === 'wordcloud';
+        
+        if (data) {
+            // Use saved full filename or display name
+            nodeTitle.textContent = data.fullName || data.name;
+            
+            if (data.nodeType === 'document' || data.document) {
+                // Show document information
+                const doc = data.document;
+                let html = `<p><strong>Filename:</strong> ${doc.filename}</p>`;
+                
+                if (doc.summary) {
+                    html += `<p><strong>Summary:</strong> ${doc.summary}</p>`;
+                }
+                
+                if (doc.tags && doc.tags.length > 0) {
+                    html += `<p><strong>Tags:</strong></p><div class="tag-list">`;
+                    doc.tags.forEach(tag => {
+                        html += `<span class="tag">${tag}</span>`;
+                    });
+                    html += `</div>`;
+                }
+                
+                html += `<div class="document-action-buttons">
+                    <a href="#" class="document-link" data-file="${doc.filename}">
+                        <i class="fas fa-external-link-alt"></i> View Document
+                    </a>
+                    <a href="#" class="wordcloud-link" data-file="${doc.filename}">
+                        <i class="fas fa-cloud"></i> View Word Cloud
+                    </a>`;
+                
+                // If in wordcloud mode, add direct wordcloud generation button
+                if (isWordcloudMode) {
+                    html += `<a href="#" class="generate-cloud-link" data-file="${doc.filename}">
+                        <i class="fas fa-magic"></i> Generate Word Cloud
+                    </a>`;
+                }
+                
+                html += `</div>`;
+                
+                nodeDetails.innerHTML = html;
+            } else if (data.nodeType === 'tag') {
+                // Show tag information
+                nodeDetails.innerHTML = `
+                    <p>This is a tag node</p>
+                    <p><strong>Tag name:</strong> ${data.tagName || data.name}</p>
+                    <p>Click on parent node to view document details</p>
+                `;
+            } else {
+                // Show tag node or category node information
+                nodeDetails.innerHTML = `
+                    <p>This is a ${data.children ? 'category node' : 'node'}</p>
+                    <p>Contains ${data.value} items</p>
+                `;
+            }
+        } else {
+            nodeTitle.textContent = 'No node selected';
+            nodeDetails.innerHTML = `<p class="placeholder-text">Click on a node in the map to view details</p>`;
+        }
+    }
+
+    // Add chart controls
+    function addChartControls() {
+        // Add zoom controller
+        const zoomController = document.createElement('div');
+        zoomController.className = 'zoom-controllers';
+        zoomController.innerHTML = `
+            <button class="zoom-btn zoom-in" title="Zoom In"><i class="fas fa-search-plus"></i></button>
+            <button class="zoom-btn zoom-out" title="Zoom Out"><i class="fas fa-search-minus"></i></button>
+            <button class="zoom-btn zoom-reset" title="Reset View"><i class="fas fa-redo-alt"></i></button>
+        `;
+        mapContainer.parentNode.insertBefore(zoomController, mapContainer);
+
+        // Bind zoom events
+        document.querySelector('.zoom-in').addEventListener('click', () => {
+            myChart.dispatchAction({
+                type: 'dataZoom',
+                start: 0,
+                end: 50
+            });
+        });
+
+        document.querySelector('.zoom-out').addEventListener('click', () => {
+            myChart.dispatchAction({
+                type: 'dataZoom',
+                start: 0,
+                end: 100
+            });
+        });
+
+        document.querySelector('.zoom-reset').addEventListener('click', () => {
+            myChart.dispatchAction({
+                type: 'restore'
+            });
+        });
+    }
+
+    // Refresh knowledge map
+    async function refreshKnowledgeMap() {
+        const layout = mapLayout.value;
+        const depth = mapDepth.value;
+        
+        console.log("Refreshing knowledge map, layout:", layout, "depth:", depth);
+        
+        // Set layout and depth
+        setLayout(layout);
+        setDepth(depth);
+        
+        // Show loading state
+        myChart.showLoading({
+            text: 'Loading...',
+            color: '#4e79a7',
+            textColor: '#000',
+            maskColor: 'rgba(255, 255, 255, 0.8)',
+            zlevel: 0
+        });
+        
+        try {
+            // Get data
+            const mapData = await fetchKnowledgeMap();
+            
+            // Add or remove wordcloud mode CSS class
+            const container = document.querySelector('.knowledge-map-container');
+            if (layout === 'wordcloud') {
+                container.classList.add('wordcloud-mode');
+                // Clear node details, show wordcloud explanation
+                nodeTitle.textContent = 'Word Cloud View';
+                nodeDetails.innerHTML = `<p>Word cloud shows high-frequency words and tags from documents. Word size represents its importance in the document.</p>
+                    <p>Click on any word to see related documents containing that word.</p>`;
+            } else {
+                container.classList.remove('wordcloud-mode');
+                nodeTitle.textContent = 'No node selected';
+                nodeDetails.innerHTML = '<p class="placeholder-text">Click on a node in the map to view details</p>';
+            }
+            
+            // First clear previous chart instance, completely re-render
+            myChart.clear();
+            
+            // Choose data building method based on different layout types
+            let chartData;
+            if (layout === 'wordcloud') {
+                console.log("Building word cloud data...");
+                chartData = buildWordcloudData(mapData);
+                console.log("Word cloud data preparation completed, data item count:", chartData.length);
+                
+                // For word cloud, set a simple configuration, focus on data
+                myChart.setOption({
+                    series: [{
+                        type: 'wordCloud',
+                        shape: 'circle',
+                        left: 'center',
+                        top: 'center',
+                        width: '80%',
+                        height: '80%',
+                        right: null,
+                        bottom: null,
+                        sizeRange: [24, 80],
+                        rotationRange: [0, 0],
+                        rotationStep: 0,
+                        gridSize: 8,
+                        drawOutOfBound: false,
+                        layoutAnimation: false,
+                        textStyle: {
+                            fontFamily: 'Arial, 微软雅黑, sans-serif',
+                            fontWeight: 'bold',
+                            color: function(params) {
+                                // Use fixed color set, keep simple
+                                const colors = ['#000', '#333', '#666'];
+                                return colors[params.dataIndex % colors.length];
+                            }
+                        },
+                        emphasis: {
+                            textStyle: {
+                                color: '#f00'
+                            }
+                        },
+                        data: chartData
+                    }]
+                }, true);
+            } else {
+                // For tree chart and other chart types, use original data building method
+                chartData = buildKnowledgeTree(mapData);
+                option.series[0].data = chartData;
+                
+                // Apply configuration
+                myChart.setOption(option, true);
+            }
+            
+            console.log("Chart updated");
+            
+            // For word cloud, ensure view is fully updated
+            if (layout === 'wordcloud') {
+                setTimeout(() => {
+                    console.log("Force redraw word cloud...");
+                    myChart.resize();
+                }, 200);
+            }
+        } catch (error) {
+            console.error('Failed to refresh knowledge map:', error);
+            showError('Failed to refresh knowledge map: ' + error.message);
+        } finally {
+            // Hide loading state
+            myChart.hideLoading();
+        }
+    }
+
+    // Toggle view mode
+    function toggleViewMode() {
+        // Toggle view mode
+        viewMode = viewMode === 'tag-doc' ? 'doc-tag' : 'tag-doc';
+        
+        // Update button text
+        viewToggleBtn.innerHTML = viewMode === 'tag-doc' 
+            ? '<i class="fas fa-exchange-alt"></i> Switch to Document-Tag View'
+            : '<i class="fas fa-exchange-alt"></i> Switch to Tag-Document View';
+        
+        // Refresh knowledge map
+        refreshKnowledgeMap();
+    }
+
+    // Bind events
+    mapLayout.addEventListener('change', refreshKnowledgeMap);
+    mapDepth.addEventListener('change', refreshKnowledgeMap);
+    refreshBtn.addEventListener('click', refreshKnowledgeMap);
+    viewToggleBtn.addEventListener('click', toggleViewMode);
+    
+    // Click node event
+    myChart.on('click', 'series', (params) => {
+        if (mapLayout.value === 'wordcloud') {
+            // Word cloud mode click processing
+            handleWordCloudClick(params);
+        } else {
+            // Other chart mode
+            showNodeDetails(params);
+        }
+    });
+    
+    // Handle wordcloud click event
+    function handleWordCloudClick(params) {
+        console.log("Word cloud click event:", params);
+        
+        // Ensure there is data
+        if (!params || !params.data) {
+            console.error("Click event has no valid data");
+            return;
+        }
+        
+        const word = params.data.name;
+        const value = params.data.value;
+        
+        // Set node title to clicked word
+        nodeTitle.textContent = word;
+        
+        // First show a temporary message indicating loading
+        nodeDetails.innerHTML = `
+            <p><strong>Word:</strong> ${word}</p>
+            <p><strong>Frequency:</strong> ${value}</p>
+            <p><i class="fas fa-spinner fa-spin"></i> Searching for related documents...</p>
+        `;
+        
+        // Find all documents containing the word
+        fetchKnowledgeMap().then(mapData => {
+            if (!mapData.documents || mapData.documents.length === 0) {
+                nodeDetails.innerHTML = `
+                    <p><strong>Word:</strong> ${word}</p>
+                    <p><strong>Frequency:</strong> ${value}</p>
+                    <p class="placeholder-text">No documents found</p>
+                `;
+                return;
+            }
+            
+            // Find all documents containing the word (in tags or summary)
+            const relatedDocs = mapData.documents.filter(doc => {
+                // Check tags
+                if (doc.tags && doc.tags.includes(word)) {
+                    return true;
+                }
+                
+                // Check filename
+                if (doc.filename && doc.filename.toLowerCase().includes(word.toLowerCase())) {
+                    return true;
+                }
+                
+                // Check summary
+                if (doc.summary && doc.summary.toLowerCase().includes(word.toLowerCase())) {
+                    return true;
+                }
+                
+                return false;
+            });
+            
+            // Show related document list
+            if (relatedDocs.length > 0) {
+                let html = `
+                    <p><strong>Word:</strong> ${word}</p>
+                    <p><strong>Frequency:</strong> ${value}</p>
+                    <p><strong>Related documents:</strong> ${relatedDocs.length}</p>
+                    <div class="related-docs">
+                `;
+                
+                relatedDocs.forEach(doc => {
+                    html += `
+                        <div class="related-doc-item">
+                            <span class="doc-title">${doc.filename || 'Unnamed Document'}</span>
+                            <div class="document-action-buttons">
+                                <a href="/view-document?filename=${encodeURIComponent(doc.filename)}" class="document-link">
+                                    <i class="fas fa-external-link-alt"></i> View Document
+                                </a>
+                                <a href="/view-document?filename=${encodeURIComponent(doc.filename)}&show_wordcloud=true" class="wordcloud-link">
+                                    <i class="fas fa-cloud"></i> View Word Cloud
+                                </a>
+                            </div>
+                        </div>
+                    `;
+                });
+                
+                html += `</div>`;
+                nodeDetails.innerHTML = html;
+            } else {
+                nodeDetails.innerHTML = `
+                    <p><strong>Word:</strong> ${word}</p>
+                    <p><strong>Frequency:</strong> ${value}</p>
+                    <p class="placeholder-text">No documents containing "${word}" found</p>
+                    <p>This word may have been added by default, or comes from a deleted document.</p>
+                `;
+            }
+        }).catch(error => {
+            console.error('Failed to get document data:', error);
+            nodeDetails.innerHTML = `
+                <p><strong>Word:</strong> ${word}</p>
+                <p><strong>Frequency:</strong> ${value}</p>
+                <p class="error-message">Failed to get data: ${error.message}</p>
+            `;
+        });
+    }
+    
+    // Document link click event
+    nodeDetails.addEventListener('click', (e) => {
+        if (e.target.closest('.document-link')) {
+            e.preventDefault();
+            const filename = e.target.closest('.document-link').dataset.file;
+            if (filename) {
+                // Handle view document logic here, can send request or redirect
+                console.log('View document:', filename);
+                window.location.href = `/view-document?filename=${encodeURIComponent(filename)}`;
+            }
+        }
+        else if (e.target.closest('.wordcloud-link')) {
+            e.preventDefault();
+            const filename = e.target.closest('.wordcloud-link').dataset.file;
+            if (filename) {
+                // Directly redirect to view document page, adding show wordcloud parameter
+                console.log('View word cloud:', filename);
+                window.location.href = `/view-document?filename=${encodeURIComponent(filename)}&show_wordcloud=true`;
+            }
+        }
+        else if (e.target.closest('.generate-cloud-link')) {
+            e.preventDefault();
+            const filename = e.target.closest('.generate-cloud-link').dataset.file;
+            if (filename) {
+                // Generate word cloud directly on current page
+                console.log('Directly generate word cloud:', filename);
+                
+                // Create a modal to display the word cloud
+                const modal = document.createElement('div');
+                modal.className = 'wordcloud-modal';
+                modal.innerHTML = `
+                    <div class="wordcloud-modal-content">
+                        <div class="wordcloud-modal-header">
+                            <h3>Word Cloud for ${filename}</h3>
+                            <button class="close-modal"><i class="fas fa-times"></i></button>
+                        </div>
+                        <div class="wordcloud-modal-body">
+                            <div class="loading-indicator">
+                                <i class="fas fa-spinner fa-spin"></i> Generating word cloud...
+                            </div>
+                            <div class="wordcloud-image-container" style="display: none;">
+                                <img class="wordcloud-image" alt="Word Cloud">
+                            </div>
+                            <div class="wordcloud-freq-container">
+                                <h4>Word Frequency Statistics</h4>
+                                <div class="word-freq-list">
+                                    <p class="placeholder-text">Loading...</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                
+                document.body.appendChild(modal);
+                
+                // Add close modal event
+                modal.querySelector('.close-modal').addEventListener('click', () => {
+                    document.body.removeChild(modal);
+                });
+                
+                // Call API to get word cloud data
+                fetch(`/api/wordcloud/${encodeURIComponent(filename)}?top_n=50`)
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.wordcloud_image) {
+                            const imageContainer = modal.querySelector('.wordcloud-image-container');
+                            const loadingIndicator = modal.querySelector('.loading-indicator');
+                            const wordFreqList = modal.querySelector('.word-freq-list');
+                            
+                            // Show word cloud
+                            imageContainer.style.display = 'block';
+                            loadingIndicator.style.display = 'none';
+                            
+                            const img = modal.querySelector('.wordcloud-image');
+                            img.src = `data:image/png;base64,${data.wordcloud_image}`;
+                            
+                            // Show word frequency statistics
+                            wordFreqList.innerHTML = '';
+                            data.word_frequency.forEach(([word, freq]) => {
+                                const wordItem = document.createElement('div');
+                                wordItem.className = 'word-freq-item';
+                                wordItem.textContent = `${word} (${freq})`;
+                                wordFreqList.appendChild(wordItem);
+                            });
+                        } else {
+                            modal.querySelector('.loading-indicator').innerHTML = 
+                                `<p class="error-message">Failed to generate word cloud: ${data.error || 'Unknown error'}</p>`;
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Failed to generate word cloud:', error);
+                        modal.querySelector('.loading-indicator').innerHTML = 
+                            `<p class="error-message">Failed to generate word cloud: ${error.message}</p>`;
+                    });
+            }
+        }
+    });
+    
+    // Initialize chart
+    myChart.setOption(option);
+    
+    // Add chart controls
+    addChartControls();
+    
+    // Set initial view mode button text
+    viewToggleBtn.innerHTML = '<i class="fas fa-exchange-alt"></i> Switch to Document-Tag View';
+    
+    // First load knowledge map
+    refreshKnowledgeMap();
+
+    // Build word cloud data - Extract tags and high-frequency words from documents
+    function buildWordcloudData(data) {
+        if (data.error) {
+            showError(data.error);
+            return [{name: 'Data Error', value: 30}];  // Return a simple word, ensure at least some content is displayed
+        }
+        
+        // If empty data, show prompt information
+        if (!data.documents || data.documents.length === 0) {
+            showError('No usable knowledge map data, please upload documents first');
+            return [
+                {name: 'No Data', value: 50},
+                {name: 'Please Upload Documents', value: 40},
+                {name: 'Word Cloud', value: 30}
+            ];
+        }
+        
+        console.log("Building word cloud data, document count:", data.documents.length);
+        
+        // Collect all tags and their frequencies
+        const tagCount = {};
+        
+        // Some common stop words
+        const stopwords = ['the', 'and', 'for', 'with', 'this', 'that', 'in', 'on', 'at', 'to', 'of', 'a', 'an'];
+        
+        // Ensure some basic words
+        const defaultWords = ['Document', 'Learning', 'Cognition', 'Knowledge', 'Material', 'Content'];
+        let wordIndex = 0;
+        
+        // Loop through all documents, extract tags
+        data.documents.forEach(doc => {
+            // Process tags - Tag weight highest
+            if (doc.tags && doc.tags.length > 0) {
+                doc.tags.forEach(tag => {
+                    if (tag && tag.length > 1 && !stopwords.includes(tag.toLowerCase())) {
+                        tagCount[tag] = (tagCount[tag] || 0) + 15;
+                    }
+                });
+            } else {
+                // If no tags, use default word
+                const word = defaultWords[wordIndex % defaultWords.length];
+                tagCount[word] = (tagCount[word] || 0) + 10;
+                wordIndex++;
+            }
+            
+            // Extract keywords from filename
+            if (doc.filename) {
+                const baseName = doc.filename.split('.')[0];  // Remove extension
+                if (baseName && baseName.length > 1) {
+                    tagCount[baseName] = (tagCount[baseName] || 0) + 10;
+                }
+            }
+        });
+        
+        // Always add some default words, ensure enough content is displayed
+        if (Object.keys(tagCount).length < 5) {
+            defaultWords.forEach((word, index) => {
+                tagCount[word] = 30 - index * 3;  // Decreasing weight
+            });
+            
+            // Add a "new" word for testing
+            tagCount["new"] = 10;
+        }
+        
+        // Convert to word cloud data format
+        const cloudData = Object.keys(tagCount).map(tag => ({
+            name: tag,
+            value: tagCount[tag]
+        }));
+        
+        // Sort by frequency
+        cloudData.sort((a, b) => b.value - a.value);
+        
+        // Show some debugging information
+        console.log("Word cloud data building completed, vocabulary count:", cloudData.length);
+        console.log("Word cloud data:", JSON.stringify(cloudData.slice(0, 10)));
+        
+        // Return sorted word cloud data
+        return cloudData.slice(0, 50);  // Limit word count
+    }
+}); 

templates/index.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Teaching Assistant</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+</head>
+<body>
+    <div class="container">
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <h1>AI Teaching Assistant</h1>
+            </div>
+            <nav class="sidebar-menu">
+                <ul>
+                    <li><a href="#"><i class="fas fa-upload"></i>Upload</a></li>
+                    <li><a href="#"><i class="fas fa-folder"></i>Folders</a></li>
+                    <li><a href="{{ url_for('knowledge_map') }}"><i class="fas fa-project-diagram"></i>Knowledge Map</a></li>
+                    <li class="active"><a href="#"><i class="fas fa-comment-dots"></i>Chat Assistant</a></li>
+                    <li><a href="#"><i class="fas fa-history"></i>Review</a></li>
+                    <li><a href="{{ url_for('settings') }}"><i class="fas fa-cog"></i>Settings</a></li>
+                </ul>
+            </nav>
+            <div class="sidebar-footer">
+                <p>Version 1.0.0</p>
+            </div>
+        </aside>
+
+        <!-- 在main-content前添加一个隐藏的数据区域，用于存储服务器端传递的文件信息 -->
+        <div id="server-data" data-uploaded-files="{{ uploaded_files|tojson if uploaded_files else '[]' }}" style="display: none;"></div>
+
+        <main class="main-content">
+            <section class="top-section">
+                <div class="card upload-panel">
+                    <h2><i class="fas fa-upload"></i> Upload Documents</h2>
+                    <div class="file-upload-container">
+                        <button id="upload-button" class="upload-btn">Choose File</button>
+                        <input type="file" id="file-upload" accept=".pdf,.txt" style="display: none">
+                        <div class="supported-files">Supported: PDF, TXT</div>
+                        
+                        <!-- File list structure using table style -->
+                        <div class="file-list-container">
+                            <ul id="file-list" class="file-list-table">
+                                <!-- Files will be added dynamically through JavaScript -->
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+                <div class="summary-tags-panel card">
+                     <h2><i class="fas fa-tags"></i> Auto-Summarization & Tags</h2>
+                     <div class="file-info-section">
+                         <h4><i class="fas fa-tag"></i> Document Tags</h4>
+                         <div id="document-tags-container" class="document-tags-container">
+                             <!-- Document tags will be generated here dynamically -->
+                             <p class="placeholder-text">Tags will appear after uploading files...</p>
+                         </div>
+                     </div>
+                     <div class="summary-section">
+                         <h4><i class="fas fa-file-alt"></i> File Summary</h4>
+                         <div id="summary-area" class="summary-content">
+                             <p class="placeholder-text">Summary will appear after uploading files...</p>
+                         </div>
+                     </div>
+                </div>
+            </section>
+
+            <section class="middle-section">
+                 <div class="knowledge-folders-panel card">
+                     <h2><i class="fas fa-folder-open"></i> Knowledge Folders</h2>
+                     <ul class="folder-list">
+                         {% if knowledge_folders %}
+                             {% for folder, files in knowledge_folders.items() %}
+                                 <li class="folder-item" data-folder="{{ folder }}">
+                                     <div class="folder-header">
+                                         <i class="fas fa-folder"></i> {{ folder }} ({{ files|length }} docs)
+                                         <i class="fas fa-chevron-down folder-toggle"></i>
+                                     </div>
+                                     <ul class="file-list" style="display: none;">
+                                         {% for file in files %}
+                                             <li class="file-item">
+                                                 <i class="fas fa-file-alt"></i> 
+                                                 {% if use_static_folders is defined and use_static_folders %}
+                                                     {{ file }} <span class="file-tag">(Example)</span>
+                                                 {% else %}
+                                                     <a href="{{ url_for('view_document', filename=file) }}" class="file-link">{{ file }}</a>
+                                                 {% endif %}
+                                             </li>
+                                         {% endfor %}
+                                     </ul>
+                                 </li>
+                             {% endfor %}
+                         {% else %}
+                             <li>No knowledge folders. Upload files to start building your knowledge base.</li>
+                         {% endif %}
+                     </ul>
+                     {% if use_static_folders is defined and use_static_folders %}
+                         <div class="demo-notice">
+                             <i class="fas fa-info-circle"></i> These are example folders. Your personal knowledge base will appear after uploading files.
+                         </div>
+                     {% endif %}
+                 </div>
+                 <div class="chat-panel card">
+                     <h2><i class="fas fa-comments"></i> Chat with AI Assistant</h2>
+                     <div id="chat-history" class="chat-history">
+                         <div class="message bot-message">
+                             <div class="message-content">
+                                 Hello, I'm your AI teaching assistant. You can ask me any teaching-related questions, or upload files for analysis.
+                             </div>
+                         </div>
+                     </div>
+                     <div class="input-container">
+                         <textarea id="user-input" placeholder="Ask about any concept..."></textarea>
+                         <button id="send-btn"><i class="fas fa-paper-plane"></i></button>
+                     </div>
+                     <div id="status-indicator" class="status-indicator"></div>
+                 </div>
+            </section>
+
+            <section class="bottom-section">
+                 <div class="review-panel card">
+                     <h2><i class="fas fa-bell"></i> Review Reminders</h2>
+                     <p>Next review cycle: <strong>Tomorrow (2 docs)</strong> based on Ebbinghaus curve</p>
+                     <!-- Placeholder content -->
+                 </div>
+            </section>
+        </main>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/chat.js') }}"></script>
+    <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        // 为所有文件夹添加点击事件
+        setupFolderEvents();
+        
+        // 监听知识文件夹更新事件
+        document.addEventListener('knowledge-folders-updated', function(e) {
+            // 获取更新后的文件夹数据
+            const data = e.detail;
+            // 检查是否有有效的文件夹数据
+            if (data && data.folders) {
+                // 更新文件夹结构
+                updateKnowledgeFolders(data.folders);
+            }
+        });
+        
+        // 设置文件夹点击事件
+        function setupFolderEvents() {
+            const folderHeaders = document.querySelectorAll('.folder-header');
+            folderHeaders.forEach(header => {
+                header.addEventListener('click', function() {
+                    // 获取对应的文件列表
+                    const fileList = this.nextElementSibling;
+                    const folderIcon = this.querySelector('.folder-toggle');
+                    
+                    // 切换文件列表的显示状态
+                    if (fileList.style.display === 'none') {
+                        fileList.style.display = 'block';
+                        folderIcon.classList.remove('fa-chevron-down');
+                        folderIcon.classList.add('fa-chevron-up');
+                    } else {
+                        fileList.style.display = 'none';
+                        folderIcon.classList.remove('fa-chevron-up');
+                        folderIcon.classList.add('fa-chevron-down');
+                    }
+                });
+            });
+        }
+        
+        // 更新知识文件夹结构
+        function updateKnowledgeFolders(folders) {
+            const folderList = document.querySelector('.folder-list');
+            if (!folderList) return;
+            
+            // 检查是否有文件夹数据
+            if (!folders || Object.keys(folders).length === 0) {
+                folderList.innerHTML = '<li>No knowledge folders. Upload files to start building your knowledge base.</li>';
+                return;
+            }
+            
+            // 清空当前文件夹列表
+            folderList.innerHTML = '';
+            
+            // 为每个文件夹创建HTML结构
+            Object.entries(folders).forEach(([folder, files]) => {
+                const folderItem = document.createElement('li');
+                folderItem.className = 'folder-item';
+                folderItem.setAttribute('data-folder', folder);
+                
+                const folderHeader = document.createElement('div');
+                folderHeader.className = 'folder-header';
+                folderHeader.innerHTML = `
+                    <i class="fas fa-folder"></i> ${folder} (${files.length} docs)
+                    <i class="fas fa-chevron-down folder-toggle"></i>
+                `;
+                
+                const fileListEl = document.createElement('ul');
+                fileListEl.className = 'file-list';
+                fileListEl.style.display = 'none';
+                
+                // 添加文件到文件列表
+                files.forEach(file => {
+                    const fileItem = document.createElement('li');
+                    fileItem.className = 'file-item';
+                    fileItem.innerHTML = `
+                        <i class="fas fa-file-alt"></i> 
+                        <a href="/view-document?filename=${encodeURIComponent(file)}" class="file-link">${file}</a>
+                    `;
+                    fileListEl.appendChild(fileItem);
+                });
+                
+                folderItem.appendChild(folderHeader);
+                folderItem.appendChild(fileListEl);
+                folderList.appendChild(folderItem);
+            });
+            
+            // 移除示例提示信息
+            const demoNotice = document.querySelector('.demo-notice');
+            if (demoNotice) {
+                demoNotice.remove();
+            }
+            
+            // 重新设置文件夹点击事件
+            setupFolderEvents();
+        }
+    });
+    </script>
+</body>
+</html> 

templates/knowledge_map.html

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Knowledge Map - AI Teaching Assistant</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Import ECharts -->
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+    <!-- Import ECharts WordCloud extension -->
+    <script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@2.1.0/dist/echarts-wordcloud.min.js"></script>
+</head>
+<body>
+    <div class="container">
+        <aside class="sidebar">
+            <div class="sidebar-header">
+                <h1>AI Teaching Assistant</h1>
+            </div>
+            <nav class="sidebar-menu">
+                <ul>
+                    <li><a href="{{ url_for('home') }}"><i class="fas fa-upload"></i>Upload</a></li>
+                    <li><a href="#"><i class="fas fa-folder"></i>Folders</a></li>
+                    <li class="active"><a href="{{ url_for('knowledge_map') }}"><i class="fas fa-project-diagram"></i>Knowledge Map</a></li>
+                    <li><a href="{{ url_for('home') }}"><i class="fas fa-comment-dots"></i>Chat Assistant</a></li>
+                    <li><a href="#"><i class="fas fa-history"></i>Review</a></li>
+                    <li><a href="{{ url_for('settings') }}"><i class="fas fa-cog"></i>Settings</a></li>
+                </ul>
+            </nav>
+            <div class="sidebar-footer">
+                <p>Version 1.0.0</p>
+            </div>
+        </aside>
+
+        <main class="main-content">
+            <section class="knowledge-map-section">
+                <div class="knowledge-map-panel card">
+                    <h2><i class="fas fa-project-diagram"></i> Knowledge Map</h2>
+                    <div class="map-controls">
+                        <div class="control-group">
+                            <label for="map-layout">Layout:</label>
+                            <select id="map-layout" class="map-control-select">
+                                <option value="tree">Tree</option>
+                                <option value="force">Force Directed</option>
+                                <option value="radial">Radial</option>
+                                <option value="wordcloud">Word Cloud</option>
+                            </select>
+                        </div>
+                        <div class="control-group">
+                            <label for="map-depth">Depth Level:</label>
+                            <select id="map-depth" class="map-control-select">
+                                <option value="all">All</option>
+                                <option value="1">Level 1</option>
+                                <option value="2">Level 2</option>
+                                <option value="3">Level 3</option>
+                            </select>
+                        </div>
+                        <button id="refresh-map" class="map-control-btn"><i class="fas fa-sync-alt"></i> Refresh</button>
+                        <!-- View switching buttons will be added dynamically in JavaScript -->
+                    </div>
+                    <div id="knowledge-map-container" class="knowledge-map-container">
+                        <!-- Knowledge map will be rendered here -->
+                    </div>
+                    <div class="map-info">
+                        <p>Select a node to view related information</p>
+                        <div id="node-info" class="node-info">
+                            <h3 id="node-title">No node selected</h3>
+                            <div id="node-details" class="node-details">
+                                <p class="placeholder-text">Click on a node in the map to view details</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </main>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/knowledge-map.js') }}"></script>
+</body>
+</html> 

templates/settings.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Settings - Gemini Chatbot</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Settings</h1>
+            <a href="{{ url_for('home') }}" class="back-btn">Back</a>
+        </header>
+        
+        <main>
+            <div class="settings-container">
+                <h2>Google Gemini API Settings</h2>
+                
+                <form action="{{ url_for('settings') }}" method="post">
+                    <div class="form-group">
+                        <label for="api_key">API Key</label>
+                        <input type="password" id="api_key" name="api_key" 
+                               value="{{ api_key }}" required>
+                        <small class="info-text">
+                            You can get an API key from <a href="https://makersuite.google.com/app/apikey" target="_blank">Google AI Studio</a>
+                        </small>
+                    </div>
+                    
+                    <div class="form-actions">
+                        <button type="submit" class="save-btn">Save Settings</button>
+                    </div>
+                </form>
+                
+                <div class="instructions">
+                    <h3>How to get an API key:</h3>
+                    <ol>
+                        <li>Visit <a href="https://makersuite.google.com/app/apikey" target="_blank">Google AI Studio</a></li>
+                        <li>Log in to your Google account</li>
+                        <li>Click "Get API key" or "Create API key"</li>
+                        <li>Create a new API key or use an existing one</li>
+                        <li>Copy the key and paste it into the form above</li>
+                    </ol>
+                </div>
+            </div>
+        </main>
+        
+        <footer>
+            <p>Powered by Google Gemini API | Developed with Python + Flask</p>
+        </footer>
+    </div>
+</body>
+</html> 

templates/view_document.html

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>View Document - {{ filename }}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .document-container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        
+        .document-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid #e5e7eb;
+        }
+        
+        .back-button {
+            text-decoration: none;
+            color: #3b82f6;
+            display: flex;
+            align-items: center;
+        }
+        
+        .back-button i {
+            margin-right: 5px;
+        }
+        
+        .document-title {
+            margin: 0;
+            font-size: 1.5rem;
+        }
+        
+        .document-actions {
+            display: flex;
+            gap: 10px;
+        }
+        
+        .action-button {
+            background-color: #f3f4f6;
+            border: 1px solid #e5e7eb;
+            border-radius: 4px;
+            padding: 5px 10px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            transition: background-color 0.3s;
+        }
+        
+        .action-button i {
+            margin-right: 5px;
+        }
+        
+        .action-button:hover {
+            background-color: #e5e7eb;
+        }
+        
+        .document-content {
+            background-color: #ffffff;
+            border: 1px solid #e5e7eb;
+            border-radius: 6px;
+            padding: 20px;
+            white-space: pre-wrap;
+            font-family: Arial, sans-serif;
+            line-height: 1.6;
+            max-height: 70vh;
+            overflow-y: auto;
+        }
+        
+        .document-footer {
+            margin-top: 20px;
+            text-align: center;
+            font-size: 0.9rem;
+            color: #6b7280;
+        }
+    </style>
+</head>
+<body>
+    <div class="document-container">
+        <div class="document-header">
+            <a href="{{ url_for('home') }}" class="back-button">
+                <i class="fas fa-arrow-left"></i> Back to Home
+            </a>
+            <h1 class="document-title">{{ filename }}</h1>
+            <div class="document-actions">
+                <button class="action-button" id="generate-wordcloud-btn">
+                    <i class="fas fa-cloud"></i> Generate Word Cloud
+                </button>
+                <button class="action-button" onclick="window.print()">
+                    <i class="fas fa-print"></i> Print
+                </button>
+            </div>
+        </div>
+        
+        <div class="document-content">
+            {{ content }}
+        </div>
+        
+        <div id="wordcloud-container" style="display: none; margin-top: 20px;">
+            <h2><i class="fas fa-cloud"></i> Document Word Cloud</h2>
+            <div id="wordcloud-image-container" style="text-align: center; padding: 20px; background-color: #f9fafb; border-radius: 6px;">
+                <div id="loading-indicator" style="display: none;">
+                    <i class="fas fa-spinner fa-spin"></i> Generating word cloud...
+                </div>
+                <img id="wordcloud-image" style="max-width: 100%; display: none;" />
+            </div>
+            <div id="word-frequency" style="margin-top: 15px; display: none;">
+                <h3>Word Frequency Statistics</h3>
+                <div id="word-frequency-list" style="display: flex; flex-wrap: wrap; gap: 10px;">
+                    <!-- Word frequency data will be added here dynamically -->
+                </div>
+            </div>
+        </div>
+        
+        <div class="document-footer">
+            <p>AI Teaching Assistant - Document Viewer</p>
+        </div>
+    </div>
+    
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const generateWordcloudBtn = document.getElementById('generate-wordcloud-btn');
+            const wordcloudContainer = document.getElementById('wordcloud-container');
+            const loadingIndicator = document.getElementById('loading-indicator');
+            const wordcloudImage = document.getElementById('wordcloud-image');
+            const wordFrequency = document.getElementById('word-frequency');
+            const wordFrequencyList = document.getElementById('word-frequency-list');
+            
+            // If URL parameter generate_wordcloud=true, automatically generate word cloud
+            const urlParams = new URLSearchParams(window.location.search);
+            if (urlParams.get('generate_wordcloud') === 'true') {
+                generateWordcloud();
+            }
+            
+            generateWordcloudBtn.addEventListener('click', function() {
+                generateWordcloud();
+            });
+            
+            function generateWordcloud() {
+                // Show word cloud container and loading indicator
+                wordcloudContainer.style.display = 'block';
+                loadingIndicator.style.display = 'block';
+                wordcloudImage.style.display = 'none';
+                wordFrequency.style.display = 'none';
+                
+                // Get top_n parameter, default is 100
+                const topN = urlParams.get('top_n') || 100;
+                
+                // Call word cloud API
+                fetch(`/api/wordcloud/{{ filename }}?top_n=${topN}`)
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Failed to generate word cloud');
+                        }
+                        return response.json();
+                    })
+                    .then(data => {
+                        // Hide loading indicator
+                        loadingIndicator.style.display = 'none';
+                        
+                        // Show word cloud image - Fix field name to match backend
+                        wordcloudImage.src = `data:image/png;base64,${data.wordcloud_image}`;
+                        wordcloudImage.style.display = 'block';
+                        
+                        // Show word frequency statistics
+                        wordFrequency.style.display = 'block';
+                        
+                        // Clear previous word frequency list
+                        wordFrequencyList.innerHTML = '';
+                        
+                        // Add word frequency data
+                        data.word_frequency.forEach(([word, freq]) => {
+                            const wordItem = document.createElement('div');
+                            wordItem.className = 'word-item';
+                            wordItem.style.padding = '5px 10px';
+                            wordItem.style.backgroundColor = '#e5e7eb';
+                            wordItem.style.borderRadius = '4px';
+                            wordItem.innerHTML = `<strong>${word}</strong>: ${freq}`;
+                            wordFrequencyList.appendChild(wordItem);
+                        });
+                    })
+                    .catch(error => {
+                        loadingIndicator.style.display = 'none';
+                        wordFrequencyList.innerHTML = `<div style="color: red;">Error: ${error.message}</div>`;
+                    });
+            }
+        });
+    </script>
+</body>
+</html>