feat: enhance skill factory with siliconflow api and file upload

Dockerfile

@@ -0,0 +1,17 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create a non-root user to run the application (Best Practice)
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+EXPOSE 7860
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -0,0 +1,45 @@
+---
+title: Skill Factory Agent
+emoji: 🏭
+colorFrom: indigo
+colorTo: blue
+sdk: docker
+pinned: false
+short_description: AI自动化工具生成与管理平台 (AI Automation Tool Factory)
+---
+
+# Skill Factory Agent (技能工坊 Agent)
+
+## 📖 项目介绍
+Skill Factory 是一个面向未来的 AI 自动化工具生成与管理平台。它允许用户通过自然语言描述任务（例如“提取 PDF 表格”或“监控网页价格”），AI Agent 会自动生成相应的 Python 工具代码（Skill），并在沙箱环境中进行测试和验证。
+
+生成的工具会被保存到“技能资产库”中，形成可复用、可交易的数字资产。
+
+## 🚀 核心功能
+- **AI 技能生成器**: 输入需求，一键生成 Python 自动化脚本。
+- **技能资产库**: 管理、搜索和复用已生成的工具。
+- **模拟执行沙箱**: 在线测试生成的代码，查看运行结果。
+- **商业化仪表盘**: 追踪技能调用次数和虚拟收益。
+
+## 🛠️ 技术栈
+- **Backend**: Python Flask
+- **Frontend**: Vue.js 3 + Tailwind CSS
+- **Visualization**: Apache ECharts
+- **Deployment**: Docker / Hugging Face Spaces
+
+## 💡 使用说明
+1. 在左侧输入框描述你想要自动化的任务。
+2. 点击“立即生成”，等待 AI 构建代码。
+3. 在代码预览区查看生成的 Python 脚本。
+4. 点击“运行测试”验证功能。
+5. 在右侧市场查看和加载其他热门技能。
+
+## 📦 本地运行
+```bash
+docker build -t skill-factory .
+docker run -p 7860:7860 skill-factory
+```
+打开浏览器访问 `http://localhost:7860`
+
+## ⚖️ 商业前景
+本项目旨在解决“长尾自动化需求”，通过 AI 降低开发门槛，积累高价值的自动化脚本库，未来可转型为 API 市场或 Rouss (Robot-as-a-Service) 平台。

app.py

