feat: enhance prompt foundry with siliconflow api and upload

Dockerfile

@@ -0,0 +1,20 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Create a non-root user for Hugging Face Spaces security compliance
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

README.md

@@ -0,0 +1,71 @@
+---
+title: Prompt Foundry Agent
+emoji: 🧪
+colorFrom: purple
+colorTo: blue
+sdk: docker
+app_port: 7860
+short_description: 企业级提示词工程与评估平台
+---
+
+# Prompt Foundry Agent (提示词铸造工场)
+
+## 项目简介 (Introduction)
+**Prompt Foundry Agent** 是一个企业级的提示词（Prompt）工程管理与评估平台。它旨在帮助企业和开发者高效地管理、测试、优化和评估 LLM 提示词资产。
+
+在 LLM 应用开发中，提示词是核心资产。本系统提供了一个闭环的工作流，从提示词的编写、版本管理，到模拟运行、自动化评估（Evaluation），以及基于 AI 的自动优化。
+
+## 核心功能 (Key Features)
+
+1.  **资产仪表盘 (Asset Dashboard)**:
+    *   实时监控 API 调用量、错误率及平均延迟。
+    *   可视化展示提示词资产的健康度和成本节省情况。
+
+2.  **提示词库 (Prompt Library)**:
+    *   集中管理所有 Prompt，支持版本控制（v1.0, v1.1...）。
+    *   支持标签分类（如：客服、代码、营销）。
+
+3.  **实验工坊 (Playground & Editor)**:
+    *   **双屏编辑器**: 左侧编辑提示词，右侧实时预览效果。
+    *   **AI 智能优化**: 集成 SiliconFlow (硅基流) API，一键提升提示词质量（增加 Persona、CoT 等）。
+    *   **自动化评估**: 模拟运行并从“忠实度”、“相关性”、“安全性”三个维度对 Prompt 进行打分。
+
+4.  **Hybrid Mode (混合模式)**:
+    *   支持真实 API 调用（SiliconFlow）与 Mock 数据回退机制，确保演示稳定性。
+    *   内置 Mock 引擎，即使无网络也能体验流程。
+
+## 技术栈 (Tech Stack)
+*   **Backend**: Python Flask (RESTful API)
+*   **Frontend**: Vue 3 (Composition API) + Tailwind CSS
+*   **Visualization**: Apache ECharts
+*   **Deployment**: Docker (Compatible with Hugging Face Spaces)
+
+## 快速开始 (Quick Start)
+
+### 本地运行 (Local Run)
+
+1.  安装依赖:
+    ```bash
+    pip install -r requirements.txt
+    ```
+
+2.  启动服务:
+    ```bash
+    python app.py
+    ```
+
+3.  访问浏览器:
+    打开 `http://localhost:7860`
+
+### Docker 运行
+
+```bash
+docker build -t prompt-foundry .
+docker run -p 7860:7860 prompt-foundry
+```
+
+## 商业价值 (Commercial Value)
+随着企业 LLM 应用的爆发，Prompt Management (PromptOps) 将成为刚需。本项目解决以下痛点：
+*   **资产分散**: 解决提示词散落在代码各处的问题。
+*   **效果黑盒**: 提供量化的评估指标，拒绝“凭感觉”调优。
+*   **协作困难**: 统一平台，方便产品经理与工程师协作。

app.py

