Initial commit with enhancements

Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Create a non-root user
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+EXPOSE 7860
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -0,0 +1,65 @@
+---
+title: Clawbot Control Agent
+emoji: 🤖
+colorFrom: blue
+colorTo: gray
+sdk: docker
+app_port: 7860
+short_description: 工业级机械臂AI操控与资产管理终端
+---
+
+# Clawbot Control Agent (机械臂操控代理)
+
+**Clawbot Control Agent** 是一个专为工业自动化设计的具身智能（Embodied AI）操控终端。它结合了 SiliconFlow 的大模型能力与实时数字孪生技术，允许用户通过自然语言指令控制机械臂，并积累高价值的“动作资产”（Motion Assets）。
+
+## 核心功能 (Key Features)
+
+1.  **AI 意图控制 (Intent Control)**:
+    -   集成 SiliconFlow API (DeepSeek/Qwen)，将自然语言指令（如“抓取左侧红色工件”）实时转化为精确的 4自由度 (4-DOF) 关节坐标。
+    -   支持复杂逻辑判断与路径规划解释。
+
+2.  **实时数字孪生 (Digital Twin)**:
+    -   基于 Canvas 的 2D 侧视实时仿真，可视化机械臂姿态。
+    -   ECharts 实时监控电机温度与负载（模拟数据），确保系统可靠性。
+
+3.  **资产积累 (Asset Accumulation)**:
+    -   **动作资产库**: 用户可以将调试好的完美动作序列保存为“标准资产”，供后续自动化任务调用。
+    -   支持 SQLite 持久化存储，构建企业级自动化知识库。
+
+4.  **商业化设计 (Commercial Ready)**:
+    -   移动端优先 (Mobile-First) 的响应式设计。
+    -   清晰的“生产力工具”风格界面。
+
+## 技术栈 (Tech Stack)
+
+-   **Backend**: Python Flask 3.0, SQLite (Data Persistence)
+-   **Frontend**: Vue 3 (Composition API), Tailwind CSS, ECharts 5
+-   **AI Integration**: SiliconFlow API (OpenAI Compatible)
+-   **Deployment**: Docker (Production Grade)
+
+## 快速开始 (Quick Start)
+
+1.  **安装依赖**:
+    ```bash
+    pip install -r requirements.txt
+    ```
+
+2.  **设置 API Key**:
+    在环境变量中设置 `SILICONFLOW_API_KEY`，或在 `app.py` 中配置。
+
+3.  **启动服务**:
+    ```bash
+    python app.py
+    ```
+    访问 `http://localhost:7860`。
+
+## Docker 部署
+
+```bash
+docker build -t clawbot-agent .
+docker run -p 7860:7860 clawbot-agent
+```
+
+## 资产价值 (Value Proposition)
+
+本项目不仅仅是一个控制器，更是一个**工业自动化数据的采集器**。随着用户的使用，系统会积累大量的“动作-意图”对数据，这些数据是训练下一代具身智能大模型（VLA Models）的宝贵资产。

app.py