@@ -0,0 +1,238 @@
+import os
+import json
+import time
+import random
+import requests
+from flask import Flask, jsonify, request, render_template
+from werkzeug.utils import secure_filename
+
+app = Flask(__name__, template_folder='templates', static_folder='static')
+
+# Configuration
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload
+app.config['UPLOAD_FOLDER'] = 'uploads'
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+# SiliconFlow API Configuration
+SILICONFLOW_API_KEY = "sk-vimuseiptfbomzegyuvmebjzooncsqbyjtlddrfodzcdskgi"
+SILICONFLOW_API_URL = "https://api.siliconflow.cn/v1/chat/completions"
+
+# Mock Data: Skill Registry (Translated to Chinese)
+SKILL_REGISTRY = [
+    {
+        "id": "sk_001",
+        "name": "PDF 文本提取器",
+        "description": "使用 OCR 技术从 PDF 文档中提取纯文本内容。",
+        "author": "System",
+        "downloads": 1240,
+        "price": 0.00,
+        "rating": 4.8,
+        "tags": ["文档", "OCR", "自动化"],
+        "code": "def extract_pdf(file_path):\n    # 模拟实现\n    return '提取的文本内容...'"
+    },
+    {
+        "id": "sk_002",
+        "name": "YouTube 视频总结",
+        "description": "根据 YouTube 视频 URL 生成简洁的要点总结。",
+        "author": "AI_Architect",
+        "downloads": 890,
+        "price": 4.99,
+        "rating": 4.9,
+        "tags": ["视频", "总结", "内容生成"],
+        "code": "def summarize_video(url):\n    return {'summary': '提取的关键点...'}"
+    },
+    {
+        "id": "sk_003",
+        "name": "CSV 数据清洗助手",
+        "description": "自动修复 CSV 文件中的缺失值并标准化日期格式。",
+        "author": "DataWizard",
+        "downloads": 2100,
+        "price": 0.00,
+        "rating": 4.7,
+        "tags": ["数据", "CSV", "清洗"],
+        "code": "def clean_csv(df):\n    df.fillna(0, inplace=True)\n    return df"
+    },
+    {
+        "id": "sk_004",
+        "name": "SEO 关键词生成器",
+        "description": "根据输入的主题生成高排名的 SEO 关键词。",
+        "author": "MarketingBot",
+        "downloads": 560,
+        "price": 9.99,
+        "rating": 4.5,
+        "tags": ["营销", "SEO", "增长"],
+        "code": "def gen_keywords(topic):\n    return ['最佳 ' + topic, topic + ' 测评']"
+    },
+    {
+        "id": "sk_005",
+        "name": "社交媒体情感雷达",
+        "description": "分析品牌在 Twitter 和 Reddit 上的情感倾向。",
+        "author": "System",
+        "downloads": 1500,
+        "price": 19.99,
+        "rating": 4.9,
+        "tags": ["社交", "分析", "情感"],
+        "code": "def analyze_sentiment(brand):\n    return {'positive': 80, 'negative': 20}"
+    }
+]
+
+# Mock Data: Stats
+STATS = {
+    "total_skills": 142,
+    "active_users": 3500,
+    "total_executions": 45000,
+    "revenue": 12500.00
+}
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/stats', methods=['GET'])
+def get_stats():
+    # Simulate live updates
+    STATS['total_executions'] += random.randint(1, 10)
+    STATS['revenue'] += random.uniform(0, 5)
+    return jsonify(STATS)
+
+@app.route('/api/skills', methods=['GET'])
+def get_skills():
+    return jsonify(SKILL_REGISTRY)
+
+@app.route('/api/generate', methods=['POST'])
+def generate_skill():
+    data = request.json
+    prompt = data.get('prompt', '')
+    
+    if not prompt:
+        return jsonify({"error": "Prompt is required"}), 400
+
+    # Try SiliconFlow API
+    try:
+        headers = {
+            "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+            "Content-Type": "application/json"
+        }
+        
+        # Using a reliable model on SiliconFlow
+        payload = {
+            "model": "deepseek-ai/DeepSeek-V3", 
+            "messages": [
+                {
+                    "role": "system",
+                    "content": """你是一个专业的 Python 代码生成助手。请根据用户的需求生成一个 Python 函数。
+                    返回格式必须是 JSON，包含以下字段：
+                    - name: 技能名称 (中文)
+                    - description: 简短描述 (中文)
+                    - code: 完整的 Python 函数代码 (包含注释)
+                    - tags: 3-5个标签 (List[str])
+                    
+                    只返回 JSON 字符串，不要包含 markdown 格式化符号。"""
+                },
+                {
+                    "role": "user",
+                    "content": f"生成一个 Python 任务脚本: {prompt}"
+                }
+            ],
+            "temperature": 0.7
+        }
+        
+        response = requests.post(SILICONFLOW_API_URL, json=payload, headers=headers, timeout=30)
+        
+        if response.status_code == 200:
+            result = response.json()
+            content = result['choices'][0]['message']['content']
+            
+            # Clean up content if it contains markdown code blocks
+            if "```json" in content:
+                content = content.replace("```json", "").replace("```", "")
+            elif "```" in content:
+                content = content.replace("```", "")
+                
+            ai_data = json.loads(content.strip())
+            
+            new_id = f"sk_{random.randint(1000, 9999)}"
+            new_skill = {
+                "id": new_id,
+                "name": ai_data.get('name', f"AI 生成: {prompt[:10]}"),
+                "description": ai_data.get('description', f"AI 为 '{prompt}' 生成的解决方案"),
+                "author": "SiliconFlow_AI",
+                "downloads": 0,
+                "price": 0.00,
+                "rating": 0.0,
+                "tags": ai_data.get('tags', ["AI生成", "Python"]),
+                "code": ai_data.get('code', "# 生成失败，请重试")
+            }
+            
+            # Don't insert automatically, let user verify first (frontend logic handles display)
+            return jsonify(new_skill)
+            
+    except Exception as e:
+        print(f"SiliconFlow API Error: {e}")
+        # Fallback to mock if API fails
+        time.sleep(1)
+        new_id = f"sk_{random.randint(100, 999)}"
+        new_skill = {
+            "id": new_id,
+            "name": f"模拟生成: {prompt[:10]}...",
+            "description": f"由于 API 连接问题，这是本地模拟生成的结果: {prompt}",
+            "author": "Local_Fallback",
+            "downloads": 0,
+            "price": 0.00,
+            "rating": 0.0,
+            "tags": ["模拟", "离线"],
+            "code": f"def task_fallback(data):\n    # API Error fallback\n    print('Processing {prompt}')\n    return True"
+        }
+        return jsonify(new_skill)
+
+    return jsonify({"error": "Generation failed"}), 500
+
+@app.route('/api/save', methods=['POST'])
+def save_skill():
+    data = request.json
+    if not data:
+        return jsonify({"error": "No data provided"}), 400
+        
+    # In a real app, save to DB. Here, add to memory.
+    # Check if exists
+    existing = next((s for s in SKILL_REGISTRY if s['id'] == data.get('id')), None)
+    if not existing:
+        SKILL_REGISTRY.insert(0, data)
+        STATS['total_skills'] += 1
+        return jsonify({"status": "success", "message": "技能已保存"})
+    else:
+        return jsonify({"status": "exists", "message": "技能已存在"})
+
+@app.route('/api/execute', methods=['POST'])
+def execute_skill():
+    data = request.json
+    skill_id = data.get('skill_id')
+    
+    # Mock Execution Delay
+    time.sleep(0.5)
+    
+    return jsonify({
+        "status": "success",
+        "output": f"技能 {skill_id} 执行成功。",
+        "result_data": {
+            "processed_items": random.randint(5, 50),
+            "efficiency_score": f"{random.randint(80, 99)}%",
+            "timestamp": time.time()
+        }
+    })
+
+@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)
+        file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
+        return jsonify({'message': f'File {filename} uploaded successfully', 'path': f"/uploads/{filename}"})
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860)