@@ -0,0 +1,195 @@
+import os
+import json
+import random
+import time
+from datetime import datetime, timedelta
+from flask import Flask, jsonify, request, render_template, send_from_directory
+from flask_cors import CORS
+from faker import Faker
+from openai import OpenAI
+
+app = Flask(__name__, static_folder='static', template_folder='templates')
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload
+CORS(app)
+fake = Faker('zh_CN')
+
+# SiliconFlow Configuration
+SILICON_API_KEY = "sk-vimuseiptfbomzegyuvmebjzooncsqbyjtlddrfodzcdskgi"
+client = OpenAI(
+    api_key=SILICON_API_KEY,
+    base_url="https://api.siliconflow.cn/v1"
+)
+
+# --- Mock Data Store ---
+PROMPTS = [
+    {
+        "id": "p-101",
+        "name": "Customer Support Empathetic Reply",
+        "description": "Handles angry customer complaints with empathy.",
+        "version": "1.2",
+        "tags": ["Support", "Email", "B2C"],
+        "content": "You are a helpful support agent. A customer is angry about a late delivery. Write a polite response apologizing and offering a 10% discount.",
+        "metrics": {"accuracy": 0.88, "latency_ms": 450, "cost": 0.002},
+        "last_updated": "2023-10-25T10:30:00"
+    },
+    {
+        "id": "p-102",
+        "name": "Python Code Refactor",
+        "description": "Refactors legacy code to modern standards.",
+        "version": "2.0",
+        "tags": ["Coding", "Python", "DevTools"],
+        "content": "You are a senior Python engineer. Refactor the following code to adhere to PEP8 and improve performance. Add type hints.",
+        "metrics": {"accuracy": 0.95, "latency_ms": 1200, "cost": 0.015},
+        "last_updated": "2023-10-26T14:15:00"
+    },
+    {
+        "id": "p-103",
+        "name": "Marketing Copy Generator",
+        "description": "Generates catchy headlines for social media.",
+        "version": "0.9",
+        "tags": ["Marketing", "Social", "Creative"],
+        "content": "Write 5 catchy headlines for a new coffee brand that focuses on sustainability.",
+        "metrics": {"accuracy": 0.76, "latency_ms": 300, "cost": 0.001},
+        "last_updated": "2023-10-27T09:00:00"
+    }
+]
+
+# --- Routes ---
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/prompts', methods=['GET'])
+def get_prompts():
+    return jsonify(PROMPTS)
+
+@app.route('/api/prompts', methods=['POST'])
+def create_prompt():
+    data = request.json
+    new_prompt = {
+        "id": f"p-{random.randint(200, 999)}",
+        "name": data.get("name", "New Prompt"),
+        "description": data.get("description", ""),
+        "version": "0.1",
+        "tags": data.get("tags", []),
+        "content": data.get("content", ""),
+        "metrics": {"accuracy": 0.0, "latency_ms": 0, "cost": 0.0},
+        "last_updated": datetime.now().isoformat()
+    }
+    PROMPTS.insert(0, new_prompt)
+    return jsonify(new_prompt), 201
+
+@app.route('/api/optimize', methods=['POST'])
+def optimize_prompt():
+    """Optimizes prompt using SiliconFlow API."""
+    data = request.json
+    original_content = data.get("content", "")
+    
+    if not original_content:
+        return jsonify({"error": "Content is required"}), 400
+
+    try:
+        response = client.chat.completions.create(
+            model="Qwen/Qwen2.5-7B-Instruct",
+            messages=[
+                {"role": "system", "content": "You are an expert Prompt Engineer. Optimize the user's prompt for better clarity, structure, and effectiveness. Return ONLY the optimized prompt content, nothing else."},
+                {"role": "user", "content": original_content}
+            ],
+            temperature=0.7,
+            max_tokens=1024
+        )
+        improved_content = response.choices[0].message.content.strip()
+        
+        # Simple heuristic improvements list (since we only get the content back)
+        improvements = [
+            "Enhanced clarity and structure",
+            "Added specific constraints",
+            "Improved professional tone"
+        ]
+        
+        return jsonify({
+            "original": original_content,
+            "optimized": improved_content,
+            "improvements": improvements
+        })
+    except Exception as e:
+        print(f"API Error: {e}")
+        # Fallback to mock if API fails
+        time.sleep(1)
+        return jsonify({
+            "original": original_content,
+            "optimized": f"Optimization failed (API Error). Preserving original: {original_content}",
+            "improvements": ["Error connecting to AI service"]
+        })
+
+@app.route('/api/evaluate', methods=['POST'])
+def evaluate_prompt():
+    """Mocks a robust evaluation pipeline."""
+    time.sleep(2.0) # Simulate running test cases
+    
+    base_score = random.uniform(0.7, 0.95)
+    
+    return jsonify({
+        "overall_score": round(base_score, 2),
+        "metrics": {
+            "faithfulness": round(random.uniform(0.8, 1.0), 2),
+            "relevance": round(random.uniform(0.7, 0.95), 2),
+            "safety": round(random.uniform(0.9, 1.0), 2)
+        },
+        "estimated_cost": round(random.uniform(0.001, 0.02), 4),
+        "latency_p95": random.randint(200, 1500)
+    })
+
+@app.route('/api/dashboard', methods=['GET'])
+def get_dashboard_stats():
+    # Mock aggregated stats
+    dates = [(datetime.now() - timedelta(days=i)).strftime('%m-%d') for i in range(6, -1, -1)]
+    calls = [random.randint(1000, 5000) for _ in range(7)]
+    errors = [random.randint(0, 50) for _ in range(7)]
+    avg_latency = [random.randint(300, 800) for _ in range(7)]
+    
+    return jsonify({
+        "total_prompts": len(PROMPTS),
+        "total_calls_today": 3421,
+        "avg_accuracy": 0.87,
+        "cost_saved": "$124.50",
+        "chart_data": {
+            "labels": dates,
+            "calls": calls,
+            "errors": errors,
+            "latency": avg_latency
+        }
+    })
+
+@app.route('/api/upload', methods=['POST'])
+def upload_prompts():
+    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
+    
+    try:
+        if file.filename.endswith('.json'):
+            content = json.load(file)
+            # Basic validation
+            if isinstance(content, list):
+                for item in content:
+                    item['id'] = f"p-{random.randint(1000, 9999)}"
+                    item['last_updated'] = datetime.now().isoformat()
+                    # Ensure defaults
+                    if 'metrics' not in item:
+                        item['metrics'] = {"accuracy": 0.0, "latency_ms": 0, "cost": 0.0}
+                    PROMPTS.insert(0, item)
+                return jsonify({"message": f"Successfully imported {len(content)} prompts", "count": len(content)})
+            else:
+                 return jsonify({"error": "Invalid JSON format. Expected a list."}), 400
+        else:
+            return jsonify({"error": "Only .json files are supported"}), 400
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+if __name__ == '__main__':
+    # Use port 7860 for Hugging Face Spaces
+    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
+faker>=20.0.0
+gunicorn>=21.2.0
+openai>=1.0.0