@@ -0,0 +1,201 @@
+import os
+import json
+import sqlite3
+import datetime
+import requests
+from flask import Flask, render_template, request, jsonify, g
+from flask_cors import CORS
+
+app = Flask(__name__)
+CORS(app)
+
+# Configuration
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload
+SILICONFLOW_API_KEY = os.environ.get("SILICONFLOW_API_KEY", "sk-vimuseiptfbomzegyuvmebjzooncsqbyjtlddrfodzcdskgi")
+DB_NAME = "clawbot_assets.db"
+
+# Ensure instance folder exists
+os.makedirs(app.instance_path, exist_ok=True)
+DB_PATH = os.path.join(app.instance_path, DB_NAME)
+
+def get_db():
+    db = getattr(g, '_database', None)
+    if db is None:
+        db = g._database = sqlite3.connect(DB_PATH)
+        db.row_factory = sqlite3.Row
+    return db
+
+@app.teardown_appcontext
+def close_connection(exception):
+    db = getattr(g, '_database', None)
+    if db is not None:
+        db.close()
+
+def init_db():
+    with app.app_context():
+        db = get_db()
+        cursor = db.cursor()
+        cursor.execute('''
+            CREATE TABLE IF NOT EXISTS motions (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                name TEXT NOT NULL,
+                description TEXT,
+                joints TEXT NOT NULL, -- JSON string: {base, shoulder, elbow, claw}
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            )
+        ''')
+        # Add some demo data if empty
+        cursor.execute('SELECT count(*) FROM motions')
+        if cursor.fetchone()[0] == 0:
+            demos = [
+                ('Home Position', 'Reset to safe start', json.dumps({'base': 90, 'shoulder': 90, 'elbow': 90, 'claw': 0})),
+                ('Grab Low', 'Pick up object from floor', json.dumps({'base': 90, 'shoulder': 45, 'elbow': 135, 'claw': 100})),
+                ('Inspect High', 'Lift object for inspection', json.dumps({'base': 90, 'shoulder': 135, 'elbow': 45, 'claw': 100}))
+            ]
+            cursor.executemany('INSERT INTO motions (name, description, joints) VALUES (?, ?, ?)', demos)
+            db.commit()
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/status')
+def status():
+    # Mock telemetry for "Reliability" monitoring
+    import random
+    return jsonify({
+        'motor_temp': [random.randint(40, 65) for _ in range(4)],
+        'power_draw': random.randint(120, 200),
+        'connection': 'ONLINE',
+        'uptime': '48h 12m'
+    })
+
+@app.route('/api/motions', methods=['GET', 'POST'])
+def handle_motions():
+    db = get_db()
+    if request.method == 'POST':
+        data = request.json
+        name = data.get('name', 'Untitled Motion')
+        desc = data.get('description', '')
+        joints = json.dumps(data.get('joints', {}))
+        
+        cursor = db.cursor()
+        cursor.execute('INSERT INTO motions (name, description, joints) VALUES (?, ?, ?)', (name, desc, joints))
+        db.commit()
+        return jsonify({'status': 'success', 'id': cursor.lastrowid})
+    else:
+        cursor = db.cursor()
+        cursor.execute('SELECT * FROM motions ORDER BY created_at DESC')
+        rows = cursor.fetchall()
+        return jsonify([dict(row) for row in rows])
+
+@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
+    
+    try:
+        if file.filename.endswith('.json'):
+            content = json.load(file)
+            if isinstance(content, list):
+                db = get_db()
+                cursor = db.cursor()
+                for item in content:
+                    name = item.get('name', 'Imported Motion')
+                    desc = item.get('description', '')
+                    # Handle if joints is dict or string
+                    joints_val = item.get('joints', {})
+                    if isinstance(joints_val, dict):
+                        joints = json.dumps(joints_val)
+                    else:
+                        joints = joints_val
+                    
+                    cursor.execute('INSERT INTO motions (name, description, joints) VALUES (?, ?, ?)', (name, desc, joints))
+                db.commit()
+                return jsonify({'status': 'success', 'count': len(content)})
+            else:
+                return jsonify({'error': 'Invalid JSON format, expected list'}), 400
+        return jsonify({'error': 'Unsupported file type'}), 400
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/export', methods=['GET'])
+def export_data():
+    db = get_db()
+    cursor = db.cursor()
+    cursor.execute('SELECT name, description, joints, created_at FROM motions')
+    rows = cursor.fetchall()
+    data = []
+    for row in rows:
+        d = dict(row)
+        # Ensure joints is parsed back to dict for JSON export, or keep as string? 
+        # Better to keep as valid JSON object
+        try:
+            d['joints'] = json.loads(d['joints'])
+        except:
+            pass
+        data.append(d)
+    
+    return jsonify(data)
+
+@app.route('/api/analyze', methods=['POST'])
+def analyze_command():
+    data = request.json
+    command = data.get('command', '')
+    
+    if not command:
+        return jsonify({'error': 'No command provided'}), 400
+
+    # Call SiliconFlow
+    headers = {
+        "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+        "Content-Type": "application/json"
+    }
+    
+    system_prompt = """
+    You are the Kinematic Controller for a 4-DOF Robot Arm.
+    Joint Limits:
+    - Base: 0-180 (0=Left, 180=Right, 90=Center)
+    - Shoulder: 0-180 (0=Down, 180=Up)
+    - Elbow: 0-180 (0=Folded, 180=Extended)
+    - Claw: 0-100 (0=Open, 100=Closed)
+    
+    Output JSON ONLY containing these 4 keys and an 'explanation'.
+    Example: {"base": 90, "shoulder": 45, "elbow": 120, "claw": 100, "explanation": "Moving to lower center to grab."}
+    """
+    
+    payload = {
+        "model": "Qwen/Qwen2.5-7B-Instruct", 
+        "messages": [
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": f"Command: {command}"}
+        ],
+        "response_format": {"type": "json_object"}
+    }
+    
+    try:
+        response = requests.post(
+            "https://api.siliconflow.cn/v1/chat/completions",
+            json=payload,
+            headers=headers,
+            timeout=10
+        )
+        response.raise_for_status()
+        result = response.json()
+        content = result['choices'][0]['message']['content']
+        parsed = json.loads(content)
+        return jsonify(parsed)
+    except Exception as e:
+        print(f"AI Error: {e}")
+        # Fallback Mock if AI fails
+        return jsonify({
+            'base': 90, 'shoulder': 90, 'elbow': 90, 'claw': 0,
+            'explanation': f"AI Connection Failed. Resetting to Home. Error: {str(e)}"
+        })
+
+if __name__ == '__main__':
+    init_db()
+    app.run(host='0.0.0.0', port=7860, debug=True)