requirements.txt

@@ -0,0 +1,4 @@
+flask
+gunicorn
+pandas
+requests

templates/index.html

@@ -0,0 +1,325 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Skill Factory - 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>
+        body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: #f8fafc; }
+        .glass-panel { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border: 1px solid #e2e8f0; }
+        .code-font { font-family: 'Fira Code', monospace; }
+        [v-cloak] { display: none; }
+    </style>
+</head>
+<body class="text-slate-800">
+    <div id="app" v-cloak class="min-h-screen flex flex-col">
+        
+        <!-- Navigation -->
+        <nav class="bg-white border-b border-slate-200 sticky top-0 z-50">
+            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                <div class="flex justify-between h-16">
+                    <div class="flex items-center gap-3">
+                        <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold">
+                            <i class="fas fa-cube"></i>
+                        </div>
+                        <span class="font-bold text-xl tracking-tight text-slate-900">Skill Factory <span class="text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full ml-1">Beta</span></span>
+                    </div>
+                    <div class="flex items-center gap-6 text-sm font-medium text-slate-600">
+                        <a href="#" class="hover:text-blue-600 transition-colors">工具市场</a>
+                        <a href="#" class="hover:text-blue-600 transition-colors">我的资产</a>
+                        <a href="#" class="hover:text-blue-600 transition-colors">API 文档</a>
+                        <div class="flex items-center gap-2 px-3 py-1.5 bg-slate-100 rounded-full">
+                            <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+                            <span class="text-xs">系统正常</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Main Content -->
+        <main class="flex-1 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full grid grid-cols-12 gap-8">
+            
+            <!-- Left Column: Generator & Console (8 cols) -->
+            <div class="col-span-12 lg:col-span-8 flex flex-col gap-6">
+                
+                <!-- AI Generator Section -->
+                <div class="glass-panel rounded-xl p-6 shadow-sm">
+                    <h2 class="text-lg font-bold mb-4 flex items-center gap-2">
+                        <i class="fas fa-magic text-purple-500"></i> AI 工具生成器
+                    </h2>
+                    <div class="space-y-4">
+                        <textarea 
+                            v-model="prompt" 
+                            class="w-full p-4 border border-slate-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none resize-none h-32 text-sm"
+                            placeholder="描述你想要自动化的任务... (例如：提取PDF中的表格并保存为Excel，或者监控特定网页的价格变化)"
+                        ></textarea>
+                        <div class="flex justify-between items-center">
+                            <div class="flex items-center gap-4">
+                                <div class="text-xs text-slate-500">
+                                    <i class="fas fa-info-circle mr-1"></i> 支持 Python 3.11 环境
+                                </div>
+                                <!-- File Upload Trigger -->
+                                <input type="file" ref="fileInput" class="hidden" @change="handleFileUpload">
+                                <button @click="triggerUpload" class="text-xs text-slate-500 hover:text-blue-600 flex items-center gap-1 transition-colors">
+                                    <i class="fas fa-paperclip"></i> 上传参考文件
+                                </button>
+                            </div>
+                            <button 
+                                @click="generateSkill" 
+                                :disabled="isGenerating || !prompt"
+                                class="bg-slate-900 hover:bg-slate-800 text-white px-6 py-2.5 rounded-lg text-sm font-medium transition-all flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-blue-500/20"
+                            >
+                                <span v-if="isGenerating"><i class="fas fa-spinner fa-spin"></i> 生成中...</span>
+                                <span v-else><i class="fas fa-bolt"></i> 立即生成</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Code Preview & Test Bench -->
+                <div v-if="currentSkill" class="glass-panel rounded-xl shadow-sm overflow-hidden flex flex-col flex-1 min-h-[400px]">
+                    <div class="bg-slate-50 border-b border-slate-200 px-4 py-3 flex justify-between items-center">
+                        <div class="flex items-center gap-2">
+                            <i class="fas fa-code text-slate-400 text-sm"></i>
+                            <span class="font-mono text-sm font-medium text-slate-700">${ currentSkill.name }</span>
+                        </div>
+                        <div class="flex gap-2">
+                            <button @click="runTest" class="text-xs bg-green-600 hover:bg-green-700 text-white px-3 py-1.5 rounded flex items-center gap-1 transition-colors">
+                                <i class="fas fa-play"></i> 运行测试
+                            </button>
+                            <button @click="saveSkill" class="text-xs bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 px-3 py-1.5 rounded flex items-center gap-1 transition-colors">
+                                <i class="fas fa-save"></i> 保存到资产库
+                            </button>
+                        </div>
+                    </div>
+                    <div class="flex-1 bg-[#1e1e1e] p-4 overflow-auto">
+                        <pre class="code-font text-sm text-gray-300"><code>${ currentSkill.code }</code></pre>
+                    </div>
+                    <!-- Console Output -->
+                    <div class="bg-slate-900 border-t border-slate-700 p-4 h-48 overflow-auto code-font text-xs">
+                        <div class="flex items-center gap-2 text-slate-400 mb-2 uppercase tracking-wider text-[10px] font-bold">
+                            <i class="fas fa-terminal"></i> 终端输出
+                        </div>
+                        <div v-for="(log, idx) in logs" :key="idx" :class="log.type === 'error' ? 'text-red-400' : 'text-green-400'" class="mb-1">
+                            <span class="text-slate-600 select-none mr-2">[${ log.time }]</span>
+                            <span>${ log.msg }</span>
+                        </div>
+                        <div v-if="logs.length === 0" class="text-slate-600 italic">等待执行...</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Right Column: Marketplace & Stats (4 cols) -->
+            <div class="col-span-12 lg:col-span-4 flex flex-col gap-6">
+                
+                <!-- Stats Cards -->
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="glass-panel p-4 rounded-xl">
+                        <div class="text-slate-500 text-xs font-medium mb-1">总资产价值 (预估)</div>
+                        <div class="text-2xl font-bold text-slate-900">$${ stats.revenue.toFixed(2) }</div>
+                        <div class="text-xs text-green-500 mt-1 flex items-center gap-1">
+                            <i class="fas fa-arrow-up"></i> 12.5%
+                        </div>
+                    </div>
+                    <div class="glass-panel p-4 rounded-xl">
+                        <div class="text-slate-500 text-xs font-medium mb-1">技能调用次数</div>
+                        <div class="text-2xl font-bold text-slate-900">${ stats.total_executions }</div>
+                        <div class="text-xs text-blue-500 mt-1 flex items-center gap-1">
+                            <i class="fas fa-chart-line"></i> +840 今日
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Skill Marketplace -->
+                <div class="glass-panel rounded-xl shadow-sm flex-1 flex flex-col">
+                    <div class="p-4 border-b border-slate-200 flex justify-between items-center">
+                        <h3 class="font-bold text-slate-800">热门技能市场</h3>
+                        <span class="text-xs bg-slate-100 text-slate-600 px-2 py-1 rounded-full">Top 5</span>
+                    </div>
+                    <div class="p-2 overflow-y-auto flex-1 max-h-[600px]">
+                        <div v-for="skill in skills" :key="skill.id" class="group p-3 hover:bg-slate-50 rounded-lg transition-all cursor-pointer border border-transparent hover:border-slate-200 mb-2">
+                            <div class="flex justify-between items-start mb-2">
+                                <div class="font-medium text-slate-800 text-sm group-hover:text-blue-600 transition-colors">${ skill.name }</div>
+                                <div v-if="skill.price > 0" class="text-xs font-bold text-slate-700 bg-yellow-100 px-1.5 py-0.5 rounded text-yellow-700">$${ skill.price }</div>
+                                <div v-else class="text-xs font-bold text-slate-500 bg-slate-100 px-1.5 py-0.5 rounded">Free</div>
+                            </div>
+                            <p class="text-xs text-slate-500 line-clamp-2 mb-3">${ skill.description }</p>
+                            <div class="flex justify-between items-center">
+                                <div class="flex gap-1">
+                                    <span v-for="tag in skill.tags" class="text-[10px] bg-slate-100 text-slate-500 px-1.5 py-0.5 rounded">${ tag }</span>
+                                </div>
+                                <button @click="loadSkill(skill)" class="text-xs text-blue-600 hover:text-blue-700 font-medium">
+                                    加载 <i class="fas fa-chevron-right text-[10px]"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </main>
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'], // Avoid Jinja2 conflict
+            setup() {
+                const prompt = ref('');
+                const isGenerating = ref(false);
+                const currentSkill = ref(null);
+                const skills = ref([]);
+                const stats = ref({ revenue: 0, total_executions: 0 });
+                const logs = ref([]);
+                const fileInput = ref(null);
+
+                const addLog = (msg, type = 'info') => {
+                    const time = new Date().toLocaleTimeString('zh-CN', { hour12: false });
+                    logs.value.unshift({ time, msg, type });
+                };
+
+                const fetchStats = async () => {
+                    const res = await fetch('/api/stats');
+                    stats.value = await res.json();
+                };
+
+                const fetchSkills = async () => {
+                    const res = await fetch('/api/skills');
+                    skills.value = await res.json();
+                };
+
+                const generateSkill = async () => {
+                    if (!prompt.value) return;
+                    isGenerating.value = true;
+                    addLog(`开始生成技能任务: "${prompt.value}"...`);
+                    
+                    try {
+                        const res = await fetch('/api/generate', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({ prompt: prompt.value })
+                        });
+                        const data = await res.json();
+                        if (data.error) throw new Error(data.error);
+                        
+                        currentSkill.value = data;
+                        addLog(`生成成功: ${data.name}`, 'success');
+                        addLog(`代码已加载到编辑器`);
+                        // Don't refresh skills list yet, wait for save
+                    } catch (e) {
+                        addLog(`生成失败: ${e.message}`, 'error');
+                    } finally {
+                        isGenerating.value = false;
+                    }
+                };
+
+                const loadSkill = (skill) => {
+                    currentSkill.value = skill;
+                    addLog(`已加载技能: ${skill.name}`);
+                };
+
+                const saveSkill = async () => {
+                    if (!currentSkill.value) return;
+                    addLog(`正在保存技能: ${currentSkill.value.name}...`);
+                    try {
+                        const res = await fetch('/api/save', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify(currentSkill.value)
+                        });
+                        const data = await res.json();
+                        if (data.status === 'success') {
+                            addLog('保存成功!', 'success');
+                            await fetchSkills();
+                        } else {
+                            addLog(`保存提示: ${data.message}`);
+                        }
+                    } catch (e) {
+                        addLog(`保存失败: ${e.message}`, 'error');
+                    }
+                };
+
+                const runTest = async () => {
+                    if (!currentSkill.value) return;
+                    addLog(`正在执行测试: ${currentSkill.value.name}...`);
+                    try {
+                        const res = await fetch('/api/execute', {
+                            method: 'POST',
+                            headers: {'Content-Type': 'application/json'},
+                            body: JSON.stringify({ skill_id: currentSkill.value.id })
+                        });
+                        const data = await res.json();
+                        addLog(`执行成功! 耗时: 0.8s`, 'success');
+                        addLog(`输出结果: ${JSON.stringify(data.result_data)}`);
+                        await fetchStats(); // Update stats
+                    } catch (e) {
+                        addLog(`执行错误: ${e.message}`, 'error');
+                    }
+                };
+
+                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);
+                    
+                    addLog(`正在上传文件: ${file.name}...`);
+                    try {
+                        const res = await fetch('/api/upload', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        const data = await res.json();
+                        if (data.path) {
+                            addLog(`上传成功! 文件路径: ${data.path}`, 'success');
+                            // Auto-fill prompt with file context if prompt is empty
+                            if (!prompt.value) {
+                                prompt.value = `分析上传的文件 ${file.name} 并创建一个处理它的脚本...`;
+                            }
+                        } else {
+                            addLog(`上传失败: ${data.error}`, 'error');
+                        }
+                    } catch (e) {
+                        addLog(`上传错误: ${e.message}`, 'error');
+                    }
+                };
+
+                onMounted(() => {
+                    fetchStats();
+                    fetchSkills();
+                    addLog('系统初始化完成');
+                    addLog('连接到 Skill Registry...');
+                    addLog('SiliconFlow API 已就绪');
+                });
+
+                return {
+                    prompt,
+                    isGenerating,
+                    currentSkill,
+                    skills,
+                    stats,
+                    logs,
+                    fileInput,
+                    generateSkill,
+                    loadSkill,
+                    saveSkill,
+                    runTest,
+                    triggerUpload,
+                    handleFileUpload
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>