templates/index.html

@@ -0,0 +1,466 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Prompt Foundry Agent - 企业级提示词工程平台</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }
+        .sidebar-item { transition: all 0.2s; }
+        .sidebar-item:hover, .sidebar-item.active { background-color: #e5e7eb; color: #1f2937; }
+        .card { background: white; border-radius: 0.75rem; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); }
+        .btn-primary { background-color: #3b82f6; color: white; transition: 0.2s; }
+        .btn-primary:hover { background-color: #2563eb; }
+        .btn-secondary { background-color: #f3f4f6; color: #374151; transition: 0.2s; }
+        .btn-secondary:hover { background-color: #e5e7eb; }
+        .fade-enter-active, .fade-leave-active { transition: opacity 0.2s; }
+        .fade-enter-from, .fade-leave-to { opacity: 0; }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: #f1f1f1; }
+        ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
+        [v-cloak] { display: none; }
+    </style>
+</head>
+<body>
+    <div id="app" class="flex h-screen overflow-hidden" v-cloak>
+        <!-- Sidebar -->
+        <aside class="w-64 bg-white border-r border-gray-200 flex flex-col z-10">
+            <div class="p-6 flex items-center gap-3">
+                <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white">
+                    <i class="fa-solid fa-cube"></i>
+                </div>
+                <h1 class="text-xl font-bold text-gray-800">Prompt Foundry</h1>
+            </div>
+            
+            <nav class="flex-1 px-4 space-y-2 mt-4">
+                <a @click="currentView = 'dashboard'" :class="{'active': currentView === 'dashboard'}" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-lg cursor-pointer text-gray-600 font-medium">
+                    <i class="fa-solid fa-chart-line w-5"></i> 仪表盘
+                </a>
+                <a @click="currentView = 'library'" :class="{'active': currentView === 'library' || currentView === 'editor'}" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-lg cursor-pointer text-gray-600 font-medium">
+                    <i class="fa-solid fa-layer-group w-5"></i> 提示词库
+                </a>
+                <a @click="currentView = 'playground'" :class="{'active': currentView === 'playground'}" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-lg cursor-pointer text-gray-600 font-medium">
+                    <i class="fa-solid fa-flask w-5"></i> 实验工坊
+                </a>
+                <a @click="currentView = 'settings'" :class="{'active': currentView === 'settings'}" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-lg cursor-pointer text-gray-600 font-medium">
+                    <i class="fa-solid fa-gear w-5"></i> 设置
+                </a>
+            </nav>
+
+            <div class="p-4 border-t border-gray-100">
+                <div class="flex items-center gap-3 px-2">
+                    <div class="w-8 h-8 rounded-full bg-gradient-to-tr from-blue-400 to-purple-500"></div>
+                    <div>
+                        <p class="text-sm font-semibold text-gray-700">Admin User</p>
+                        <p class="text-xs text-gray-500">Pro Plan</p>
+                    </div>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main Content -->
+        <main class="flex-1 overflow-auto bg-gray-50 relative">
+            <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8 sticky top-0 z-10">
+                <h2 class="text-lg font-semibold text-gray-800">${ pageTitle }</h2>
+                <div class="flex items-center gap-4">
+                    <button class="text-gray-400 hover:text-gray-600"><i class="fa-regular fa-bell"></i></button>
+                    <button class="btn-primary px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2">
+                        <i class="fa-solid fa-plus"></i> 新建提示词
+                    </button>
+                </div>
+            </header>
+
+            <div class="p-8 max-w-7xl mx-auto">
+                
+                <!-- Dashboard View -->
+                <div v-if="currentView === 'dashboard'" class="space-y-6">
+                    <!-- Stats Grid -->
+                    <div class="grid grid-cols-4 gap-6">
+                        <div v-for="stat in stats" :key="stat.label" class="card p-6">
+                            <div class="flex items-center justify-between mb-4">
+                                <span class="text-gray-500 text-sm font-medium">${ stat.label }</span>
+                                <span :class="stat.color" class="w-8 h-8 rounded-full bg-opacity-10 flex items-center justify-center text-sm">
+                                    <i :class="stat.icon"></i>
+                                </span>
+                            </div>
+                            <div class="flex items-end gap-2">
+                                <h3 class="text-2xl font-bold text-gray-900">${ stat.value }</h3>
+                                <span class="text-xs text-green-500 font-medium mb-1"><i class="fa-solid fa-arrow-up"></i> ${ stat.growth }</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Main Chart -->
+                    <div class="card p-6 h-96">
+                        <div class="flex items-center justify-between mb-6">
+                            <h3 class="font-semibold text-gray-800">API 调用趋势 & 延迟监控</h3>
+                            <select class="border border-gray-300 rounded-md text-sm px-2 py-1 outline-none">
+                                <option>最近 7 天</option>
+                                <option>最近 30 天</option>
+                            </select>
+                        </div>
+                        <div id="mainChart" class="w-full h-full"></div>
+                    </div>
+
+                    <!-- Recent Prompts -->
+                    <div class="card overflow-hidden">
+                        <div class="p-6 border-b border-gray-100 flex justify-between items-center">
+                            <h3 class="font-semibold text-gray-800">最近活跃提示词</h3>
+                            <a href="#" class="text-blue-600 text-sm hover:underline">查看全部</a>
+                        </div>
+                        <table class="w-full text-left text-sm text-gray-600">
+                            <thead class="bg-gray-50 text-xs uppercase font-semibold text-gray-500">
+                                <tr>
+                                    <th class="px-6 py-3">名称</th>
+                                    <th class="px-6 py-3">标签</th>
+                                    <th class="px-6 py-3">版本</th>
+                                    <th class="px-6 py-3">准确率</th>
+                                    <th class="px-6 py-3">状态</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y divide-gray-100">
+                                <tr v-for="prompt in prompts.slice(0, 5)" :key="prompt.id" class="hover:bg-gray-50 cursor-pointer" @click="editPrompt(prompt)">
+                                    <td class="px-6 py-4 font-medium text-gray-900">${ prompt.name }</td>
+                                    <td class="px-6 py-4">
+                                        <div class="flex gap-2">
+                                            <span v-for="tag in prompt.tags" class="px-2 py-1 bg-blue-50 text-blue-600 rounded text-xs">${ tag }</span>
+                                        </div>
+                                    </td>
+                                    <td class="px-6 py-4">v${ prompt.version }</td>
+                                    <td class="px-6 py-4 text-green-600 font-medium">${ (prompt.metrics.accuracy * 100).toFixed(1) }%</td>
+                                    <td class="px-6 py-4"><span class="w-2 h-2 rounded-full bg-green-500 inline-block mr-2"></span>Active</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <!-- Library View -->
+                <div v-if="currentView === 'library'" class="space-y-6">
+                    <div class="flex justify-between items-center">
+                        <div class="relative w-96">
+                            <i class="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
+                            <input type="text" placeholder="搜索提示词..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        </div>
+                        <div class="flex gap-2">
+                            <button class="px-3 py-2 border border-gray-300 rounded-lg bg-white text-gray-600 hover:bg-gray-50"><i class="fa-solid fa-filter mr-2"></i>筛选</button>
+                            <button @click="triggerUpload" class="px-3 py-2 border border-gray-300 rounded-lg bg-white text-gray-600 hover:bg-gray-50">
+                                <i class="fa-solid fa-upload mr-2"></i>导入
+                            </button>
+                            <input type="file" ref="fileInput" @change="handleFileUpload" class="hidden" accept=".json">
+                        </div>
+                    </div>
+
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                        <div v-for="prompt in prompts" :key="prompt.id" class="card p-6 hover:shadow-lg transition cursor-pointer flex flex-col" @click="editPrompt(prompt)">
+                            <div class="flex justify-between items-start mb-4">
+                                <div class="w-10 h-10 rounded-lg bg-indigo-50 flex items-center justify-center text-indigo-600">
+                                    <i class="fa-solid fa-terminal"></i>
+                                </div>
+                                <span class="px-2 py-1 bg-gray-100 text-gray-500 text-xs rounded">v${ prompt.version }</span>
+                            </div>
+                            <h3 class="text-lg font-bold text-gray-900 mb-2">${ prompt.name }</h3>
+                            <p class="text-gray-500 text-sm mb-4 line-clamp-2 flex-1">${ prompt.description }</p>
+                            <div class="flex flex-wrap gap-2 mb-4">
+                                <span v-for="tag in prompt.tags" class="px-2 py-1 bg-gray-50 text-gray-600 border border-gray-200 rounded text-xs">${ tag }</span>
+                            </div>
+                            <div class="pt-4 border-t border-gray-100 flex justify-between items-center text-sm text-gray-500">
+                                <span><i class="fa-regular fa-clock mr-1"></i> ${ formatDate(prompt.last_updated) }</span>
+                                <span class="font-medium text-gray-900">Score: ${ prompt.metrics.accuracy }</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Editor / Playground View -->
+                <div v-if="currentView === 'editor'" class="h-[calc(100vh-140px)] flex gap-6">
+                    <!-- Left: Editor -->
+                    <div class="flex-1 card flex flex-col">
+                        <div class="p-4 border-b border-gray-200 flex justify-between items-center bg-gray-50 rounded-t-lg">
+                            <div>
+                                <h3 class="font-bold text-gray-800">${ activePrompt.name || 'Untitled' }</h3>
+                                <p class="text-xs text-gray-500">v${ activePrompt.version } • Editing</p>
+                            </div>
+                            <div class="flex gap-2">
+                                <button @click="optimizePrompt" class="px-3 py-1.5 bg-purple-100 text-purple-700 rounded-md text-sm font-medium hover:bg-purple-200 transition">
+                                    <i class="fa-solid fa-wand-magic-sparkles mr-1"></i> AI 优化
+                                </button>
+                                <button class="px-3 py-1.5 bg-blue-600 text-white rounded-md text-sm font-medium hover:bg-blue-700 transition">
+                                    <i class="fa-solid fa-save mr-1"></i> 保存
+                                </button>
+                            </div>
+                        </div>
+                        <div class="flex-1 p-0 relative">
+                            <textarea v-model="activePrompt.content" class="w-full h-full p-4 resize-none focus:outline-none font-mono text-sm text-gray-700 leading-relaxed" placeholder="在此输入系统提示词..."></textarea>
+                            <div v-if="isOptimizing" class="absolute inset-0 bg-white/80 flex items-center justify-center z-10 backdrop-blur-sm">
+                                <div class="text-center">
+                                    <div class="animate-spin w-8 h-8 border-4 border-purple-500 border-t-transparent rounded-full mx-auto mb-2"></div>
+                                    <p class="text-purple-700 font-medium">正在分析与优化...</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Right: Test & Eval -->
+                    <div class="w-96 flex flex-col gap-6">
+                        <!-- Test Input -->
+                        <div class="card flex flex-col flex-1">
+                            <div class="p-3 border-b border-gray-200 bg-gray-50 rounded-t-lg font-medium text-sm text-gray-700">
+                                <i class="fa-solid fa-play mr-2 text-green-600"></i> 测试变量输入
+                            </div>
+                            <div class="p-4 flex-1">
+                                <textarea class="w-full h-full p-2 border border-gray-200 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder='{"user_input": "..."}'></textarea>
+                            </div>
+                            <div class="p-3 border-t border-gray-200">
+                                <button @click="evaluatePrompt" class="w-full py-2 bg-gray-800 text-white rounded-lg hover:bg-gray-900 transition">
+                                    <i class="fa-solid fa-bolt mr-2"></i> 运行 & 评估
+                                </button>
+                            </div>
+                        </div>
+
+                        <!-- Evaluation Results -->
+                        <div class="card h-1/2 flex flex-col">
+                            <div class="p-3 border-b border-gray-200 bg-gray-50 rounded-t-lg font-medium text-sm text-gray-700">
+                                <i class="fa-solid fa-bullseye mr-2 text-red-500"></i> 评估报告
+                            </div>
+                            <div class="p-4 flex-1 relative overflow-hidden">
+                                <div v-if="isEvaluating" class="absolute inset-0 bg-white flex items-center justify-center z-10">
+                                    <div class="flex flex-col items-center">
+                                        <div class="animate-pulse w-12 h-12 bg-gray-200 rounded-full mb-2"></div>
+                                        <span class="text-xs text-gray-400">正在运行评估套件...</span>
+                                    </div>
+                                </div>
+                                <div v-if="evalResults" class="h-full flex flex-col">
+                                    <div class="flex items-center justify-between mb-4">
+                                        <div class="text-center">
+                                            <div class="text-2xl font-bold text-gray-900">${ evalResults.overall_score }</div>
+                                            <div class="text-xs text-gray-500">综合得分</div>
+                                        </div>
+                                        <div class="text-right">
+                                            <div class="text-sm font-medium text-gray-700">$${ evalResults.estimated_cost }</div>
+                                            <div class="text-xs text-gray-500">预估成本</div>
+                                        </div>
+                                    </div>
+                                    <div id="radarChart" class="flex-1 w-full"></div>
+                                </div>
+                                <div v-else class="h-full flex items-center justify-center text-gray-400 text-sm">
+                                    暂无评估数据
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </main>
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted, computed, nextTick } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                const currentView = ref('dashboard');
+                const prompts = ref([]);
+                const activePrompt = ref({});
+                const isOptimizing = ref(false);
+                const isEvaluating = ref(false);
+                const evalResults = ref(null);
+                const stats = ref([
+                    { label: '总提示词', value: '0', growth: '12%', icon: 'fa-solid fa-layer-group', color: 'bg-blue-500 text-blue-600' },
+                    { label: '今日调用', value: '0', growth: '8%', icon: 'fa-solid fa-server', color: 'bg-green-500 text-green-600' },
+                    { label: '平均准确率', value: '0%', growth: '2%', icon: 'fa-solid fa-bullseye', color: 'bg-purple-500 text-purple-600' },
+                    { label: '节省成本', value: '$0', growth: '15%', icon: 'fa-solid fa-coins', color: 'bg-yellow-500 text-yellow-600' },
+                ]);
+
+                const pageTitle = computed(() => {
+                    const titles = {
+                        'dashboard': '概览仪表盘',
+                        'library': '提示词资产库',
+                        'editor': '提示词编辑器',
+                        'playground': '实验工坊',
+                        'settings': '系统设置'
+                    };
+                    return titles[currentView.value];
+                });
+
+                // Fetch Data
+                const fetchData = async () => {
+                    try {
+                        const [promptsRes, statsRes] = await Promise.all([
+                            fetch('/api/prompts').then(r => r.json()),
+                            fetch('/api/dashboard').then(r => r.json())
+                        ]);
+                        prompts.value = promptsRes;
+                        
+                        // Update Stats
+                        stats.value[0].value = statsRes.total_prompts;
+                        stats.value[1].value = statsRes.total_calls_today.toLocaleString();
+                        stats.value[2].value = (statsRes.avg_accuracy * 100).toFixed(0) + '%';
+                        stats.value[3].value = statsRes.cost_saved;
+
+                        // Init Chart
+                        initMainChart(statsRes.chart_data);
+                    } catch (e) {
+                        console.error("Failed to fetch data", e);
+                    }
+                };
+
+                const initMainChart = (data) => {
+                    const chartDom = document.getElementById('mainChart');
+                    if (!chartDom) return;
+                    const myChart = echarts.init(chartDom);
+                    const option = {
+                        tooltip: { trigger: 'axis' },
+                        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+                        xAxis: { type: 'category', boundaryGap: false, data: data.labels },
+                        yAxis: [
+                            { type: 'value', name: '调用量' },
+                            { type: 'value', name: '延迟 (ms)', position: 'right' }
+                        ],
+                        series: [
+                            { name: 'API 调用', type: 'line', smooth: true, data: data.calls, itemStyle: { color: '#3b82f6' }, areaStyle: { color: 'rgba(59, 130, 246, 0.1)' } },
+                            { name: '平均延迟', type: 'line', yAxisIndex: 1, smooth: true, data: data.latency, itemStyle: { color: '#ef4444' } }
+                        ]
+                    };
+                    myChart.setOption(option);
+                };
+
+                const initRadarChart = (metrics) => {
+                    const chartDom = document.getElementById('radarChart');
+                    if (!chartDom) return;
+                    // Dispose existing if needed or use clear
+                    echarts.getInstanceByDom(chartDom)?.dispose();
+                    
+                    const myChart = echarts.init(chartDom);
+                    const option = {
+                        radar: {
+                            indicator: [
+                                { name: '忠实度', max: 1 },
+                                { name: '相关性', max: 1 },
+                                { name: '安全性', max: 1 },
+                                { name: '格式', max: 1 },
+                                { name: '语气', max: 1 }
+                            ],
+                            radius: '65%'
+                        },
+                        series: [{
+                            type: 'radar',
+                            data: [{
+                                value: [metrics.faithfulness, metrics.relevance, metrics.safety, 0.9, 0.85],
+                                name: '本次评估',
+                                areaStyle: { color: 'rgba(16, 185, 129, 0.2)' },
+                                itemStyle: { color: '#10b981' }
+                            }]
+                        }]
+                    };
+                    myChart.setOption(option);
+                };
+
+                const editPrompt = (prompt) => {
+                    activePrompt.value = { ...prompt }; // Clone
+                    currentView.value = 'editor';
+                    evalResults.value = null; // Reset eval
+                };
+
+                const optimizePrompt = async () => {
+                    if (!activePrompt.value.content) return;
+                    isOptimizing.value = true;
+                    try {
+                        const res = await fetch('/api/optimize', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ content: activePrompt.value.content })
+                        }).then(r => r.json());
+                        
+                        activePrompt.value.content = res.optimized;
+                    } finally {
+                        isOptimizing.value = false;
+                    }
+                };
+
+                const evaluatePrompt = async () => {
+                    isEvaluating.value = true;
+                    try {
+                        const res = await fetch('/api/evaluate', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ content: activePrompt.value.content })
+                        }).then(r => r.json());
+                        
+                        evalResults.value = res;
+                        await nextTick();
+                        initRadarChart(res.metrics);
+                    } finally {
+                        isEvaluating.value = false;
+                    }
+                };
+
+                const formatDate = (isoStr) => {
+                    return new Date(isoStr).toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' });
+                };
+
+                const fileInput = ref(null);
+
+                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
+                        }).then(r => r.json());
+
+                        if (res.error) {
+                            alert('Upload failed: ' + res.error);
+                        } else {
+                            alert(res.message);
+                            fetchData(); // Refresh list
+                        }
+                    } catch (e) {
+                        alert('Upload failed: ' + e.message);
+                    }
+                    event.target.value = ''; // Reset input
+                };
+
+                onMounted(() => {
+                    fetchData();
+                });
+
+                return {
+                    currentView,
+                    prompts,
+                    stats,
+                    activePrompt,
+                    pageTitle,
+                    editPrompt,
+                    formatDate,
+                    optimizePrompt,
+                    evaluatePrompt,
+                    isOptimizing,
+                    isEvaluating,
+                    evalResults,
+                    fileInput,
+                    triggerUpload,
+                    handleFileUpload
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>