Initial commit with enhanced features and localization

.gitattributes

@@ -0,0 +1 @@
+*.db filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+RUN mkdir -p instance && chmod 777 instance
+
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,43 @@
+---
+title: 芯感智能 (Chip Sense AI)
+emoji: 💿
+colorFrom: blue
+colorTo: indigo
+sdk: docker
+app_port: 7860
+short_description: 半导体晶圆良率分析与工艺监控智能体
+---
+
+# 芯感智能 (Chip Sense Agent)
+
+**芯感智能** 是一款专为半导体制造领域设计的良率分析与工艺监控 SaaS Agent。它结合了实时晶圆图谱可视化（Wafer Map）与 SiliconFlow AI 推理能力，帮助工艺工程师快速识别缺陷模式、归因根源并优化制程。
+
+## 核心功能
+
+1.  **晶圆全息雷达 (Wafer Radar)**:
+    *   动态生成晶圆热力图，可视化 Die 良率分布。
+    *   支持缩放与点击交互，查看单颗 Die 的详细参数。
+2.  **良率智脑 (Yield Mind)**:
+    *   集成 Qwen2.5-7B-Instruct 模型，自动分析缺陷空间分布模式（如：边缘失效、中心斑点、环形条纹）。
+    *   提供工艺归因建议（如：刻蚀均匀性差、涂胶转速异常）。
+3.  **工艺守望者 (Process Sentinel)**:
+    *   实时监控关键工艺参数（温度、压力、气体流量）。
+    *   SPC（统计过程控制）异常预警。
+4.  **缺陷资产库 (Defect Vault)**:
+    *   自动记录并归档历史缺陷模式，形成企业级良率知识库。
+
+## 技术栈
+
+*   **Backend**: Python Flask, SQLite
+*   **Frontend**: Vue 3, Tailwind CSS, ECharts (Canvas)
+*   **AI**: SiliconFlow API (Qwen/Qwen2.5-7B-Instruct)
+*   **Deployment**: Docker, Hugging Face Spaces
+
+## 快速开始
+
+```bash
+git clone https://huggingface.co/spaces/your-username/chip-sense-agent
+cd chip-sense-agent
+pip install -r requirements.txt
+python app.py
+```

app.py

