feat: complete project setup with chinese localization, datasets support, and mock mode

.gitignore

@@ -0,0 +1,5 @@
+__pycache__/
+*.pyc
+instance/
+.env
+.DS_Store

Dockerfile

@@ -0,0 +1,16 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create instance directory for SQLite
+RUN mkdir -p instance
+RUN chmod 777 instance
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,330 @@
+import os
+import json
+import sqlite3
+import requests
+import random
+import time
+from flask import Flask, render_template, request, jsonify, g, send_from_directory
+from werkzeug.utils import secure_filename
+from werkzeug.exceptions import HTTPException
+
+app = Flask(__name__)
+
+# Config
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB Limit
+app.config['UPLOAD_FOLDER'] = os.path.join(app.instance_path, 'uploads')
+DB_PATH = os.path.join(app.instance_path, 'material_mind.db')
+
+# API Configuration (SiliconFlow)
+SILICONFLOW_API_KEY = os.environ.get("SILICONFLOW_API_KEY", "sk-vimuseiptfbomzegyuvmebjzooncsqbyjtlddrfodzcdskgi")
+SILICONFLOW_API_URL = "https://api.siliconflow.cn/v1/chat/completions"
+
+# Ensure directories exist
+try:
+    os.makedirs(app.instance_path, exist_ok=True)
+    os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+except OSError:
+    pass
+
+# Database Helpers
+def get_db():
+    db = getattr(g, '_database', None)
+    if db is None:
+        db = g._database = sqlite3.connect(DB_PATH)
+        db.row_factory = sqlite3.Row
+    return db
+
+@app.teardown_appcontext
+def close_connection(exception):
+    db = getattr(g, '_database', None)
+    if db is not None:
+        db.close()
+
+def init_db():
+    with app.app_context():
+        db = get_db()
+        # Experiments Table
+        db.execute('''
+            CREATE TABLE IF NOT EXISTS experiments (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                title TEXT NOT NULL,
+                composition TEXT NOT NULL, -- JSON string
+                properties TEXT, -- JSON string
+                notes TEXT,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            )
+        ''')
+        # Datasets Table (New)
+        db.execute('''
+            CREATE TABLE IF NOT EXISTS datasets (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                filename TEXT NOT NULL,
+                filepath TEXT NOT NULL,
+                description TEXT,
+                uploaded_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            )
+        ''')
+        db.commit()
+
+# Initialize DB
+init_db()
+
+# --- Global Error Handlers ---
+@app.errorhandler(404)
+def page_not_found(e):
+    return render_template('index.html'), 200 # SPA fallback or error page
+
+@app.errorhandler(500)
+def internal_server_error(e):
+    return jsonify(error="Internal Server Error", message=str(e)), 500
+
+@app.errorhandler(413)
+def request_entity_too_large(e):
+    return jsonify(error="File too large", message="File exceeds 16MB limit"), 413
+
+# --- Routes ---
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/experiments', methods=['GET'])
+def get_experiments():
+    db = get_db()
+    cur = db.execute('SELECT * FROM experiments ORDER BY created_at DESC')
+    rows = cur.fetchall()
+    experiments = []
+    for row in rows:
+        experiments.append({
+            'id': row['id'],
+            'title': row['title'],
+            'composition': json.loads(row['composition']),
+            'properties': json.loads(row['properties']) if row['properties'] else {},
+            'notes': row['notes'],
+            'created_at': row['created_at']
+        })
+    return jsonify(experiments)
+
+@app.route('/api/experiments', methods=['POST'])
+def create_experiment():
+    data = request.json
+    title = data.get('title', 'Untitled Experiment')
+    composition = json.dumps(data.get('composition', {}))
+    properties = json.dumps(data.get('properties', {}))
+    notes = data.get('notes', '')
+    
+    db = get_db()
+    cur = db.execute(
+        'INSERT INTO experiments (title, composition, properties, notes) VALUES (?, ?, ?, ?)',
+        (title, composition, properties, notes)
+    )
+    db.commit()
+    return jsonify({'id': cur.lastrowid, 'status': 'success'})
+
+@app.route('/api/experiments/<int:experiment_id>', methods=['DELETE'])
+def delete_experiment(experiment_id):
+    db = get_db()
+    db.execute('DELETE FROM experiments WHERE id = ?', (experiment_id,))
+    db.commit()
+    return jsonify({'status': 'success'})
+
+# --- Dataset/File Upload Routes ---
+@app.route('/api/datasets', methods=['GET'])
+def get_datasets():
+    db = get_db()
+    cur = db.execute('SELECT * FROM datasets ORDER BY uploaded_at DESC')
+    rows = cur.fetchall()
+    datasets = []
+    for row in rows:
+        datasets.append({
+            'id': row['id'],
+            'filename': row['filename'],
+            'description': row['description'],
+            'uploaded_at': row['uploaded_at']
+        })
+    return jsonify(datasets)
+
+@app.route('/api/upload', methods=['POST'])
+def upload_file():
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file part'}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': 'No selected file'}), 400
+    
+    if file:
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(filepath)
+        
+        description = request.form.get('description', 'Uploaded Dataset')
+        
+        db = get_db()
+        db.execute('INSERT INTO datasets (filename, filepath, description) VALUES (?, ?, ?)',
+                   (filename, filepath, description))
+        db.commit()
+        
+        return jsonify({'status': 'success', 'filename': filename})
+
+# --- Simulation Logic ---
+@app.route('/api/simulate', methods=['POST'])
+def simulate_properties():
+    data = request.json
+    composition = data.get('composition', {})
+    
+    # Base Properties
+    base_strength = 200
+    base_ductility = 50
+    base_cost = 10
+    
+    # Contribution factors (Mock Database)
+    factors = {
+        'Fe': {'strength': 2.0, 'ductility': 1.0, 'cost': 1.0, 'corrosion': 1.0},
+        'C':  {'strength': 12.0, 'ductility': -6.0, 'cost': 2.0, 'corrosion': -2.0},
+        'Ni': {'strength': 4.0, 'ductility': 3.0, 'cost': 15.0, 'corrosion': 8.0},
+        'Cr': {'strength': 5.0, 'ductility': 0.5, 'cost': 12.0, 'corrosion': 10.0},
+        'Ti': {'strength': 9.0, 'ductility': -2.0, 'cost': 25.0, 'corrosion': 6.0},
+        'Al': {'strength': 2.5, 'ductility': 0.0, 'cost': 5.0, 'corrosion': 4.0},
+        'Cu': {'strength': 1.5, 'ductility': 2.0, 'cost': 8.0, 'corrosion': 3.0},
+        'Mn': {'strength': 3.0, 'ductility': 1.5, 'cost': 3.0, 'corrosion': 1.0},
+    }
+    
+    total_strength = base_strength
+    total_ductility = base_ductility
+    total_cost = base_cost
+    total_corrosion = 50 # Base score
+    
+    # Normalize composition
+    total_percent = sum(float(v) for v in composition.values())
+    if total_percent == 0: total_percent = 1
+    
+    for elem, amount in composition.items():
+        try:
+            amount = float(amount)
+        except ValueError:
+            amount = 0
+            
+        f = factors.get(elem, {'strength': 1, 'ductility': 0, 'cost': 1, 'corrosion': 0})
+        
+        # Contribution Model
+        total_strength += f['strength'] * amount * 0.6
+        total_ductility += f['ductility'] * amount * 0.4
+        total_cost += f['cost'] * amount * 0.1
+        total_corrosion += f['corrosion'] * amount * 0.5
+        
+    # Apply some non-linear interactions (Mocking complex physics)
+    # E.g., Cr + Ni synergy for corrosion
+    cr = float(composition.get('Cr', 0))
+    ni = float(composition.get('Ni', 0))
+    if cr > 10 and ni > 5:
+        total_corrosion *= 1.2 # Synergy bonus
+        
+    # Constraints
+    total_strength = max(50, round(total_strength, 1))
+    total_ductility = max(0.1, round(total_ductility, 1))
+    total_cost = max(1, round(total_cost, 1))
+    total_corrosion = min(100, max(0, round(total_corrosion, 1)))
+    
+    return jsonify({
+        'tensile_strength': total_strength,
+        'ductility': total_ductility,
+        'cost_index': total_cost,
+        'corrosion_resistance': total_corrosion,
+        'melting_point': 1500 - (float(composition.get('C', 0)) * 50) + (float(composition.get('W', 0)) * 20) # Fake
+    })
+
+# --- Chat & AI Logic ---
+@app.route('/api/chat', methods=['POST'])
+def chat():
+    data = request.json
+    user_message = data.get('message', '')
+    history = data.get('history', [])
+    
+    # System Prompt with specific instruction to return JSON for charts if needed
+    system_prompt = {
+        "role": "system", 
+        "content": (
+            "你是智材灵动（Material Mind）的AI助手，一位资深的材料科学家。"
+            "请用专业、严谨但易懂的中文回答。"
+            "如果你需要展示数据趋势或图表，请在回复的最后附加一个JSON代码块，"
+            "格式为: ```json:chart { \"type\": \"bar|line|pie\", \"data\": { ... }, \"title\": \"...\" } ```。"
+            "例如展示钢材强度对比：```json:chart { \"type\": \"bar\", \"title\": \"不同合金强度对比\", \"labels\": [\"合金A\", \"合金B\"], \"datasets\": [{ \"label\": \"强度(MPa)\", \"data\": [450, 600] }] } ```"
+        )
+    }
+    
+    messages = [system_prompt] + history + [{"role": "user", "content": user_message}]
+    
+    headers = {
+        "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+        "Content-Type": "application/json"
+    }
+    
+    payload = {
+        "model": "Qwen/Qwen2.5-7B-Instruct",
+        "messages": messages,
+        "stream": False,
+        "max_tokens": 1024
+    }
+    
+    try:
+        response = requests.post(SILICONFLOW_API_URL, json=payload, headers=headers, timeout=30)
+        response.raise_for_status()
+        result = response.json()
+        ai_content = result['choices'][0]['message']['content']
+        return jsonify({'response': ai_content})
+    except Exception as e:
+        print(f"API Error: {e}")
+        return mock_chat_response(user_message)
+
+def mock_chat_response(message):
+    """
+    Mock Fallback that returns rich content (Markdown + JSON Charts)
+    """
+    time.sleep(1) # Simulate network delay
+    
+    base_response = "**Mock Mode (云端连接中断)**: 正在使用本地应急知识库。\n\n"
+    
+    if "强度" in message or "strength" in message:
+        return jsonify({'response': base_response + 
+            "关于材料强度，我们通常关注屈服强度和抗拉强度。添加碳(C)通常能显著提高钢的强度，但会降低延展性。\n\n"
+            "以下是常见合金元素的强化效果对比：\n"
+            "```json:chart\n"
+            "{\n"
+            "  \"type\": \"bar\",\n"
+            "  \"title\": \"合金元素强化效果 (Mock Data)\",\n"
+            "  \"labels\": [\"碳 (C)\", \"锰 (Mn)\", \"硅 (Si)\", \"铬 (Cr)\"],\n"
+            "  \"datasets\": [{\n"
+            "    \"label\": \"强化系数\",\n"
+            "    \"data\": [12, 4, 3, 2],\n"
+            "    \"backgroundColor\": [\"#ef4444\", \"#3b82f6\", \"#10b981\", \"#f59e0b\"]\n"
+            "  }]\n"
+            "}\n"
+            "```"
+        })
+    elif "腐蚀" in message or "corrosion" in message:
+        return jsonify({'response': base_response +
+            "提高耐腐蚀性的关键是形成致密的氧化膜。铬(Cr)是实现这一点的关键元素（如不锈钢需含Cr > 10.5%）。\n\n"
+            "不锈钢耐腐蚀性随Cr含量变化趋势：\n"
+            "```json:chart\n"
+            "{\n"
+            "  \"type\": \"line\",\n"
+            "  \"title\": \"Cr含量与耐腐蚀性\",\n"
+            "  \"labels\": [\"0%\", \"5%\", \"10%\", \"15%\", \"20%\"],\n"
+            "  \"datasets\": [{\n"
+            "    \"label\": \"耐腐蚀指数\",\n"
+            "    \"data\": [10, 25, 80, 95, 98],\n"
+            "    \"borderColor\": \"#3b82f6\",\n"
+            "    \"fill\": true\n"
+            "  }]\n"
+            "}\n"
+            "```"
+        })
+    else:
+        return jsonify({'response': base_response + 
+            f"收到您的问题：“{message}”。\n"
+            "作为一个材料科学助手，我可以帮您设计配方、预测性能或分析实验数据。\n"
+            "尝试问我：“如何提高强度？”或者“不锈钢的配方是什么？”"
+        })
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