requirements.txt

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

templates/index.html

@@ -0,0 +1,370 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Clawbot Control Agent - 工业级机械臂操控终端</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>
+    <style>
+        body { font-family: 'Inter', system-ui, sans-serif; background-color: #f3f4f6; }
+        .slider-thumb::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: #3b82f6; border-radius: 50%; cursor: pointer; }
+        .glass-panel { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); }
+        [v-cloak] { display: none; }
+    </style>
+</head>
+<body class="text-gray-800 h-screen flex flex-col overflow-hidden">
+
+<div id="app" class="h-full flex flex-col" v-cloak>
+    <!-- Header -->
+    <header class="bg-white border-b border-gray-200 px-6 py-3 flex justify-between items-center shadow-sm z-10">
+        <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">C</div>
+            <h1 class="text-xl font-bold tracking-tight">Clawbot 机械臂控制终端 <span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded ml-2">企业版</span></h1>
+        </div>
+        <div class="flex items-center gap-4 text-sm">
+            <div class="flex items-center gap-2">
+                <span class="w-2 h-2 rounded-full" :class="connectionStatus === 'ONLINE' ? 'bg-green-500' : 'bg-red-500'"></span>
+                <span>${ connectionStatus === 'ONLINE' ? '在线' : '离线' }</span>
+            </div>
+            <div class="text-gray-500">运行时间: ${ telemetry.uptime }</div>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="flex-1 flex overflow-hidden">
+        
+        <!-- Left Column: Visualization & Telemetry -->
+        <div class="w-1/2 p-6 flex flex-col gap-6 overflow-y-auto border-r border-gray-200 bg-gray-50">
+            
+            <!-- Simulation View -->
+            <div class="bg-white rounded-xl shadow-sm p-4 border border-gray-200 flex-1 min-h-[400px] flex flex-col">
+                <h2 class="text-sm font-semibold text-gray-500 mb-4 uppercase tracking-wider">实时孪生仿真 (Digital Twin)</h2>
+                <div class="flex-1 relative border border-gray-100 rounded-lg bg-slate-50 overflow-hidden flex justify-center items-end pb-10" id="sim-container">
+                    <!-- Canvas for Side View -->
+                    <canvas ref="sideViewCanvas" width="400" height="300" class="absolute bottom-0"></canvas>
+                    
+                    <!-- Base Rotation Indicator (Top Down hint) -->
+                    <div class="absolute top-4 right-4 bg-white p-2 rounded shadow text-xs">
+                        <div>Base Angle: ${ joints.base }°</div>
+                        <div class="w-16 h-16 rounded-full border-2 border-gray-200 mt-1 relative flex items-center justify-center">
+                            <div class="w-0.5 h-8 bg-blue-500 origin-bottom absolute bottom-1/2 transition-all duration-300" :style="{ transform: 'rotate(' + (joints.base - 90) + 'deg)' }"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Telemetry Charts -->
+            <div class="bg-white rounded-xl shadow-sm p-4 border border-gray-200 h-48">
+                <h2 class="text-sm font-semibold text-gray-500 mb-2 uppercase tracking-wider">电机负载监控 (Motor Load)</h2>
+                <div ref="chartContainer" class="w-full h-full"></div>
+            </div>
+        </div>
+
+        <!-- Right Column: Controls & Assets -->
+        <div class="w-1/2 flex flex-col bg-white">
+            
+            <!-- Manual Controls -->
+            <div class="p-6 border-b border-gray-100">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-lg font-bold">手动控制模式 (Manual Override)</h2>
+                    <button @click="resetHome" class="text-xs bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded transition">复位 (Reset)</button>
+                </div>
+                
+                <div class="grid grid-cols-2 gap-6">
+                    <div v-for="(val, key) in joints" :key="key" class="space-y-1">
+                        <div class="flex justify-between text-xs font-medium text-gray-600 uppercase">
+                            <span>${ key }</span>
+                            <span>${ val }</span>
+                        </div>
+                        <input type="range" v-model.number="joints[key]" min="0" :max="key === 'claw' ? 100 : 180" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
+                    </div>
+                </div>
+            </div>
+
+            <!-- AI Command Center -->
+            <div class="p-6 border-b border-gray-100 bg-blue-50/50">
+                <h2 class="text-lg font-bold mb-3 flex items-center gap-2">
+                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+                    AI 意图控制 (Intent Control)
+                </h2>
+                <div class="flex gap-2">
+                    <input v-model="aiCommand" @keyup.enter="executeAI" type="text" placeholder="输入指令 (e.g., 'Grab the box on the left')" class="flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none">
+                    <button @click="executeAI" :disabled="aiLoading" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition flex items-center gap-2">
+                        <span v-if="aiLoading" class="animate-spin">↻</span>
+                        <span>执行</span>
+                    </button>
+                </div>
+                <div v-if="aiExplanation" class="mt-2 text-sm text-blue-700 bg-blue-100 p-2 rounded border border-blue-200">
+                    AI: "${ aiExplanation }"
+                </div>
+            </div>
+
+            <!-- Asset Library -->
+            <div class="flex-1 p-6 overflow-hidden flex flex-col">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-lg font-bold">动作资产库 (Motion Library)</h2>
+                    <div class="flex gap-2">
+                        <input type="file" ref="fileInput" @change="handleFileUpload" class="hidden" accept=".json">
+                        <button @click="triggerUpload" class="text-sm bg-blue-100 text-blue-700 hover:bg-blue-200 px-3 py-1.5 rounded transition">导入 (Import)</button>
+                        <button @click="exportMotions" class="text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 px-3 py-1.5 rounded transition">导出 (Export)</button>
+                        <button @click="saveCurrentMotion" class="text-sm bg-green-600 hover:bg-green-700 text-white px-3 py-1.5 rounded transition shadow-sm">+ 保存当前 (Save)</button>
+                    </div>
+                </div>
+                
+                <div class="flex-1 overflow-y-auto space-y-2 pr-2">
+                    <div v-for="motion in motions" :key="motion.id" class="group bg-gray-50 hover:bg-white border border-gray-200 hover:border-blue-300 p-3 rounded-lg cursor-pointer transition flex justify-between items-center" @click="loadMotion(motion)">
+                        <div>
+                            <div class="font-medium text-gray-900">${ motion.name }</div>
+                            <div class="text-xs text-gray-500">${ motion.description || '无描述' }</div>
+                        </div>
+                        <div class="text-xs text-gray-400 font-mono bg-gray-100 px-2 py-1 rounded">
+                            ID: ${ motion.id }
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </main>
+</div>
+
+<script>
+    const { createApp, ref, onMounted, watch } = Vue;
+
+    createApp({
+        delimiters: ['${', '}'],
+        setup() {
+            const joints = ref({ base: 90, shoulder: 90, elbow: 90, claw: 0 });
+            const telemetry = ref({ uptime: '-', motor_temp: [0,0,0,0] });
+            const connectionStatus = ref('OFFLINE');
+            const aiCommand = ref('');
+            const aiExplanation = ref('');
+            const aiLoading = ref(false);
+            const motions = ref([]);
+            const sideViewCanvas = ref(null);
+            const chartContainer = ref(null);
+            const fileInput = ref(null);
+            let chartInstance = null;
+
+            // Canvas Drawing Logic
+            const drawArm = () => {
+                const ctx = sideViewCanvas.value.getContext('2d');
+                const w = sideViewCanvas.value.width;
+                const h = sideViewCanvas.value.height;
+                
+                ctx.clearRect(0, 0, w, h);
+                
+                // Config
+                const originX = w / 2;
+                const originY = h - 20;
+                const link1Len = 100;
+                const link2Len = 80;
+                
+                // Angles to Radians (Correcting for canvas coord system where Y is down)
+                // Shoulder: 0 is horizontal right? Let's say 90 is straight up.
+                // Input 0-180. 90=Up.
+                const radShoulder = (180 - joints.value.shoulder) * Math.PI / 180; 
+                
+                // Elbow: Relative to shoulder? Or absolute? 
+                // Let's assume standard servo absolute for simplicity of viz. 
+                // 90 = Straight relative to link1? Let's do absolute for viz simplicity.
+                // Actually 4-DOF usually relative.
+                // Let's simple map: 
+                const x1 = originX + Math.cos(radShoulder) * link1Len; // Wrong, 90 is up.
+                // Correct: 
+                // Angle 90 -> -90 deg in canvas (Up). 
+                // Angle 0 -> 0 deg (Right).
+                // Let's map 0->Right, 90->Up, 180->Left.
+                const theta1 = -1 * (joints.value.shoulder * Math.PI / 180); 
+                
+                const j1x = originX + Math.cos(theta1) * link1Len;
+                const j1y = originY + Math.sin(theta1) * link1Len;
+                
+                // Elbow
+                const theta2 = theta1 + -1 * ((joints.value.elbow - 90) * Math.PI / 180); // Relative offset
+                const j2x = j1x + Math.cos(theta2) * link2Len;
+                const j2y = j1y + Math.sin(theta2) * link2Len;
+                
+                // Draw Base
+                ctx.fillStyle = '#374151';
+                ctx.fillRect(originX - 20, originY, 40, 10);
+                
+                // Draw Link 1
+                ctx.beginPath();
+                ctx.moveTo(originX, originY);
+                ctx.lineTo(j1x, j1y);
+                ctx.lineWidth = 12;
+                ctx.strokeStyle = '#60a5fa'; // blue-400
+                ctx.lineCap = 'round';
+                ctx.stroke();
+                
+                // Draw Link 2
+                ctx.beginPath();
+                ctx.moveTo(j1x, j1y);
+                ctx.lineTo(j2x, j2y);
+                ctx.lineWidth = 10;
+                ctx.strokeStyle = '#93c5fd'; // blue-300
+                ctx.stroke();
+                
+                // Draw Joints
+                ctx.fillStyle = '#1e3a8a';
+                ctx.beginPath(); ctx.arc(originX, originY, 8, 0, Math.PI*2); ctx.fill();
+                ctx.beginPath(); ctx.arc(j1x, j1y, 6, 0, Math.PI*2); ctx.fill();
+                
+                // Draw Claw
+                ctx.fillStyle = joints.value.claw > 50 ? '#ef4444' : '#10b981'; // Red=Closed, Green=Open
+                ctx.beginPath(); ctx.arc(j2x, j2y, 5 + (joints.value.claw/20), 0, Math.PI*2); ctx.fill();
+            };
+
+            const fetchStatus = async () => {
+                try {
+                    const res = await fetch('/api/status');
+                    const data = await res.json();
+                    telemetry.value = data;
+                    connectionStatus.value = data.connection;
+                    updateChart(data.motor_temp);
+                } catch (e) {
+                    connectionStatus.value = 'OFFLINE';
+                }
+            };
+
+            const fetchMotions = async () => {
+                const res = await fetch('/api/motions');
+                motions.value = await res.json();
+            };
+
+            const executeAI = async () => {
+                if (!aiCommand.value) return;
+                aiLoading.value = true;
+                aiExplanation.value = '';
+                try {
+                    const res = await fetch('/api/analyze', {
+                        method: 'POST',
+                        headers: {'Content-Type': 'application/json'},
+                        body: JSON.stringify({ command: aiCommand.value })
+                    });
+                    const data = await res.json();
+                    if (data.explanation) aiExplanation.value = data.explanation;
+                    
+                    // Animate transition? Just set for now.
+                    joints.value = {
+                        base: data.base ?? joints.value.base,
+                        shoulder: data.shoulder ?? joints.value.shoulder,
+                        elbow: data.elbow ?? joints.value.elbow,
+                        claw: data.claw ?? joints.value.claw
+                    };
+                } catch (e) {
+                    alert('AI Execution Failed');
+                } finally {
+                    aiLoading.value = false;
+                }
+            };
+
+            const saveCurrentMotion = async () => {
+                const name = prompt('动作名称 (Motion Name):', `Motion ${motions.value.length + 1}`);
+                if (!name) return;
+                const desc = prompt('描述 (Description):', '用户创建的动作');
+                
+                await fetch('/api/motions', {
+                    method: 'POST',
+                    headers: {'Content-Type': 'application/json'},
+                    body: JSON.stringify({
+                        name,
+                        description: desc,
+                        joints: joints.value
+                    })
+                });
+                fetchMotions();
+            };
+
+            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 (data.status === 'success') {
+                        alert(`成功导入 ${data.count} 个动作`);
+                        fetchMotions();
+                    } else {
+                        alert('导入失败: ' + data.error);
+                    }
+                } catch (e) {
+                    alert('导入出错');
+                }
+                // Reset file input
+                event.target.value = '';
+            };
+
+            const exportMotions = async () => {
+                window.open('/api/export', '_blank');
+            };
+
+            const loadMotion = (m) => {
+                const j = JSON.parse(m.joints);
+                joints.value = j;
+            };
+
+            const resetHome = () => {
+                joints.value = { base: 90, shoulder: 90, elbow: 90, claw: 0 };
+            };
+
+            // ECharts
+            const initChart = () => {
+                chartInstance = echarts.init(chartContainer.value);
+                chartInstance.setOption({
+                    grid: { top: 10, bottom: 20, left: 40, right: 10 },
+                    xAxis: { type: 'category', data: ['Base', 'Shoulder', 'Elbow', 'Claw'] },
+                    yAxis: { type: 'value', max: 100 },
+                    series: [{
+                        type: 'bar',
+                        data: [0, 0, 0, 0],
+                        itemStyle: { color: '#3b82f6' }
+                    }]
+                });
+            };
+
+            const updateChart = (temps) => {
+                if (chartInstance) {
+                    chartInstance.setOption({
+                        series: [{ data: temps }]
+                    });
+                }
+            };
+
+            onMounted(() => {
+                initChart();
+                drawArm();
+                fetchStatus();
+                fetchMotions();
+                setInterval(fetchStatus, 3000);
+            });
+
+            watch(joints, () => {
+                drawArm();
+            }, { deep: true });
+
+            return {
+                joints, telemetry, connectionStatus, aiCommand, aiExplanation, 
+                aiLoading, motions, sideViewCanvas, chartContainer, fileInput,
+                executeAI, saveCurrentMotion, loadMotion, resetHome,
+                triggerUpload, handleFileUpload, exportMotions
+            };
+        }
+    }).mount('#app');
+</script>
+</body>
+</html>