@@ -0,0 +1,282 @@
+import os
+import json
+import sqlite3
+import random
+import datetime
+import requests
+from flask import Flask, render_template, request, jsonify, send_from_directory
+from flask_cors import CORS
+
+app = Flask(__name__)
+CORS(app)
+
+# Configuration
+SILICONFLOW_API_KEY = "sk-vimuseiptfbomzegyuvmebjzooncsqbyjtlddrfodzcdskgi"
+SILICONFLOW_API_URL = "https://api.siliconflow.cn/v1/chat/completions"
+DB_PATH = os.path.join(app.instance_path, "chip_sense.db")
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload
+
+# Ensure instance directory exists
+os.makedirs(app.instance_path, exist_ok=True)
+
+# Database Initialization
+def init_db():
+    with sqlite3.connect(DB_PATH) as conn:
+        cursor = conn.cursor()
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS wafers (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                lot_id TEXT NOT NULL,
+                wafer_id TEXT NOT NULL,
+                timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
+                yield_rate REAL,
+                status TEXT,
+                map_data JSON
+            )
+        ''')
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS defect_assets (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                wafer_db_id INTEGER,
+                pattern_type TEXT,
+                root_cause TEXT,
+                recommendation TEXT,
+                timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY(wafer_db_id) REFERENCES wafers(id)
+            )
+        ''')
+        conn.commit()
+
+# Mock Data Generator for Wafer Maps
+def generate_wafer_map(pattern_type="random"):
+    # 20x20 Grid masked as a circle
+    size = 20
+    data = []
+    total_dies = 0
+    pass_dies = 0
+    
+    center_x, center_y = size / 2, size / 2
+    radius = size / 2
+    
+    for x in range(size):
+        for y in range(size):
+            # Circular mask
+            if (x - center_x)**2 + (y - center_y)**2 > radius**2:
+                continue
+            
+            total_dies += 1
+            is_defect = False
+            
+            # Simulate patterns
+            if pattern_type == "edge":
+                dist = ((x - center_x)**2 + (y - center_y)**2)**0.5
+                if dist > radius * 0.8 and random.random() < 0.6:
+                    is_defect = True
+            elif pattern_type == "center":
+                dist = ((x - center_x)**2 + (y - center_y)**2)**0.5
+                if dist < radius * 0.4 and random.random() < 0.7:
+                    is_defect = True
+            elif pattern_type == "scratch":
+                # Linear scratch
+                if abs(x - y) < 2 and random.random() < 0.8:
+                    is_defect = True
+            elif pattern_type == "ring":
+                dist = ((x - center_x)**2 + (y - center_y)**2)**0.5
+                if dist > radius * 0.5 and dist < radius * 0.7 and random.random() < 0.5:
+                    is_defect = True
+            else: # Random
+                if random.random() < 0.05:
+                    is_defect = True
+            
+            # Value: 0 = Pass, 1 = Fail
+            value = 1 if is_defect else 0
+            if value == 0:
+                pass_dies += 1
+            
+            data.append([x, y, value])
+            
+    yield_rate = (pass_dies / total_dies) * 100 if total_dies > 0 else 0
+    return data, yield_rate
+
+# Initialize some mock data if empty
+def seed_data():
+    with sqlite3.connect(DB_PATH) as conn:
+        cursor = conn.cursor()
+        cursor.execute("SELECT COUNT(*) FROM wafers")
+        if cursor.fetchone()[0] == 0:
+            patterns = ["random", "edge", "center", "scratch", "ring"]
+            pattern_names = {
+                "random": "随机分布 (Random)",
+                "edge": "边缘失效 (Edge Failure)",
+                "center": "中心失效 (Center Failure)",
+                "scratch": "划痕缺陷 (Scratch)",
+                "ring": "环形缺陷 (Ring Defect)"
+            }
+            for i in range(12):
+                p_type = random.choice(patterns)
+                map_data, yield_rate = generate_wafer_map(p_type)
+                # Create a more realistic lot ID
+                lot_id = f"LOT-{2025001+i}-{random.choice(['A', 'B', 'C'])}"
+                cursor.execute('''
+                    INSERT INTO wafers (lot_id, wafer_id, yield_rate, status, map_data)
+                    VALUES (?, ?, ?, ?, ?)
+                ''', (lot_id, f"W{i+1:02d}", yield_rate, pattern_names[p_type], json.dumps(map_data)))
+            conn.commit()
+
+init_db()
+seed_data()
+
+# Routes
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/wafers', methods=['GET'])
+def get_wafers():
+    try:
+        with sqlite3.connect(DB_PATH) as conn:
+            conn.row_factory = sqlite3.Row
+            cursor = conn.cursor()
+            cursor.execute("SELECT id, lot_id, wafer_id, yield_rate, status, timestamp FROM wafers ORDER BY id DESC")
+            rows = cursor.fetchall()
+            return jsonify([dict(row) for row in rows])
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/wafer/<int:wafer_id>', methods=['GET'])
+def get_wafer_detail(wafer_id):
+    try:
+        with sqlite3.connect(DB_PATH) as conn:
+            conn.row_factory = sqlite3.Row
+            cursor = conn.cursor()
+            cursor.execute("SELECT * FROM wafers WHERE id = ?", (wafer_id,))
+            row = cursor.fetchone()
+            if row:
+                d = dict(row)
+                d['map_data'] = json.loads(d['map_data'])
+                return jsonify(d)
+            return jsonify({"error": "Wafer not found"}), 404
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/analyze', methods=['POST'])
+def analyze_wafer():
+    data = request.json
+    if not data:
+        return jsonify({"error": "No data provided"}), 400
+        
+    wafer_id = data.get('wafer_id')
+    pattern_desc = data.get('pattern_desc', 'Unknown pattern')
+    
+    # Call SiliconFlow
+    try:
+        headers = {
+            "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+            "Content-Type": "application/json"
+        }
+        
+        system_prompt = """
+        你是一位半导体良率分析专家 (Semiconductor Yield Analysis Expert)。
+        请分析描述的晶圆缺陷模式，并提供以下 JSON 格式的响应：
+        1. "diagnosis": 可能的根本原因 (Root Cause)，例如 '刻蚀偏差 (Etch bias)', '旋涂均匀性 (Spin coat uniformity)', '掩模版颗粒 (Reticle particle)'。
+        2. "action": 建议的纠正措施 (Corrective Action)。
+        3. "severity": "High" (高), "Medium" (中), 或 "Low" (低)。
+        4. "impact": 对器件性能的潜在影响。
+        
+        请只输出有效的 JSON。
+        """
+        
+        user_message = f"晶圆 ID: {wafer_id}. 观察到的缺陷模式: {pattern_desc}. 良率较低。请分析根本原因。"
+        
+        payload = {
+            "model": "Qwen/Qwen2.5-7B-Instruct",
+            "messages": [
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": user_message}
+            ],
+            "response_format": {"type": "json_object"}
+        }
+        
+        # Mock Mode for fallback if API fails or is slow
+        try:
+            response = requests.post(SILICONFLOW_API_URL, json=payload, headers=headers, timeout=10)
+            if response.status_code == 200:
+                ai_result = response.json()['choices'][0]['message']['content']
+                # Parse JSON string to object
+                try:
+                    ai_json = json.loads(ai_result)
+                except:
+                    # Fallback if model returns text
+                    ai_json = {
+                        "diagnosis": "检测到复杂模式 (AI 原始输出)",
+                        "action": ai_result[:100] + "...",
+                        "severity": "Medium",
+                        "impact": "请检查详细日志"
+                    }
+            else:
+                raise Exception(f"API Error: {response.status_code}")
+        except Exception as e:
+            print(f"AI Error: {e}")
+            # Mock Fallback
+            ai_json = {
+                "diagnosis": f"针对 {pattern_desc} 的模拟分析结果",
+                "action": "建议立即检查工艺设备校准参数，特别是光刻和刻蚀模块。",
+                "severity": "High",
+                "impact": "检测到明显的良率损失风险。"
+            }
+            
+        return jsonify(ai_json)
+        
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/upload', methods=['POST'])
+def upload_file():
+    if 'file' not in request.files:
+        return jsonify({"error": "没有文件部分"}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({"error": "未选择文件"}), 400
+    if file:
+        # In a real app, save the file. Here we just mock the process.
+        # file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
+        return jsonify({"status": "success", "message": f"文件 {file.filename} 上传成功 (模拟)"})
+    return jsonify({"error": "上传失败"}), 500
+
+@app.route('/api/save_asset', methods=['POST'])
+def save_asset():
+    data = request.json
+    if not data:
+        return jsonify({"error": "No data"}), 400
+        
+    try:
+        with sqlite3.connect(DB_PATH) as conn:
+            cursor = conn.cursor()
+            cursor.execute('''
+                INSERT INTO defect_assets (wafer_db_id, pattern_type, root_cause, recommendation)
+                VALUES (?, ?, ?, ?)
+            ''', (data.get('wafer_id'), data.get('pattern_type'), data.get('root_cause'), data.get('recommendation')))
+            conn.commit()
+        return jsonify({"status": "success", "message": "Asset saved to Knowledge Vault"})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.route('/api/assets', methods=['GET'])
+def get_assets():
+    try:
+        with sqlite3.connect(DB_PATH) as conn:
+            conn.row_factory = sqlite3.Row
+            cursor = conn.cursor()
+            cursor.execute('''
+                SELECT a.*, w.lot_id, w.wafer_id as w_name 
+                FROM defect_assets a 
+                JOIN wafers w ON a.wafer_db_id = w.id 
+                ORDER BY a.id DESC
+            ''')
+            rows = cursor.fetchall()
+            return jsonify([dict(row) for row in rows])
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

instance/chip_sense.db

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:772913c1625d9119ca815b5f8420fb05571479edecbe110196a4444431d72217
+size 57344

requirements.txt

@@ -0,0 +1,4 @@
+flask
+flask-cors
+requests
+python-dotenv

templates/index.html

@@ -0,0 +1,548 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>芯感智能 | Chip Sense 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>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
+        body { font-family: 'Inter', sans-serif; }
+        .glass-panel { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(229, 231, 235, 0.5); }
+        [v-cloak] { display: none !important; }
+        .toast-enter-active, .toast-leave-active { transition: all 0.5s ease; }
+        .toast-enter-from, .toast-leave-to { opacity: 0; transform: translateY(-20px); }
+    </style>
+</head>
+<body class="bg-slate-50 text-slate-800 h-screen overflow-hidden">
+    <div id="app" v-cloak class="flex h-full flex-col md:flex-row relative">
+        <!-- Toast Container -->
+        <div class="fixed top-4 right-4 z-50 flex flex-col gap-2">
+            <transition-group name="toast">
+                <div v-for="toast in toasts" :key="toast.id" 
+                     :class="{'bg-green-500': toast.type === 'success', 'bg-red-500': toast.type === 'error', 'bg-blue-500': toast.type === 'info'}"
+                     class="text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-2 min-w-[300px]">
+                    <i :class="toast.icon" class="fa-solid"></i>
+                    <span>${ toast.message }</span>
+                </div>
+            </transition-group>
+        </div>
+
+        <!-- Sidebar (Desktop) / Bottom Nav (Mobile) -->
+        <div class="bg-white border-slate-200 flex shadow-sm z-30
+                    fixed bottom-0 w-full h-16 border-t
+                    md:relative md:w-64 md:h-full md:border-r md:border-t-0 md:flex-col">
+            
+            <div class="hidden md:flex p-6 border-b border-slate-100 items-center gap-3">
+                <div class="w-8 h-8 rounded-lg bg-indigo-600 flex items-center justify-center text-white">
+                    <i class="fa-solid fa-microchip"></i>
+                </div>
+                <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-600 to-blue-500">芯感智能</h1>
+            </div>
+            
+            <nav class="flex-1 p-2 md:p-4 flex flex-row md:flex-col justify-around md:justify-start gap-1 md:space-y-2">
+                <button @click="currentView = 'dashboard'" 
+                        :class="{'text-indigo-600 md:bg-indigo-50': currentView === 'dashboard', 'text-slate-400 hover:bg-slate-50': currentView !== 'dashboard'}" 
+                        class="flex-1 md:flex-none flex flex-col md:flex-row items-center justify-center md:justify-start gap-1 md:gap-3 px-2 md:px-4 py-2 md:py-3 rounded-xl transition-all font-medium text-xs md:text-base">
+                    <i class="fa-solid fa-chart-line text-lg md:text-base"></i> 
+                    <span>生产概览</span>
+                </button>
+                <button @click="currentView = 'radar'" 
+                        :class="{'text-indigo-600 md:bg-indigo-50': currentView === 'radar', 'text-slate-400 hover:bg-slate-50': currentView !== 'radar'}" 
+                        class="flex-1 md:flex-none flex flex-col md:flex-row items-center justify-center md:justify-start gap-1 md:gap-3 px-2 md:px-4 py-2 md:py-3 rounded-xl transition-all font-medium text-xs md:text-base">
+                    <i class="fa-solid fa-circle-nodes text-lg md:text-base"></i> 
+                    <span>晶圆雷达</span>
+                </button>
+                <button @click="currentView = 'assets'" 
+                        :class="{'text-indigo-600 md:bg-indigo-50': currentView === 'assets', 'text-slate-400 hover:bg-slate-50': currentView !== 'assets'}" 
+                        class="flex-1 md:flex-none flex flex-col md:flex-row items-center justify-center md:justify-start gap-1 md:gap-3 px-2 md:px-4 py-2 md:py-3 rounded-xl transition-all font-medium text-xs md:text-base">
+                    <i class="fa-solid fa-vault text-lg md:text-base"></i> 
+                    <span>缺陷资产</span>
+                </button>
+                <div class="h-px bg-slate-100 my-2 mx-4 hidden md:block"></div>
+                <button @click="triggerUpload" 
+                        class="flex-1 md:flex-none flex flex-col md:flex-row items-center justify-center md:justify-start gap-1 md:gap-3 px-2 md:px-4 py-2 md:py-3 rounded-xl transition-all font-medium text-xs md:text-base text-slate-400 hover:bg-slate-50 hover:text-indigo-600">
+                    <i class="fa-solid fa-cloud-arrow-up text-lg md:text-base"></i> 
+                    <span>上传数据</span>
+                </button>
+            </nav>
+            
+            <div class="hidden md:block p-4 border-t border-slate-100">
+                <input type="file" ref="fileInput" class="hidden" @change="handleFileUpload" accept=".json,.csv,.txt">
+                <div class="bg-slate-50 rounded-lg p-3 text-xs text-slate-500">
+                    <div class="flex justify-between mb-1">
+                        <span>系统状态</span>
+                        <span class="text-green-500 font-bold">● 在线</span>
+                    </div>
+                    <div>版本 1.2.0 (Stable)</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="flex-1 flex flex-col h-full overflow-hidden relative mb-16 md:mb-0">
+            <!-- Top Bar -->
+            <header class="h-16 bg-white border-b border-slate-200 flex items-center justify-between px-4 md:px-8 shadow-sm flex-shrink-0">
+                <div class="text-sm breadcrumbs text-slate-500">
+                    <span class="font-semibold text-slate-800">${ viewTitle }</span>
+                </div>
+                <div class="flex items-center gap-4">
+                    <div class="flex items-center gap-2 px-3 py-1.5 bg-red-50 text-red-600 rounded-full text-xs font-medium border border-red-100 animate-pulse" v-if="alertCount > 0">
+                        <i class="fa-solid fa-triangle-exclamation"></i> <span class="hidden md:inline">${ alertCount } 工艺异常警告</span><span class="md:hidden">${ alertCount }</span>
+                    </div>
+                    <div class="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-slate-500 cursor-pointer hover:bg-slate-300 transition-colors" title="用户资料">
+                        <i class="fa-solid fa-user"></i>
+                    </div>
+                </div>
+            </header>
+
+            <!-- Dashboard View -->
+            <main v-if="currentView === 'dashboard'" class="flex-1 p-4 md:p-8 overflow-y-auto bg-slate-50/50">
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-8">
+                    <div class="glass-panel p-4 md:p-6 rounded-2xl shadow-sm border-l-4 border-blue-500">
+                        <div class="text-slate-500 text-sm mb-1">今日良率 (Yield)</div>
+                        <div class="text-3xl font-bold text-slate-800">92.4%</div>
+                        <div class="text-xs text-green-500 mt-2 flex items-center gap-1"><i class="fa-solid fa-arrow-trend-up"></i> +1.2% 较昨日</div>
+                    </div>
+                    <div class="glass-panel p-6 rounded-2xl shadow-sm border-l-4 border-indigo-500">
+                        <div class="text-slate-500 text-sm mb-1">产出晶圆 (Wafers)</div>
+                        <div class="text-3xl font-bold text-slate-800">1,248</div>
+                        <div class="text-xs text-slate-400 mt-2">目标: 1,200</div>
+                    </div>
+                    <div class="glass-panel p-6 rounded-2xl shadow-sm border-l-4 border-yellow-500">
+                        <div class="text-slate-500 text-sm mb-1">缺陷密度 (Defect Density)</div>
+                        <div class="text-3xl font-bold text-slate-800">0.45</div>
+                        <div class="text-xs text-red-500 mt-2 flex items-center gap-1"><i class="fa-solid fa-arrow-trend-up"></i> 高危警报</div>
+                    </div>
+                    <div class="glass-panel p-6 rounded-2xl shadow-sm border-l-4 border-green-500">
+                        <div class="text-slate-500 text-sm mb-1">设备稼动率 (OEE)</div>
+                        <div class="text-3xl font-bold text-slate-800">98.2%</div>
+                        <div class="text-xs text-green-500 mt-2">运行平稳</div>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 h-auto md:h-[500px]">
+                    <div class="md:col-span-2 glass-panel p-6 rounded-2xl shadow-sm flex flex-col h-[300px] md:h-full">
+                        <h3 class="font-bold text-slate-700 mb-4 flex items-center gap-2">
+                            <i class="fa-solid fa-chart-area text-blue-500"></i> 良率趋势监控 (Yield Trend)
+                        </h3>
+                        <div id="yieldChart" class="flex-1 w-full h-full"></div>
+                    </div>
+                    <div class="glass-panel p-6 rounded-2xl shadow-sm overflow-hidden flex flex-col h-[300px] md:h-full">
+                        <h3 class="font-bold text-slate-700 mb-4">最近批次 (Recent Lots)</h3>
+                        <div class="overflow-y-auto flex-1 pr-2">
+                            <div v-for="w in wafers" :key="w.id" @click="selectWafer(w); currentView = 'radar'" 
+                                 class="p-4 mb-3 bg-white border border-slate-100 rounded-xl hover:border-indigo-300 cursor-pointer transition-all hover:shadow-md group">
+                                <div class="flex justify-between items-center mb-2">
+                                    <span class="font-mono font-bold text-slate-700 group-hover:text-indigo-600">${ w.lot_id } - ${ w.wafer_id }</span>
+                                    <span :class="getStatusColor(w.yield_rate)" class="px-2 py-0.5 rounded text-xs font-bold">${ w.yield_rate.toFixed(1) }%</span>
+                                </div>
+                                <div class="text-xs text-slate-400 flex justify-between">
+                                    <span>${ formatDate(w.timestamp) }</span>
+                                    <span class="capitalize">${ w.status }</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+
+            <!-- Wafer Radar View -->
+            <main v-if="currentView === 'radar'" class="flex-1 flex flex-col md:flex-row h-full overflow-hidden">
+                <!-- Left: Wafer Map -->
+                <div class="flex-1 bg-slate-900 p-4 md:p-8 flex flex-col relative overflow-hidden min-h-[400px]">
+                    <!-- Background Grid Effect -->
+                    <div class="absolute inset-0 opacity-10" style="background-image: radial-gradient(#4f46e5 1px, transparent 1px); background-size: 30px 30px;"></div>
+                    
+                    <div class="flex justify-between items-center mb-4 z-10">
+                        <h2 class="text-white text-xl font-mono flex items-center gap-3">
+                            <span class="w-3 h-3 rounded-full bg-green-400 animate-pulse"></span>
+                            WAFER RADAR: ${ selectedWafer ? selectedWafer.lot_id + '-' + selectedWafer.wafer_id : 'NO SIGNAL' }
+                        </h2>
+                        <div class="flex gap-2">
+                            <button @click="fetchWafers" class="px-3 py-1 bg-slate-700 text-slate-300 rounded hover:bg-slate-600 text-sm">刷新数据流</button>
+                        </div>
+                    </div>
+                    
+                    <div class="flex-1 flex items-center justify-center relative z-10">
+                        <div id="waferMap" class="w-full h-full md:w-[600px] md:h-[600px]"></div>
+                        <!-- Overlay Stats -->
+                        <div v-if="selectedWafer" class="absolute top-4 right-4 bg-slate-800/80 backdrop-blur p-4 rounded-lg border border-slate-700 text-white w-48 hidden md:block">
+                            <div class="text-xs text-slate-400">良率 (Yield Rate)</div>
+                            <div class="text-2xl font-mono font-bold text-green-400 mb-2">${ selectedWafer.yield_rate.toFixed(1) }%</div>
+                            <div class="text-xs text-slate-400">总芯片数 (Total Dies)</div>
+                            <div class="text-lg font-mono">400</div>
+                            <div class="text-xs text-slate-400 mt-2">状态 (Status)</div>
+                            <div class="text-sm font-bold uppercase text-yellow-400">${ selectedWafer.status }</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Right: Analysis Panel -->
+                <div class="w-full md:w-[400px] h-1/2 md:h-full bg-white border-l border-slate-200 flex flex-col shadow-xl z-20">
+                    <div class="p-6 border-b border-slate-100">
+                        <h3 class="font-bold text-slate-800 flex items-center gap-2">
+                            <i class="fa-solid fa-brain text-indigo-600"></i> AI 缺陷分析 (Analysis)
+                        </h3>
+                    </div>
+                    
+                    <div class="flex-1 p-6 overflow-y-auto">
+                        <div v-if="!selectedWafer" class="text-center text-slate-400 mt-20">
+                            <i class="fa-solid fa-microchip text-4xl mb-4 opacity-30"></i>
+                            <p>请选择一个晶圆开始分析</p>
+                        </div>
+
+                        <div v-else class="space-y-6">
+                            <!-- Analysis Status -->
+                            <div v-if="isAnalyzing" class="flex flex-col items-center justify-center py-8 space-y-4">
+                                <div class="w-12 h-12 border-4 border-indigo-100 border-t-indigo-600 rounded-full animate-spin"></div>
+                                <p class="text-indigo-600 font-medium animate-pulse">SiliconFlow AI 正在分析中...</p>
+                            </div>
+
+                            <!-- Analysis Result -->
+                            <div v-if="analysisResult && !isAnalyzing" class="space-y-4 animate-fade-in">
+                                <div class="bg-indigo-50 border border-indigo-100 rounded-xl p-4">
+                                    <div class="text-xs text-indigo-500 uppercase font-bold tracking-wider mb-1">AI 诊断结果</div>
+                                    <div class="font-bold text-slate-800 text-lg">${ analysisResult.diagnosis }</div>
+                                </div>
+
+                                <div class="space-y-2">
+                                    <div class="text-xs text-slate-400 font-bold uppercase">根本原因分析</div>
+                                    <p class="text-sm text-slate-600 leading-relaxed bg-slate-50 p-3 rounded-lg border border-slate-100">
+                                        ${ analysisResult.action }
+                                    </p>
+                                </div>
+
+                                <div class="flex gap-4">
+                                    <div class="flex-1 bg-red-50 p-3 rounded-lg border border-red-100">
+                                        <div class="text-xs text-red-400 mb-1">严重程度</div>
+                                        <div class="font-bold text-red-600">${ analysisResult.severity }</div>
+                                    </div>
+                                    <div class="flex-1 bg-amber-50 p-3 rounded-lg border border-amber-100">
+                                        <div class="text-xs text-amber-400 mb-1">潜在影响</div>
+                                        <div class="font-bold text-amber-600 text-sm truncate" :title="analysisResult.impact">${ analysisResult.impact }</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="p-6 border-t border-slate-100 bg-slate-50">
+                        <button v-if="!analysisResult" @click="runAnalysis" :disabled="!selectedWafer || isAnalyzing" 
+                                class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-bold shadow-lg shadow-indigo-200 transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2">
+                            <i class="fa-solid fa-wand-magic-sparkles"></i> 运行 AI 诊断
+                        </button>
+                        <button v-else @click="saveAsset" :disabled="isSaving"
+                                class="w-full py-3 bg-green-600 hover:bg-green-700 text-white rounded-xl font-bold shadow-lg shadow-green-200 transition-all flex items-center justify-center gap-2">
+                            <i class="fa-solid fa-floppy-disk"></i> 保存到知识库
+                        </button>
+                    </div>
+                </div>
+            </main>
+
+            <!-- Assets View -->
+            <main v-if="currentView === 'assets'" class="flex-1 p-8 overflow-y-auto bg-slate-50">
+                <div class="max-w-5xl mx-auto">
+                    <div class="flex justify-between items-center mb-8">
+                        <div>
+                            <h2 class="text-2xl font-bold text-slate-800">缺陷资产库 (Defect Vault)</h2>
+                            <p class="text-slate-500">工艺改进的企业知识库</p>
+                        </div>
+                        <div class="bg-white px-4 py-2 rounded-lg shadow-sm border border-slate-200 flex items-center gap-2">
+                            <i class="fa-solid fa-search text-slate-400"></i>
+                            <input type="text" placeholder="搜索资产..." class="outline-none text-sm w-48">
+                        </div>
+                    </div>
+
+                    <div class="grid gap-4">
+                        <div v-for="asset in assets" :key="asset.id" class="bg-white p-6 rounded-xl shadow-sm border border-slate-100 hover:shadow-md transition-all flex gap-6">
+                            <div class="w-16 h-16 bg-red-50 rounded-lg flex items-center justify-center flex-shrink-0 text-red-500 text-2xl">
+                                <i class="fa-solid fa-bug"></i>
+                            </div>
+                            <div class="flex-1">
+                                <div class="flex justify-between items-start mb-2">
+                                    <h3 class="font-bold text-slate-800 text-lg">${ asset.pattern_type } 模式分析</h3>
+                                    <span class="text-xs text-slate-400 font-mono bg-slate-50 px-2 py-1 rounded">${ asset.timestamp }</span>
+                                </div>
+                                <div class="grid grid-cols-2 gap-4 text-sm mb-3">
+                                    <div>
+                                        <span class="text-slate-400">晶圆:</span> 
+                                        <span class="font-mono text-indigo-600 font-medium">${ asset.lot_id }-${ asset.w_name }</span>
+                                    </div>
+                                    <div>
+                                        <span class="text-slate-400">根本原因:</span> 
+                                        <span class="font-medium text-slate-700">${ asset.root_cause }</span>
+                                    </div>
+                                </div>
+                                <div class="bg-green-50 text-green-800 p-3 rounded-lg text-sm border border-green-100">
+                                    <i class="fa-solid fa-check-circle mr-1"></i> 建议: ${ asset.recommendation }
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted, watch, computed } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                const currentView = ref('dashboard');
+                const wafers = ref([]);
+                const selectedWafer = ref(null);
+                const isAnalyzing = ref(false);
+                const analysisResult = ref(null);
+                const isSaving = ref(false);
+                const assets = ref([]);
+                const alertCount = ref(3);
+                const toasts = ref([]);
+                const fileInput = ref(null);
+
+                // ECharts Instances
+                let mapChart = null;
+                let trendChart = null;
+
+                const viewTitle = computed(() => {
+                    const titles = { 'dashboard': '生产概览 (Production Dashboard)', 'radar': '晶圆分析 (Wafer Map Analysis)', 'assets': '知识库 (Knowledge Vault)' };
+                    return titles[currentView.value];
+                });
+
+                const showToast = (message, type = 'info', icon = 'fa-circle-info') => {
+                    const id = Date.now();
+                    toasts.value.push({ id, message, type, icon });
+                    setTimeout(() => {
+                        toasts.value = toasts.value.filter(t => t.id !== id);
+                    }, 3000);
+                };
+
+                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);
+
+                    try {
+                        const res = await fetch('/api/upload', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        const data = await res.json();
+                        if (res.ok) {
+                            showToast(data.message, 'success', 'fa-check-circle');
+                        } else {
+                            showToast(data.error || '上传失败', 'error', 'fa-circle-xmark');
+                        }
+                    } catch (e) {
+                        showToast('网络错误', 'error', 'fa-wifi');
+                    }
+                    // Reset input
+                    event.target.value = '';
+                };
+
+                const fetchWafers = async () => {
+                    try {
+                        const res = await fetch('/api/wafers');
+                        if (!res.ok) throw new Error("API Error");
+                        wafers.value = await res.json();
+                        if (wafers.value.length > 0 && !selectedWafer.value) {
+                            selectWafer(wafers.value[0]);
+                        }
+                    } catch (e) {
+                        showToast("无法获取晶圆数据", "error", "fa-server");
+                    }
+                };
+
+                const fetchAssets = async () => {
+                    try {
+                        const res = await fetch('/api/assets');
+                        assets.value = await res.json();
+                    } catch (e) {
+                        console.error(e);
+                    }
+                };
+
+                const selectWafer = async (wafer) => {
+                    // Fetch detailed data
+                    try {
+                        const res = await fetch(`/api/wafer/${wafer.id}`);
+                        if (!res.ok) throw new Error("Wafer not found");
+                        selectedWafer.value = await res.json();
+                        analysisResult.value = null; // Reset analysis
+                        
+                        if (currentView.value === 'radar') {
+                            setTimeout(initMapChart, 100);
+                        }
+                    } catch (e) {
+                        showToast("无法加载详情", "error", "fa-file-circle-xmark");
+                    }
+                };
+
+                const runAnalysis = async () => {
+                    if (!selectedWafer.value) return;
+                    isAnalyzing.value = true;
+                    try {
+                        const res = await fetch('/api/analyze', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({
+                                wafer_id: selectedWafer.value.wafer_id,
+                                pattern_desc: selectedWafer.value.status + " 模式检测到良率为 " + selectedWafer.value.yield_rate.toFixed(1) + "%"
+                            })
+                        });
+                        if (!res.ok) throw new Error("Analysis failed");
+                        analysisResult.value = await res.json();
+                        showToast("AI 分析完成", "success", "fa-wand-magic-sparkles");
+                    } catch (e) {
+                        console.error(e);
+                        showToast("分析失败: " + e.message, "error", "fa-triangle-exclamation");
+                    } finally {
+                        isAnalyzing.value = false;
+                    }
+                };
+
+                const saveAsset = async () => {
+                    if (!analysisResult.value) return;
+                    isSaving.value = true;
+                    try {
+                        await fetch('/api/save_asset', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({
+                                wafer_id: selectedWafer.value.id,
+                                pattern_type: selectedWafer.value.status,
+                                root_cause: analysisResult.value.diagnosis,
+                                recommendation: analysisResult.value.action
+                            })
+                        });
+                        showToast("已保存到知识库", "success", "fa-floppy-disk");
+                        fetchAssets();
+                    } catch (e) {
+                        console.error(e);
+                        showToast("保存失败", "error", "fa-circle-xmark");
+                    } finally {
+                        isSaving.value = false;
+                    }
+                };
+
+                const initMapChart = () => {
+                    if (!selectedWafer.value) return;
+                    const chartDom = document.getElementById('waferMap');
+                    if (!chartDom) return;
+                    
+                    if (mapChart) mapChart.dispose();
+                    mapChart = echarts.init(chartDom);
+                    
+                    const option = {
+                        tooltip: { position: 'top' },
+                        grid: { height: '80%', top: '10%' },
+                        xAxis: { type: 'category', show: false },
+                        yAxis: { type: 'category', show: false },
+                        visualMap: {
+                            min: 0,
+                            max: 1,
+                            calculable: false,
+                            orient: 'horizontal',
+                            left: 'center',
+                            bottom: '5%',
+                            inRange: { color: ['#22c55e', '#ef4444'] }, // Green for 0 (Pass), Red for 1 (Fail)
+                            text: ['失效 (Fail)', '通过 (Pass)'],
+                            textStyle: { color: '#fff' }
+                        },
+                        series: [{
+                            name: '芯片状态',
+                            type: 'heatmap',
+                            data: selectedWafer.value.map_data,
+                            itemStyle: {
+                                borderColor: '#1e293b',
+                                borderWidth: 1
+                            },
+                            emphasis: {
+                                itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' }
+                            }
+                        }]
+                    };
+                    mapChart.setOption(option);
+                };
+
+                const initTrendChart = () => {
+                    const chartDom = document.getElementById('yieldChart');
+                    if (!chartDom) return;
+                    
+                    trendChart = echarts.init(chartDom);
+                    const option = {
+                        grid: { top: 30, right: 30, bottom: 30, left: 50 },
+                        tooltip: { trigger: 'axis' },
+                        xAxis: { 
+                            type: 'category', 
+                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+                            axisLine: { lineStyle: { color: '#94a3b8' } }
+                        },
+                        yAxis: { 
+                            type: 'value', 
+                            min: 80, 
+                            max: 100,
+                            axisLine: { lineStyle: { color: '#94a3b8' } },
+                            splitLine: { lineStyle: { type: 'dashed' } }
+                        },
+                        series: [{
+                            name: '良率',
+                            data: [91, 93, 90, 94, 92, 95, 92],
+                            type: 'line',
+                            smooth: true,
+                            areaStyle: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                                    { offset: 0, color: 'rgba(99, 102, 241, 0.5)' },
+                                    { offset: 1, color: 'rgba(99, 102, 241, 0.0)' }
+                                ])
+                            },
+                            lineStyle: { color: '#6366f1', width: 3 },
+                            symbolSize: 8
+                        }]
+                    };
+                    trendChart.setOption(option);
+                };
+
+                const getStatusColor = (rate) => {
+                    if (rate > 95) return 'bg-green-100 text-green-700';
+                    if (rate > 90) return 'bg-yellow-100 text-yellow-700';
+                    return 'bg-red-100 text-red-700';
+                };
+                
+                const formatDate = (ts) => {
+                    return new Date(ts).toLocaleString('zh-CN');
+                };
+
+                watch(currentView, (newView) => {
+                    setTimeout(() => {
+                        if (newView === 'dashboard') initTrendChart();
+                        if (newView === 'radar') initMapChart();
+                        if (newView === 'assets') fetchAssets();
+                    }, 100);
+                });
+
+                onMounted(() => {
+                    fetchWafers();
+                    setTimeout(initTrendChart, 500); // Wait for DOM
+                });
+
+                return {
+                    currentView, wafers, selectedWafer, isAnalyzing, analysisResult, isSaving, assets, alertCount, viewTitle, toasts, fileInput,
+                    selectWafer, runAnalysis, saveAsset, fetchWafers, getStatusColor, formatDate, triggerUpload, handleFileUpload
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>