requirements.txt

@@ -0,0 +1,5 @@
+Flask==3.0.0
+flask-cors==4.0.0
+requests==2.31.0
+python-dotenv==1.0.0
+gunicorn==21.2.0

templates/index.html

@@ -0,0 +1,711 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>智材灵动 - AI材料研发平台</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        [v-cloak] { display: none; }
+        .markdown-body h1 { font-size: 1.5em; font-weight: bold; margin-bottom: 0.5em; }
+        .markdown-body h2 { font-size: 1.3em; font-weight: bold; margin-bottom: 0.5em; }
+        .markdown-body p { margin-bottom: 1em; }
+        .markdown-body ul { list-style-type: disc; margin-left: 1.5em; margin-bottom: 1em; }
+        .markdown-body code { background-color: #f3f4f6; padding: 0.2em 0.4em; border-radius: 0.25em; font-family: monospace; }
+        .markdown-body pre { background-color: #1f2937; color: #f3f4f6; padding: 1em; border-radius: 0.5em; overflow-x: auto; margin-bottom: 1em; }
+        .chart-container { width: 100%; height: 300px; margin-top: 1rem; margin-bottom: 1rem; }
+        
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: #f1f1f1; }
+        ::-webkit-scrollbar-thumb { background: #c7c7cc; border-radius: 3px; }
+        ::-webkit-scrollbar-thumb:hover { background: #a1a1aa; }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800 h-screen flex overflow-hidden">
+    <div id="app" v-cloak class="flex w-full h-full">
+        <!-- Sidebar -->
+        <aside class="w-64 bg-slate-900 text-white flex flex-col hidden md:flex shadow-2xl z-20">
+            <div class="p-6 border-b border-slate-800 flex items-center gap-3">
+                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-teal-400 to-indigo-600 flex items-center justify-center shadow-lg">
+                    <i class="fa-solid fa-atom text-white text-xl"></i>
+                </div>
+                <div>
+                    <h1 class="text-xl font-bold tracking-tight">智材灵动</h1>
+                    <p class="text-xs text-slate-400 font-mono">Material Mind v2.0</p>
+                </div>
+            </div>
+            <nav class="flex-1 p-4 space-y-2">
+                <button @click="currentTab = 'dashboard'" :class="{'bg-slate-800 text-teal-400 border-l-4 border-teal-400': currentTab === 'dashboard', 'text-slate-400 hover:bg-slate-800 hover:text-white': currentTab !== 'dashboard'}" class="w-full flex items-center gap-3 px-4 py-3 rounded-r-lg transition-all duration-200 group">
+                    <i class="fa-solid fa-chart-pie w-5 group-hover:scale-110 transition-transform"></i> 创新雷达
+                </button>
+                <button @click="currentTab = 'composer'" :class="{'bg-slate-800 text-teal-400 border-l-4 border-teal-400': currentTab === 'composer', 'text-slate-400 hover:bg-slate-800 hover:text-white': currentTab !== 'composer'}" class="w-full flex items-center gap-3 px-4 py-3 rounded-r-lg transition-all duration-200 group">
+                    <i class="fa-solid fa-flask w-5 group-hover:scale-110 transition-transform"></i> 配方合成器
+                </button>
+                <button @click="currentTab = 'chat'" :class="{'bg-slate-800 text-teal-400 border-l-4 border-teal-400': currentTab === 'chat', 'text-slate-400 hover:bg-slate-800 hover:text-white': currentTab !== 'chat'}" class="w-full flex items-center gap-3 px-4 py-3 rounded-r-lg transition-all duration-200 group">
+                    <i class="fa-solid fa-robot w-5 group-hover:scale-110 transition-transform"></i> 实验助手
+                </button>
+                <button @click="currentTab = 'experiments'" :class="{'bg-slate-800 text-teal-400 border-l-4 border-teal-400': currentTab === 'experiments', 'text-slate-400 hover:bg-slate-800 hover:text-white': currentTab !== 'experiments'}" class="w-full flex items-center gap-3 px-4 py-3 rounded-r-lg transition-all duration-200 group">
+                    <i class="fa-solid fa-database w-5 group-hover:scale-110 transition-transform"></i> 资产库
+                </button>
+                <button @click="currentTab = 'datasets'" :class="{'bg-slate-800 text-teal-400 border-l-4 border-teal-400': currentTab === 'datasets', 'text-slate-400 hover:bg-slate-800 hover:text-white': currentTab !== 'datasets'}" class="w-full flex items-center gap-3 px-4 py-3 rounded-r-lg transition-all duration-200 group">
+                    <i class="fa-solid fa-file-upload w-5 group-hover:scale-110 transition-transform"></i> 数据集
+                </button>
+            </nav>
+            <div class="p-4 border-t border-slate-800 text-xs text-slate-500 text-center">
+                &copy; 2026 Material Mind Lab<br>Running on Hugging Face
+            </div>
+        </aside>
+
+        <!-- Mobile Header -->
+        <div class="md:hidden fixed top-0 left-0 right-0 bg-slate-900 text-white z-50 px-4 py-3 flex justify-between items-center shadow-md">
+            <div class="flex items-center gap-2">
+                <i class="fa-solid fa-atom text-teal-400"></i>
+                <span class="font-bold">智材灵动</span>
+            </div>
+            <button @click="mobileMenuOpen = !mobileMenuOpen" class="text-white">
+                <i class="fa-solid fa-bars text-xl"></i>
+            </button>
+        </div>
+        
+        <!-- Mobile Menu -->
+        <div v-if="mobileMenuOpen" class="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden" @click="mobileMenuOpen = false"></div>
+        <div v-if="mobileMenuOpen" class="fixed right-0 top-0 bottom-0 w-64 bg-slate-900 z-50 p-4 transform transition-transform duration-300">
+             <nav class="space-y-4 mt-10">
+                <button @click="currentTab = 'dashboard'; mobileMenuOpen = false" class="w-full text-left text-white p-2 border-b border-slate-700">创新雷达</button>
+                <button @click="currentTab = 'composer'; mobileMenuOpen = false" class="w-full text-left text-white p-2 border-b border-slate-700">配方合成器</button>
+                <button @click="currentTab = 'chat'; mobileMenuOpen = false" class="w-full text-left text-white p-2 border-b border-slate-700">实验助手</button>
+                <button @click="currentTab = 'experiments'; mobileMenuOpen = false" class="w-full text-left text-white p-2 border-b border-slate-700">资产库</button>
+                <button @click="currentTab = 'datasets'; mobileMenuOpen = false" class="w-full text-left text-white p-2 border-b border-slate-700">数据集</button>
+             </nav>
+        </div>
+
+        <!-- Main Content -->
+        <main class="flex-1 overflow-y-auto p-4 md:p-8 pt-16 md:pt-8 bg-slate-50 relative">
+            
+            <!-- Toast Notification -->
+            <div v-if="toast.show" class="fixed top-4 right-4 z-50 px-6 py-4 rounded-lg shadow-lg flex items-center gap-3 animate-bounce-in" :class="{'bg-green-500 text-white': toast.type === 'success', 'bg-red-500 text-white': toast.type === 'error'}">
+                <i class="fa-solid" :class="{'fa-check-circle': toast.type === 'success', 'fa-exclamation-circle': toast.type === 'error'}"></i>
+                <span class="font-medium">${ toast.message }</span>
+            </div>
+
+            <!-- Dashboard View -->
+            <div v-if="currentTab === 'dashboard'" class="space-y-6 max-w-6xl mx-auto">
+                <header class="flex justify-between items-end border-b border-slate-200 pb-4">
+                    <div>
+                        <h2 class="text-3xl font-bold text-slate-800">实验室概览</h2>
+                        <p class="text-slate-500 mt-1">欢迎回来，今日实验室运行状态良好</p>
+                    </div>
+                    <div class="text-sm text-slate-400">
+                        <i class="fa-regular fa-calendar mr-1"></i> ${ new Date().toLocaleDateString() }
+                    </div>
+                </header>
+                
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition">
+                        <div class="flex justify-between items-start mb-4">
+                            <div class="p-3 bg-indigo-50 rounded-lg text-indigo-600">
+                                <i class="fa-solid fa-flask text-xl"></i>
+                            </div>
+                            <span class="text-xs font-bold px-2 py-1 bg-green-100 text-green-700 rounded-full">+12%</span>
+                        </div>
+                        <div class="text-slate-500 text-sm mb-1">已归档实验</div>
+                        <div class="text-3xl font-bold text-slate-800">${ experiments.length || 5 }</div>
+                    </div>
+                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition">
+                        <div class="flex justify-between items-start mb-4">
+                            <div class="p-3 bg-teal-50 rounded-lg text-teal-600">
+                                <i class="fa-solid fa-bolt text-xl"></i>
+                            </div>
+                        </div>
+                        <div class="text-slate-500 text-sm mb-1">今日模拟次数</div>
+                        <div class="text-3xl font-bold text-slate-800">${ simulationCount }</div>
+                    </div>
+                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition">
+                        <div class="flex justify-between items-start mb-4">
+                            <div class="p-3 bg-purple-50 rounded-lg text-purple-600">
+                                <i class="fa-solid fa-comments text-xl"></i>
+                            </div>
+                        </div>
+                        <div class="text-slate-500 text-sm mb-1">AI 咨询量</div>
+                        <div class="text-3xl font-bold text-slate-800">${ Math.floor(chatHistory.length / 2) }</div>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <div class="lg:col-span-2 bg-white p-6 rounded-xl shadow-sm border border-slate-100">
+                        <h3 class="font-bold mb-4 text-slate-700 flex items-center gap-2">
+                            <i class="fa-solid fa-chart-line text-indigo-500"></i> 近期材料性能趋势
+                        </h3>
+                        <div id="trendChart" class="w-full h-80"></div>
+                    </div>
+                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
+                        <h3 class="font-bold mb-4 text-slate-700 flex items-center gap-2">
+                            <i class="fa-solid fa-radar text-teal-500"></i> 多维雷达分析
+                        </h3>
+                        <div id="radarChart" class="w-full h-80"></div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Composer View -->
+            <div v-if="currentTab === 'composer'" class="space-y-6 max-w-6xl mx-auto">
+                <div class="flex justify-between items-center">
+                    <h2 class="text-2xl font-bold text-slate-800">材料配方合成器</h2>
+                    <button @click="resetComposition" class="text-sm text-slate-500 hover:text-indigo-600 bg-white px-3 py-1 rounded border border-slate-200 shadow-sm"><i class="fa-solid fa-rotate-right"></i> 重置</button>
+                </div>
+
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                    <!-- Controls -->
+                    <div class="bg-white p-6 rounded-xl shadow-sm border border-slate-100">
+                        <h3 class="font-bold mb-4 text-slate-700 border-b pb-2">元素配比 (%)</h3>
+                        <div class="space-y-5">
+                            <div v-for="(value, elem) in composition" :key="elem" class="group">
+                                <div class="flex justify-between mb-2">
+                                    <label class="font-medium text-slate-700 flex items-center gap-2">
+                                        <span class="w-6 h-6 rounded bg-slate-100 flex items-center justify-center text-xs font-bold text-slate-600">${ elem }</span>
+                                        ${ getElementName(elem) }
+                                    </label>
+                                    <span class="text-sm text-indigo-600 font-bold bg-indigo-50 px-2 rounded">${ value }%</span>
+                                </div>
+                                <input type="range" v-model.number="composition[elem]" min="0" max="100" class="w-full h-2 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-indigo-600 group-hover:bg-slate-300 transition">
+                            </div>
+                        </div>
+                        <div class="mt-8 pt-4 border-t border-slate-100 flex justify-between items-center">
+                            <div class="text-sm text-slate-500 font-medium">
+                                总计: <span :class="{'text-red-500': totalPercent > 100, 'text-green-500': totalPercent <= 100}" class="text-lg font-bold">${ totalPercent }%</span>
+                            </div>
+                            <button @click="simulate" :disabled="isSimulating" class="bg-indigo-600 text-white px-8 py-2.5 rounded-lg hover:bg-indigo-700 transition shadow-lg shadow-indigo-200 disabled:opacity-50 disabled:shadow-none flex items-center gap-2">
+                                <i class="fa-solid fa-flask" :class="{'fa-spin': isSimulating}"></i> 
+                                ${ isSimulating ? '模拟计算中...' : '开始模拟' }
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Results -->
+                    <div class="space-y-6">
+                        <div v-if="simulationResult" class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 animate-fade-in">
+                            <h3 class="font-bold mb-4 text-slate-700 border-b pb-2">预测性能指标</h3>
+                            <div class="grid grid-cols-2 gap-4">
+                                <div class="bg-indigo-50 p-4 rounded-xl border border-indigo-100">
+                                    <div class="text-xs text-indigo-500 uppercase font-bold tracking-wider">抗拉强度 (MPa)</div>
+                                    <div class="text-2xl font-bold text-indigo-800 mt-1">${ simulationResult.tensile_strength }</div>
+                                    <div class="w-full bg-indigo-200 h-1.5 rounded-full mt-2 overflow-hidden">
+                                        <div class="bg-indigo-500 h-full" :style="{width: Math.min(simulationResult.tensile_strength / 10, 100) + '%'}"></div>
+                                    </div>
+                                </div>
+                                <div class="bg-teal-50 p-4 rounded-xl border border-teal-100">
+                                    <div class="text-xs text-teal-500 uppercase font-bold tracking-wider">延展性 (%)</div>
+                                    <div class="text-2xl font-bold text-teal-800 mt-1">${ simulationResult.ductility }</div>
+                                    <div class="w-full bg-teal-200 h-1.5 rounded-full mt-2 overflow-hidden">
+                                        <div class="bg-teal-500 h-full" :style="{width: Math.min(simulationResult.ductility, 100) + '%'}"></div>
+                                    </div>
+                                </div>
+                                <div class="bg-purple-50 p-4 rounded-xl border border-purple-100">
+                                    <div class="text-xs text-purple-500 uppercase font-bold tracking-wider">成本指数</div>
+                                    <div class="text-2xl font-bold text-purple-800 mt-1">${ simulationResult.cost_index }</div>
+                                </div>
+                                <div class="bg-orange-50 p-4 rounded-xl border border-orange-100">
+                                    <div class="text-xs text-orange-500 uppercase font-bold tracking-wider">耐腐蚀评分</div>
+                                    <div class="text-2xl font-bold text-orange-800 mt-1">${ simulationResult.corrosion_resistance }</div>
+                                </div>
+                            </div>
+                            
+                            <div class="mt-6">
+                                <label class="block text-sm font-medium text-slate-700 mb-2">实验备注</label>
+                                <textarea v-model="newExperimentNote" placeholder="输入实验备注..." class="w-full border border-slate-300 rounded-lg p-3 text-sm h-24 focus:ring-2 focus:ring-indigo-500 outline-none transition"></textarea>
+                                <button @click="saveExperiment" class="mt-4 w-full border border-indigo-600 text-indigo-600 py-2.5 rounded-lg hover:bg-indigo-50 transition font-medium flex justify-center items-center gap-2">
+                                    <i class="fa-solid fa-save"></i> 保存到资产库
+                                </button>
+                            </div>
+                        </div>
+                        
+                        <div v-else class="bg-slate-100 border-2 border-dashed border-slate-300 rounded-xl h-64 flex flex-col items-center justify-center text-slate-400">
+                            <div class="w-16 h-16 bg-slate-200 rounded-full flex items-center justify-center mb-4">
+                                <i class="fa-solid fa-chart-simple text-2xl text-slate-400"></i>
+                            </div>
+                            <p class="font-medium">调整左侧配方并点击“开始模拟”</p>
+                            <p class="text-sm mt-1">AI 模型将为您预测材料性能</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Chat View -->
+            <div v-if="currentTab === 'chat'" class="flex flex-col h-[calc(100vh-6rem)] max-w-5xl mx-auto">
+                <div class="flex-1 overflow-y-auto space-y-6 p-4" id="chat-container">
+                    <div v-if="chatHistory.length === 0" class="text-center text-slate-400 mt-20">
+                        <div class="w-24 h-24 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-6">
+                            <i class="fa-solid fa-robot text-4xl text-indigo-500"></i>
+                        </div>
+                        <h3 class="text-lg font-bold text-slate-700 mb-2">我是您的实验智能助手</h3>
+                        <p class="mb-6">我可以帮您分析配方、预测性能或解答材料科学问题。</p>
+                        <div class="flex flex-wrap justify-center gap-2 max-w-lg mx-auto">
+                            <button @click="userInput='如何提高钢材的耐腐蚀性？'; sendMessage()" class="bg-white border border-slate-200 px-4 py-2 rounded-full text-sm hover:bg-slate-50 hover:border-indigo-300 transition">如何提高耐腐蚀性？</button>
+                            <button @click="userInput='解释一下马氏体相变'; sendMessage()" class="bg-white border border-slate-200 px-4 py-2 rounded-full text-sm hover:bg-slate-50 hover:border-indigo-300 transition">解释马氏体相变</button>
+                            <button @click="userInput='生成一个高强度低成本的配方'; sendMessage()" class="bg-white border border-slate-200 px-4 py-2 rounded-full text-sm hover:bg-slate-50 hover:border-indigo-300 transition">推荐高强度配方</button>
+                        </div>
+                    </div>
+                    
+                    <div v-for="(msg, index) in chatHistory" :key="index" :class="{'flex justify-end': msg.role === 'user', 'flex justify-start': msg.role === 'assistant'}">
+                        <div class="flex items-start gap-3 max-w-[85%]">
+                            <div v-if="msg.role === 'assistant'" class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mt-1">
+                                <i class="fa-solid fa-robot text-white text-xs"></i>
+                            </div>
+                            
+                            <div :class="{'bg-indigo-600 text-white': msg.role === 'user', 'bg-white border border-slate-200 text-slate-800 shadow-sm': msg.role === 'assistant'}" class="rounded-2xl px-5 py-4">
+                                <div v-if="msg.role === 'assistant'" class="markdown-body text-sm">
+                                    <div v-html="renderMarkdown(msg.content)"></div>
+                                </div>
+                                <div v-else class="text-sm">${ msg.content }</div>
+                            </div>
+                            
+                            <div v-if="msg.role === 'user'" class="w-8 h-8 rounded-full bg-slate-200 flex-shrink-0 flex items-center justify-center mt-1">
+                                <i class="fa-solid fa-user text-slate-500 text-xs"></i>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div v-if="isChatting" class="flex justify-start">
+                         <div class="flex items-center gap-3">
+                             <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center">
+                                <i class="fa-solid fa-robot text-white text-xs"></i>
+                            </div>
+                            <div class="bg-slate-100 rounded-2xl px-5 py-3 text-slate-500 text-sm flex items-center gap-2">
+                                <span class="flex space-x-1">
+                                    <span class="w-2 h-2 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 0s"></span>
+                                    <span class="w-2 h-2 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></span>
+                                    <span class="w-2 h-2 bg-slate-400 rounded-full animate-bounce" style="animation-delay: 0.4s"></span>
+                                </span>
+                                <span>AI 正在思考...</span>
+                            </div>
+                         </div>
+                    </div>
+                </div>
+                
+                <div class="p-4 pt-2">
+                    <div class="bg-white border border-slate-300 rounded-xl p-2 shadow-sm flex items-end gap-2 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:border-indigo-500 transition">
+                        <textarea v-model="userInput" @keydown.enter.prevent="sendMessage" placeholder="输入您的问题..." class="flex-1 bg-transparent border-none outline-none text-slate-700 resize-none max-h-32 p-2" rows="1"></textarea>
+                        <button @click="sendMessage" :disabled="!userInput.trim() || isChatting" class="bg-indigo-600 text-white w-10 h-10 rounded-lg hover:bg-indigo-700 disabled:opacity-50 disabled:bg-slate-300 flex items-center justify-center transition flex-shrink-0">
+                            <i class="fa-solid fa-paper-plane"></i>
+                        </button>
+                    </div>
+                    <div class="text-center text-xs text-slate-400 mt-2">AI 生成内容仅供参考，请以实验数据为准</div>
+                </div>
+            </div>
+
+            <!-- Experiments View -->
+            <div v-if="currentTab === 'experiments'" class="space-y-6 max-w-6xl mx-auto">
+                <div class="flex justify-between items-center">
+                    <h2 class="text-2xl font-bold text-slate-800">研发资产库</h2>
+                    <div class="flex gap-2">
+                        <div class="relative">
+                            <input type="text" placeholder="搜索实验..." class="pl-9 pr-4 py-2 rounded-lg border border-slate-200 text-sm focus:ring-2 focus:ring-indigo-500 outline-none">
+                            <i class="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 text-xs"></i>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <div v-for="exp in experiments" :key="exp.id" class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden hover:shadow-lg hover:-translate-y-1 transition duration-300 group">
+                        <div class="p-4 border-b border-slate-50 flex justify-between items-start bg-slate-50 group-hover:bg-indigo-50 transition">
+                            <div>
+                                <h3 class="font-bold text-slate-800 line-clamp-1" :title="exp.title">${ exp.title }</h3>
+                                <p class="text-xs text-slate-500">${ new Date(exp.created_at).toLocaleString() }</p>
+                            </div>
+                            <button @click="deleteExperiment(exp.id)" class="text-slate-300 hover:text-red-500 transition">
+                                <i class="fa-solid fa-trash"></i>
+                            </button>
+                        </div>
+                        <div class="p-4 space-y-4">
+                            <div>
+                                <div class="text-xs text-slate-400 uppercase font-bold mb-2">主要成分</div>
+                                <div class="flex flex-wrap gap-1">
+                                    <span v-for="(v, k) in exp.composition" v-if="v > 0" :key="k" class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded font-mono">
+                                        ${ k }:${ v }%
+                                    </span>
+                                </div>
+                            </div>
+                            <div v-if="exp.properties">
+                                <div class="text-xs text-slate-400 uppercase font-bold mb-2">关键性能</div>
+                                <div class="grid grid-cols-2 gap-2 text-sm">
+                                    <div class="bg-indigo-50 rounded p-2 text-center">
+                                        <div class="text-xs text-indigo-400">强度</div>
+                                        <div class="font-bold text-indigo-700">${ exp.properties.tensile_strength }</div>
+                                    </div>
+                                    <div class="bg-teal-50 rounded p-2 text-center">
+                                        <div class="text-xs text-teal-400">延展</div>
+                                        <div class="font-bold text-teal-700">${ exp.properties.ductility }</div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div v-if="exp.notes" class="text-sm text-slate-500 italic bg-slate-50 p-2 rounded border border-slate-100 line-clamp-2">
+                                <i class="fa-solid fa-quote-left text-slate-300 mr-1"></i>${ exp.notes }
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div v-if="experiments.length === 0" class="col-span-full text-center py-20 text-slate-400">
+                        <div class="w-20 h-20 bg-slate-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                            <i class="fa-solid fa-flask text-3xl text-slate-300"></i>
+                        </div>
+                        <p class="text-lg">暂无实验记录</p>
+                        <p class="text-sm">前往“配方合成器”开始您的第一次实验</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Datasets View -->
+            <div v-if="currentTab === 'datasets'" class="space-y-6 max-w-6xl mx-auto">
+                <div class="flex justify-between items-center">
+                    <h2 class="text-2xl font-bold text-slate-800">数据集管理</h2>
+                    <button @click="triggerUpload" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition flex items-center gap-2">
+                        <i class="fa-solid fa-cloud-arrow-up"></i> 上传数据
+                    </button>
+                    <!-- Hidden File Input -->
+                    <input type="file" ref="fileInput" @change="handleFileUpload" class="hidden">
+                </div>
+
+                <div class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
+                    <table class="w-full text-sm text-left text-slate-500">
+                        <thead class="text-xs text-slate-700 uppercase bg-slate-50">
+                            <tr>
+                                <th scope="col" class="px-6 py-3">文件名</th>
+                                <th scope="col" class="px-6 py-3">描述</th>
+                                <th scope="col" class="px-6 py-3">上传时间</th>
+                                <th scope="col" class="px-6 py-3 text-right">操作</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="ds in datasets" :key="ds.id" class="bg-white border-b hover:bg-slate-50">
+                                <td class="px-6 py-4 font-medium text-slate-900 flex items-center gap-2">
+                                    <i class="fa-solid fa-file-csv text-green-500 text-lg"></i>
+                                    ${ ds.filename }
+                                </td>
+                                <td class="px-6 py-4">${ ds.description }</td>
+                                <td class="px-6 py-4">${ new Date(ds.uploaded_at).toLocaleString() }</td>
+                                <td class="px-6 py-4 text-right">
+                                    <a href="#" class="font-medium text-indigo-600 hover:underline">下载</a>
+                                </td>
+                            </tr>
+                            <tr v-if="datasets.length === 0">
+                                <td colspan="4" class="px-6 py-10 text-center text-slate-400">
+                                    暂无上传的数据集
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+
+        </main>
+    </div>
+
+    <script>
+        const { createApp, ref, computed, onMounted, nextTick } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                const currentTab = ref('dashboard');
+                const mobileMenuOpen = ref(false);
+                const isSimulating = ref(false);
+                const simulationResult = ref(null);
+                const newExperimentNote = ref('');
+                const simulationCount = ref(0);
+                const fileInput = ref(null);
+                
+                // Toast
+                const toast = ref({ show: false, message: '', type: 'success' });
+                const showToast = (msg, type='success') => {
+                    toast.value = { show: true, message: msg, type };
+                    setTimeout(() => toast.value.show = false, 3000);
+                };
+
+                // Chat
+                const userInput = ref('');
+                const isChatting = ref(false);
+                const chatHistory = ref([]);
+
+                // Data
+                const experiments = ref([]);
+                const datasets = ref([]);
+                const composition = ref({
+                    'Fe': 80, 'C': 5, 'Ni': 5, 'Cr': 5, 'Ti': 0, 'Al': 5, 'Cu': 0, 'Mn': 0
+                });
+
+                const totalPercent = computed(() => {
+                    return Object.values(composition.value).reduce((a, b) => a + b, 0);
+                });
+                
+                const getElementName = (symbol) => {
+                    const names = {'Fe': '铁', 'C': '碳', 'Ni': '镍', 'Cr': '铬', 'Ti': '钛', 'Al': '铝', 'Cu': '铜', 'Mn': '锰'};
+                    return names[symbol] || symbol;
+                };
+
+                // Charts
+                let radarChart = null;
+                let trendChart = null;
+
+                const updateCharts = () => {
+                    nextTick(() => {
+                        if (currentTab.value === 'dashboard') {
+                            initDashboardCharts();
+                        }
+                    });
+                };
+
+                const initDashboardCharts = () => {
+                    const chartDom = document.getElementById('radarChart');
+                    if (chartDom) {
+                        if (radarChart) radarChart.dispose();
+                        radarChart = echarts.init(chartDom);
+                        const option = {
+                            radar: {
+                                indicator: [
+                                    { name: '强度', max: 500 },
+                                    { name: '延展性', max: 100 },
+                                    { name: '成本', max: 100 },
+                                    { name: '耐腐蚀', max: 100 },
+                                    { name: '熔点', max: 2000 }
+                                ]
+                            },
+                            series: [{
+                                name: '性能分布',
+                                type: 'radar',
+                                data: [
+                                    {
+                                        value: [350, 40, 20, 60, 1500],
+                                        name: '当前平均',
+                                        itemStyle: { color: '#6366f1' },
+                                        areaStyle: { color: 'rgba(99, 102, 241, 0.2)' }
+                                    }
+                                ]
+                            }]
+                        };
+                        radarChart.setOption(option);
+                    }
+                    
+                    const trendDom = document.getElementById('trendChart');
+                    if (trendDom) {
+                         if (trendChart) trendChart.dispose();
+                         trendChart = echarts.init(trendDom);
+                         // Mock Trend Data based on experiments
+                         const data = experiments.value.slice(0, 10).map(e => e.properties?.tensile_strength || 0);
+                         const dates = experiments.value.slice(0, 10).map(e => new Date(e.created_at).toLocaleDateString());
+                         
+                         const option = {
+                             tooltip: { trigger: 'axis' },
+                             xAxis: { type: 'category', data: dates.length ? dates : ['Mon', 'Tue', 'Wed'] },
+                             yAxis: { type: 'value' },
+                             series: [{
+                                 data: data.length ? data : [150, 230, 224],
+                                 type: 'line',
+                                 smooth: true,
+                                 itemStyle: { color: '#14b8a6' },
+                                 areaStyle: { color: 'rgba(20, 184, 166, 0.1)' }
+                             }]
+                         };
+                         trendChart.setOption(option);
+                    }
+                };
+
+                // API Calls
+                const fetchExperiments = async () => {
+                    try {
+                        const res = await fetch('/api/experiments');
+                        experiments.value = await res.json();
+                        updateCharts();
+                    } catch (e) {
+                        console.error(e);
+                    }
+                };
+                
+                const fetchDatasets = async () => {
+                    try {
+                        const res = await fetch('/api/datasets');
+                        datasets.value = await res.json();
+                    } catch (e) {
+                        console.error(e);
+                    }
+                };
+
+                const simulate = async () => {
+                    isSimulating.value = true;
+                    try {
+                        const res = await fetch('/api/simulate', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({ composition: composition.value })
+                        });
+                        simulationResult.value = await res.json();
+                        simulationCount.value++;
+                        showToast('模拟计算完成', 'success');
+                    } catch (e) {
+                        showToast('模拟失败', 'error');
+                    } finally {
+                        isSimulating.value = false;
+                    }
+                };
+
+                const saveExperiment = async () => {
+                    if (!simulationResult.value) return;
+                    const title = `Exp #${experiments.value.length + 1} - ${new Date().toLocaleTimeString()}`;
+                    try {
+                        await fetch('/api/experiments', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({
+                                title,
+                                composition: composition.value,
+                                properties: simulationResult.value,
+                                notes: newExperimentNote.value
+                            })
+                        });
+                        newExperimentNote.value = '';
+                        simulationResult.value = null;
+                        showToast('已保存到资产库', 'success');
+                        fetchExperiments();
+                    } catch (e) {
+                        showToast('保存失败', 'error');
+                    }
+                };
+                
+                const deleteExperiment = async (id) => {
+                    if (!confirm('确定删除此实验记录吗？')) return;
+                    try {
+                        await fetch(`/api/experiments/${id}`, { method: 'DELETE' });
+                        experiments.value = experiments.value.filter(e => e.id !== id);
+                        showToast('删除成功', 'success');
+                    } catch (e) {
+                        showToast('删除失败', 'error');
+                    }
+                };
+
+                // File Upload
+                const triggerUpload = () => {
+                    fileInput.value.click();
+                };
+
+                const handleFileUpload = async (event) => {
+                    const file = event.target.files[0];
+                    if (!file) return;
+                    
+                    const formData = new FormData();
+                    formData.append('file', file);
+                    formData.append('description', '用户上传数据集');
+                    
+                    try {
+                        showToast('正在上传...', 'info');
+                        const res = await fetch('/api/upload', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        if (!res.ok) throw new Error('Upload failed');
+                        showToast('文件上传成功', 'success');
+                        fetchDatasets();
+                    } catch (e) {
+                        showToast('上传失败: ' + e.message, 'error');
+                    }
+                    event.target.value = ''; // Reset
+                };
+
+                // Chat Logic with Chart Rendering
+                const sendMessage = async () => {
+                    if (!userInput.value.trim()) return;
+                    const msg = userInput.value;
+                    chatHistory.value.push({ role: 'user', content: msg });
+                    userInput.value = '';
+                    isChatting.value = true;
+                    
+                    try {
+                        const res = await fetch('/api/chat', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({ 
+                                message: msg,
+                                history: chatHistory.value.slice(-6) // Context window
+                            })
+                        });
+                        const data = await res.json();
+                        chatHistory.value.push({ role: 'assistant', content: data.response });
+                        nextTick(() => renderChatCharts());
+                    } catch (e) {
+                        chatHistory.value.push({ role: 'assistant', content: '抱歉，连接出现问题。' });
+                    } finally {
+                        isChatting.value = false;
+                        // Scroll to bottom
+                        const container = document.getElementById('chat-container');
+                        if (container) container.scrollTop = container.scrollHeight;
+                    }
+                };
+                
+                const renderMarkdown = (text) => {
+                    // Extract JSON charts first to avoid marked parsing them as code blocks badly
+                    // Actually, we can just let marked parse them, then we find the code blocks in DOM
+                    return marked.parse(text);
+                };
+                
+                const renderChatCharts = () => {
+                    const codes = document.querySelectorAll('.markdown-body code');
+                    codes.forEach(code => {
+                        const content = code.textContent.trim();
+                        if (content.startsWith('json:chart')) {
+                            try {
+                                const jsonStr = content.replace('json:chart', '').trim();
+                                const chartData = JSON.parse(jsonStr);
+                                
+                                // Create container
+                                const container = document.createElement('div');
+                                container.className = 'chart-container';
+                                code.parentNode.replaceWith(container); // Replace pre/code block
+                                
+                                const chart = echarts.init(container);
+                                const option = {
+                                    title: { text: chartData.title, left: 'center' },
+                                    tooltip: { trigger: 'axis' },
+                                    legend: { bottom: 0 },
+                                    xAxis: { type: 'category', data: chartData.labels },
+                                    yAxis: { type: 'value' },
+                                    series: chartData.datasets.map(ds => ({
+                                        type: chartData.type || 'bar',
+                                        ...ds
+                                    }))
+                                };
+                                chart.setOption(option);
+                            } catch (e) {
+                                console.error('Chart parsing error', e);
+                            }
+                        }
+                    });
+                };
+
+                onMounted(() => {
+                    fetchExperiments();
+                    fetchDatasets();
+                    // Mock initial data if empty
+                    if (experiments.value.length === 0) {
+                         experiments.value = [
+                            {id: 1, title: '高强钢示例', composition: {Fe:90, C:10}, properties: {tensile_strength: 300, ductility: 10}, created_at: new Date().toISOString(), notes: '系统默认示例'}
+                         ];
+                    }
+                    updateCharts();
+                });
+
+                return {
+                    currentTab, mobileMenuOpen, 
+                    composition, totalPercent, isSimulating, simulationResult, simulate, 
+                    saveExperiment, newExperimentNote, experiments, deleteExperiment,
+                    userInput, isChatting, chatHistory, sendMessage, renderMarkdown,
+                    simulationCount, getElementName,
+                    datasets, fileInput, triggerUpload, handleFileUpload, toast
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>