Upload 47 files

.gitattributes

@@ -35,3 +35,12 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 static/app_icon.ico filter=lfs diff=lfs merge=lfs -text
 runtime/ffmpeg/ffmpeg.exe filter=lfs diff=lfs merge=lfs -text
+26-5-10-API-Studio/packages/anyio-4.13.0-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+26-5-10-API-Studio/packages/certifi-2026.4.22-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+26-5-10-API-Studio/packages/charset_normalizer-3.4.7-cp314-cp314-win_amd64.whl filter=lfs diff=lfs merge=lfs -text
+26-5-10-API-Studio/packages/click-8.3.3-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+26-5-10-API-Studio/packages/fastapi-0.136.1-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+26-5-10-API-Studio/packages/pillow-12.2.0-cp314-cp314-win_amd64.whl filter=lfs diff=lfs merge=lfs -text
+26-5-10-API-Studio/packages/pydantic_core-2.46.4-cp314-cp314-win_amd64.whl filter=lfs diff=lfs merge=lfs -text
+26-5-10-API-Studio/packages/pydantic-2.13.4-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text
+26-5-10-API-Studio/packages/urllib3-2.7.0-py3-none-any.whl filter=lfs diff=lfs merge=lfs -text

26-5-10-API-Studio/API/.env

@@ -0,0 +1,12 @@
+COMFLY_BASE_URL=https://ai.comfly.chat
+COMFLY_API_KEY=sk-
+MODELSCOPE_API_KEY=ms-
+COMFYUI_INSTANCES=127.0.0.1:8188,127.0.0.1:4090
+
+SYSTEM_PROMPT=You are a helpful assistant.
+MAX_HISTORY_MESSAGES=30
+REQUEST_TIMEOUT=120
+IMAGE_POLL_INTERVAL=2
+CHAT_MODELS=gpt-5.5
+IMAGE_MODELS=gpt-image-2-all,nano-banana-pro-2k
+MODELSCOPE_CHAT_MODELS=Qwen/Qwen3-235B-A22B,MiniMax/MiniMax-M2.7:MiniMax

26-5-10-API-Studio/main.py

@@ -0,0 +1,1764 @@
+import json
+import uuid
+import base64
+import urllib.request
+import urllib.parse
+import urllib.error
+import os
+import re
+import random
+import time
+import shutil
+import asyncio
+import requests
+from typing import List, Dict, Any, Optional
+from threading import Lock
+import httpx
+from PIL import Image
+from fastapi import FastAPI, HTTPException, WebSocket, WebSocketDisconnect, UploadFile, File, Header, Request
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, Response, StreamingResponse
+from pydantic import BaseModel, Field
+from fastapi.middleware.cors import CORSMiddleware
+
+app = FastAPI()
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# --- WebSocket 状态管理器 ---
+class ConnectionManager:
+    def __init__(self):
+        self.active_connections: List[WebSocket] = []
+        self.user_connections: Dict[str, WebSocket] = {}
+
+    async def connect(self, websocket: WebSocket, client_id: str = None):
+        await websocket.accept()
+        self.active_connections.append(websocket)
+        if client_id:
+            self.user_connections[client_id] = websocket
+        print(f"WS Connected. Total: {len(self.active_connections)}")
+        await self.broadcast_count()
+
+    async def disconnect(self, websocket: WebSocket, client_id: str = None):
+        if websocket in self.active_connections:
+            self.active_connections.remove(websocket)
+        if client_id and client_id in self.user_connections:
+            del self.user_connections[client_id]
+        print(f"WS Disconnected. Total: {len(self.active_connections)}")
+        await self.broadcast_count()
+
+    async def broadcast_count(self):
+        count = len(self.active_connections)
+        data = json.dumps({"type": "stats", "online_count": count})
+        for connection in self.active_connections[:]:
+            try:
+                await connection.send_text(data)
+            except Exception as e:
+                print(f"Broadcast error: {e}")
+                self.active_connections.remove(connection)
+
+    async def broadcast_new_image(self, image_data: dict):
+        data = json.dumps({"type": "new_image", "data": image_data})
+        for connection in self.active_connections[:]:
+            try:
+                await connection.send_text(data)
+            except Exception as e:
+                print(f"Broadcast image error: {e}")
+                self.active_connections.remove(connection)
+
+    async def send_personal_message(self, message: dict, client_id: str):
+        ws = self.user_connections.get(client_id)
+        if ws:
+            try:
+                await ws.send_text(json.dumps(message))
+            except Exception as e:
+                print(f"Personal message error for {client_id}: {e}")
+
+manager = ConnectionManager()
+GLOBAL_LOOP = None
+
+@app.on_event("startup")
+async def startup_event():
+    global GLOBAL_LOOP
+    GLOBAL_LOOP = asyncio.get_running_loop()
+
+@app.websocket("/ws/stats")
+async def websocket_endpoint(websocket: WebSocket, client_id: str = None):
+    await manager.connect(websocket, client_id)
+    try:
+        while True:
+            data = await websocket.receive_text()
+            if data == "ping":
+                await websocket.send_text(json.dumps({"type": "pong"}))
+    except WebSocketDisconnect:
+        await manager.disconnect(websocket, client_id)
+    except Exception as e:
+        print(f"WS Error: {e}")
+        await manager.disconnect(websocket, client_id)
+
+# --- 配置区域 ---
+
+CLIENT_ID = str(uuid.uuid4())
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+WORKFLOW_DIR = os.path.join(BASE_DIR, "workflows")
+WORKFLOW_PATH = os.path.join(WORKFLOW_DIR, "Z-Image.json")
+STATIC_DIR = os.path.join(BASE_DIR, "static")
+OUTPUT_DIR = os.path.join(BASE_DIR, "output")
+HISTORY_FILE = os.path.join(BASE_DIR, "history.json")
+API_ENV_FILE = os.path.join(BASE_DIR, "API", ".env")
+DATA_DIR = os.path.join(BASE_DIR, "data")
+CONVERSATION_DIR = os.path.join(DATA_DIR, "conversations")
+CANVAS_DIR = os.path.join(DATA_DIR, "canvases")
+GLOBAL_CONFIG_FILE = os.path.join(BASE_DIR, "global_config.json")
+CANVAS_TRASH_RETENTION_MS = 30 * 24 * 60 * 60 * 1000
+
+QUEUE = []
+QUEUE_LOCK = Lock()
+HISTORY_LOCK = Lock()
+GLOBAL_CONFIG_LOCK = Lock()
+CONVERSATION_LOCK = Lock()
+CANVAS_LOCK = Lock()
+LOAD_LOCK = Lock()
+NEXT_TASK_ID = 1
+
+def load_env_file():
+    if not os.path.exists(API_ENV_FILE):
+        return
+    try:
+        with open(API_ENV_FILE, 'r', encoding='utf-8-sig') as f:
+            for raw_line in f.read().splitlines():
+                line = raw_line.strip()
+                if not line or line.startswith("#") or "=" not in line:
+                    continue
+                key, value = line.split("=", 1)
+                key = key.strip()
+                value = value.strip().strip('"').strip("'")
+                os.environ.setdefault(key, value)
+    except Exception as e:
+        print(f"加�� API/.env 失败: {e}")
+
+load_env_file()
+
+COMFYUI_INSTANCES = [s.strip() for s in os.getenv("COMFYUI_INSTANCES", "127.0.0.1:8188").split(",") if s.strip()]
+COMFYUI_ADDRESS = COMFYUI_INSTANCES[0]
+
+AI_BASE_URL = os.getenv("COMFLY_BASE_URL", "https://ai.comfly.chat").rstrip("/")
+AI_API_KEY = os.getenv("COMFLY_API_KEY", "")
+MODELSCOPE_API_KEY = os.getenv("MODELSCOPE_API_KEY", "")
+MODELSCOPE_CHAT_BASE_URL = "https://api-inference.modelscope.cn/v1"
+MODELSCOPE_CHAT_MODELS = [m.strip() for m in os.getenv("MODELSCOPE_CHAT_MODELS", "Qwen/Qwen3-235B-A22B,MiniMax/MiniMax-M2.7:MiniMax").split(",") if m.strip()]
+CHAT_MODEL = os.getenv("CHAT_MODEL", "gpt-4o-mini")
+IMAGE_MODEL = os.getenv("IMAGE_MODEL", "gpt-image-1")
+SYSTEM_PROMPT = os.getenv("SYSTEM_PROMPT", "You are a helpful assistant.")
+MAX_HISTORY_MESSAGES = int(os.getenv("MAX_HISTORY_MESSAGES", "30"))
+AI_REQUEST_TIMEOUT = float(os.getenv("REQUEST_TIMEOUT", "120"))
+IMAGE_POLL_INTERVAL = float(os.getenv("IMAGE_POLL_INTERVAL", "2"))
+
+def model_list(env_name, primary, defaults):
+    configured = os.getenv(env_name, "")
+    configured_values = [item.strip() for item in configured.split(",") if item.strip()]
+    values = configured_values or [primary, *defaults]
+    deduped = []
+    for value in values:
+        if value and value not in deduped:
+            deduped.append(value)
+    return deduped
+
+CHAT_MODELS = model_list("CHAT_MODELS", CHAT_MODEL, ["gpt-4o-mini", "gemini-3.1-flash-image-preview-2k"])
+IMAGE_MODELS = model_list("IMAGE_MODELS", IMAGE_MODEL, ["gpt-image-2-all", "nano-banana"])
+
+BACKEND_LOCAL_LOAD = {addr: 0 for addr in COMFYUI_INSTANCES}
+
+os.makedirs(OUTPUT_DIR, exist_ok=True)
+os.makedirs(STATIC_DIR, exist_ok=True)
+os.makedirs(WORKFLOW_DIR, exist_ok=True)
+os.makedirs(CONVERSATION_DIR, exist_ok=True)
+os.makedirs(CANVAS_DIR, exist_ok=True)
+
+app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+app.mount("/output", StaticFiles(directory=OUTPUT_DIR), name="output")
+
+# --- Pydantic 模型 ---
+
+class GenerateRequest(BaseModel):
+    prompt: str = ""
+    width: int = 1024
+    height: int = 1024
+    workflow_json: str = "Z-Image.json"
+    params: Dict[str, Any] = {}
+    type: str = "zimage"
+    client_id: str = ""
+    convert_to_jpg: bool = False
+
+class DeleteHistoryRequest(BaseModel):
+    timestamp: float
+
+class TokenRequest(BaseModel):
+    token: str
+
+class CloudGenRequest(BaseModel):
+    prompt: str
+    api_key: str = ""
+    resolution: str = "1024*1024"
+    type: str = "zimage"
+    image_urls: List[str] = []
+    client_id: Optional[str] = None
+
+class CloudPollRequest(BaseModel):
+    task_id: str
+    api_key: str = ""
+    client_id: Optional[str] = None
+
+class AIReference(BaseModel):
+    url: str = ""
+    name: str = ""
+
+class OnlineImageRequest(BaseModel):
+    prompt: str = Field(min_length=1, max_length=4000)
+    model: str = ""
+    size: str = "1024x1024"
+    quality: str = "auto"
+    reference_images: List[AIReference] = []
+
+class ChatRequest(BaseModel):
+    conversation_id: str = ""
+    message: str = Field(min_length=1, max_length=20000)
+    model: str = ""
+    image_model: str = ""
+    mode: str = "chat"
+    size: str = "1024x1024"
+    quality: str = "auto"
+    reference_images: List[AIReference] = []
+    provider: str = "comfly"
+    ms_model: str = ""
+
+class MsGenerateRequest(BaseModel):
+    prompt: str
+    model: str = "black-forest-labs/FLUX.2-klein-9B"
+    image_urls: List[str] = []
+    width: int = 0
+    height: int = 0
+    loras: Optional[Any] = None
+    client_id: Optional[str] = None
+
+class CanvasLLMRequest(BaseModel):
+    message: str = Field(min_length=1, max_length=20000)
+    system_prompt: str = "You are a helpful assistant."
+    model: str = ""
+    messages: List[Dict[str, str]] = []
+    provider: str = "comfly"
+    ms_model: str = ""
+
+class ConversationCreateRequest(BaseModel):
+    title: str = "新对话"
+
+class CanvasCreateRequest(BaseModel):
+    title: str = "未命名画布"
+    icon: str = "🧩"
+
+class CanvasSaveRequest(BaseModel):
+    title: str = "未命名画布"
+    icon: str = "🧩"
+    nodes: List[Dict[str, Any]] = []
+    connections: List[Dict[str, Any]] = []
+    viewport: Dict[str, Any] = {}
+
+# --- 负载均衡 ---
+
+def check_images_exist(backend_addr, images):
+    if not images: return True
+    for img in images:
+        try:
+            url = f"http://{backend_addr}/view?filename={urllib.parse.quote(img)}&type=input"
+            r = requests.get(url, stream=True, timeout=0.5)
+            r.close()
+            if r.status_code != 200: return False
+        except: return False
+    return True
+
+def get_best_backend(required_images: List[str] = None):
+    best_backend = COMFYUI_INSTANCES[0]
+    min_queue_size = float('inf')
+    candidates_with_images = []
+    candidates_others = []
+    backend_stats = {}
+
+    for addr in COMFYUI_INSTANCES:
+        try:
+            with urllib.request.urlopen(f"http://{addr}/queue", timeout=1) as response:
+                data = json.loads(response.read())
+                remote_load = len(data.get('queue_running', [])) + len(data.get('queue_pending', []))
+                with LOAD_LOCK:
+                    local_load = BACKEND_LOCAL_LOAD.get(addr, 0)
+                effective_load = max(remote_load, local_load)
+                has_images = check_images_exist(addr, required_images)
+                backend_stats[addr] = {"load": effective_load, "has_images": has_images}
+                if has_images:
+                    candidates_with_images.append(addr)
+                else:
+                    candidates_others.append(addr)
+        except Exception as e:
+            print(f"Backend {addr} unreachable: {e}")
+            continue
+
+    target_candidates = candidates_with_images if candidates_with_images else candidates_others
+    if not target_candidates:
+        if candidates_others:
+            target_candidates = candidates_others
+        else:
+            return COMFYUI_INSTANCES[0]
+
+    for addr in target_candidates:
+        load = backend_stats[addr]["load"]
+        if load < min_queue_size:
+            min_queue_size = load
+            best_backend = addr
+
+    return best_backend
+
+# --- 辅助工具 ---
+
+def download_image(comfy_address, comfy_url_path, prefix="studio_"):
+    filename = f"{prefix}{uuid.uuid4().hex[:10]}.png"
+    local_path = os.path.join(OUTPUT_DIR, filename)
+    full_url = f"http://{comfy_address}{comfy_url_path}"
+    try:
+        with urllib.request.urlopen(full_url) as response, open(local_path, 'wb') as out_file:
+            shutil.copyfileobj(response, out_file)
+        return f"/output/{filename}"
+    except Exception as e:
+        print(f"下载图片失败: {e}")
+        if comfy_url_path.startswith("/view"):
+            return comfy_url_path.replace("/view", "/api/view", 1)
+        return full_url
+
+def save_to_history(record):
+    with HISTORY_LOCK:
+        history = []
+        if os.path.exists(HISTORY_FILE):
+            try:
+                with open(HISTORY_FILE, 'r', encoding='utf-8') as f:
+                    history = json.load(f)
+            except: pass
+        if "timestamp" not in record:
+            record["timestamp"] = time.time()
+        history.insert(0, record)
+        with open(HISTORY_FILE, 'w', encoding='utf-8') as f:
+            json.dump(history[:5000], f, ensure_ascii=False, indent=4)
+
+def get_comfy_history(comfy_address, prompt_id):
+    try:
+        with urllib.request.urlopen(f"http://{comfy_address}/history/{prompt_id}") as response:
+            return json.loads(response.read())
+    except Exception as e:
+        return {}
+
+def safe_user_id(user_id, request: Request):
+    candidate = (user_id or "").strip()
+    if not candidate and request.client:
+        candidate = f"ip-{request.client.host}"
+    if not candidate:
+        candidate = "anonymous"
+    candidate = re.sub(r"[^a-zA-Z0-9_.-]", "-", candidate)[:80].strip(".-")
+    return candidate or "anonymous"
+
+def user_dir(user_id):
+    path = os.path.join(CONVERSATION_DIR, user_id)
+    os.makedirs(path, exist_ok=True)
+    return path
+
+def conversation_path(user_id, conversation_id):
+    cleaned = re.sub(r"[^a-zA-Z0-9_-]", "", conversation_id or "")
+    if not cleaned:
+        raise HTTPException(status_code=400, detail="无效的对话 ID")
+    return os.path.join(user_dir(user_id), f"{cleaned}.json")
+
+def now_ms():
+    return int(time.time() * 1000)
+
+def save_conversation(user_id, conversation):
+    with CONVERSATION_LOCK:
+        path = conversation_path(user_id, conversation["id"])
+        with open(path, 'w', encoding='utf-8') as f:
+            json.dump(conversation, f, ensure_ascii=False, indent=2)
+
+def new_conversation(user_id, title="新对话"):
+    timestamp = now_ms()
+    conversation = {
+        "id": uuid.uuid4().hex,
+        "title": (title or "新对话")[:80],
+        "created_at": timestamp,
+        "updated_at": timestamp,
+        "messages": [],
+    }
+    save_conversation(user_id, conversation)
+    return conversation
+
+def load_conversation(user_id, conversation_id):
+    path = conversation_path(user_id, conversation_id)
+    if not os.path.exists(path):
+        raise HTTPException(status_code=404, detail="对话不存在")
+    with open(path, 'r', encoding='utf-8') as f:
+        return json.load(f)
+
+def list_conversations(user_id):
+    records = []
+    for filename in os.listdir(user_dir(user_id)):
+        if not filename.endswith(".json"):
+            continue
+        path = os.path.join(user_dir(user_id), filename)
+        try:
+            with open(path, 'r', encoding='utf-8') as f:
+                data = json.load(f)
+        except Exception:
+            continue
+        messages = data.get("messages", [])
+        last_message = next((m for m in reversed(messages) if m.get("role") != "system"), None)
+        records.append({
+            "id": data.get("id"),
+            "title": data.get("title", "新对话"),
+            "created_at": data.get("created_at", 0),
+            "updated_at": data.get("updated_at", 0),
+            "last_message": (last_message or {}).get("content", ""),
+        })
+    return sorted(records, key=lambda item: item["updated_at"], reverse=True)
+
+def canvas_path(canvas_id):
+    cleaned = re.sub(r"[^a-zA-Z0-9_-]", "", canvas_id or "")
+    if not cleaned:
+        raise HTTPException(status_code=400, detail="无效的画布 ID")
+    return os.path.join(CANVAS_DIR, f"{cleaned}.json")
+
+def save_canvas(canvas):
+    canvas["updated_at"] = now_ms()
+    with CANVAS_LOCK:
+        with open(canvas_path(canvas["id"]), 'w', encoding='utf-8') as f:
+            json.dump(canvas, f, ensure_ascii=False, indent=2)
+
+def new_canvas(title="未命名画布", icon="layers"):
+    timestamp = now_ms()
+    canvas = {
+        "id": uuid.uuid4().hex,
+        "title": (title or "未命名画布")[:80],
+        "icon": (icon or "🧩")[:4],
+        "created_at": timestamp,
+        "updated_at": timestamp,
+        "nodes": [],
+        "connections": [],
+        "viewport": {"x": 0, "y": 0, "scale": 1},
+    }
+    save_canvas(canvas)
+    return canvas
+
+def load_canvas(canvas_id):
+    path = canvas_path(canvas_id)
+    if not os.path.exists(path):
+        raise HTTPException(status_code=404, detail="画布不存在")
+    with open(path, 'r', encoding='utf-8') as f:
+        canvas = json.load(f)
+    if canvas.get("deleted_at"):
+        raise HTTPException(status_code=404, detail="画布已在回收站")
+    return canvas
+
+def load_canvas_any(canvas_id):
+    path = canvas_path(canvas_id)
+    if not os.path.exists(path):
+        raise HTTPException(status_code=404, detail="画布不存在")
+    with open(path, 'r', encoding='utf-8') as f:
+        return json.load(f)
+
+def canvas_record(data):
+    return {
+        "id": data.get("id"),
+        "title": data.get("title", "未命名画布"),
+        "icon": data.get("icon", "🧩"),
+        "created_at": data.get("created_at", 0),
+        "updated_at": data.get("updated_at", 0),
+        "deleted_at": data.get("deleted_at", 0),
+        "node_count": len(data.get("nodes", [])),
+    }
+
+def cleanup_expired_canvas_trash():
+    cutoff = now_ms() - CANVAS_TRASH_RETENTION_MS
+    with CANVAS_LOCK:
+        for filename in os.listdir(CANVAS_DIR):
+            if not filename.endswith(".json"):
+                continue
+            path = os.path.join(CANVAS_DIR, filename)
+            try:
+                with open(path, 'r', encoding='utf-8') as f:
+                    data = json.load(f)
+                deleted_at = int(data.get("deleted_at") or 0)
+                if deleted_at and deleted_at < cutoff:
+                    os.remove(path)
+            except Exception:
+                continue
+
+def iter_canvas_records(include_deleted=False):
+    cleanup_expired_canvas_trash()
+    records = []
+    for filename in os.listdir(CANVAS_DIR):
+        if not filename.endswith(".json"):
+            continue
+        try:
+            with open(os.path.join(CANVAS_DIR, filename), 'r', encoding='utf-8') as f:
+                data = json.load(f)
+        except Exception:
+            continue
+        is_deleted = bool(data.get("deleted_at"))
+        if include_deleted != is_deleted:
+            continue
+        records.append(canvas_record(data))
+    return records
+
+def list_canvases():
+    records = iter_canvas_records(include_deleted=False)
+    return sorted(records, key=lambda item: item["updated_at"], reverse=True)
+
+def list_deleted_canvases():
+    records = iter_canvas_records(include_deleted=True)
+    return sorted(records, key=lambda item: item["deleted_at"], reverse=True)
+
+def display_title(text):
+    title = re.sub(r"\s+", " ", text or "").strip()
+    return title[:24] or "新对话"
+
+def resolve_chat_provider(provider: str, model: str, ms_model: str):
+    if provider == "modelscope":
+        if not MODELSCOPE_API_KEY:
+            raise HTTPException(status_code=400, detail="未配置 MODELSCOPE_API_KEY，请在 API/.env 中填写。")
+        base = MODELSCOPE_CHAT_BASE_URL
+        hdrs = {"Authorization": f"Bearer {MODELSCOPE_API_KEY}", "Content-Type": "application/json"}
+        mdl = selected_model(ms_model or model, MODELSCOPE_CHAT_MODELS[0] if MODELSCOPE_CHAT_MODELS else "MiniMax/MiniMax-M2.7")
+        return base, hdrs, mdl
+    base = AI_BASE_URL + "/v1"
+    hdrs = api_headers()
+    mdl = selected_model(model, CHAT_MODEL)
+    return base, hdrs, mdl
+
+def api_headers(json_body=True):
+    if not AI_API_KEY:
+        raise HTTPException(status_code=400, detail="未配置 COMFLY_API_KEY，请在 API/.env 中填写。")
+    headers = {"Accept": "application/json", "Authorization": f"Bearer {AI_API_KEY}"}
+    if json_body:
+        headers["Content-Type"] = "application/json"
+    return headers
+
+def selected_model(requested, fallback):
+    model = (requested or fallback).strip()
+    if not model:
+        raise HTTPException(status_code=400, detail="模型名称不能为空")
+    if len(model) > 120 or not re.fullmatch(r"[a-zA-Z0-9_.:/+-]+", model):
+        raise HTTPException(status_code=400, detail=f"模型名称不合法：{model}")
+    return model
+
+def text_from_chat_response(data):
+    choices = data.get("choices") or []
+    if not choices:
+        return ""
+    message = choices[0].get("message") or {}
+    content = message.get("content", "")
+    if isinstance(content, str):
+        return content
+    if isinstance(content, list):
+        parts = []
+        for item in content:
+            if isinstance(item, dict):
+                parts.append(item.get("text") or item.get("content") or "")
+        return "\n".join(part for part in parts if part)
+    return str(content)
+
+def text_delta_from_chat_chunk(data):
+    choices = data.get("choices") or []
+    if not choices:
+        return ""
+    delta = choices[0].get("delta") or {}
+    content = delta.get("content", "")
+    if isinstance(content, str):
+        return content
+    if isinstance(content, list):
+        parts = []
+        for item in content:
+            if isinstance(item, dict):
+                parts.append(item.get("text") or item.get("content") or "")
+        return "".join(parts)
+    return str(content) if content else ""
+
+def sse_event(data):
+    return f"data: {json.dumps(data, ensure_ascii=False)}\n\n"
+
+def extract_image(data):
+    if isinstance(data.get("data"), dict) and isinstance(data["data"].get("data"), dict):
+        data = data["data"]["data"]
+    images = data.get("data") or []
+    if not images:
+        raise HTTPException(status_code=502, detail="生图接口没有返回图片数据")
+    first = images[0]
+    if first.get("url"):
+        return {"type": "url", "value": first["url"]}
+    if first.get("b64_json"):
+        return {"type": "b64", "value": first["b64_json"]}
+    raise HTTPException(status_code=502, detail="无法识别生图接口返回格式")
+
+def extract_task_id(data):
+    if data.get("task_id"):
+        return str(data["task_id"])
+    if data.get("id") and str(data.get("id", "")).startswith("task"):
+        return str(data["id"])
+    nested = data.get("data")
+    if isinstance(nested, dict):
+        return extract_task_id(nested)
+    return None
+
+async def wait_for_image_task(client, task_id):
+    deadline = time.monotonic() + AI_REQUEST_TIMEOUT
+    last_payload = {}
+    while time.monotonic() < deadline:
+        response = await client.get(f"{AI_BASE_URL}/v1/images/tasks/{task_id}", headers=api_headers())
+        response.raise_for_status()
+        last_payload = response.json()
+        task_data = last_payload.get("data") if isinstance(last_payload.get("data"), dict) else last_payload
+        status = str(task_data.get("status", "")).upper()
+        if status == "SUCCESS":
+            return last_payload
+        if status == "FAILURE":
+            reason = task_data.get("fail_reason") or last_payload.get("message") or "生图任务失败"
+            raise HTTPException(status_code=502, detail=f"生图任务失败：{reason}")
+        await asyncio.sleep(IMAGE_POLL_INTERVAL)
+    raise HTTPException(status_code=504, detail=f"生图任务超时，task_id={task_id}")
+
+def output_file_from_url(url):
+    if not url or not url.startswith("/output/"):
+        return None
+    filename = os.path.basename(urllib.parse.unquote(url.split("?", 1)[0]))
+    path = os.path.abspath(os.path.join(OUTPUT_DIR, filename))
+    output_root = os.path.abspath(OUTPUT_DIR)
+    if os.path.commonpath([output_root, path]) != output_root or not os.path.exists(path):
+        return None
+    return path
+
+def content_type_for_path(path):
+    ext = os.path.splitext(path)[1].lower()
+    if ext in [".jpg", ".jpeg"]:
+        return "image/jpeg"
+    if ext == ".webp":
+        return "image/webp"
+    return "image/png"
+
+def convert_output_to_jpg(url, quality=88):
+    path = output_file_from_url(url)
+    if not path:
+        return url
+    root, ext = os.path.splitext(path)
+    if ext.lower() in [".jpg", ".jpeg"]:
+        return url
+    jpg_path = f"{root}.jpg"
+    try:
+        with Image.open(path) as img:
+            if img.mode in ("RGBA", "LA") or (img.mode == "P" and "transparency" in img.info):
+                bg = Image.new("RGB", img.size, (255, 255, 255))
+                bg.paste(img.convert("RGBA"), mask=img.convert("RGBA").split()[-1])
+                img = bg
+            else:
+                img = img.convert("RGB")
+            img.save(jpg_path, "JPEG", quality=quality, optimize=True)
+        return f"/output/{os.path.basename(jpg_path)}"
+    except Exception as e:
+        print(f"转换 JPG 失败: {e}")
+        return url
+
+def reference_to_data_url(ref):
+    path = output_file_from_url(ref.get("url", ""))
+    if not path:
+        return ref.get("url", "")
+    with open(path, "rb") as f:
+        encoded = base64.b64encode(f.read()).decode("ascii")
+    return f"data:{content_type_for_path(path)};base64,{encoded}"
+
+async def save_ai_image_to_output(image_data, prefix="online_"):
+    filename = f"{prefix}{uuid.uuid4().hex[:10]}.png"
+    path = os.path.join(OUTPUT_DIR, filename)
+    if image_data["type"] == "b64":
+        with open(path, "wb") as f:
+            f.write(base64.b64decode(image_data["value"]))
+        return f"/output/{filename}"
+    value = image_data["value"]
+    if value.startswith("/output/"):
+        return value
+    try:
+        async with httpx.AsyncClient(timeout=AI_REQUEST_TIMEOUT) as client:
+            response = await client.get(value)
+            response.raise_for_status()
+            content_type = response.headers.get("Content-Type", "")
+            if "jpeg" in content_type or "jpg" in content_type:
+                filename = filename[:-4] + ".jpg"
+                path = os.path.join(OUTPUT_DIR, filename)
+            elif "webp" in content_type:
+                filename = filename[:-4] + ".webp"
+                path = os.path.join(OUTPUT_DIR, filename)
+            with open(path, "wb") as f:
+                f.write(response.content)
+            return f"/output/{filename}"
+    except Exception as e:
+        print(f"保存上游图片失败: {e}")
+        return value
+
+async def generate_ai_image(prompt, size, quality, model, reference_images=None):
+    refs = [ref for ref in (reference_images or []) if ref.get("url")]
+    async with httpx.AsyncClient(timeout=AI_REQUEST_TIMEOUT) as client:
+        if refs:
+            files = []
+            opened = []
+            try:
+                for ref in refs[:4]:
+                    path = output_file_from_url(ref.get("url", ""))
+                    if not path:
+                        continue
+                    fh = open(path, "rb")
+                    opened.append(fh)
+                    files.append(("image", (os.path.basename(path), fh, content_type_for_path(path))))
+                data = {"model": model, "prompt": prompt, "size": size, "quality": quality, "response_format": "url", "n": "1"}
+                response = await client.post(f"{AI_BASE_URL}/v1/images/edits", headers=api_headers(json_body=False), data=data, files=files)
+            finally:
+                for fh in opened:
+                    fh.close()
+        else:
+            response = await client.post(
+                f"{AI_BASE_URL}/v1/images/generations",
+                headers=api_headers(),
+                json={"model": model, "prompt": prompt, "size": size, "quality": quality, "response_format": "url", "n": 1},
+            )
+        response.raise_for_status()
+        raw = response.json()
+        try:
+            return extract_image(raw), raw
+        except HTTPException:
+            task_id = extract_task_id(raw)
+            if not task_id:
+                raise
+        task_result = await wait_for_image_task(client, task_id)
+        return extract_image(task_result), task_result
+
+def upstream_message_from_record(item):
+    role = item.get("role")
+    if role not in {"user", "assistant"} or item.get("type") == "image":
+        return None
+    refs = item.get("attachments") or []
+    if refs and role == "user":
+        content = [{"type": "text", "text": item.get("content", "")}]
+        for ref in refs[:4]:
+            url = reference_to_data_url(ref)
+            if url:
+                content.append({"type": "image_url", "image_url": {"url": url}})
+        return {"role": role, "content": content}
+    return {"role": role, "content": item.get("content", "")}
+
+# --- 路由接口 ---
+
+@app.get("/")
+async def index():
+    return FileResponse(os.path.join(STATIC_DIR, "index.html"))
+
+@app.get("/api/view")
+def view_image(filename: str, type: str = "input", subfolder: str = ""):
+    for addr in COMFYUI_INSTANCES:
+        try:
+            url = f"http://{addr}/view"
+            params = {"filename": filename, "type": type, "subfolder": subfolder}
+            r = requests.get(url, params=params, timeout=1)
+            if r.status_code == 200:
+                return Response(content=r.content, media_type=r.headers.get('Content-Type'))
+        except Exception:
+            continue
+    raise HTTPException(status_code=404, detail="Image not found on any available backend")
+
+@app.get("/api/download-output")
+def download_output(url: str, name: str = ""):
+    path = output_file_from_url(url)
+    if not path:
+        raise HTTPException(status_code=404, detail="文件不存在")
+    filename = os.path.basename(name) if name else os.path.basename(path)
+    return FileResponse(path, media_type=content_type_for_path(path), filename=filename)
+
+@app.post("/api/upload")
+async def upload_image(files: List[UploadFile] = File(...)):
+    uploaded_files = []
+    files_content = []
+    for file in files:
+        content = await file.read()
+        files_content.append((file, content))
+
+    for file, content in files_content:
+        success_count = 0
+        last_result = None
+        for addr in COMFYUI_INSTANCES:
+            try:
+                files_data = {'image': (file.filename, content, file.content_type)}
+                response = requests.post(f"http://{addr}/upload/image", files=files_data, timeout=5)
+                if response.status_code == 200:
+                    last_result = response.json()
+                    success_count += 1
+            except Exception as e:
+                print(f"Upload error for {addr}: {e}")
+
+        if success_count > 0 and last_result:
+            uploaded_files.append({"comfy_name": last_result.get("name", file.filename)})
+        else:
+            raise HTTPException(status_code=500, detail="Failed to upload to any backend")
+
+    return {"files": uploaded_files}
+
+@app.post("/api/ai/upload")
+async def upload_ai_reference(files: List[UploadFile] = File(...)):
+    uploaded = []
+    for file in files:
+        content = await file.read()
+        if not content:
+            continue
+        ext = os.path.splitext(file.filename or "")[1].lower()
+        if ext not in [".png", ".jpg", ".jpeg", ".webp"]:
+            content_type = (file.content_type or "").lower()
+            ext = ".jpg" if "jpeg" in content_type else ".webp" if "webp" in content_type else ".png"
+        filename = f"ai_ref_{uuid.uuid4().hex[:12]}{ext}"
+        path = os.path.join(OUTPUT_DIR, filename)
+        with open(path, "wb") as f:
+            f.write(content)
+        uploaded.append({"url": f"/output/{filename}", "name": file.filename or filename})
+    return {"files": uploaded}
+
+@app.get("/api/config")
+async def ai_config():
+    preferred_chat_model = next((m for m in CHAT_MODELS if m == "gpt-5.5"), CHAT_MODELS[0] if CHAT_MODELS else CHAT_MODEL)
+    return {
+        "base_url": AI_BASE_URL,
+        "chat_model": preferred_chat_model,
+        "image_model": IMAGE_MODEL,
+        "chat_models": CHAT_MODELS,
+        "image_models": IMAGE_MODELS,
+        "has_api_key": bool(AI_API_KEY),
+        "ms_chat_models": MODELSCOPE_CHAT_MODELS,
+        "has_ms_key": bool(MODELSCOPE_API_KEY),
+    }
+
+@app.get("/api/models")
+async def ai_models():
+    return {"chat_models": CHAT_MODELS, "image_models": IMAGE_MODELS}
+
+# --- ModelScope Token (从 env 读取，不再支持通过 UI 修改) ---
+
+@app.get("/api/config/token")
+async def get_global_token():
+    # 优先读 env，回退到 global_config.json（兼容旧数据）
+    if MODELSCOPE_API_KEY:
+        return {"token": MODELSCOPE_API_KEY}
+    if os.path.exists(GLOBAL_CONFIG_FILE):
+        try:
+            with open(GLOBAL_CONFIG_FILE, 'r', encoding='utf-8') as f:
+                config = json.load(f)
+                return {"token": config.get("modelscope_token", "")}
+        except:
+            pass
+    return {"token": ""}
+
+# --- 在线生图 (COMFLY) ---
+
+@app.post("/api/online-image")
+async def online_image(payload: OnlineImageRequest):
+    model = selected_model(payload.model, IMAGE_MODEL)
+    refs = [ref.dict() for ref in payload.reference_images if ref.url]
+    try:
+        image_data, raw = await generate_ai_image(payload.prompt, payload.size, payload.quality, model, refs)
+        local_url = await save_ai_image_to_output(image_data, prefix="online_")
+    except httpx.HTTPStatusError as exc:
+        raise HTTPException(status_code=exc.response.status_code, detail=f"上游生图接口错误：{exc.response.text}") from exc
+    except httpx.HTTPError as exc:
+        raise HTTPException(status_code=502, detail=f"请求上游生图接口失败：{exc}") from exc
+
+    result = {
+        "prompt": payload.prompt,
+        "images": [local_url],
+        "timestamp": time.time(),
+        "type": "online",
+        "model": model,
+        "params": {"model": model, "size": payload.size, "quality": payload.quality, "reference_images": refs},
+        "raw_usage": raw.get("usage") if isinstance(raw, dict) else None,
+    }
+    save_to_history(result)
+    if GLOBAL_LOOP:
+        asyncio.run_coroutine_threadsafe(manager.broadcast_new_image(result), GLOBAL_LOOP)
+    return result
+
+# --- Canvas LLM ---
+
+@app.post("/api/canvas-llm")
+async def canvas_llm(payload: CanvasLLMRequest):
+    chat_base, chat_hdrs, model = resolve_chat_provider(payload.provider, payload.model, payload.ms_model)
+    upstream_messages = [{"role": "system", "content": payload.system_prompt or SYSTEM_PROMPT}]
+    for item in payload.messages[-MAX_HISTORY_MESSAGES:]:
+        role = item.get("role")
+        content = item.get("content")
+        if role in {"user", "assistant"} and content:
+            upstream_messages.append({"role": role, "content": content})
+    upstream_messages.append({"role": "user", "content": payload.message})
+    try:
+        async with httpx.AsyncClient(timeout=AI_REQUEST_TIMEOUT) as client:
+            response = await client.post(
+                f"{chat_base}/chat/completions",
+                headers=chat_hdrs,
+                json={"model": model, "messages": upstream_messages},
+            )
+            response.raise_for_status()
+            if not response.content:
+                raise HTTPException(status_code=502, detail="上游接口返回了空响应")
+            raw = response.json()
+    except httpx.HTTPStatusError as exc:
+        raise HTTPException(status_code=exc.response.status_code, detail=f"上游接口错误：{exc.response.text}") from exc
+    except httpx.HTTPError as exc:
+        raise HTTPException(status_code=502, detail=f"请求上游接口失败：{exc}") from exc
+    text = text_from_chat_response(raw).strip() or "接口返回了空回复。"
+    return {"text": text, "model": model, "raw_usage": raw.get("usage") if isinstance(raw, dict) else None}
+
+# --- 对话管理 ---
+
+@app.get("/api/conversations")
+async def conversations(request: Request, x_user_id: str = Header(default="")):
+    user_id = safe_user_id(x_user_id, request)
+    return {"user_id": user_id, "conversations": list_conversations(user_id)}
+
+@app.post("/api/conversations")
+async def create_conversation(payload: ConversationCreateRequest, request: Request, x_user_id: str = Header(default="")):
+    user_id = safe_user_id(x_user_id, request)
+    return {"conversation": new_conversation(user_id, payload.title)}
+
+@app.get("/api/conversations/{conversation_id}")
+async def get_conversation(conversation_id: str, request: Request, x_user_id: str = Header(default="")):
+    user_id = safe_user_id(x_user_id, request)
+    return {"conversation": load_conversation(user_id, conversation_id)}
+
+@app.delete("/api/conversations/{conversation_id}")
+async def delete_conversation(conversation_id: str, request: Request, x_user_id: str = Header(default="")):
+    user_id = safe_user_id(x_user_id, request)
+    path = conversation_path(user_id, conversation_id)
+    if os.path.exists(path):
+        os.remove(path)
+    return {"ok": True}
+
+# --- 画布管理 ---
+
+@app.get("/api/canvases")
+async def canvases():
+    return {"canvases": list_canvases()}
+
+@app.get("/api/canvases/trash")
+async def trashed_canvases():
+    return {"canvases": list_deleted_canvases(), "retention_days": 30}
+
+@app.post("/api/canvases")
+async def create_canvas(payload: CanvasCreateRequest):
+    return {"canvas": new_canvas(payload.title, payload.icon)}
+
+@app.get("/api/canvases/{canvas_id}")
+async def get_canvas(canvas_id: str):
+    return {"canvas": load_canvas(canvas_id)}
+
+@app.put("/api/canvases/{canvas_id}")
+async def update_canvas(canvas_id: str, payload: CanvasSaveRequest):
+    canvas = load_canvas(canvas_id)
+    canvas["title"] = (payload.title or canvas.get("title") or "未命名画布")[:80]
+    canvas["icon"] = (payload.icon or canvas.get("icon") or "layers")[:32]
+    canvas["nodes"] = payload.nodes
+    canvas["connections"] = payload.connections
+    canvas["viewport"] = payload.viewport
+    save_canvas(canvas)
+    return {"canvas": canvas}
+
+@app.delete("/api/canvases/{canvas_id}")
+async def delete_canvas(canvas_id: str):
+    canvas = load_canvas_any(canvas_id)
+    if not canvas.get("deleted_at"):
+        canvas["deleted_at"] = now_ms()
+        save_canvas(canvas)
+    return {"ok": True}
+
+@app.post("/api/canvases/{canvas_id}/restore")
+async def restore_canvas(canvas_id: str):
+    canvas = load_canvas_any(canvas_id)
+    if canvas.get("deleted_at"):
+        canvas.pop("deleted_at", None)
+        save_canvas(canvas)
+    return {"canvas": canvas}
+
+@app.delete("/api/canvases/{canvas_id}/purge")
+async def purge_canvas(canvas_id: str):
+    path = canvas_path(canvas_id)
+    if os.path.exists(path):
+        os.remove(path)
+    return {"ok": True}
+
+# --- GPT 对话 ---
+
+@app.post("/api/chat")
+async def chat(payload: ChatRequest, request: Request, x_user_id: str = Header(default="")):
+    user_id = safe_user_id(x_user_id, request)
+    conversation = (
+        load_conversation(user_id, payload.conversation_id)
+        if payload.conversation_id
+        else new_conversation(user_id, display_title(payload.message))
+    )
+    if not conversation.get("messages"):
+        conversation["title"] = display_title(payload.message)
+
+    refs = [ref.dict() for ref in payload.reference_images if ref.url]
+    user_message = {
+        "id": uuid.uuid4().hex,
+        "role": "user",
+        "content": payload.message,
+        "created_at": now_ms(),
+        "attachments": refs,
+        "mode": payload.mode,
+    }
+    conversation["messages"].append(user_message)
+    conversation["updated_at"] = now_ms()
+    save_conversation(user_id, conversation)
+
+    if payload.mode == "image":
+        model = selected_model(payload.image_model or payload.model, IMAGE_MODEL)
+        try:
+            image_data, raw = await generate_ai_image(payload.message, payload.size, payload.quality, model, refs)
+            local_url = await save_ai_image_to_output(image_data, prefix="chat_")
+        except httpx.HTTPStatusError as exc:
+            raise HTTPException(status_code=exc.response.status_code, detail=f"上游生图接口错误：{exc.response.text}") from exc
+        except httpx.HTTPError as exc:
+            raise HTTPException(status_code=502, detail=f"请求上游生图接口失败：{exc}") from exc
+        assistant_message = {
+            "id": uuid.uuid4().hex,
+            "role": "assistant",
+            "type": "image",
+            "content": payload.message,
+            "image_url": local_url,
+            "created_at": now_ms(),
+            "model": model,
+            "raw_usage": raw.get("usage") if isinstance(raw, dict) else None,
+        }
+    else:
+        chat_base, chat_hdrs, model = resolve_chat_provider(payload.provider, payload.model, payload.ms_model)
+        history = conversation["messages"][-MAX_HISTORY_MESSAGES:]
+        upstream_messages = [{"role": "system", "content": SYSTEM_PROMPT}]
+        for item in history:
+            msg = upstream_message_from_record(item)
+            if msg:
+                upstream_messages.append(msg)
+        try:
+            async with httpx.AsyncClient(timeout=AI_REQUEST_TIMEOUT) as client:
+                response = await client.post(
+                    f"{chat_base}/chat/completions",
+                    headers=chat_hdrs,
+                    json={"model": model, "messages": upstream_messages},
+                )
+                response.raise_for_status()
+                raw = response.json()
+        except httpx.HTTPStatusError as exc:
+            raise HTTPException(status_code=exc.response.status_code, detail=f"上游接口错误：{exc.response.text}") from exc
+        except httpx.HTTPError as exc:
+            raise HTTPException(status_code=502, detail=f"请求上游接口失败：{exc}") from exc
+        assistant_message = {
+            "id": uuid.uuid4().hex,
+            "role": "assistant",
+            "content": text_from_chat_response(raw).strip() or "接口返回了空回复。",
+            "created_at": now_ms(),
+            "model": model,
+            "raw_usage": raw.get("usage") if isinstance(raw, dict) else None,
+        }
+
+    conversation["messages"].append(assistant_message)
+    conversation["updated_at"] = now_ms()
+    save_conversation(user_id, conversation)
+    return {"conversation": conversation, "message": assistant_message}
+
+@app.post("/api/chat/stream")
+async def chat_stream(payload: ChatRequest, request: Request, x_user_id: str = Header(default="")):
+    if payload.mode == "image":
+        raise HTTPException(status_code=400, detail="图片模式请使用 /api/chat")
+
+    user_id = safe_user_id(x_user_id, request)
+    conversation = (
+        load_conversation(user_id, payload.conversation_id)
+        if payload.conversation_id
+        else new_conversation(user_id, display_title(payload.message))
+    )
+    if not conversation.get("messages"):
+        conversation["title"] = display_title(payload.message)
+
+    refs = [ref.dict() for ref in payload.reference_images if ref.url]
+    user_message = {
+        "id": uuid.uuid4().hex,
+        "role": "user",
+        "content": payload.message,
+        "created_at": now_ms(),
+        "attachments": refs,
+        "mode": payload.mode,
+    }
+    conversation["messages"].append(user_message)
+    conversation["updated_at"] = now_ms()
+    save_conversation(user_id, conversation)
+
+    chat_base, chat_hdrs, model = resolve_chat_provider(payload.provider, payload.model, payload.ms_model)
+    history = conversation["messages"][-MAX_HISTORY_MESSAGES:]
+    upstream_messages = [{"role": "system", "content": SYSTEM_PROMPT}]
+    for item in history:
+        msg = upstream_message_from_record(item)
+        if msg:
+            upstream_messages.append(msg)
+
+    async def stream():
+        content_parts = []
+        raw_usage = None
+        yield sse_event({"type": "meta", "conversation": conversation})
+        try:
+            async with httpx.AsyncClient(timeout=AI_REQUEST_TIMEOUT) as client:
+                async with client.stream(
+                    "POST",
+                    f"{chat_base}/chat/completions",
+                    headers=chat_hdrs,
+                    json={"model": model, "messages": upstream_messages, "stream": True},
+                ) as response:
+                    if response.status_code >= 400:
+                        detail = await response.aread()
+                        yield sse_event({"type": "error", "detail": f"上游接口错误：{detail.decode('utf-8', errors='ignore')}"})
+                        return
+                    async for line in response.aiter_lines():
+                        if not line:
+                            continue
+                        if line.startswith("data:"):
+                            line = line[5:].strip()
+                        if line == "[DONE]":
+                            break
+                        try:
+                            chunk = json.loads(line)
+                        except json.JSONDecodeError:
+                            continue
+                        if isinstance(chunk, dict) and chunk.get("usage"):
+                            raw_usage = chunk.get("usage")
+                        delta = text_delta_from_chat_chunk(chunk)
+                        if delta:
+                            content_parts.append(delta)
+                            yield sse_event({"type": "delta", "delta": delta})
+        except httpx.HTTPError as exc:
+            yield sse_event({"type": "error", "detail": f"请求上游接口失败：{exc}"})
+            return
+
+        assistant_message = {
+            "id": uuid.uuid4().hex,
+            "role": "assistant",
+            "content": "".join(content_parts).strip() or "接口返回了空回复。",
+            "created_at": now_ms(),
+            "model": model,
+            "raw_usage": raw_usage,
+        }
+        conversation["messages"].append(assistant_message)
+        conversation["updated_at"] = now_ms()
+        save_conversation(user_id, conversation)
+        yield sse_event({"type": "done", "conversation": conversation, "message": assistant_message})
+
+    return StreamingResponse(stream(), media_type="text/event-stream")
+
+# --- 历史记录 ---
+
+@app.get("/api/history")
+async def get_history_api(type: str = None):
+    if os.path.exists(HISTORY_FILE):
+        try:
+            with open(HISTORY_FILE, 'r', encoding='utf-8') as f:
+                data = json.load(f)
+                if type:
+                    data = [item for item in data if item.get("type", "zimage") == type]
+                data = [item for item in data if item.get("images") and len(item["images"]) > 0]
+
+                def sort_key(item):
+                    ts = item.get("timestamp", 0)
+                    if isinstance(ts, (int, float)):
+                        return float(ts)
+                    return 0
+
+                data.sort(key=sort_key, reverse=True)
+                return data
+        except Exception as e:
+            print(f"读取历史文件失败: {e}")
+            return []
+    return []
+
+@app.get("/api/queue_status")
+async def get_queue_status(client_id: str):
+    with QUEUE_LOCK:
+        total = len(QUEUE)
+        positions = [i + 1 for i, t in enumerate(QUEUE) if t["client_id"] == client_id]
+        position = positions[0] if positions else 0
+    return {"total": total, "position": position}
+
+@app.post("/api/history/delete")
+async def delete_history(req: DeleteHistoryRequest):
+    if not os.path.exists(HISTORY_FILE):
+        return {"success": False, "message": "History file not found"}
+    try:
+        with HISTORY_LOCK:
+            with open(HISTORY_FILE, 'r', encoding='utf-8') as f:
+                history = json.load(f)
+            target_record = None
+            new_history = []
+            for item in history:
+                is_match = False
+                item_ts = item.get("timestamp", 0)
+                if isinstance(req.timestamp, (int, float)) and isinstance(item_ts, (int, float)):
+                    if abs(float(item_ts) - float(req.timestamp)) < 0.001:
+                        is_match = True
+                elif str(item_ts) == str(req.timestamp):
+                    is_match = True
+                if is_match:
+                    target_record = item
+                else:
+                    new_history.append(item)
+            if target_record:
+                with open(HISTORY_FILE, 'w', encoding='utf-8') as f:
+                    json.dump(new_history, f, ensure_ascii=False, indent=4)
+
+        if target_record:
+            for img_url in target_record.get("images", []):
+                if img_url.startswith("/output/"):
+                    filename = img_url.split("/")[-1]
+                    file_path = os.path.join(OUTPUT_DIR, filename)
+                    if os.path.exists(file_path):
+                        try:
+                            os.remove(file_path)
+                        except Exception as e:
+                            print(f"Failed to delete file {file_path}: {e}")
+            return {"success": True}
+        else:
+            return {"success": False, "message": "Record not found"}
+    except Exception as e:
+        print(f"Delete history error: {e}")
+        return {"success": False, "message": str(e)}
+
+# --- ModelScope 角度控制 ---
+
+@app.post("/api/angle/poll_status")
+async def poll_angle_cloud(req: CloudPollRequest):
+    base_url = 'https://api-inference.modelscope.cn/'
+    clean_token = (req.api_key or MODELSCOPE_API_KEY).strip()
+    if not clean_token:
+        raise HTTPException(status_code=400, detail="未提供 ModelScope API Key")
+
+    headers = {
+        "Authorization": f"Bearer {clean_token}",
+        "Content-Type": "application/json",
+        "X-ModelScope-Async-Mode": "true"
+    }
+    task_id = req.task_id
+    print(f"Resuming polling for Angle Task: {task_id}")
+
+    try:
+        async with httpx.AsyncClient(timeout=30) as client:
+            for i in range(300):
+                await asyncio.sleep(2)
+                try:
+                    result = await client.get(
+                        f"{base_url}v1/tasks/{task_id}",
+                        headers={**headers, "X-ModelScope-Task-Type": "image_generation"},
+                    )
+                    data = result.json()
+                    status = data.get("task_status")
+
+                    if status == "SUCCEED":
+                        img_url = data["output_images"][0]
+                        local_path = ""
+                        try:
+                            async with httpx.AsyncClient() as dl_client:
+                                img_res = await dl_client.get(img_url)
+                                if img_res.status_code == 200:
+                                    filename = f"cloud_angle_{int(time.time())}.png"
+                                    file_path = os.path.join(OUTPUT_DIR, filename)
+                                    with open(file_path, "wb") as f:
+                                        f.write(img_res.content)
+                                    local_path = f"/output/{filename}"
+                                else:
+                                    local_path = img_url
+                        except Exception:
+                            local_path = img_url
+
+                        record = {"timestamp": time.time(), "prompt": f"Resumed {task_id}", "images": [local_path], "type": "angle"}
+                        save_to_history(record)
+                        if req.client_id:
+                            await manager.send_personal_message({"type": "cloud_status", "status": "SUCCEED", "task_id": task_id}, req.client_id)
+                        return {"url": local_path}
+
+                    elif status == "FAILED":
+                        if req.client_id:
+                            await manager.send_personal_message({"type": "cloud_status", "status": "FAILED", "task_id": task_id}, req.client_id)
+                        raise Exception(f"ModelScope task failed: {data}")
+
+                    if i % 5 == 0 and req.client_id:
+                        await manager.send_personal_message({
+                            "type": "cloud_status", "status": f"{status} ({i}/300)",
+                            "task_id": task_id, "progress": i, "total": 300
+                        }, req.client_id)
+
+                except Exception as loop_e:
+                    print(f"Angle polling error: {loop_e}")
+                    continue
+
+            if req.client_id:
+                await manager.send_personal_message({"type": "cloud_status", "status": "TIMEOUT", "task_id": task_id}, req.client_id)
+            return {"status": "timeout", "task_id": task_id, "message": "Task still pending"}
+
+    except Exception as e:
+        print(f"Angle polling error: {e}")
+        raise HTTPException(status_code=400, detail=str(e))
+
+@app.post("/api/angle/generate")
+async def generate_angle_cloud(req: CloudGenRequest):
+    base_url = 'https://api-inference.modelscope.cn/'
+    clean_token = (req.api_key or MODELSCOPE_API_KEY).strip()
+    if not clean_token:
+        raise HTTPException(status_code=400, detail="未提供 ModelScope API Key")
+
+    headers = {
+        "Authorization": f"Bearer {clean_token}",
+        "Content-Type": "application/json",
+        "X-ModelScope-Async-Mode": "true"
+    }
+    payload = {
+        "model": "Qwen/Qwen-Image-Edit-2511",
+        "prompt": req.prompt.strip(),
+        "image_url": req.image_urls
+    }
+
+    try:
+        async with httpx.AsyncClient(timeout=30) as client:
+            submit_res = await client.post(f"{base_url}v1/images/generations", headers=headers, json=payload)
+            if submit_res.status_code != 200:
+                try:
+                    detail = submit_res.json()
+                except:
+                    detail = submit_res.text
+                raise HTTPException(status_code=submit_res.status_code, detail=detail)
+
+            task_id = submit_res.json().get("task_id")
+            print(f"Angle Task submitted, ID: {task_id}")
+
+            for i in range(300):
+                await asyncio.sleep(2)
+                try:
+                    result = await client.get(
+                        f"{base_url}v1/tasks/{task_id}",
+                        headers={**headers, "X-ModelScope-Task-Type": "image_generation"},
+                    )
+                    data = result.json()
+                    status = data.get("task_status")
+
+                    if status == "SUCCEED":
+                        img_url = data["output_images"][0]
+                        local_path = ""
+                        try:
+                            async with httpx.AsyncClient() as dl_client:
+                                img_res = await dl_client.get(img_url)
+                                if img_res.status_code == 200:
+                                    filename = f"cloud_angle_{int(time.time())}.png"
+                                    file_path = os.path.join(OUTPUT_DIR, filename)
+                                    with open(file_path, "wb") as f:
+                                        f.write(img_res.content)
+                                    local_path = f"/output/{filename}"
+                                else:
+                                    local_path = img_url
+                        except Exception:
+                            local_path = img_url
+
+                        record = {"timestamp": time.time(), "prompt": req.prompt, "images": [local_path], "type": "angle"}
+                        save_to_history(record)
+                        if req.client_id:
+                            await manager.send_personal_message({"type": "cloud_status", "status": "SUCCEED", "task_id": task_id}, req.client_id)
+                        if GLOBAL_LOOP:
+                            asyncio.run_coroutine_threadsafe(manager.broadcast_new_image(record), GLOBAL_LOOP)
+                        return {"url": local_path, "task_id": task_id}
+
+                    elif status == "FAILED":
+                        if req.client_id:
+                            await manager.send_personal_message({"type": "cloud_status", "status": "FAILED", "task_id": task_id}, req.client_id)
+                        raise Exception(f"ModelScope task failed: {data}")
+
+                    if i % 5 == 0 and req.client_id:
+                        await manager.send_personal_message({
+                            "type": "cloud_status", "status": f"{status} ({i}/300)",
+                            "task_id": task_id, "progress": i, "total": 300
+                        }, req.client_id)
+
+                except Exception as loop_e:
+                    print(f"Angle polling error: {loop_e}")
+                    continue
+
+            if req.client_id:
+                await manager.send_personal_message({"type": "cloud_status", "status": "TIMEOUT", "task_id": task_id}, req.client_id)
+            return {"status": "timeout", "task_id": task_id, "message": "Task still pending"}
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        print(f"Angle generation error: {e}")
+        raise HTTPException(status_code=400, detail=str(e))
+
+# --- ModelScope Z-Image 云端生图 ---
+
+@app.post("/generate")
+async def generate_cloud(req: CloudGenRequest):
+    base_url = 'https://api-inference.modelscope.cn/'
+    clean_token = (req.api_key or MODELSCOPE_API_KEY).strip()
+    if not clean_token:
+        raise HTTPException(status_code=400, detail="未提供 ModelScope API Key")
+
+    headers = {
+        "Authorization": f"Bearer {clean_token}",
+        "Content-Type": "application/json",
+    }
+    payload = {
+        "model": "Tongyi-MAI/Z-Image-Turbo",
+        "prompt": req.prompt.strip(),
+        "size": req.resolution,
+        "n": 1
+    }
+
+    try:
+        async with httpx.AsyncClient(timeout=30) as client:
+            submit_res = await client.post(
+                f"{base_url}v1/images/generations",
+                headers={**headers, "X-ModelScope-Async-Mode": "true"},
+                json=payload
+            )
+            if submit_res.status_code != 200:
+                try:
+                    detail = submit_res.json()
+                except:
+                    detail = submit_res.text
+                raise HTTPException(status_code=submit_res.status_code, detail=detail)
+
+            task_id = submit_res.json().get("task_id")
+            print(f"Z-Image Task submitted, ID: {task_id}")
+
+            for i in range(200):
+                await asyncio.sleep(3)
+                try:
+                    result = await client.get(
+                        f"{base_url}v1/tasks/{task_id}",
+                        headers={**headers, "X-ModelScope-Task-Type": "image_generation"},
+                    )
+                    data = result.json()
+                    status = data.get("task_status")
+
+                    if i % 5 == 0:
+                        print(f"Task {task_id} status check {i}: {status}")
+
+                    if status == "SUCCEED":
+                        img_url = data["output_images"][0]
+                        local_path = ""
+                        try:
+                            async with httpx.AsyncClient() as dl_client:
+                                img_res = await dl_client.get(img_url)
+                                if img_res.status_code == 200:
+                                    filename = f"cloud_{int(time.time())}.png"
+                                    file_path = os.path.join(OUTPUT_DIR, filename)
+                                    with open(file_path, "wb") as f:
+                                        f.write(img_res.content)
+                                    local_path = f"/output/{filename}"
+                                else:
+                                    local_path = img_url
+                        except Exception as dl_e:
+                            print(f"Download error: {dl_e}")
+                            local_path = img_url
+
+                        record = {"timestamp": time.time(), "prompt": req.prompt, "images": [local_path], "type": "cloud"}
+                        save_to_history(record)
+                        try:
+                            await manager.broadcast_new_image(record)
+                        except Exception:
+                            pass
+                        return {"url": local_path}
+
+                    elif status == "FAILED":
+                        raise Exception(f"ModelScope task failed: {data}")
+
+                except Exception as loop_e:
+                    print(f"Polling error (retrying): {loop_e}")
+                    continue
+
+            raise Exception("Cloud generation timeout")
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        print(f"Cloud generation error: {e}")
+        raise HTTPException(status_code=400, detail=str(e))
+
+# --- ModelScope 通用图片生成（支持图生图） ---
+
+@app.post("/api/ms/generate")
+async def ms_generate(req: MsGenerateRequest):
+    base_url = 'https://api-inference.modelscope.cn/'
+    clean_token = MODELSCOPE_API_KEY.strip()
+    if not clean_token:
+        raise HTTPException(status_code=400, detail="未配置 MODELSCOPE_API_KEY，请在 API/.env 中填写。")
+
+    headers = {
+        "Authorization": f"Bearer {clean_token}",
+        "Content-Type": "application/json",
+        "X-ModelScope-Async-Mode": "true"
+    }
+    payload = {
+        "model": req.model,
+        "prompt": req.prompt.strip(),
+    }
+    if req.width and req.height:
+        payload["width"] = req.width
+        payload["height"] = req.height
+    if req.image_urls:
+        payload["image_url"] = req.image_urls
+    if req.loras is not None:
+        payload["loras"] = req.loras
+
+    try:
+        async with httpx.AsyncClient(timeout=30) as client:
+            submit_res = await client.post(
+                f"{base_url}v1/images/generations",
+                headers=headers,
+                json=payload
+            )
+            if submit_res.status_code != 200:
+                try:
+                    detail = submit_res.json()
+                except:
+                    detail = submit_res.text
+                raise HTTPException(status_code=submit_res.status_code, detail=detail)
+
+            task_id = submit_res.json().get("task_id")
+            print(f"MS Generate Task submitted ({req.model}), ID: {task_id}")
+
+            TERMINAL_FAILED_STATUSES = {"FAILED", "FAIL", "ERROR", "CANCELED", "CANCELLED", "TIMEOUT", "REVOKED"}
+
+            for i in range(300):
+                await asyncio.sleep(2)
+                try:
+                    result = await client.get(
+                        f"{base_url}v1/tasks/{task_id}",
+                        headers={**headers, "X-ModelScope-Task-Type": "image_generation"},
+                    )
+                    data = result.json()
+                    status = data.get("task_status")
+                    print(f"MS Task {task_id} poll {i}: status={status}")
+
+                    if status == "SUCCEED":
+                        img_url = data["output_images"][0]
+                        local_path = ""
+                        try:
+                            async with httpx.AsyncClient() as dl_client:
+                                img_res = await dl_client.get(img_url)
+                                if img_res.status_code == 200:
+                                    filename = f"ms_{req.model.replace('/', '_').replace(':', '_')}_{int(time.time())}.png"
+                                    file_path = os.path.join(OUTPUT_DIR, filename)
+                                    with open(file_path, "wb") as f:
+                                        f.write(img_res.content)
+                                    local_path = f"/output/{filename}"
+                                else:
+                                    local_path = img_url
+                        except Exception:
+                            local_path = img_url
+
+                        record = {
+                            "timestamp": time.time(),
+                            "prompt": req.prompt,
+                            "images": [local_path],
+                            "type": "klein",
+                            "model": req.model,
+                        }
+                        save_to_history(record)
+                        if GLOBAL_LOOP:
+                            asyncio.run_coroutine_threadsafe(manager.broadcast_new_image(record), GLOBAL_LOOP)
+                        return {"url": local_path, "task_id": task_id}
+
+                    elif status in TERMINAL_FAILED_STATUSES:
+                        error_info = data.get("error_info") or data.get("message") or data.get("detail") or str(data)
+                        raise HTTPException(status_code=502, detail=f"MS task {status}: {error_info}")
+
+                except HTTPException:
+                    raise
+                except Exception as loop_e:
+                    print(f"MS polling error: {loop_e}")
+                    continue
+
+            raise HTTPException(status_code=504, detail="MS 生图超时")
+
+    except HTTPException:
+        raise
+    except Exception as e:
+        print(f"MS generate error: {e}")
+        raise HTTPException(status_code=400, detail=str(e))
+
+# --- 本地 ComfyUI 生图 ---
+
+@app.post("/api/generate")
+def generate(req: GenerateRequest):
+    global NEXT_TASK_ID
+    current_task = None
+    target_backend = None
+    with QUEUE_LOCK:
+        task_id = NEXT_TASK_ID
+        NEXT_TASK_ID += 1
+        current_task = {"task_id": task_id, "client_id": req.client_id}
+        QUEUE.append(current_task)
+
+    try:
+        required_images = []
+        for node_id, node_inputs in req.params.items():
+            if isinstance(node_inputs, dict) and "image" in node_inputs:
+                image_name = node_inputs["image"]
+                if isinstance(image_name, str) and image_name:
+                    required_images.append(image_name)
+
+        target_backend = get_best_backend(required_images)
+        with LOAD_LOCK:
+            BACKEND_LOCAL_LOAD[target_backend] += 1
+
+        for image_name in required_images:
+            need_sync = False
+            try:
+                check_url = f"http://{target_backend}/view?filename={urllib.parse.quote(image_name)}&type=input"
+                resp = requests.get(check_url, stream=True, timeout=0.5)
+                resp.close()
+                if resp.status_code != 200:
+                    need_sync = True
+            except:
+                need_sync = True
+
+            if need_sync:
+                image_content = None
+                image_type = "image/png"
+                for addr in COMFYUI_INSTANCES:
+                    if addr == target_backend: continue
+                    try:
+                        src_url = f"http://{addr}/view?filename={urllib.parse.quote(image_name)}&type=input"
+                        r = requests.get(src_url, timeout=5)
+                        if r.status_code == 200:
+                            image_content = r.content
+                            image_type = r.headers.get("Content-Type", "image/png")
+                            break
+                    except: continue
+
+                if image_content:
+                    try:
+                        files = {'image': (image_name, image_content, image_type)}
+                        requests.post(f"http://{target_backend}/upload/image", files=files, timeout=10)
+                    except Exception as e:
+                        print(f"Sync upload failed: {e}")
+
+        workflow_path = os.path.join(WORKFLOW_DIR, req.workflow_json)
+        if not os.path.exists(workflow_path) and req.workflow_json == "Z-Image.json":
+            workflow_path = WORKFLOW_PATH
+        if not os.path.exists(workflow_path):
+            raise Exception(f"Workflow file not found: {req.workflow_json}")
+
+        with open(workflow_path, 'r', encoding='utf-8') as f:
+            workflow = json.load(f)
+
+        seed = random.randint(1, 10**15)
+
+        if "23" in workflow and req.prompt:
+            workflow["23"]["inputs"]["text"] = req.prompt
+        if "144" in workflow:
+            workflow["144"]["inputs"]["width"] = req.width
+            workflow["144"]["inputs"]["height"] = req.height
+        if "22" in workflow:
+            workflow["22"]["inputs"]["seed"] = seed
+        if "158" in workflow:
+            workflow["158"]["inputs"]["noise_seed"] = seed
+        for node_id in ["146", "181"]:
+            if node_id in workflow and "inputs" in workflow[node_id] and "seed" in workflow[node_id]["inputs"]:
+                workflow[node_id]["inputs"]["seed"] = seed
+        if "184" in workflow and "inputs" in workflow["184"] and "seed" in workflow["184"]["inputs"]:
+            workflow["184"]["inputs"]["seed"] = seed
+        if "172" in workflow and "inputs" in workflow["172"] and "seed" in workflow["172"]["inputs"]:
+            workflow["172"]["inputs"]["seed"] = seed % 4294967295
+        if "14" in workflow and "inputs" in workflow["14"] and "seed" in workflow["14"]["inputs"]:
+            workflow["14"]["inputs"]["seed"] = seed
+
+        for node_id, node_inputs in req.params.items():
+            if node_id in workflow:
+                if "inputs" not in workflow[node_id]:
+                    workflow[node_id]["inputs"] = {}
+                for input_name, value in node_inputs.items():
+                    workflow[node_id]["inputs"][input_name] = value
+
+        p = {"prompt": workflow, "client_id": CLIENT_ID}
+        data = json.dumps(p).encode('utf-8')
+        try:
+            post_req = urllib.request.Request(f"http://{target_backend}/prompt", data=data)
+            prompt_id = json.loads(urllib.request.urlopen(post_req, timeout=10).read())['prompt_id']
+        except urllib.error.HTTPError as e:
+            error_body = e.read().decode('utf-8')
+            raise Exception(f"HTTP Error {e.code}: {error_body}")
+
+        history_data = None
+        for i in range(300):
+            try:
+                res = get_comfy_history(target_backend, prompt_id)
+                if prompt_id in res:
+                    history_data = res[prompt_id]
+                    break
+            except Exception:
+                pass
+            time.sleep(1)
+
+        if not history_data:
+            raise Exception("ComfyUI 渲染超时")
+
+        local_urls = []
+        current_timestamp = time.time()
+        if 'outputs' in history_data:
+            for node_id in history_data['outputs']:
+                node_output = history_data['outputs'][node_id]
+                if 'images' in node_output:
+                    for img in node_output['images']:
+                        comfy_url_path = f"/view?filename={img['filename']}&subfolder={img['subfolder']}&type={img['type']}"
+                        prefix = f"{req.type}_{int(current_timestamp)}_"
+                        local_path = download_image(target_backend, comfy_url_path, prefix=prefix)
+                        if req.convert_to_jpg:
+                            local_path = convert_output_to_jpg(local_path)
+                        local_urls.append(local_path)
+
+        result = {
+            "prompt": req.prompt if req.prompt else "Detail Enhance",
+            "images": local_urls,
+            "seed": seed,
+            "timestamp": current_timestamp,
+            "type": req.type,
+            "params": req.params
+        }
+        save_to_history(result)
+        if GLOBAL_LOOP:
+            asyncio.run_coroutine_threadsafe(manager.broadcast_new_image(result), GLOBAL_LOOP)
+        return result
+
+    except Exception as e:
+        return {"images": [], "error": str(e)}
+    finally:
+        if target_backend:
+            with LOAD_LOCK:
+                if BACKEND_LOCAL_LOAD.get(target_backend, 0) > 0:
+                    BACKEND_LOCAL_LOAD[target_backend] -= 1
+        if current_task:
+            with QUEUE_LOCK:
+                if current_task in QUEUE:
+                    QUEUE.remove(current_task)
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=3000)

26-5-10-API-Studio/packages/anyio-4.13.0-py3-none-any.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:08b310f9e24a9594186fd75b4f73f4a4152069e3853f1ed8bfbf58369f4ad708
+size 114353

26-5-10-API-Studio/packages/certifi-2026.4.22-py3-none-any.whl

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

26-5-10-API-Studio/packages/charset_normalizer-3.4.7-cp314-cp314-win_amd64.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:92a0a01ead5e668468e952e4238cccd7c537364eb7d851ab144ab6627dbbe12f
+size 159634

26-5-10-API-Studio/packages/click-8.3.3-py3-none-any.whl

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

26-5-10-API-Studio/packages/fastapi-0.136.1-py3-none-any.whl

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

26-5-10-API-Studio/packages/pillow-12.2.0-cp314-cp314-win_amd64.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4e6c62e9d237e9b65fac06857d511e90d8461a32adcc1b9065ea0c0fa3a28150
+size 7217400

26-5-10-API-Studio/packages/pydantic-2.13.4-py3-none-any.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:45a282cde31d808236fd7ea9d919b128653c8b38b393d1c4ab335c62924d9aba
+size 472262

26-5-10-API-Studio/packages/pydantic_core-2.46.4-cp314-cp314-win_amd64.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:811ff8e9c313ab425368bcbb36e5c4ebd7108c2bbf4e4089cfbb0b01eff63fac
+size 2072238

26-5-10-API-Studio/packages/urllib3-2.7.0-py3-none-any.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9fb4c81ebbb1ce9531cce37674bbc6f1360472bc18ca9a553ede278ef7276897
+size 131087

26-5-10-API-Studio/readme.txt

@@ -0,0 +1,33 @@
+1. API Website Registration:
+
+https://ai.comfly.chat/register?aff=HAOj137551
+
+2. Create an API key:
+
+https://ai.comfly.chat/token
+
+3. Fill in the key in the .env file of the software's API directory:
+
+COMFLY_API_KEY=sk-xxxxx
+
+4. Create a ModelScope API key (for international domains, it's modelscope.ai, so you'll need to modify this part of the code using Codex):
+
+https://www.modelscope.cn/my/access/token
+
+5. Fill in the key in the .env file of the API directory:
+
+MODELSCOPE_API_KEY=ms-xxxx
+
+6. If calling a local ComfyUI, ensure all workflows in the workflows directory can run normally locally.
+
+7. If the default port for your local ComfyUI is 8188, you don't need to modify this value. Currently, this value reads the graphics cards using ports 8188 and 4090. If you have multiple graphics cards, you can change the port number.
+
+COMFYUI_INSTANCES=127.0.0.1:8188,127.0.0.1:4090
+
+----Instructions-----
+
+Run "Start Service.bat" directly. If dependencies are missing, run "Install Dependencies.bat".
+
+---Error Troubleshooting---
+
+For any errors, you can install Codex Installer.exe. Select this folder and let Codex resolve the runtime issues. Free accounts have a weekly free quota.

26-5-10-API-Studio/requirements.txt

@@ -0,0 +1,7 @@
+fastapi
+uvicorn
+requests
+pydantic
+python-multipart
+httpx
+pillow

26-5-10-API-Studio/static/angle.html

@@ -0,0 +1,1270 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="/static/logo.png" type="image/png">
+    <title>Angle Control | 视角重塑</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="/static/theme.js?v=20260509"></script>
+    <script type="importmap">
+        {
+            "imports": {
+                "three": "https://unpkg.com/three@0.160.0/build/three.module.js"
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap');
+
+        :root {
+            --accent: #111827;
+            --bg: #f9fafb;
+            --card: #ffffff;
+            --easing: cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        /* --- 极简悬浮浅灰滚动条 (无底色/左移) --- */
+        *::-webkit-scrollbar {
+            width: 10px !important;
+            height: 10px !important;
+            background: transparent !important;
+        }
+
+        *::-webkit-scrollbar-track {
+            background: transparent !important;
+            border: none !important;
+        }
+
+        *::-webkit-scrollbar-thumb {
+            background-color: #d8d8d8 !important;
+            border: 3px solid transparent !important;
+            border-right-width: 5px !important;
+            /* 增加右侧间距，使滚动条向左位移 */
+            background-clip: padding-box !important;
+            border-radius: 10px !important;
+        }
+
+        *::-webkit-scrollbar-thumb:hover {
+            background-color: #c0c0c0 !important;
+        }
+
+        *::-webkit-scrollbar-corner {
+            background: transparent !important;
+        }
+
+        * {
+            scrollbar-width: thin !important;
+            scrollbar-color: #d8d8d8 transparent !important;
+        }
+
+        body {
+            background-color: var(--bg);
+            font-family: 'Inter', -apple-system, sans-serif;
+            color: var(--accent);
+            -webkit-font-smoothing: antialiased;
+        }
+
+        .container-box {
+            max-width: 1280px;
+            margin: 0 auto;
+            padding: 0 40px;
+            margin-top: 50px;
+        }
+
+        /* 统一组件风格 */
+        .glass-btn {
+            background: #111827;
+            transition: all 0.3s var(--easing);
+        }
+
+        .glass-btn:hover {
+            background: #000;
+            transform: translateY(-1px);
+            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+        }
+
+        .glass-btn:active {
+            transform: scale(0.98);
+        }
+
+        .upload-item {
+            background: var(--card);
+            border: 1px dashed #e2e8f0;
+            transition: all 0.4s var(--easing);
+        }
+
+        .upload-item:hover {
+            border-color: #000;
+            background: #fff;
+            transform: translateY(-2px);
+        }
+
+        .result-frame {
+            background: #ffffff;
+            border-radius: 32px;
+            border: 1px solid #f1f5f9;
+            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.02);
+        }
+
+        .masonry-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 1.25rem;
+        }
+
+        @media (min-width: 768px) {
+            .masonry-grid {
+                grid-template-columns: repeat(4, 1fr);
+            }
+        }
+
+        .masonry-item {
+            aspect-ratio: 1 / 1;
+            background: #fff;
+            border: 1px solid #f1f5f9;
+            border-radius: 24px;
+            overflow: hidden;
+            transition: all 0.5s var(--easing);
+            position: relative;
+        }
+
+        .masonry-item:hover {
+            transform: translateY(-6px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+        }
+
+        .nano-input {
+            background: #ffffff;
+            border-radius: 16px;
+            transition: all 0.3s ease;
+            border: 1px solid #e5e7eb;
+        }
+
+        .nano-input:focus {
+            background: #ffffff;
+            box-shadow: 0 0 0 2px #000;
+            border-color: transparent;
+        }
+
+        @keyframes b-loading {
+            0% {
+                transform: scale(1);
+                background: #000;
+            }
+
+            50% {
+                transform: scale(1.15);
+                background: #444;
+            }
+
+            100% {
+                transform: scale(1);
+                background: #000;
+            }
+        }
+
+        .loading-box {
+            width: 10px;
+            height: 10px;
+            animation: b-loading 1s infinite var(--easing);
+        }
+
+        /* 复合切换组件样式 - 来自 zimage */
+        .mode-switcher {
+            position: relative;
+            background: #f1f1f1;
+            padding: 4px;
+            border-radius: 14px;
+            display: flex;
+            width: 100%;
+        }
+
+        .mode-btn {
+            position: relative;
+            z-index: 10;
+            flex: 1;
+            padding: 8px 0;
+            text-align: center;
+            font-size: 11px;
+            font-weight: 800;
+            text-transform: uppercase;
+            color: #999;
+            transition: color 0.3s ease;
+            cursor: pointer;
+        }
+
+        .mode-btn.active {
+            color: #000;
+        }
+
+        .mode-glider {
+            position: absolute;
+            height: calc(100% - 8px);
+            width: calc(50% - 4px);
+            background: #fff;
+            border-radius: 11px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+            transition: transform 0.3s var(--easing);
+            z-index: 1;
+        }
+    </style>
+    <link rel="stylesheet" href="/static/theme.css?v=20260510-studio-pages-blue-dark10">
+</head>
+
+<body class="selection:bg-black selection:text-white">
+
+    <div class="container-box">
+        <header class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
+            <div class="space-y-1">
+                <h1 class="text-4xl font-extrabold tracking-[-0.05em] flex items-center">
+                    ANGLE CONTROL<span class="text-base mt-3 ml-1">®</span>
+                </h1>
+                <p class="text-[10px] font-bold uppercase tracking-[0.5em] text-gray-400">Camera & Perspective Control
+                </p>
+            </div>
+            <nav class="flex gap-8 text-[11px] font-bold uppercase tracking-widest text-gray-500">
+                <span class="text-black border-b-2 border-black pb-1">Angle</span>
+            </nav>
+        </header>
+
+        <main class="space-y-12">
+            <!-- Row 1: Upload and 3D Control -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-start">
+                <section class="group w-full">
+                    <h3 class="text-[9px] font-black uppercase tracking-[0.3em] mb-5 text-gray-400">01. Input Source
+                    </h3>
+                    <div id="dropzone"
+                        class="upload-item relative overflow-hidden rounded-2xl aspect-[4/3] flex flex-col items-center justify-center cursor-pointer">
+                        <input type="file" id="fileInput" class="hidden" accept="image/*">
+
+                        <div id="uploadContent" class="text-center space-y-4">
+                            <div
+                                class="w-14 h-14 rounded-full border border-gray-200 bg-white flex items-center justify-center mx-auto group-hover:bg-black group-hover:text-white group-hover:border-black transition-all duration-500">
+                                <i data-lucide="arrow-up" class="w-5 h-5"></i>
+                            </div>
+                            <p class="text-[11px] font-bold uppercase tracking-tight">Drop image here</p>
+                        </div>
+
+                        <img id="previewImg" class="hidden absolute inset-0 w-full h-full object-cover">
+
+                        <div id="changeOverlay"
+                            class="hidden absolute inset-0 bg-black/10 backdrop-blur-sm items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
+                            <span
+                                class="bg-white px-5 py-2 rounded-full text-[10px] font-bold uppercase tracking-widest shadow-2xl">Change</span>
+                        </div>
+                    </div>
+                </section>
+
+                <section id="cameraControl" class="space-y-6 w-full">
+                    <h3 class="text-[9px] font-black uppercase tracking-[0.3em] text-gray-400">02. Camera Control</h3>
+                    <div
+                        class="w-full aspect-[4/3] flex flex-col md:flex-row bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
+                        <!-- 3D View -->
+                        <div id="threeContainer" class="relative flex-1 bg-[#222] h-full min-h-0"></div>
+
+                        <!-- Controls -->
+                        <div
+                            class="w-full md:w-64 flex-shrink-0 p-5 flex flex-col justify-center gap-4 border-l border-gray-100 bg-white overflow-y-auto">
+                            <!-- Horizontal -->
+                            <div class="space-y-3">
+                                <div
+                                    class="flex justify-between items-center text-[10px] font-bold uppercase tracking-wider text-gray-500">
+                                    <div class="flex items-center gap-2">
+                                        <i data-lucide="move-horizontal" class="w-3 h-3"></i>
+                                        <span>Rotation</span>
+                                    </div>
+                                    <div class="flex items-center gap-1.5">
+                                        <button onclick="resetControl('h')"
+                                            class="text-gray-300 hover:text-black transition-colors p-1" title="Reset">
+                                            <i data-lucide="rotate-ccw" class="w-3 h-3"></i>
+                                        </button>
+                                        <div class="flex items-center bg-gray-100 rounded-md px-2">
+                                            <input type="number" id="val-horizontal" value="0"
+                                                class="w-10 bg-transparent py-1 text-black text-center outline-none border-none p-0 text-[10px] font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                                                oninput="syncInput('h')">
+                                            <span class="text-gray-400 select-none text-[10px]">°</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <input type="range" id="rotate-h" min="-90" max="90" value="0"
+                                    class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-black">
+                            </div>
+
+                            <!-- Vertical -->
+                            <div class="space-y-3">
+                                <div
+                                    class="flex justify-between items-center text-[10px] font-bold uppercase tracking-wider text-gray-500">
+                                    <div class="flex items-center gap-2">
+                                        <i data-lucide="move-vertical" class="w-3 h-3"></i>
+                                        <span>Pitch</span>
+                                    </div>
+                                    <div class="flex items-center gap-1.5">
+                                        <button onclick="resetControl('v')"
+                                            class="text-gray-300 hover:text-black transition-colors p-1" title="Reset">
+                                            <i data-lucide="rotate-ccw" class="w-3 h-3"></i>
+                                        </button>
+                                        <div class="flex items-center bg-gray-100 rounded-md px-2">
+                                            <input type="number" id="val-vertical" value="0"
+                                                class="w-10 bg-transparent py-1 text-black text-center outline-none border-none p-0 text-[10px] font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                                                oninput="syncInput('v')">
+                                            <span class="text-gray-400 select-none text-[10px]">°</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <input type="range" id="rotate-v" min="-90" max="90" value="0"
+                                    class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-black">
+                            </div>
+
+                            <!-- Distance -->
+                            <div class="space-y-3">
+                                <div
+                                    class="flex justify-between items-center text-[10px] font-bold uppercase tracking-wider text-gray-500">
+                                    <div class="flex items-center gap-2">
+                                        <i data-lucide="zoom-in" class="w-3 h-3"></i>
+                                        <span>Distance</span>
+                                    </div>
+                                    <div class="flex items-center gap-1.5">
+                                        <button onclick="resetControl('d')"
+                                            class="text-gray-300 hover:text-black transition-colors p-1" title="Reset">
+                                            <i data-lucide="rotate-ccw" class="w-3 h-3"></i>
+                                        </button>
+                                        <div class="flex items-center bg-gray-100 rounded-md px-2">
+                                            <input type="number" id="val-distance" value="4.0" step="0.1"
+                                                class="w-10 bg-transparent py-1 text-black text-center outline-none border-none p-0 text-[10px] font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+                                                oninput="syncInput('d')">
+                                        </div>
+                                    </div>
+                                </div>
+                                <input type="range" id="distance" min="0.1" max="8" value="4" step="0.1"
+                                    class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-black">
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+
+            <!-- Row 2: Parameters & Result -->
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-stretch">
+                <section class="flex flex-col space-y-6">
+                    <h3 class="text-[9px] font-black uppercase tracking-[0.3em] text-gray-400">03. Parameters</h3>
+
+                    <div class="space-y-3 flex-1 flex flex-col">
+                        <div class="flex items-center gap-2 text-gray-800 ml-1">
+                            <i data-lucide="text-quote" class="w-3 h-3"></i>
+                            <span class="text-[10px] font-bold uppercase tracking-widest">Prompt</span>
+                        </div>
+                        <textarea id="promptInput"
+                            class="nano-input w-full flex-1 p-5 text-sm outline-none resize-none placeholder-gray-300"
+                            placeholder="请通过右侧控制器调整，或输入提示词"></textarea>
+                    </div>
+
+                    <!-- Engine Switcher -->
+                    <div class="mode-switcher">
+                        <div id="modeLocal" class="mode-btn active flex items-center justify-center gap-1.5"
+                            onclick="switchEngine('local')">
+                            <i data-lucide="monitor" class="w-3 h-3"></i>
+                            <span>Local</span>
+                        </div>
+                        <div id="modeCloud" class="mode-btn flex items-center justify-center gap-1.5"
+                            onclick="switchEngine('cloud')">
+                            <i data-lucide="cloud" class="w-3 h-3"></i>
+                            <span>ModelScope</span>
+                        </div>
+                        <div id="glider" class="mode-glider"></div>
+                    </div>
+
+                    <button id="genBtn" onclick="handleGenerate()"
+                        class="glass-btn w-full py-5 text-white rounded-xl font-bold text-[11px] uppercase tracking-[0.4em] flex items-center justify-center gap-3 shadow-xl shadow-black/10 disabled:opacity-50 disabled:cursor-not-allowed">
+                        <i data-lucide="zap" id="btnIcon" class="w-4 h-4 text-yellow-400"></i>
+                        <span id="btnText">Generate New Angle</span>
+                    </button>
+                </section>
+
+                <section class="space-y-6 flex flex-col">
+                    <h3 class="text-[9px] font-black uppercase tracking-[0.3em] text-gray-400">04. Result Preview</h3>
+                    <div id="resultBox"
+                        class="result-frame relative aspect-[4/3] w-full flex items-center justify-center overflow-hidden group">
+                        <div id="emptyState" class="text-center space-y-4 opacity-20">
+                            <i data-lucide="camera" class="w-12 h-12 mx-auto stroke-[1px]"></i>
+                            <p class="text-[10px] font-black tracking-[0.5em] uppercase">Canvas Ready</p>
+                        </div>
+
+                        <div id="loadingState" class="hidden flex flex-col items-center gap-5 w-full max-w-[80%]">
+                            <div class="loading-box"></div>
+                            <p class="text-[10px] font-bold uppercase tracking-[0.4em] animate-pulse">Processing...</p>
+                            <!-- Progress Bar -->
+                            <div id="cloud-progress-container" class="hidden w-full mt-4">
+                                <div class="flex justify-between text-[9px] font-bold text-gray-400 mb-1 uppercase tracking-widest">
+                                    <span id="cloud-status-text">Pending...</span>
+                                    <span id="cloud-percent">0%</span>
+                                </div>
+                                <div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden">
+                                    <div id="cloud-progress-bar" class="bg-black h-full rounded-full transition-all duration-300" style="width: 0%"></div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div id="textResult"
+                            class="hidden w-full h-full p-12 flex flex-col items-center justify-center text-center space-y-8">
+                            <i data-lucide="terminal" class="w-12 h-12 text-gray-300 mx-auto"></i>
+                            <div class="space-y-4 max-w-md">
+                                <p class="text-[10px] font-bold uppercase tracking-[0.5em] text-gray-400">Generated
+                                    Command
+                                </p>
+                                <h2 id="generatedText" class="text-2xl font-bold leading-relaxed text-gray-900"></h2>
+                            </div>
+                            <button onclick="copyText()"
+                                class="px-8 py-3 bg-gray-100 hover:bg-black hover:text-white rounded-full text-[10px] font-bold uppercase tracking-widest transition-all flex items-center gap-2">
+                                <i data-lucide="copy" class="w-3 h-3"></i> Copy
+                            </button>
+                        </div>
+
+                        <img id="outputImg"
+                            class="hidden w-full h-full object-contain p-8 cursor-zoom-in transition-all duration-700 hover:scale-[1.02]"
+                            onclick="zoomImage()">
+
+                        <a id="downloadBtn" href="#" download
+                            class="hidden absolute bottom-8 right-8 w-14 h-14 bg-white shadow-2xl rounded-2xl flex items-center justify-center hover:bg-black hover:text-white transition-all duration-500 border border-gray-100">
+                            <i data-lucide="download" class="w-5 h-5"></i>
+                        </a>
+                    </div>
+                </section>
+            </div>
+        </main>
+
+        <section class="mt-32">
+            <div class="flex items-center gap-6 mb-10">
+                <h2 class="text-[11px] font-black uppercase tracking-[0.5em]">Archive</h2>
+                <div class="h-px flex-1 bg-black/5"></div>
+            </div>
+            <div id="masonry" class="masonry-grid"></div>
+            <div id="loadMoreTrigger"
+                class="py-16 text-center opacity-20 text-[10px] font-bold uppercase tracking-widest">
+                End of Archive
+            </div>
+        </section>
+    </div>
+
+    <div id="lightbox" onclick="handleOutsideClick(event)"
+        class="hidden fixed inset-0 z-50 bg-white/95 backdrop-blur-3xl flex items-center justify-center p-8">
+        <button onclick="closeLightbox()"
+            class="absolute top-10 right-10 p-2 hover:rotate-90 transition-transform duration-500">
+            <i data-lucide="x" class="w-8 h-8"></i>
+        </button>
+
+        <div class="max-w-6xl w-full h-full flex flex-col items-center justify-center">
+            <div class="relative">
+                <div id="lightboxRes"
+                    class="absolute top-4 left-4 bg-black/30 backdrop-blur-md border border-white/20 text-white px-3 py-1.5 rounded-full text-[10px] font-medium tracking-wider opacity-0 transition-opacity duration-300 pointer-events-none">
+                </div>
+                <img id="lightboxImg" src="" class="hidden max-h-[80vh] rounded-3xl shadow-2xl">
+            </div>
+            <div class="mt-8">
+                <button onclick="downloadLightboxImage()"
+                    class="px-10 py-4 bg-black text-white rounded-full text-[10px] font-black uppercase tracking-widest flex items-center gap-3 shadow-xl">
+                    <i data-lucide="save" class="w-4 h-4"></i> Save Master
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script type="module">
+        import * as THREE from 'three';
+
+        // Initialize WebSocket Listener for Cloud Progress
+        window.addEventListener('message', function(event) {
+            const data = event.data;
+            if (data && data.type === 'cloud_status') {
+                updateCloudProgress(data);
+            }
+        });
+
+        function updateCloudProgress(data) {
+            const container = document.getElementById('cloud-progress-container');
+            const statusText = document.getElementById('cloud-status-text');
+            const progressBar = document.getElementById('cloud-progress-bar');
+            const percentText = document.getElementById('cloud-percent');
+
+            if (!container || !statusText || !progressBar) return;
+
+            // Show container if hidden
+            if (container.classList.contains('hidden')) {
+                container.classList.remove('hidden');
+            }
+
+            // Update UI
+            if (data.status) {
+                // Simplify status text (remove internal details if needed)
+                let displayStatus = data.status;
+                if (displayStatus.includes("PENDING")) displayStatus = "Queueing...";
+                if (displayStatus.includes("RUNNING")) displayStatus = "Generating...";
+                statusText.innerText = displayStatus;
+            }
+
+            if (typeof data.progress !== 'undefined' && typeof data.total !== 'undefined') {
+                const percent = Math.min(100, Math.round((data.progress / data.total) * 100));
+                progressBar.style.width = `${percent}%`;
+                percentText.innerText = `${percent}%`;
+            }
+        }
+
+        const container = document.getElementById('threeContainer');
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x222222);
+
+        // Camera setup
+        const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
+
+        // Renderer setup
+        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+        renderer.setSize(container.clientWidth, container.clientHeight);
+        renderer.setPixelRatio(window.devicePixelRatio);
+        container.appendChild(renderer.domElement);
+
+        // Objects
+        const geometry = new THREE.PlaneGeometry(3, 3);
+        const material = new THREE.MeshStandardMaterial({
+            color: 0x444444,
+            side: THREE.DoubleSide
+        });
+        const cube = new THREE.Mesh(geometry, material);
+        scene.add(cube);
+
+        const gridHelper = new THREE.GridHelper(20, 20, 0x444444, 0x333333);
+        scene.add(gridHelper);
+
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+        scene.add(ambientLight);
+        const pointLight = new THREE.DirectionalLight(0xffffff, 1);
+        pointLight.position.set(5, 10, 7);
+        scene.add(pointLight);
+
+        // Camera Logic
+        const sliderH = document.getElementById('rotate-h');
+        const sliderV = document.getElementById('rotate-v');
+        const sliderD = document.getElementById('distance');
+        const valH = document.getElementById('val-horizontal');
+        const valV = document.getElementById('val-vertical');
+        const valD = document.getElementById('val-distance');
+
+        window.updateCamera = function () {
+            const lon = parseFloat(sliderH.value);
+            const lat = parseFloat(sliderV.value);
+            const dist = parseFloat(sliderD.value);
+
+            // Sync inputs (avoid overwriting if active)
+            if (document.activeElement !== valH) valH.value = lon;
+            if (document.activeElement !== valV) valV.value = lat;
+            if (document.activeElement !== valD) valD.value = dist.toFixed(1);
+
+            const phi = THREE.MathUtils.degToRad(90 - lat);
+            const theta = THREE.MathUtils.degToRad(lon);
+
+            camera.position.x = dist * Math.sin(phi) * Math.sin(theta);
+            camera.position.y = dist * Math.cos(phi);
+            camera.position.z = dist * Math.sin(phi) * Math.cos(theta);
+            camera.lookAt(0, 0, 0);
+
+            // Real-time update prompt
+            updatePromptWithAngle(lon, lat, dist);
+        }
+
+        window.syncInput = (type) => {
+            if (type === 'h') {
+                let v = parseFloat(valH.value);
+                if (!isNaN(v)) sliderH.value = v;
+            } else if (type === 'v') {
+                let v = parseFloat(valV.value);
+                if (!isNaN(v)) sliderV.value = v;
+            } else if (type === 'd') {
+                let v = parseFloat(valD.value);
+                if (!isNaN(v)) sliderD.value = v;
+            }
+            window.updateCamera();
+        };
+
+        window.resetControl = (type) => {
+            if (type === 'h') {
+                sliderH.value = 0;
+                valH.value = 0;
+            } else if (type === 'v') {
+                sliderV.value = 0;
+                valV.value = 0;
+            } else if (type === 'd') {
+                sliderD.value = 4;
+                valD.value = 4;
+            }
+            window.updateCamera();
+        };
+
+        function updatePromptWithAngle(h, v, d) {
+            let parts = [];
+            if (h !== 0) {
+                const dir = h > 0 ? "向右" : "向左";
+                parts.push(`${dir}旋转${Math.abs(h)}度`);
+            }
+            if (v !== 0) {
+                const dir = v > 0 ? "俯视" : "仰视";
+                parts.push(`${dir}${Math.abs(v)}度`);
+            }
+
+            // Distance logic
+            let lensText = "";
+            if (d > 4) {
+                lensText = "使用广角镜头";
+            } else if (d < 4) {
+                lensText = "使用特写镜头";
+            }
+
+            // Removed "保持原位" default text to show placeholder
+
+            let resultText = "";
+            if (parts.length > 0) {
+                resultText = `将相机${parts.join("，")}`;
+            }
+
+            if (lensText) {
+                resultText += (resultText ? "，" : "将相机") + lensText;
+            }
+
+            const promptInput = document.getElementById('promptInput');
+            let currentText = promptInput.value;
+
+            // Regex to find existing angle command (including lens info)
+            const regex = /将相机.*?(?=(\n|$))/g;
+
+            if (regex.test(currentText)) {
+                // Replace existing
+                promptInput.value = currentText.replace(regex, resultText);
+            } else {
+                // Append if not exists and resultText is not empty
+                if (resultText) {
+                    if (currentText.trim()) {
+                        promptInput.value = currentText.trim() + '\n' + resultText;
+                    } else {
+                        promptInput.value = resultText;
+                    }
+                }
+            }
+        }
+
+        sliderH.addEventListener('input', window.updateCamera);
+        sliderV.addEventListener('input', window.updateCamera);
+        sliderD.addEventListener('input', window.updateCamera);
+        window.updateCamera();
+
+        // Animation Loop
+        function animate() {
+            requestAnimationFrame(animate);
+            renderer.render(scene, camera);
+        }
+        animate();
+
+        // Handle Resize
+        const resizeObserver = new ResizeObserver(() => {
+            const w = container.clientWidth;
+            const h = container.clientHeight;
+            camera.aspect = w / h;
+            camera.updateProjectionMatrix();
+            renderer.setSize(w, h);
+        });
+        resizeObserver.observe(container);
+
+        // Expose function to update texture
+        window.update3DTexture = (url) => {
+            new THREE.TextureLoader().load(url, (texture) => {
+                texture.colorSpace = THREE.SRGBColorSpace;
+
+                // Adjust plane aspect ratio to match image
+                const imageAspect = texture.image.width / texture.image.height;
+                cube.scale.set(1, 1 / imageAspect, 1);
+                if (imageAspect > 1) {
+                    cube.scale.set(1, 1 / imageAspect, 1);
+                    // Reset base scale to 3
+                    cube.geometry.dispose();
+                    cube.geometry = new THREE.PlaneGeometry(3, 3 / imageAspect);
+                    cube.scale.set(1, 1, 1);
+                } else {
+                    cube.geometry.dispose();
+                    cube.geometry = new THREE.PlaneGeometry(3 * imageAspect, 3);
+                    cube.scale.set(1, 1, 1);
+                }
+
+                cube.material = new THREE.MeshBasicMaterial({
+                    map: texture,
+                    side: THREE.DoubleSide
+                });
+                cube.material.needsUpdate = true;
+
+                // Show control panel (already visible, but keep logic safe)
+                document.getElementById('cameraControl').classList.remove('hidden');
+
+                // Force resize check after texture load
+                setTimeout(() => {
+                    const w = container.clientWidth;
+                    const h = container.clientHeight;
+                    camera.aspect = w / h;
+                    camera.updateProjectionMatrix();
+                    renderer.setSize(w, h);
+                }, 100);
+            });
+        };
+    </script>
+
+    <script>
+        lucide.createIcons();
+        
+        // --- Engine Switcher Logic (UI Only) ---
+        let currentEngine = 'local';
+        const ENGINE_MODE_KEY = 'angle_engine_mode';
+
+        window.switchEngine = function(mode) {
+            currentEngine = mode;
+            localStorage.setItem(ENGINE_MODE_KEY, mode);
+
+            const glider = document.getElementById('glider');
+            const localBtn = document.getElementById('modeLocal');
+            const cloudBtn = document.getElementById('modeCloud');
+
+            if (mode === 'local') {
+                glider.style.transform = 'translateX(0)';
+                localBtn.classList.add('active');
+                cloudBtn.classList.remove('active');
+            } else {
+                glider.style.transform = 'translateX(100%)';
+                cloudBtn.classList.add('active');
+                localBtn.classList.remove('active');
+            }
+        };
+
+        function generateUUID() {
+            if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+                try { return crypto.randomUUID(); } catch (e) { }
+            }
+            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                return v.toString(16);
+            });
+        }
+        const CLIENT_ID = localStorage.getItem("client_id") || generateUUID();
+        localStorage.setItem("client_id", CLIENT_ID);
+
+        let uploadedPath = "";
+        let uploadedFile = null; // Store raw file for cloud upload
+        let currentResult = null;
+        let allHistory = [];
+        let currentIndex = 0;
+        const PAGE_SIZE = 30;
+
+        const dropzone = document.getElementById('dropzone');
+        const fileInput = document.getElementById('fileInput');
+        const previewImg = document.getElementById('previewImg');
+        const promptInput = document.getElementById('promptInput');
+
+        dropzone.onclick = () => fileInput.click();
+        fileInput.onchange = (e) => handleFile(e.target.files[0]);
+
+        // Drag and Drop
+        dropzone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropzone.classList.add('border-black', 'bg-gray-50');
+        });
+        dropzone.addEventListener('dragleave', () => {
+            dropzone.classList.remove('border-black', 'bg-gray-50');
+        });
+        dropzone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropzone.classList.remove('border-black', 'bg-gray-50');
+            if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+                handleFile(e.dataTransfer.files[0]);
+            }
+        });
+
+        // Paste support
+        let isHovering = false;
+        dropzone.addEventListener('mouseenter', () => isHovering = true);
+        dropzone.addEventListener('mouseleave', () => isHovering = false);
+        window.addEventListener('paste', (e) => {
+            if (!isHovering) return;
+            const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+            for (let item of items) {
+                if (item.kind === 'file' && item.type.startsWith('image/')) {
+                    const file = item.getAsFile();
+                    handleFile(file);
+                    break;
+                }
+            }
+        });
+
+        async function handleFile(file) {
+            if (!file) return;
+            uploadedFile = file; // Store for cloud usage
+            const btn = document.getElementById('genBtn');
+            const btnText = document.getElementById('btnText');
+
+            btn.disabled = true;
+            btnText.innerText = "Uploading...";
+
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                previewImg.src = e.target.result;
+                previewImg.classList.remove('hidden');
+                document.getElementById('uploadContent').classList.add('opacity-0');
+                document.getElementById('changeOverlay').classList.replace('hidden', 'flex');
+
+                // Automatically apply to 3D scene
+                if (window.update3DTexture) {
+                    window.update3DTexture(e.target.result);
+                }
+            };
+            reader.readAsDataURL(file);
+
+            const formData = new FormData();
+            formData.append('files', file);
+            try {
+                const res = await fetch('/api/upload', { method: 'POST', body: formData });
+                const data = await res.json();
+                uploadedPath = data.files[0].comfy_name;
+                btn.disabled = false;
+                btnText.innerText = "Generate New Angle";
+            } catch (err) {
+                console.error("Upload error");
+                btnText.innerText = "Upload Failed";
+                btn.disabled = false;
+            }
+        }
+
+        function applyAngleToPrompt() {
+            const h = parseInt(document.getElementById('rotate-h').value);
+            const v = parseInt(document.getElementById('rotate-v').value);
+
+            let parts = [];
+            if (h !== 0) {
+                const dir = h > 0 ? "向右" : "向左";
+                parts.push(`${dir}旋转${Math.abs(h)}度`);
+            }
+            if (v !== 0) {
+                const dir = v > 0 ? "俯视" : "仰视";
+                parts.push(`${dir}${Math.abs(v)}度`);
+            }
+
+            if (parts.length === 0) {
+                parts.push("保持原位");
+            }
+
+            const resultText = `将相机${parts.join("，")}`;
+
+            const promptInput = document.getElementById('promptInput');
+            // Check if there is existing content, if so append new line
+            if (promptInput.value.trim()) {
+                promptInput.value += '\n' + resultText;
+            } else {
+                promptInput.value = resultText;
+            }
+
+            // Visual feedback
+            promptInput.style.transition = "0.2s";
+            promptInput.style.borderColor = "#000";
+            promptInput.style.boxShadow = "0 0 0 2px rgba(0,0,0,0.1)";
+            setTimeout(() => {
+                promptInput.style.borderColor = "";
+                promptInput.style.boxShadow = "";
+            }, 500);
+        }
+
+        async function runCloudTask() {
+            if (!uploadedFile) throw new Error("Please upload an image first");
+
+            // Get token from centralized management (Personal -> Global)
+            let token = localStorage.getItem('modelscope_api_token');
+            
+            if (!token) {
+                try {
+                    const res = await fetch('/api/config/token');
+                    if (res.ok) {
+                        const data = await res.json();
+                        if (data.token) token = data.token;
+                    }
+                } catch (e) {
+                    console.warn("Failed to fetch global token", e);
+                }
+            }
+
+            if (!token) {
+                if (window.parent && typeof window.parent.openTokenModal === 'function') {
+                    window.parent.openTokenModal();
+                    // Allow the error to propagate so user sees the message
+                    // const err = new Error("请先点击右上角设置 ModelScope Token");
+                    // err.silent = true;
+                    // throw err;
+                }
+                throw new Error("请先点击右上角设置 ModelScope Token");
+            }
+
+            // Convert image to Base64
+            const toBase64 = file => new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.readAsDataURL(file);
+                reader.onload = () => resolve(reader.result);
+                reader.onerror = error => reject(error);
+            });
+
+            const dataUri = await toBase64(uploadedFile);
+            console.log("DataURI generated, length:", dataUri.length);
+
+            // Submit task via dedicated Angle endpoint
+            // Get Client ID from parent if available
+            let clientId = null;
+            try {
+                if (window.parent && window.parent.CID) {
+                    clientId = window.parent.CID;
+                }
+            } catch (e) { console.warn("Cannot access parent CID", e); }
+
+            const payload = {
+                "prompt": promptInput.value,
+                "api_key": token,
+                "type": "angle",
+                "model": "Qwen/Qwen-Image-Edit-2511",
+                "image_urls": [dataUri],
+                "client_id": clientId
+            };
+
+            // Reset Progress Bar
+            document.getElementById('cloud-progress-container').classList.add('hidden');
+            document.getElementById('cloud-progress-bar').style.width = '0%';
+            document.getElementById('cloud-percent').innerText = '0%';
+
+            let response;
+            try {
+                 response = await fetch('/api/angle/generate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+            } catch (netErr) {
+                 throw new Error(`Network Error: ${netErr.message}`);
+            }
+
+            // Handle Timeout / Continue Loop
+            while (response.ok) {
+                 const data = await response.json();
+                 
+                 // If success with URL
+                 if (data.url) {
+                     return { images: [data.url] };
+                 }
+
+                 // If timeout status, ask user
+                 if (data.status === 'timeout') {
+                     const taskId = data.task_id;
+                     const userContinue = confirm("Cloud generation is taking longer than expected (300s). The queue might be full.\n\nDo you want to continue waiting?");
+                     
+                     if (userContinue) {
+                         // Call poll endpoint
+                         const pollPayload = {
+                             "task_id": taskId,
+                             "api_key": token,
+                             "client_id": clientId
+                         };
+                         
+                         // Update UI to show we are still waiting
+                         updateCloudProgress({status: "Resuming...", progress: 0, total: 150});
+                         
+                         response = await fetch('/api/angle/poll_status', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify(pollPayload)
+                         });
+                         continue; // Loop back to check response
+                     } else {
+                         throw new Error("User cancelled waiting.");
+                     }
+                 }
+                 
+                 // Unknown success response
+                 throw new Error("Unknown response format");
+            }
+
+            if (!response.ok) {
+                 const errText = await response.text();
+                 // Try to parse JSON error if possible
+                 try {
+                     const errJson = JSON.parse(errText);
+                     if (errJson.detail) throw new Error(errJson.detail);
+                 } catch (e) {}
+                 throw new Error(`Generation Failed: ${errText}`);
+            }
+
+            const data = await response.json();
+            if (data.url) {
+                return {
+                    images: [data.url]
+                };
+            } else {
+                throw new Error("No image URL in response");
+            }
+        }
+
+        async function handleGenerate() {
+            if (!uploadedPath && currentEngine === 'local') {
+                // ... existing local check ...
+                const dropzone = document.getElementById('dropzone');
+                dropzone.style.transition = "0.2s";
+                dropzone.style.borderColor = "#ef4444";
+                dropzone.style.transform = "scale(0.98)";
+                setTimeout(() => {
+                    dropzone.style.borderColor = "";
+                    dropzone.style.transform = "scale(1)";
+                }, 300);
+                return;
+            }
+            
+            if (!uploadedFile && currentEngine === 'cloud') {
+                 alert("Please upload an image first");
+                 return;
+            }
+
+            // Allow manual prompt even if angle not applied, but require prompt input
+            if (!promptInput.value.trim()) {
+                promptInput.style.transition = "0.2s";
+                promptInput.style.borderColor = "#ef4444";
+                setTimeout(() => {
+                    promptInput.style.borderColor = "";
+                }, 300);
+                return;
+            }
+
+            const btn = document.getElementById('genBtn');
+            const btnText = document.getElementById('btnText');
+
+            btn.disabled = true;
+            btn.style.backgroundColor = '#333';
+            btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400 fill-yellow-400 animate-pulse"></i><span class="tracking-[0.4em] text-[11px] uppercase">Processing...</span>`;
+            lucide.createIcons();
+
+            document.getElementById('emptyState').classList.add('hidden');
+            document.getElementById('outputImg').classList.add('hidden');
+            document.getElementById('textResult').classList.add('hidden'); // Ensure text result is hidden
+            document.getElementById('loadingState').classList.remove('hidden');
+
+            try {
+                let data;
+                
+                if (currentEngine === 'cloud') {
+                    // Cloud Logic
+                    data = await runCloudTask();
+                } else {
+                    // Local Logic
+                    const seed = Math.floor(Math.random() * 1000000000000000);
+                    const res = await fetch('/api/generate', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            workflow_json: "2511.json",
+                            params: {
+                                "31": { "image": uploadedPath },
+                                "11": { "prompt": promptInput.value },
+                                "14": { "seed": seed }
+                            },
+                            type: "angle",
+                            client_id: CLIENT_ID
+                        })
+                    });
+                    data = await res.json();
+                    if (data.error) throw new Error(data.error);
+                    if (!data.images?.length) throw new Error("No images returned");
+                }
+
+                currentResult = data;
+                const outputImg = document.getElementById('outputImg');
+                const downloadBtn = document.getElementById('downloadBtn');
+
+                outputImg.src = data.images[0];
+                outputImg.classList.remove('hidden');
+                document.getElementById('loadingState').classList.add('hidden');
+
+                downloadBtn.href = data.images[0];
+                downloadBtn.classList.remove('hidden');
+                downloadBtn.download = `Angle-${Date.now()}.png`;
+
+                btn.style.backgroundColor = '';
+                btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400"></i><span id="btnText">Generate New Angle</span>`;
+                btn.disabled = false;
+                lucide.createIcons();
+
+                // Add to history
+                renderImageCard({
+                    images: data.images,
+                    prompt: promptInput.value,
+                    timestamp: Date.now(),
+                    is_cloud: (currentEngine === 'cloud')
+                }, true);
+
+            } catch (err) {
+                console.error(err);
+                btn.style.backgroundColor = '';
+                btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400"></i><span id="btnText">Generation Failed</span>`;
+                lucide.createIcons();
+                document.getElementById('loadingState').classList.add('hidden');
+                document.getElementById('emptyState').classList.remove('hidden');
+                btn.disabled = false;
+                if (!err.silent) {
+                    alert(err.message);
+                }
+            }
+        }
+
+        window.copyText = () => {
+            const text = document.getElementById('generatedText').innerText;
+            navigator.clipboard.writeText(text).then(() => {
+                const btn = document.querySelector('#textResult button');
+                const originalHTML = btn.innerHTML;
+                btn.innerHTML = `<i data-lucide="check" class="w-3 h-3"></i> Copied`;
+                setTimeout(() => {
+                    btn.innerHTML = originalHTML;
+                    lucide.createIcons();
+                }, 2000);
+            });
+        };
+
+        // History Management
+        function renderImageCard(data, isNew = false) {
+            const masonry = document.getElementById('masonry');
+            const imgUrl = data.images ? data.images[0] : '';
+            if (!imgUrl) return;
+
+            const card = document.createElement('div');
+            card.className = "masonry-item relative group cursor-pointer";
+
+            card.onclick = () => openLightbox(imgUrl);
+            
+            // ModelScope Badge
+            const isCloud = data.is_cloud || (imgUrl && imgUrl.includes('cloud_angle'));
+            const badgeHtml = isCloud ? `
+                <div class="absolute top-3 left-3 z-10">
+                    <img src="/static/modelscope.gif" class="h-4 w-auto object-contain bg-white/90 rounded-full p-0.5 shadow-sm">
+                </div>
+            ` : '';
+
+            card.innerHTML = `
+                <img src="${imgUrl}" class="w-full h-full object-cover block transform group-hover:scale-105 transition-transform duration-[1.5s]">
+                ${badgeHtml}
+                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 p-6 flex flex-col justify-end pointer-events-none">
+                    <p class="text-white text-[10px] font-bold uppercase tracking-widest line-clamp-2">${data.prompt || "Angle Control"}</p>
+                </div>
+            `;
+
+            if (isNew) masonry.prepend(card);
+            else masonry.appendChild(card);
+        }
+
+        function loadNextPage() {
+            const batch = allHistory.slice(currentIndex, currentIndex + PAGE_SIZE);
+            if (batch.length === 0) {
+                const el = document.getElementById('loadMoreTrigger');
+                if (el) el.innerText = "End of Archive";
+                return;
+            }
+            batch.forEach(item => renderImageCard(item, false));
+            currentIndex += PAGE_SIZE;
+        }
+
+        async function loadHistory() {
+            try {
+                const res = await fetch('/api/history?type=angle');
+                const history = await res.json();
+                if (history && Array.isArray(history)) {
+                    allHistory = history;
+                    document.getElementById('masonry').innerHTML = '';
+                    currentIndex = 0;
+                    loadNextPage();
+                }
+            } catch (e) { console.error(e); }
+        }
+
+        // Lightbox
+        function openLightbox(url) {
+            const img = document.getElementById('lightboxImg');
+            const resPill = document.getElementById('lightboxRes');
+
+            resPill.style.opacity = '0';
+            img.src = url;
+
+            const lb = document.getElementById('lightbox');
+            lb.classList.replace('hidden', 'flex');
+            img.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+
+            const updateRes = () => {
+                if (img.naturalWidth) {
+                    resPill.innerText = `${img.naturalWidth} x ${img.naturalHeight}`;
+                    resPill.style.opacity = '1';
+                }
+            };
+
+            img.onload = updateRes;
+            if (img.complete) updateRes();
+        }
+
+        function closeLightbox() {
+            const lb = document.getElementById('lightbox');
+            lb.classList.replace('flex', 'hidden');
+            document.body.style.overflow = 'auto';
+        }
+
+        function handleOutsideClick(e) {
+            if (e.target.id === 'lightbox') closeLightbox();
+        }
+
+        function downloadLightboxImage() {
+            const imgUrl = document.getElementById('lightboxImg').src;
+            const link = document.createElement('a');
+            link.href = imgUrl;
+            link.download = `Angle-Master-${Date.now()}.png`;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+
+        function zoomImage() {
+            if (currentResult && currentResult.images && currentResult.images[0]) {
+                openLightbox(currentResult.images[0]);
+            }
+        }
+
+        // Init
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting && allHistory.length > 0) {
+                loadNextPage();
+            }
+        }, { threshold: 0.1 });
+
+        window.onload = () => {
+            // Restore engine mode
+            const savedMode = localStorage.getItem(ENGINE_MODE_KEY);
+            if (savedMode && (savedMode === 'local' || savedMode === 'cloud')) {
+                switchEngine(savedMode);
+            }
+
+            loadHistory();
+            observer.observe(document.getElementById('loadMoreTrigger'));
+        };
+
+        // WebSocket for real-time updates (optional but good for multi-tab sync)
+        const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = `${wsProtocol}//${window.location.host}/ws/stats?client_id=${CLIENT_ID}`;
+        const socket = new WebSocket(wsUrl);
+        socket.onopen = () => {
+            setInterval(() => {
+                if (socket.readyState === WebSocket.OPEN) socket.send("ping");
+            }, 30000);
+        };
+    </script>
+</body>
+
+</html>

26-5-10-API-Studio/static/enhance.html

@@ -0,0 +1,881 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="/static/logo.png" type="image/png">
+    <title>Z-IMAGE | 极简影像重塑</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="/static/theme.js?v=20260509"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap');
+
+        :root {
+            --accent: #111827;
+            --bg: #f9fafb;
+            --card: #ffffff;
+            --easing: cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        /* --- 极简悬浮浅灰滚动条 (无底色/左移) --- */
+        *::-webkit-scrollbar {
+            width: 10px !important;
+            height: 10px !important;
+            background: transparent !important;
+        }
+
+        *::-webkit-scrollbar-track {
+            background: transparent !important;
+            border: none !important;
+        }
+
+        *::-webkit-scrollbar-thumb {
+            background-color: #d8d8d8 !important;
+            border: 3px solid transparent !important;
+            border-right-width: 5px !important;
+            /* 增加右侧间距，使滚动条向左位移 */
+            background-clip: padding-box !important;
+            border-radius: 10px !important;
+        }
+
+        *::-webkit-scrollbar-thumb:hover {
+            background-color: #c0c0c0 !important;
+        }
+
+        *::-webkit-scrollbar-corner {
+            background: transparent !important;
+        }
+
+        * {
+            scrollbar-width: thin !important;
+            scrollbar-color: #d8d8d8 transparent !important;
+        }
+
+        body {
+            background-color: var(--bg);
+            font-family: 'Inter', -apple-system, sans-serif;
+            color: var(--accent);
+            -webkit-font-smoothing: antialiased;
+        }
+
+        .container-box {
+            max-width: 1280px;
+            margin: 0 auto;
+            padding: 0 40px;
+            margin-top: 50px;
+        }
+
+        /* 统一组件风格 */
+        .glass-btn {
+            background: #111827;
+            transition: all 0.3s var(--easing);
+        }
+
+        .glass-btn:hover {
+            background: #000;
+            transform: translateY(-1px);
+            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+        }
+
+        .glass-btn:active {
+            transform: scale(0.98);
+        }
+
+        .upload-item {
+            background: var(--card);
+            border: 1px dashed #e2e8f0;
+            transition: all 0.4s var(--easing);
+        }
+
+        .upload-item:hover {
+            border-color: #000;
+            background: #fff;
+            transform: translateY(-2px);
+        }
+
+        .result-frame {
+            background: #ffffff;
+            border-radius: 32px;
+            border: 1px solid #f1f5f9;
+            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.02);
+        }
+
+        .masonry-item {
+            break-inside: avoid;
+            margin-bottom: 1.25rem;
+            background: #fff;
+            border: 1px solid #f1f5f9;
+            border-radius: 24px;
+            overflow: hidden;
+            transition: all 0.5s var(--easing);
+        }
+
+        .masonry-item:hover {
+            transform: translateY(-6px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+        }
+
+        /* 统一精致 Range 设计 */
+        input[type=range] {
+            -webkit-appearance: none;
+            background: transparent;
+        }
+
+        input[type=range]::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 2px;
+            background: #e5e5e5;
+            border-radius: 1px;
+        }
+
+        input[type=range]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            height: 14px;
+            width: 14px;
+            border-radius: 50%;
+            background: var(--accent);
+            margin-top: -6px;
+            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+            transition: transform 0.2s var(--easing);
+            cursor: pointer;
+        }
+
+        .masonry-grid {
+            columns: 2;
+            column-gap: 1.25rem;
+        }
+
+        @media (min-width: 768px) {
+            .masonry-grid {
+                columns: 4;
+            }
+        }
+
+        @keyframes b-loading {
+            0% {
+                transform: scale(1);
+                background: #000;
+            }
+
+            50% {
+                transform: scale(1.15);
+                background: #444;
+            }
+
+            100% {
+                transform: scale(1);
+                background: #000;
+            }
+        }
+
+        .loading-box {
+            width: 10px;
+            height: 10px;
+            animation: b-loading 1s infinite var(--easing);
+        }
+
+        .ios-switch input:checked+.ios-slider {
+            background: #000;
+        }
+
+        .ios-slider:before {
+            content: "";
+            position: absolute;
+            height: 24px;
+            width: 24px;
+            left: 2px;
+            bottom: 2px;
+            background: white;
+            border-radius: 50%;
+            transition: 0.3s var(--easing);
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+        }
+
+        input:checked+.ios-slider:before {
+            transform: translateX(20px);
+        }
+
+        .engine-switch {
+            background: #f8fafc;
+            border: 1px solid #edf2f7;
+            border-radius: 999px;
+            padding: 3px;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2px;
+        }
+
+        .engine-btn {
+            border-radius: 999px;
+            height: 34px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+            color: #64748b;
+            font-size: 10px;
+            font-weight: 600;
+            letter-spacing: .02em;
+            transition: all .25s var(--easing);
+            cursor: pointer;
+        }
+
+        .engine-btn.active {
+            background: #fff;
+            color: #111827;
+            box-shadow: 0 1px 3px rgba(15,23,42,.08);
+        }
+
+        .engine-btn:not(.active):hover {
+            color: #111827;
+            background: rgba(0,0,0,.04);
+        }
+
+        .engine-panel {
+            background: #fff;
+            border: 1px solid #edf0f3;
+            border-radius: 24px;
+            padding: 12px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .engine-label {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: #94a3b8;
+            font-size: 10px;
+            font-weight: 600;
+            letter-spacing: .04em;
+        }
+    </style>
+    <link rel="stylesheet" href="/static/theme.css?v=20260510-studio-pages-blue-dark10">
+</head>
+
+<body class="selection:bg-black selection:text-white">
+
+    <div class="container-box">
+        <header class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
+            <div class="space-y-1">
+                <h1 class="text-4xl font-extrabold tracking-[-0.05em] flex items-center">
+                    Z IMAGE<span class="text-base mt-3 ml-1">®</span>
+                </h1>
+                <p class="text-[10px] font-bold uppercase tracking-[0.5em] text-gray-400">Computational Photography
+                    Archive</p>
+            </div>
+            <nav class="flex gap-8 text-[11px] font-bold uppercase tracking-widest text-gray-500">
+                <span class="text-black border-b-2 border-black pb-1">Enhance</span>
+            </nav>
+        </header>
+
+        <main class="grid grid-cols-1 lg:grid-cols-12 gap-12">
+            <div class="lg:col-span-4 space-y-10">
+                <section class="group">
+                    <h3 class="text-[9px] font-black uppercase tracking-[0.3em] mb-5 text-gray-400">01. Input Source
+                    </h3>
+                    <div id="dropzone"
+                        class="upload-item relative overflow-hidden rounded-2xl aspect-[4/3] flex flex-col items-center justify-center cursor-pointer">
+                        <input type="file" id="fileInput" class="hidden" accept="image/*">
+
+                        <div id="uploadContent" class="text-center space-y-4">
+                            <div
+                                class="w-14 h-14 rounded-full border border-gray-200 bg-white flex items-center justify-center mx-auto group-hover:bg-black group-hover:text-white group-hover:border-black transition-all duration-500">
+                                <i data-lucide="arrow-up" class="w-5 h-5"></i>
+                            </div>
+                            <p class="text-[11px] font-bold uppercase tracking-tight">Drop image here</p>
+                        </div>
+
+                        <img id="previewImg" class="hidden absolute inset-0 w-full h-full object-cover">
+
+                        <div id="changeOverlay"
+                            class="hidden absolute inset-0 bg-black/10 backdrop-blur-sm items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
+                            <span
+                                class="bg-white px-5 py-2 rounded-full text-[10px] font-bold uppercase tracking-widest shadow-2xl">Change</span>
+                        </div>
+                    </div>
+                </section>
+
+                <section class="space-y-10">
+                    <h3 class="text-[9px] font-black uppercase tracking-[0.3em] text-gray-400">02. Parameters</h3>
+
+                    <!-- Provider Toggle -->
+                    <div class="engine-panel">
+                        <div class="engine-label">
+                            <i data-lucide="cpu" class="w-3.5 h-3.5"></i>
+                            <span>Engine</span>
+                        </div>
+                        <div class="provider-switch engine-switch">
+                            <button id="providerLocal" onclick="setEnhanceProvider('local')"
+                                class="provider-btn engine-btn active">
+                                <i data-lucide="cpu" class="w-3 h-3"></i>
+                                Local
+                            </button>
+                            <button id="providerMs" onclick="setEnhanceProvider('ms')"
+                                class="provider-btn engine-btn">
+                                <i data-lucide="cloud" class="w-3 h-3"></i>
+                                ModelScope
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- Local Controls -->
+                    <div id="localControls" class="space-y-10">
+                        <div class="space-y-5">
+                            <div class="flex justify-between items-end">
+                                <label class="text-xs font-bold uppercase tracking-tight text-gray-800">Refinement
+                                    Strength</label>
+                                <span id="strengthVal" class="font-mono text-xs font-bold">0.50</span>
+                            </div>
+                            <input type="range" id="strengthSlider" min="0.1" max="1.0" step="0.01" value="0.5"
+                                class="w-full">
+                        </div>
+
+                        <div class="p-5 bg-white border border-gray-200/50 rounded-2xl shadow-sm">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center gap-4">
+                                    <div class="p-2.5 bg-gray-50 rounded-xl border border-gray-100"><i data-lucide="layers"
+                                            class="w-4 h-4"></i></div>
+                                    <div>
+                                        <p class="text-[11px] font-bold uppercase">Super Resolution</p>
+                                        <p class="text-[9px] text-gray-400">Double pixels (4K)</p>
+                                    </div>
+                                </div>
+                                <label class="ios-switch relative inline-block w-12 h-7">
+                                    <input type="checkbox" id="upscaleToggle" class="opacity-0 w-0 h-0"
+                                        onchange="toggleUpscaleOptions()">
+                                    <span
+                                        class="ios-slider absolute inset-0 cursor-pointer bg-gray-200 rounded-full transition-colors duration-300"></span>
+                                </label>
+                            </div>
+                            <div id="upscaleOptions" class="hidden pt-4 mt-4 border-t border-gray-100 grid-cols-2 gap-3">
+                                <button id="btn2x" onclick="setUpscaleFactor(2048)"
+                                    class="py-2.5 rounded-xl border border-black bg-black text-white text-[10px] font-bold transition-all">
+                                    2x (2K)
+                                </button>
+                                <button id="btn4x" onclick="setUpscaleFactor(4096)"
+                                    class="py-2.5 rounded-xl border border-gray-200 text-gray-400 text-[10px] font-bold hover:border-black hover:text-black transition-all">
+                                    4x (4K)
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- MS Cloud Controls -->
+                    <div id="msControls" class="hidden space-y-5">
+                        <div class="p-5 bg-white border border-gray-200/50 rounded-2xl shadow-sm space-y-4">
+                            <div class="flex items-center gap-3">
+                                <div class="p-2.5 bg-gray-50 rounded-xl border border-gray-100"><i data-lucide="sparkles" class="w-4 h-4"></i></div>
+                                <div>
+                                    <p class="text-[11px] font-bold uppercase">Klein Detail Enhance</p>
+                                    <p class="text-[9px] text-gray-400">Cloud · LoRA: Daniel8152/Klein-enhance</p>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="flex justify-between items-end mb-2">
+                                    <label class="text-[10px] font-bold uppercase tracking-tight text-gray-600">Enhancement Strength</label>
+                                    <span id="msStrengthVal" class="font-mono text-xs font-bold">0.80</span>
+                                </div>
+                                <input type="range" id="msStrengthSlider" min="0.1" max="1.0" step="0.05" value="0.8" class="w-full">
+                            </div>
+                            <div>
+                                <label class="text-[10px] font-bold uppercase tracking-tight text-gray-600 block mb-2">Prompt (optional)</label>
+                                <textarea id="msPromptInput" rows="2"
+                                    class="w-full border border-gray-200 rounded-xl p-3 text-[12px] resize-none outline-none focus:border-black transition-colors"
+                                    placeholder="masterpiece, best quality, ultra-detailed, high resolution"></textarea>
+                            </div>
+                        </div>
+                    </div>
+
+                    <button id="genBtn" onclick="handleGenerate()"
+                        class="glass-btn w-full py-5 text-white rounded-xl font-bold text-[11px] uppercase tracking-[0.4em] flex items-center justify-center gap-3 shadow-xl shadow-black/10 disabled:opacity-50 disabled:cursor-not-allowed">
+                        <i data-lucide="zap" id="btnIcon" class="w-4 h-4 text-yellow-400"></i>
+                        <span id="btnText">Begin Remastering</span>
+                    </button>
+                </section>
+            </div>
+
+            <div class="lg:col-span-8">
+                <div id="resultBox"
+                    class="result-frame relative h-[500px] lg:h-[650px] flex items-center justify-center overflow-hidden group">
+                    <div id="emptyState" class="text-center space-y-4 opacity-20">
+                        <i data-lucide="layout" class="w-12 h-12 mx-auto stroke-[1px]"></i>
+                        <p class="text-[10px] font-black tracking-[0.5em] uppercase">Canvas Ready</p>
+                    </div>
+
+                    <div id="loadingState" class="hidden flex flex-col items-center gap-5">
+                        <div class="loading-box"></div>
+                        <p class="text-[10px] font-bold uppercase tracking-[0.4em] animate-pulse">Computing pixels...
+                        </p>
+                    </div>
+
+                    <img id="outputImg"
+                        class="hidden w-full h-full object-contain p-8 cursor-zoom-in transition-all duration-700 hover:scale-[1.02]"
+                        onclick="zoomImage()">
+
+                    <a id="downloadBtn" href="#" download
+                        class="hidden absolute bottom-8 right-8 w-14 h-14 bg-white shadow-2xl rounded-2xl flex items-center justify-center hover:bg-black hover:text-white transition-all duration-500 border border-gray-100">
+                        <i data-lucide="download" class="w-5 h-5"></i>
+                    </a>
+                </div>
+            </div>
+        </main>
+
+        <section class="mt-32">
+            <div class="flex items-center gap-6 mb-10">
+                <h2 class="text-[11px] font-black uppercase tracking-[0.5em]">Archive</h2>
+                <div class="h-px flex-1 bg-black/5"></div>
+            </div>
+            <div id="masonry" class="masonry-grid"></div>
+            <div id="loadMoreTrigger"
+                class="py-16 text-center opacity-20 text-[10px] font-bold uppercase tracking-widest">
+                End of Archive
+            </div>
+        </section>
+    </div>
+
+    <div id="lightbox" onclick="handleOutsideClick(event)"
+        class="hidden fixed inset-0 z-50 bg-white/95 backdrop-blur-3xl flex items-center justify-center p-8">
+        <button onclick="closeLightbox()"
+            class="absolute top-10 right-10 p-2 hover:rotate-90 transition-transform duration-500">
+            <i data-lucide="x" class="w-8 h-8"></i>
+        </button>
+
+        <div class="max-w-6xl w-full h-full flex flex-col items-center justify-center">
+            <div class="relative w-full flex justify-center">
+                <div id="compareContainer"
+                    class="hidden relative w-full h-[75vh] rounded-3xl overflow-hidden bg-[#f8f8f9] border border-gray-200/50 shadow-2xl">
+                    <img id="compareGenerated" class="absolute inset-0 w-full h-full object-contain">
+                    <div id="compareOriginalWrapper"
+                        class="absolute inset-0 w-full h-full overflow-hidden border-r-2 border-white/80">
+                        <img id="compareOriginal" class="absolute inset-0 w-full h-full object-contain">
+                    </div>
+                    <div id="compareSlider" class="absolute inset-y-0 left-1/2 w-0.5 bg-white z-20 cursor-ew-resize">
+                        <div
+                            class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-white shadow-2xl rounded-full flex items-center justify-center border border-gray-100">
+                            <i data-lucide="move-horizontal" class="w-4 h-4 text-black"></i>
+                        </div>
+                    </div>
+                </div>
+                <img id="lightboxImg" src="" class="hidden max-h-[80vh] rounded-3xl shadow-2xl">
+                <div id="lightboxRes"
+                    class="absolute top-4 left-4 bg-black/30 backdrop-blur-md border border-white/20 text-white px-3 py-1.5 rounded-full text-[10px] font-medium tracking-wider opacity-0 transition-opacity duration-300 pointer-events-none z-30">
+                </div>
+            </div>
+            <div class="mt-8">
+                <button onclick="downloadLightboxImage()"
+                    class="px-10 py-4 bg-black text-white rounded-full text-[10px] font-black uppercase tracking-widest flex items-center gap-3 shadow-xl">
+                    <i data-lucide="save" class="w-4 h-4"></i> Save Master
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        lucide.createIcons();
+        function generateUUID() {
+            if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+                try { return crypto.randomUUID(); } catch (e) { }
+            }
+            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                return v.toString(16);
+            });
+        }
+        const CLIENT_ID = localStorage.getItem("client_id") || generateUUID();
+        localStorage.setItem("client_id", CLIENT_ID);
+
+        let uploadedPath = "";
+        let currentResult = null;
+        let currentUpscaleFactor = 2048;
+        let enhanceProvider = 'local';
+
+        function setEnhanceProvider(p) {
+            enhanceProvider = p;
+            document.getElementById('providerLocal').className = p === 'local'
+                ? 'provider-btn engine-btn active'
+                : 'provider-btn engine-btn';
+            document.getElementById('providerMs').className = p === 'ms'
+                ? 'provider-btn engine-btn active'
+                : 'provider-btn engine-btn';
+            document.getElementById('localControls').classList.toggle('hidden', p !== 'local');
+            document.getElementById('msControls').classList.toggle('hidden', p !== 'ms');
+            lucide.createIcons();
+        }
+
+        const dropzone = document.getElementById('dropzone');
+        const fileInput = document.getElementById('fileInput');
+        const previewImg = document.getElementById('previewImg');
+        const slider = document.getElementById('strengthSlider');
+        const valDisplay = document.getElementById('strengthVal');
+
+        function setUpscaleFactor(factor) {
+            currentUpscaleFactor = factor;
+            const btn2x = document.getElementById('btn2x');
+            const btn4x = document.getElementById('btn4x');
+
+            // Helper to set active/inactive styles
+            const setActive = (btn) => {
+                btn.className = "py-2.5 rounded-xl border border-black bg-black text-white text-[10px] font-bold transition-all";
+            };
+            const setInactive = (btn) => {
+                btn.className = "py-2.5 rounded-xl border border-gray-200 text-gray-400 text-[10px] font-bold hover:border-black hover:text-black transition-all";
+            };
+
+            if (factor === 2048) {
+                setActive(btn2x);
+                setInactive(btn4x);
+            } else {
+                setInactive(btn2x);
+                setActive(btn4x);
+            }
+        }
+
+        dropzone.onclick = () => fileInput.click();
+        fileInput.onchange = (e) => handleFile(e.target.files[0]);
+
+        // Drag and Drop
+        dropzone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropzone.classList.add('border-black', 'bg-gray-50');
+        });
+        dropzone.addEventListener('dragleave', () => {
+            dropzone.classList.remove('border-black', 'bg-gray-50');
+        });
+        dropzone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropzone.classList.remove('border-black', 'bg-gray-50');
+            if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+                handleFile(e.dataTransfer.files[0]);
+            }
+        });
+
+        // Paste support
+        let isHovering = false;
+        dropzone.addEventListener('mouseenter', () => isHovering = true);
+        dropzone.addEventListener('mouseleave', () => isHovering = false);
+        window.addEventListener('paste', (e) => {
+            if (!isHovering) return;
+            const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+            for (let item of items) {
+                if (item.kind === 'file' && item.type.startsWith('image/')) {
+                    const file = item.getAsFile();
+                    handleFile(file);
+                    break;
+                }
+            }
+        });
+
+        slider.oninput = function () {
+            valDisplay.innerText = parseFloat(this.value).toFixed(2);
+        };
+
+        document.getElementById('msStrengthSlider').oninput = function () {
+            document.getElementById('msStrengthVal').innerText = parseFloat(this.value).toFixed(2);
+        };
+
+        async function handleFile(file) {
+            if (!file) return;
+            const btn = document.getElementById('genBtn');
+            const btnText = document.getElementById('btnText');
+
+            // Disable button during upload
+            btn.disabled = true;
+            btnText.innerText = "Uploading...";
+
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                previewImg.src = e.target.result;
+                previewImg.classList.remove('hidden');
+                document.getElementById('uploadContent').classList.add('opacity-0');
+                document.getElementById('changeOverlay').classList.replace('hidden', 'flex');
+            };
+            reader.readAsDataURL(file);
+
+            const formData = new FormData();
+            formData.append('files', file);
+            try {
+                const res = await fetch('/api/upload', { method: 'POST', body: formData });
+                const data = await res.json();
+                uploadedPath = data.files[0].comfy_name;
+                // Enable button after successful upload
+                btn.disabled = false;
+                btnText.innerText = "Begin Remastering";
+            } catch (err) {
+                console.error("Upload error");
+                btnText.innerText = "Upload Failed";
+                btn.disabled = false;
+            }
+        }
+
+        function toggleUpscaleOptions() {
+            const toggle = document.getElementById('upscaleToggle');
+            const options = document.getElementById('upscaleOptions');
+            if (toggle.checked) {
+                options.classList.remove('hidden');
+                options.classList.add('grid');
+            } else {
+                options.classList.add('hidden');
+                options.classList.remove('grid');
+            }
+        }
+
+        async function handleGenerate() {
+            if (!uploadedPath) {
+                const dropzone = document.getElementById('dropzone');
+                dropzone.style.transition = "0.2s";
+                dropzone.style.borderColor = "#ef4444";
+                dropzone.style.transform = "scale(0.98)";
+                setTimeout(() => { dropzone.style.borderColor = ""; dropzone.style.transform = "scale(1)"; }, 300);
+                return;
+            }
+            const btn = document.getElementById('genBtn');
+            btn.disabled = true;
+            btn.style.backgroundColor = '#333';
+            btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400 fill-yellow-400 animate-pulse"></i><span class="tracking-[0.4em] text-[11px] uppercase">Processing...</span>`;
+            lucide.createIcons();
+            document.getElementById('emptyState').classList.add('hidden');
+            document.getElementById('outputImg').classList.add('hidden');
+            document.getElementById('loadingState').classList.remove('hidden');
+
+            let debugStep = "Start";
+            try {
+                let finalData;
+
+                if (enhanceProvider === 'ms') {
+                    // MS Cloud: Klein model + enhance LoRA
+                    debugStep = "MS Cloud Request";
+                    const previewSrc = document.getElementById('previewImg').src;
+                    if (!previewSrc || previewSrc === window.location.href) throw new Error("请先上传图片");
+                    const strength = parseFloat(document.getElementById('msStrengthSlider').value) || 0.8;
+                    const prompt = document.getElementById('msPromptInput').value.trim()
+                        || 'masterpiece, best quality, ultra-detailed, high resolution';
+                    const msRes = await fetch('/api/ms/generate', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            prompt,
+                            model: 'black-forest-labs/FLUX.2-klein-9B',
+                            image_urls: [previewSrc],
+                            loras: { 'Daniel8152/Klein-enhance': strength },
+                            client_id: CLIENT_ID
+                        })
+                    });
+                    if (!msRes.ok) {
+                        const err = await msRes.json().catch(() => ({}));
+                        throw new Error(err.detail || 'MS生成失败');
+                    }
+                    const msData = await msRes.json();
+                    if (!msData.url) throw new Error("MS生成失败: 未返回图片");
+                    finalData = { images: [msData.url], timestamp: Date.now(), params: { "15": { "image": uploadedPath } } };
+
+                } else {
+                    // Local ComfyUI
+                    const isUpscale = document.getElementById('upscaleToggle').checked;
+
+                    debugStep = "Phase 1 Request";
+                    btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400 fill-yellow-400 animate-pulse"></i><span class="tracking-[0.4em] text-[11px] uppercase">${isUpscale ? "Phase 1/2: Enhancing..." : "Processing..."}</span>`;
+                    lucide.createIcons();
+
+                    const enhanceRes = await fetch('/api/generate', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            workflow_json: "Z-Image-Enhance.json",
+                            params: { "15": { "image": uploadedPath }, "204": { "value": parseFloat(slider.value) } },
+                            type: "enhance",
+                            client_id: CLIENT_ID
+                        })
+                    });
+                    const enhanceData = await enhanceRes.json();
+                    if (enhanceData.error) throw new Error("Enhance API Error: " + enhanceData.error);
+                    if (!enhanceData.images?.length) throw new Error("Enhance failed: No images returned");
+
+                    finalData = enhanceData;
+
+                    if (isUpscale) {
+                        debugStep = "Phase 2 Preparation";
+                        btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400 fill-yellow-400 animate-pulse"></i><span class="tracking-[0.4em] text-[11px] uppercase">Phase 2/2: Uploading...</span>`;
+                        lucide.createIcons();
+
+                        const imgUrl = enhanceData.images[0];
+                        let imgBlob;
+                        try {
+                            const blobRes = await fetch(imgUrl);
+                            if (!blobRes.ok) throw new Error(`Fetch failed status: ${blobRes.status}`);
+                            imgBlob = await blobRes.blob();
+                        } catch (e) { throw new Error(`Failed to fetch Phase 1 image: ${e.message}`); }
+
+                        debugStep = "Phase 2 Upload";
+                        const formData = new FormData();
+                        formData.append('files', imgBlob, 'temp_upscale_input.png');
+                        const uploadRes = await fetch('/api/upload', { method: 'POST', body: formData });
+                        if (!uploadRes.ok) throw new Error(`Upload failed status: ${uploadRes.status}`);
+                        const uploadData = await uploadRes.json();
+                        if (!uploadData.files?.[0]) throw new Error("Intermediate upload failed");
+                        const uploadedInput = uploadData.files[0].comfy_name;
+
+                        debugStep = "Phase 2 Execution";
+                        btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400 fill-yellow-400 animate-pulse"></i><span class="tracking-[0.4em] text-[11px] uppercase">Phase 2/2: Upscaling...</span>`;
+                        lucide.createIcons();
+                        const seed = Math.floor(Math.random() * 4294967295);
+                        const upscaleRes = await fetch('/api/generate', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                workflow_json: "upscale.json",
+                                params: { "15": { "image": uploadedInput }, "172": { "seed": seed, "resolution": currentUpscaleFactor } },
+                                type: "enhance",
+                                client_id: CLIENT_ID
+                            })
+                        });
+                        finalData = await upscaleRes.json();
+                        if (finalData.error) throw new Error("Upscale API Error: " + finalData.error);
+                        if (!finalData.images?.length) throw new Error("Upscale failed: No images returned");
+                    }
+                }
+
+                currentResult = finalData;
+                const out = document.getElementById('outputImg');
+                out.src = finalData.images[0];
+                out.classList.remove('hidden');
+                document.getElementById('downloadBtn').classList.remove('hidden');
+                document.getElementById('downloadBtn').href = finalData.images[0];
+                document.getElementById('loadingState').classList.add('hidden');
+                renderImageCard(finalData, true);
+
+            } catch (error) {
+                console.error("Generation Error at step " + debugStep, error);
+                document.getElementById('emptyState').classList.remove('hidden');
+                document.getElementById('loadingState').classList.add('hidden');
+                alert(`Error at ${debugStep}: ${error.message || JSON.stringify(error)}`);
+            } finally {
+                btn.disabled = false;
+                btn.style.backgroundColor = '';
+                btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400"></i><span id="btnText">Begin Remastering</span>`;
+                lucide.createIcons();
+            }
+        }
+
+        function zoomImage() {
+            if (currentResult) {
+                // Ensure comparison works by injecting params if missing
+                if (!currentResult.params && uploadedPath) {
+                    currentResult.params = { "15": { "image": uploadedPath } };
+                }
+                openLightbox(currentResult);
+            }
+        }
+
+        function renderImageCard(data, isNew = false) {
+            const masonry = document.getElementById('masonry');
+            if (document.getElementById(`h-${data.timestamp}`)) return;
+
+            const card = document.createElement('div');
+            card.id = `h-${data.timestamp}`;
+            card.className = 'masonry-item group relative rounded-2xl overflow-hidden cursor-zoom-in';
+            card.onclick = () => openLightbox(data);
+
+            card.innerHTML = `
+                <img src="${data.images[0]}" class="w-full h-auto block transform group-hover:scale-105 transition-transform duration-1000">
+                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-5">
+                    <p class="text-white text-[9px] font-black uppercase tracking-widest">Remaster Archive</p>
+                </div>
+            `;
+            isNew ? masonry.prepend(card) : masonry.appendChild(card);
+        }
+
+        function initCompareEvents() {
+            const container = document.getElementById('compareContainer');
+            const wrapper = document.getElementById('compareOriginalWrapper');
+            const slider = document.getElementById('compareSlider');
+            let isDragging = false;
+
+            const updateSlider = (clientX) => {
+                const rect = container.getBoundingClientRect();
+                let x = clientX - rect.left;
+                let percent = (x / rect.width) * 100;
+                percent = Math.max(0, Math.min(100, percent));
+                wrapper.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;
+                slider.style.left = `${percent}%`;
+            };
+
+            const start = (e) => { isDragging = true; e.preventDefault(); };
+            const end = () => isDragging = false;
+            const move = (e) => {
+                if (!isDragging) return;
+                const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+                updateSlider(clientX);
+            };
+
+            container.addEventListener('mousedown', (e) => { if (e.target === slider) return; updateSlider(e.clientX); start(e); });
+            slider.addEventListener('mousedown', start);
+            window.addEventListener('mouseup', end);
+            window.addEventListener('mousemove', move);
+            slider.addEventListener('touchstart', start, { passive: false });
+            window.addEventListener('touchend', end);
+            window.addEventListener('touchmove', move, { passive: false });
+        }
+
+        function openLightbox(data) {
+            const compare = document.getElementById('compareContainer');
+            const single = document.getElementById('lightboxImg');
+            const resPill = document.getElementById('lightboxRes');
+
+            resPill.style.opacity = '0';
+            const updateRes = (target) => {
+                if (target.naturalWidth) {
+                    resPill.innerText = `${target.naturalWidth} x ${target.naturalHeight}`;
+                    resPill.style.opacity = '1';
+                }
+            };
+
+            if (data.params?.["15"]?.image) {
+                compare.classList.remove('hidden');
+                single.classList.add('hidden');
+                const genImg = document.getElementById('compareGenerated');
+                document.getElementById('compareOriginal').src = `/api/view?filename=${encodeURIComponent(data.params["15"].image)}&type=input`;
+                genImg.src = data.images[0];
+                document.getElementById('compareOriginalWrapper').style.clipPath = 'inset(0 50% 0 0)';
+                document.getElementById('compareSlider').style.left = '50%';
+
+                genImg.onload = () => updateRes(genImg);
+                if (genImg.complete) updateRes(genImg);
+            } else {
+                compare.classList.add('hidden');
+                single.classList.remove('hidden');
+                single.src = data.images[0];
+
+                single.onload = () => updateRes(single);
+                if (single.complete) updateRes(single);
+            }
+            document.getElementById('lightbox').classList.replace('hidden', 'flex');
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeLightbox() {
+            document.getElementById('lightbox').classList.replace('flex', 'hidden');
+            document.body.style.overflow = 'auto';
+        }
+
+        function handleOutsideClick(e) { if (e.target.id === 'lightbox') closeLightbox(); }
+
+        async function loadHistory() {
+            try {
+                const res = await fetch('/api/history?type=enhance');
+                const history = await res.json();
+                history.forEach(item => renderImageCard(item));
+            } catch (e) { }
+        }
+
+        window.onload = () => {
+            loadHistory();
+            initCompareEvents();
+        };
+    </script>
+</body>
+
+</html>

26-5-10-API-Studio/static/gpt-chat.html

@@ -0,0 +1,538 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="/static/logo.png" type="image/png">
+    <title>GPT 对话</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="/static/theme.js?v=20260509-global-theme-output-drag"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;800&display=swap');
+        :root { --ease:cubic-bezier(.4,0,.2,1); --content-width:1160px; }
+        * { box-sizing:border-box; }
+        body { margin:0; height:100vh; overflow:hidden; background:#f8fafc; color:#111827; font-family:'Inter',-apple-system,sans-serif; -webkit-font-smoothing:antialiased; }
+        .chat-shell { height:100vh; display:flex; flex-direction:column; min-width:0; }
+        .topbar { height:82px; padding:0 36px; border-bottom:1px solid #eef2f7; background:rgba(248,250,252,.88); backdrop-filter:blur(16px); z-index:5; }
+        .topbar-inner { width:min(var(--content-width),100%); height:100%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:18px; }
+        .title-block { min-width:0; }
+        .title-block h1 { font-size:14px; font-weight:900; letter-spacing:.28em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+        .title-block p { margin-top:5px; font-size:10px; color:#94a3b8; font-weight:800; }
+        .top-actions { display:flex; align-items:center; gap:10px; position:relative; }
+        .action-btn { height:40px; min-width:40px; padding:0 12px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:8px; background:#fff; border:1px solid #e8edf3; color:#475569; font-size:10px; font-weight:900; letter-spacing:.14em; transition:all .2s var(--ease); }
+        .action-btn:hover { background:#f1f5f9; color:#111827; border-color:#dbe3ec; }
+        .history-popover { position:absolute; top:54px; right:0; width:min(360px,calc(100vw - 36px)); max-height:520px; overflow:hidden; background:#fff; border:1px solid #e8edf3; border-radius:24px; box-shadow:0 24px 60px rgba(15,23,42,.14); padding:12px; display:none; z-index:20; }
+        .history-popover.open { display:block; animation:popIn .18s var(--ease); }
+        .thread-list { max-height:430px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding-right:2px; }
+        .thread-row { display:grid; grid-template-columns:minmax(0,1fr) 34px; gap:6px; align-items:stretch; }
+        .thread-item { width:100%; border:1px solid transparent; background:#f8fafc; border-radius:16px; padding:13px 14px; text-align:left; transition:all .2s var(--ease); min-height:58px; min-width:0; }
+        .thread-item:hover { background:#f1f5f9; }
+        .thread-item.active { background:#111827; color:#fff; box-shadow:0 12px 24px rgba(0,0,0,.12); }
+        .thread-delete { width:34px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#cbd5e1; transition:all .2s var(--ease); }
+        .thread-delete:hover { background:#fee2e2; color:#dc2626; }
+        .messages { flex:1; overflow:auto; padding:34px 42px 268px; display:flex; flex-direction:column; align-items:center; gap:18px; }
+        .bubble-row { width:min(var(--content-width),100%); display:flex; gap:12px; align-items:flex-end; }
+        .bubble-row.user { justify-content:flex-end; }
+        .bubble { max-width:min(780px,78%); border-radius:24px; padding:15px 18px; font-size:14px; line-height:1.7; white-space:pre-wrap; word-break:break-word; box-shadow:0 1px 0 rgba(0,0,0,.03); }
+        .bubble.user { background:#111827; color:white; border-bottom-right-radius:8px; }
+        .bubble.assistant { background:#fff; border:1px solid #edf2f7; border-bottom-left-radius:8px; }
+        .bubble.assistant.streaming::after { content:""; display:inline-block; width:7px; height:1.2em; margin-left:3px; border-radius:999px; background:#111827; vertical-align:-.2em; animation:cursorBlink .9s steps(2,end) infinite; }
+        .bubble img.generated { display:block; width:min(460px,100%); border-radius:18px; margin-top:10px; border:1px solid rgba(0,0,0,.06); cursor:zoom-in; }
+        .thumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
+        .thumb { width:58px; height:58px; border-radius:14px; object-fit:cover; border:1px solid rgba(255,255,255,.28); }
+        .assistant .thumb { border-color:#e5e7eb; }
+        .composer-wrap { position:absolute; left:0; right:0; bottom:0; padding:24px 42px 30px; background:linear-gradient(to top,#f8fafc 82%,rgba(248,250,252,0)); }
+        .composer { width:min(var(--content-width),100%); margin:0 auto; min-height:184px; background:rgba(255,255,255,.96); border:1px solid #e8edf3; border-radius:30px; box-shadow:0 14px 38px rgba(15,23,42,.08); padding:12px; display:flex; flex-direction:column; gap:10px; }
+        .mode-switch { background:#f8fafc; border:1px solid #edf2f7; border-radius:999px; padding:2px; display:flex; gap:2px; }
+        .mode-switch button { height:30px; min-width:70px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:5px; color:#64748b; font-size:10px; font-weight:600; letter-spacing:.02em; transition:all .2s var(--ease); }
+        .mode-switch button.active { background:#fff; color:#111827; box-shadow:0 1px 3px rgba(15,23,42,.08); }
+        /* Provider Switch */
+        .provider-switch { background:#f8fafc; border:1px solid #edf2f7; border-radius:999px; padding:2px; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
+        .provider-switch button { height:30px; padding:0 10px; white-space:nowrap; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:5px; color:#64748b; font-size:10px; font-weight:600; letter-spacing:.02em; transition:all .2s var(--ease); }
+        .provider-switch button.active { background:#fff; color:#111827; box-shadow:0 1px 3px rgba(15,23,42,.08); }
+        .image-controls { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }
+        .image-controls.hidden { display:none; }
+        .mini-ratio { display:flex; gap:2px; background:#f8fafc; border:1px solid #edf2f7; border-radius:999px; padding:2px; overflow:auto; }
+        .mini-ratio button { height:28px; min-width:42px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:4px; color:#64748b; font-size:10px; font-weight:600; letter-spacing:0; transition:all .2s var(--ease); }
+        .mini-ratio button.active { background:#fff; color:#111827; box-shadow:0 1px 3px rgba(15,23,42,.08); }
+        .resolution-toggle { flex:0 0 auto; background:#f8fafc; border:1px solid #edf2f7; border-radius:999px; padding:2px; display:flex; gap:2px; }
+        .resolution-option { height:28px; min-width:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:#64748b; font-size:10px; font-weight:600; transition:all .2s var(--ease); }
+        .resolution-option.active { background:#fff; color:#111827; box-shadow:0 1px 3px rgba(15,23,42,.08); }
+        .composer-body { min-height:148px; border:1px solid #f1f5f9; background:#fbfdff; border-radius:22px; padding:14px; display:flex; flex-direction:column; gap:10px; }
+        .composer-body.drag-over { border-color:#cbd5e1; background:#f8fafc; box-shadow:inset 0 0 0 1px #e2e8f0; }
+        textarea { width:100%; flex:1; min-height:82px; max-height:168px; resize:none; outline:none; border:0; padding:2px; font-size:14px; line-height:1.65; background:transparent; }
+        .attachment-stack { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
+        .composer-inside-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
+        .left-tools { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; }
+        .inline-controls { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; }
+        .send-btn { width:44px; height:44px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#111827; color:#fff; transition:all .2s var(--ease); flex:0 0 auto; }
+        .send-btn:disabled { opacity:.45; cursor:not-allowed; }
+        .ref-strip { display:flex; align-items:center; gap:8px; overflow:auto; min-width:0; max-width:680px; min-height:0; }
+        .ref-strip:empty { display:none; }
+        .ref-chip { position:relative; width:54px; height:54px; border-radius:14px; overflow:hidden; border:1px solid #e5e7eb; background:#fff; flex:0 0 auto; }
+        .ref-chip img { width:100%; height:100%; object-fit:cover; }
+        .ref-chip button { position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.92); font-size:12px; line-height:18px; }
+        /* MS provider indicator badge */
+        .ms-badge { display:inline-flex; align-items:center; gap:4px; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:#0d1117; color:#7ee787; border-radius:999px; padding:3px 8px; }
+        @keyframes popIn { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
+        @keyframes cursorBlink { 0%,45% { opacity:1; } 46%,100% { opacity:0; } }
+        @media (max-width:900px){
+            .topbar { padding-left:18px; padding-right:18px; }
+            .messages { padding:24px 18px 360px; }
+            .composer-wrap { padding:20px 18px 24px; }
+            .composer { min-height:296px; }
+            .inline-controls { align-items:stretch; flex-direction:column; flex:1; }
+            .image-controls { align-items:stretch; flex-direction:column; }
+            .resolution-toggle { align-self:flex-start; }
+            .composer-inside-foot { align-items:flex-end; }
+            .ref-strip { max-width:100%; }
+            .bubble { max-width:88%; }
+            .action-btn span { display:none; }
+        }
+    </style>
+    <link rel="stylesheet" href="/static/theme.css?v=20260510-studio-pages-blue-dark10">
+</head>
+<body>
+    <div class="chat-shell">
+        <header class="topbar">
+            <div class="topbar-inner">
+                <div class="title-block">
+                    <h1 id="chatTitle">新对话</h1>
+                    <p id="modelLabel">Ready</p>
+                </div>
+                <div class="top-actions">
+                    <button onclick="newConversation()" class="action-btn" title="新建对话"><i data-lucide="plus" class="w-4 h-4"></i><span>NEW</span></button>
+                    <button onclick="toggleHistory()" class="action-btn" title="历史对话"><i data-lucide="history" class="w-4 h-4"></i><span>HISTORY</span></button>
+                    <div id="historyPopover" class="history-popover">
+                        <div class="flex items-center justify-between px-2 pb-3">
+                            <span class="text-[10px] font-black uppercase tracking-[0.3em] text-gray-400">Conversations</span>
+                            <button onclick="toggleHistory(false)" class="text-gray-400 hover:text-black"><i data-lucide="x" class="w-4 h-4"></i></button>
+                        </div>
+                        <div id="threadList" class="thread-list"></div>
+                    </div>
+                </div>
+            </div>
+        </header>
+
+        <section id="messages" class="messages"></section>
+
+        <div class="composer-wrap">
+            <div class="composer">
+                <div id="composerBody" class="composer-body">
+                    <textarea id="messageInput" rows="4" placeholder="输入消息，Enter 发送..." oninput="autoGrow(this)" onkeydown="handleKey(event)"></textarea>
+                    <div id="refStrip" class="ref-strip"></div>
+                    <div class="composer-inside-foot">
+                        <div class="left-tools">
+                            <div class="inline-controls">
+                                <div class="mode-switch">
+                                    <button id="chatModeBtn" class="active" onclick="setMode('chat')"><i data-lucide="message-circle" class="w-3.5 h-3.5"></i>Chat</button>
+                                    <button id="imageModeBtn" onclick="setMode('image')"><i data-lucide="image-plus" class="w-3.5 h-3.5"></i>Image</button>
+                                </div>
+                                <!-- Provider Switch (chat mode only) -->
+                                <div id="providerSwitchWrap" class="provider-switch">
+                                    <button id="providerComfly" class="provider-btn active" onclick="setProvider('comfly')">
+                                        <i data-lucide="key-round" class="w-3 h-3"></i>API
+                                    </button>
+                                    <button id="providerMs" class="provider-btn" onclick="setProvider('modelscope')">
+                                        <i data-lucide="cloud" class="w-3 h-3"></i>ModelScope
+                                    </button>
+                                </div>
+                                <div id="imageControls" class="image-controls hidden">
+                                    <div class="mini-ratio">
+                                        <button id="chat-ratio-square" class="active" onclick="setChatRatio('square')"><i data-lucide="square" class="w-3 h-3"></i>1:1</button>
+                                        <button id="chat-ratio-portrait" onclick="setChatRatio('portrait')"><i data-lucide="rectangle-vertical" class="w-3 h-3"></i>2:3</button>
+                                        <button id="chat-ratio-landscape" onclick="setChatRatio('landscape')"><i data-lucide="rectangle-horizontal" class="w-3 h-3"></i>3:2</button>
+                                        <button id="chat-ratio-story" onclick="setChatRatio('story')"><i data-lucide="smartphone" class="w-3 h-3"></i>9:16</button>
+                                        <button id="chat-ratio-wide" onclick="setChatRatio('wide')"><i data-lucide="monitor" class="w-3 h-3"></i>16:9</button>
+                                    </div>
+                                    <div class="resolution-toggle" title="分辨率">
+                                        <button id="chat-res-1k" class="resolution-option active" onclick="setChatResolution('1k')">1K</button>
+                                        <button id="chat-res-2k" class="resolution-option" onclick="setChatResolution('2k')">2K</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <button id="sendBtn" onclick="sendMessage()" class="send-btn" title="发送"><i data-lucide="send" class="w-5 h-5"></i></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        lucide.createIcons();
+        function uuid(){
+            if(crypto?.randomUUID) return crypto.randomUUID();
+            return 'u-' + Math.random().toString(16).slice(2) + Date.now();
+        }
+
+        const USER_KEY = 'gpt_chat_browser_user';
+        const userId = localStorage.getItem(USER_KEY) || uuid();
+        localStorage.setItem(USER_KEY, userId);
+
+        let conversations = [];
+        let currentConversation = null;
+        let mode = 'chat';
+        let provider = 'comfly';
+        let msModel = '';
+        let chatRatio = 'square';
+        let chatResolution = '1k';
+        let refs = [];
+        let config = { chat_model: 'gpt-5.5', image_model: 'gpt-image-1', ms_chat_models: [] };
+
+        const SIZE_OPTIONS = {
+            square: [['1024x1024','1k'], ['1536x1536','2k']],
+            portrait: [['720x1080','1k'], ['1024x1536','2k']],
+            landscape: [['1080x720','1k'], ['1536x1024','2k']],
+            story: [['720x1280','1k'], ['1080x1920','2k']],
+            wide: [['1280x720','1k'], ['1920x1080','2k']]
+        };
+
+        const headers = () => ({'Content-Type':'application/json', 'X-User-ID':userId});
+
+        async function loadConfig(){
+            try {
+                const data = await fetch('/api/config').then(r=>r.json());
+                config = { ...config, ...data };
+                config.chat_model = (config.chat_models || []).find(m => m === 'gpt-5.5') || config.chat_model || 'gpt-5.5';
+                // Default MS model to first in list
+                if (config.ms_chat_models?.length) msModel = config.ms_chat_models[0];
+                updateModelLabel();
+            } catch(e) {}
+        }
+
+        function setProvider(p) {
+            provider = p;
+            document.getElementById('providerComfly').classList.toggle('active', p === 'comfly');
+            document.getElementById('providerMs').classList.toggle('active', p === 'modelscope');
+            updateModelLabel();
+        }
+
+        async function loadConversations(){
+            const data = await fetch('/api/conversations', {headers:{'X-User-ID':userId}}).then(r=>r.json());
+            conversations = data.conversations || [];
+            renderThreads();
+            if(!currentConversation && conversations[0]) await openConversation(conversations[0].id);
+            if(!currentConversation) renderMessages([]);
+        }
+
+        function renderThreads(){
+            const list = document.getElementById('threadList');
+            list.innerHTML = '';
+            if(!conversations.length){
+                list.innerHTML = '<div class="px-3 py-8 text-center text-[11px] font-bold text-gray-300 uppercase tracking-widest">No History</div>';
+                return;
+            }
+            conversations.forEach(item => {
+                const row = document.createElement('div');
+                row.className = 'thread-row';
+                const btn = document.createElement('button');
+                btn.className = `thread-item ${currentConversation?.id === item.id ? 'active' : ''}`;
+                btn.onclick = () => openConversation(item.id, true);
+                btn.innerHTML = `<div class="text-sm font-bold truncate">${escapeHtml(item.title || '新对话')}</div><div class="text-[11px] opacity-50 truncate mt-1">${escapeHtml(item.last_message || '')}</div>`;
+                const del = document.createElement('button');
+                del.className = 'thread-delete';
+                del.title = '删除对话';
+                del.onclick = (event) => deleteConversation(item.id, event);
+                del.innerHTML = '<i data-lucide="trash-2" class="w-4 h-4"></i>';
+                row.appendChild(btn);
+                row.appendChild(del);
+                list.appendChild(row);
+            });
+            lucide.createIcons();
+        }
+
+        async function newConversation(){
+            const data = await fetch('/api/conversations', {method:'POST', headers:headers(), body:JSON.stringify({title:'新对话'})}).then(r=>r.json());
+            currentConversation = data.conversation;
+            document.getElementById('chatTitle').textContent = currentConversation.title || '新对话';
+            await loadConversations();
+            renderMessages([]);
+            toggleHistory(false);
+        }
+
+        async function openConversation(id, closePanel=false){
+            const data = await fetch(`/api/conversations/${id}`, {headers:{'X-User-ID':userId}}).then(r=>r.json());
+            currentConversation = data.conversation;
+            document.getElementById('chatTitle').textContent = currentConversation.title || '新对话';
+            renderThreads();
+            renderMessages(currentConversation.messages || []);
+            if(closePanel) toggleHistory(false);
+        }
+
+        async function deleteConversation(id, event){
+            event.stopPropagation();
+            if(!confirm('删除这条历史对话？')) return;
+            await fetch(`/api/conversations/${id}`, {method:'DELETE', headers:{'X-User-ID':userId}});
+            const deletedCurrent = currentConversation?.id === id;
+            if(deletedCurrent){ currentConversation = null; document.getElementById('chatTitle').textContent = '新对话'; renderMessages([]); }
+            await loadConversations();
+            if(deletedCurrent && conversations[0]) await openConversation(conversations[0].id);
+        }
+
+        function toggleHistory(force){
+            const pop = document.getElementById('historyPopover');
+            const shouldOpen = typeof force === 'boolean' ? force : !pop.classList.contains('open');
+            pop.classList.toggle('open', shouldOpen);
+            if(shouldOpen) lucide.createIcons();
+        }
+
+        document.addEventListener('click', (event) => {
+            const actions = document.querySelector('.top-actions');
+            if(actions && !actions.contains(event.target)) toggleHistory(false);
+        });
+
+        function setMode(next){
+            mode = next;
+            document.getElementById('chatModeBtn').classList.toggle('active', next === 'chat');
+            document.getElementById('imageModeBtn').classList.toggle('active', next === 'image');
+            document.getElementById('imageControls').classList.toggle('hidden', next !== 'image');
+            // Hide provider switch in image mode (COMFLY only for images)
+            document.getElementById('providerSwitchWrap').style.display = next === 'image' ? 'none' : '';
+            updateModelLabel();
+        }
+
+        function updateModelLabel(){
+            let label = '';
+            if (mode === 'image') {
+                label = config.image_model || 'Image';
+            } else if (provider === 'modelscope') {
+                label = msModel || (config.ms_chat_models?.[0]) || 'ModelScope';
+                // Shorten the display label
+                label = label.split('/').pop().split(':')[0];
+            } else {
+                label = config.chat_model || 'Chat';
+            }
+            document.getElementById('modelLabel').textContent = label;
+        }
+
+        function setChatRatio(next, preferredSize = ''){
+            chatRatio = next;
+            ['square','portrait','landscape','story','wide'].forEach(item => {
+                document.getElementById(`chat-ratio-${item}`).classList.toggle('active', item === next);
+            });
+            if(preferredSize){ const match = SIZE_OPTIONS[next].find(([value]) => value === preferredSize); if(match) chatResolution = match[1]; }
+            updateChatResolutionUI();
+        }
+
+        function setChatResolution(next){ chatResolution = next; updateChatResolutionUI(); }
+        function updateChatResolutionUI(){
+            document.getElementById('chat-res-1k').classList.toggle('active', chatResolution === '1k');
+            document.getElementById('chat-res-2k').classList.toggle('active', chatResolution === '2k');
+        }
+
+        function currentChatSize(){
+            const options = SIZE_OPTIONS[chatRatio] || SIZE_OPTIONS.square;
+            const match = options.find(([, label]) => label === chatResolution) || options[0];
+            return match[0];
+        }
+
+        function renderMessages(messages){
+            const box = document.getElementById('messages');
+            box.innerHTML = '';
+            if(!messages.length){
+                box.innerHTML = `<div class="m-auto text-center opacity-20"><i data-lucide="messages-square" class="w-14 h-14 mx-auto stroke-[1px]"></i><div class="text-[10px] font-black tracking-[0.5em] uppercase mt-4">READY</div></div>`;
+                lucide.createIcons();
+                return;
+            }
+            messages.forEach(addMessageBubble);
+            scrollBottom();
+        }
+
+        function addMessageBubble(msg){
+            const box = document.getElementById('messages');
+            const row = document.createElement('div');
+            row.className = `bubble-row ${msg.role === 'user' ? 'user' : 'assistant'}`;
+            const bubble = document.createElement('div');
+            bubble.className = `bubble ${msg.role === 'user' ? 'user' : 'assistant'}`;
+            const text = document.createElement('div');
+            text.textContent = msg.type === 'image' ? '生成完成' : (msg.content || '');
+            text.className = 'bubble-text';
+            bubble.appendChild(text);
+            if(msg.attachments?.length){
+                const thumbs = document.createElement('div');
+                thumbs.className = 'thumbs';
+                msg.attachments.forEach(ref => thumbs.insertAdjacentHTML('beforeend', `<img class="thumb" src="${ref.url}">`));
+                bubble.appendChild(thumbs);
+            }
+            if(msg.image_url){
+                const img = document.createElement('img');
+                img.className = 'generated';
+                img.src = msg.image_url;
+                img.onclick = () => window.open(msg.image_url, '_blank');
+                bubble.appendChild(img);
+            }
+            // Show model badge for assistant messages
+            if(msg.role === 'assistant' && msg.model){
+                const badge = document.createElement('div');
+                const modelShort = msg.model.split('/').pop().split(':')[0];
+                const isMs = msg.model.includes('/') && !msg.model.includes('gpt');
+                badge.style.cssText = `margin-top:8px;font-size:9px;font-weight:700;opacity:.45;letter-spacing:.06em;`;
+                badge.textContent = modelShort;
+                bubble.appendChild(badge);
+            }
+            row.appendChild(bubble);
+            box.appendChild(row);
+            return {row, bubble, text};
+        }
+
+        async function uploadFiles(files){
+            if(!files?.length) return;
+            const form = new FormData();
+            [...files].slice(0, 4 - refs.length).forEach(file => form.append('files', file));
+            const data = await fetch('/api/ai/upload', {method:'POST', body:form}).then(r=>r.json());
+            refs.push(...(data.files || []));
+            renderRefs();
+        }
+
+        function renderRefs(){
+            const strip = document.getElementById('refStrip');
+            strip.innerHTML = refs.map((ref,i) => `<div class="ref-chip"><img src="${ref.url}"><button onclick="removeRef(${i})">×</button></div>`).join('');
+        }
+
+        function removeRef(i){ refs.splice(i,1); renderRefs(); }
+
+        window.addEventListener('paste', e => {
+            const files = [...(e.clipboardData?.items || [])].filter(x => x.kind === 'file' && x.type.startsWith('image/')).map(x => x.getAsFile());
+            if(files.length) uploadFiles(files);
+        });
+
+        const composerBody = document.getElementById('composerBody');
+        composerBody.addEventListener('dragover', e => {
+            if(!hasImageFiles(e.dataTransfer?.items)) return;
+            e.preventDefault();
+            composerBody.classList.add('drag-over');
+        });
+        composerBody.addEventListener('dragleave', e => {
+            if(!composerBody.contains(e.relatedTarget)) composerBody.classList.remove('drag-over');
+        });
+        composerBody.addEventListener('drop', e => {
+            if(!hasImageFiles(e.dataTransfer?.items)) return;
+            e.preventDefault();
+            composerBody.classList.remove('drag-over');
+            const files = [...(e.dataTransfer?.files || [])].filter(file => file.type.startsWith('image/'));
+            uploadFiles(files);
+        });
+
+        function hasImageFiles(items){ return [...(items || [])].some(item => item.kind === 'file' && item.type.startsWith('image/')); }
+        function autoGrow(el){ el.style.height = 'auto'; el.style.height = Math.min(el.scrollHeight, 150) + 'px'; }
+        function handleKey(e){ if(e.key === 'Enter' && !e.shiftKey){ e.preventDefault(); sendMessage(); } }
+
+        async function sendMessage(){
+            const input = document.getElementById('messageInput');
+            const message = input.value.trim();
+            if(!message) return;
+            const btn = document.getElementById('sendBtn');
+            btn.disabled = true;
+            const pendingRefs = refs.slice();
+            refs = [];
+            renderRefs();
+            input.value = '';
+            autoGrow(input);
+            if(!currentConversation){
+                currentConversation = {id:'', title:'新对话', messages:[]};
+                document.getElementById('messages').innerHTML = '';
+            }
+            addMessageBubble({role:'user', content:message, attachments:pendingRefs});
+            const assistantBubble = addMessageBubble({role:'assistant', content: mode === 'image' ? '正在生成图片...' : ''});
+            if(mode === 'chat') assistantBubble.bubble.classList.add('streaming');
+            scrollBottom();
+            try {
+                if(mode === 'chat') {
+                    await streamChatMessage(message, pendingRefs, assistantBubble);
+                } else {
+                    const data = await fetch('/api/chat', {
+                        method:'POST',
+                        headers:headers(),
+                        body:JSON.stringify({
+                            conversation_id: currentConversation.id || '',
+                            message,
+                            mode,
+                            size: currentChatSize(),
+                            model: config.chat_model,
+                            image_model: config.image_model,
+                            reference_images: pendingRefs,
+                            provider: 'comfly',
+                        })
+                    }).then(async r => { if(!r.ok) throw new Error((await r.json()).detail || '请求失败'); return r.json(); });
+                    currentConversation = data.conversation;
+                    document.getElementById('chatTitle').textContent = currentConversation.title || '新对话';
+                    renderMessages(currentConversation.messages || []);
+                    await loadConversations();
+                }
+            } catch(err) {
+                renderMessages([...(currentConversation.messages || []), {role:'assistant', content:err.message || '���求失败'}]);
+            } finally {
+                btn.disabled = false;
+                scrollBottom();
+            }
+        }
+
+        async function streamChatMessage(message, pendingRefs, assistantBubble){
+            const currentProvider = provider;
+            const currentMsModel = msModel || (config.ms_chat_models?.[0] || '');
+            const currentChatModel = config.chat_model;
+
+            const res = await fetch('/api/chat/stream', {
+                method:'POST',
+                headers:headers(),
+                body:JSON.stringify({
+                    conversation_id: currentConversation.id || '',
+                    message,
+                    mode:'chat',
+                    model: currentProvider === 'modelscope' ? currentMsModel : currentChatModel,
+                    ms_model: currentProvider === 'modelscope' ? currentMsModel : '',
+                    provider: currentProvider,
+                    reference_images: pendingRefs
+                })
+            });
+            if(!res.ok) throw new Error((await res.json()).detail || '请求失败');
+            const reader = res.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+            let fullText = '';
+            while(true){
+                const {value, done} = await reader.read();
+                if(done) break;
+                buffer += decoder.decode(value, {stream:true});
+                const events = buffer.split('\n\n');
+                buffer = events.pop() || '';
+                for(const eventText of events){
+                    const line = eventText.split('\n').find(item => item.startsWith('data:'));
+                    if(!line) continue;
+                    const event = JSON.parse(line.slice(5).trim());
+                    if(event.type === 'meta'){
+                        currentConversation = event.conversation;
+                        document.getElementById('chatTitle').textContent = currentConversation.title || '新对话';
+                    }
+                    if(event.type === 'delta'){
+                        fullText += event.delta || '';
+                        assistantBubble.text.textContent = fullText;
+                        scrollBottom();
+                    }
+                    if(event.type === 'error') throw new Error(event.detail || '请求失败');
+                    if(event.type === 'done'){
+                        assistantBubble.bubble.classList.remove('streaming');
+                        currentConversation = event.conversation;
+                        document.getElementById('chatTitle').textContent = currentConversation.title || '新对话';
+                        renderMessages(currentConversation.messages || []);
+                        await loadConversations();
+                    }
+                }
+            }
+            assistantBubble.bubble.classList.remove('streaming');
+        }
+
+        function scrollBottom(){ requestAnimationFrame(() => { const box = document.getElementById('messages'); box.scrollTop = box.scrollHeight; }); }
+        function escapeHtml(str){ return String(str).replace(/[&<>"']/g, s => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[s])); }
+
+        window.onload = async () => {
+            setChatRatio('square');
+            setChatResolution('1k');
+            await loadConfig();
+            await loadConversations();
+        };
+    </script>
+</body>
+</html>

26-5-10-API-Studio/static/index.html

@@ -0,0 +1,663 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="/static/logo.png" type="image/png">
+    <title>AI Studio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="/static/theme.js?v=20260509"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&display=swap');
+
+        :root {
+            --accent: #000000;
+            --fluid-ease: cubic-bezier(0.3, 0, 0, 1);
+            --bg: #ffffff;
+            --sidebar-bg: #ffffff;
+            --stage-bg: #fcfcfc;
+            --border: #f2f2f2;
+            --stage-border: #f0f0f0;
+            --text: #121212;
+            --muted: #999;
+            --nav-hover-bg: #fafafa;
+            --monitor-bg: rgba(255, 255, 255, 0.7);
+            --monitor-border: rgba(0, 0, 0, 0.05);
+            --monitor-shadow: rgba(0, 0, 0, 0.04);
+            --divider: rgba(0, 0, 0, 0.1);
+            --scrollbar: #d8d8d8;
+            --scrollbar-hover: #c0c0c0;
+            --author-name: #000;
+            --social-icon: #ccc;
+        }
+
+        body.theme-dark {
+            --bg: #0f141d;
+            --sidebar-bg: #0f141d;
+            --stage-bg: #111722;
+            --border: #242d3b;
+            --stage-border: #2a3444;
+            --text: #e5e9f0;
+            --muted: #8f9aab;
+            --nav-hover-bg: #171d29;
+            --monitor-bg: rgba(23, 29, 41, 0.82);
+            --monitor-border: rgba(255, 255, 255, 0.08);
+            --monitor-shadow: rgba(0, 0, 0, 0.3);
+            --divider: rgba(255, 255, 255, 0.15);
+            --scrollbar: #334155;
+            --scrollbar-hover: #475569;
+            --author-name: #e5e9f0;
+            --social-icon: #64748b;
+        }
+
+        /* 极简滚动条 */
+        *::-webkit-scrollbar {
+            width: 10px !important;
+            height: 10px !important;
+            background: transparent !important;
+        }
+
+        *::-webkit-scrollbar-track {
+            background: transparent !important;
+            border: none !important;
+        }
+
+        *::-webkit-scrollbar-thumb {
+            background-color: var(--scrollbar) !important;
+            border: 3px solid transparent !important;
+            border-right-width: 5px !important;
+            background-clip: padding-box !important;
+            border-radius: 10px !important;
+        }
+
+        *::-webkit-scrollbar-thumb:hover {
+            background-color: var(--scrollbar-hover) !important;
+        }
+
+        *::-webkit-scrollbar-corner {
+            background: transparent !important;
+        }
+
+        * {
+            scrollbar-width: thin !important;
+            scrollbar-color: var(--scrollbar) transparent !important;
+        }
+
+        body {
+            background: var(--bg);
+            font-family: 'Space Grotesk', sans-serif;
+            overflow: hidden;
+            height: 100vh;
+            color: var(--text);
+            transition: background 0.3s, color 0.3s;
+        }
+
+        .app-shell {
+            display: flex;
+            width: 100%;
+            height: 100vh;
+            background: var(--bg);
+            position: relative;
+            transition: background 0.3s;
+        }
+
+        /* 侧边栏 */
+        .sidebar {
+            width: 80px;
+            min-width: 80px;
+            background: var(--sidebar-bg);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            border-right: 1px solid var(--border);
+            padding: 40px 0;
+            transition: width 0.5s var(--fluid-ease) 0.5s, background 0.3s, border-color 0.3s;
+            z-index: 50;
+        }
+
+        .sidebar:hover {
+            width: 220px;
+            transition-delay: 0s;
+        }
+
+        .logo-ring {
+            width: 36px;
+            height: 36px;
+            border: 2px solid var(--text);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.6s var(--fluid-ease) 0.5s, border-color 0.3s;
+        }
+
+        .sidebar:hover .logo-ring {
+            transform: rotate(90deg);
+            border-radius: 50%;
+            transition-delay: 0s;
+        }
+
+        /* 导航项 */
+        .nav-item {
+            position: relative;
+            width: 48px;
+            height: 48px;
+            margin: 10px 0;
+            display: flex;
+            align-items: center;
+            justify-content: flex-start;
+            border-radius: 18px;
+            cursor: pointer;
+            transition: all 0.3s var(--fluid-ease) 0.5s;
+            color: var(--muted);
+            overflow: hidden;
+            padding-left: 14px;
+        }
+
+        .sidebar:hover .nav-item {
+            width: 190px;
+            transition-delay: 0s;
+        }
+
+        .nav-item:hover {
+            background: var(--nav-hover-bg);
+            color: var(--text);
+        }
+
+        .nav-item.active {
+            background: var(--accent);
+            color: #fff;
+        }
+
+        body.theme-dark .nav-item.active {
+            background: #f1f5f9;
+            color: #0f172a;
+        }
+
+        .nav-text {
+            opacity: 0;
+            margin-left: 16px;
+            font-weight: 600;
+            font-size: 14px;
+            white-space: nowrap;
+            transition: opacity 0.3s 0.5s;
+        }
+
+        .sidebar:hover .nav-text {
+            opacity: 1;
+            transition-delay: 0.1s;
+        }
+
+        /* 主舞台区 */
+        .stage {
+            flex: 1;
+            background: var(--stage-bg);
+            margin: 16px;
+            border-radius: 32px;
+            overflow: hidden;
+            border: 1px solid var(--stage-border);
+            position: relative;
+            transition: background 0.3s, border-color 0.3s;
+        }
+
+        iframe {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            border: none;
+            opacity: 0;
+            transform: scale(1.02);
+            filter: blur(4px);
+            transition: all 0.5s var(--fluid-ease);
+            pointer-events: none;
+        }
+
+        iframe.active {
+            opacity: 1;
+            transform: scale(1);
+            filter: blur(0);
+            pointer-events: auto;
+        }
+
+        /* 左下角监视器 */
+        .nano-monitor {
+            position: absolute;
+            bottom: 24px;
+            left: 24px;
+            z-index: 100;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            background: var(--monitor-bg);
+            backdrop-filter: blur(12px);
+            padding: 6px 14px;
+            border-radius: 16px;
+            border: 1px solid var(--monitor-border);
+            box-shadow: 0 4px 20px var(--monitor-shadow);
+            font-family: monospace;
+            transition: all 0.4s var(--fluid-ease);
+        }
+
+        .nano-monitor.is-busy {
+            background: #000;
+            color: #fff;
+            border-color: rgba(255, 255, 255, 0.1);
+            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
+        }
+
+        .stat-group {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            font-size: 11px;
+            font-weight: 700;
+            color: var(--text);
+        }
+
+        .nano-monitor.is-busy .stat-group {
+            color: #fff;
+        }
+
+        .divider {
+            width: 1px;
+            height: 12px;
+            background: var(--divider);
+        }
+
+        .is-busy .divider {
+            background: rgba(255, 255, 255, 0.2);
+        }
+
+        .pulse-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: #10b981;
+        }
+
+        .spinner-nano {
+            width: 10px;
+            height: 10px;
+            border: 2px solid rgba(255, 255, 255, 0.2);
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            display: none;
+        }
+
+        .is-busy .spinner-nano { display: block; }
+        .is-busy .pulse-dot { display: none; }
+
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+
+        .label-nano {
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            opacity: 0.5;
+            font-size: 9px;
+        }
+
+        /* 作者组件 */
+        .author-box {
+            width: 100%;
+            height: 60px;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+
+        .dx-letter {
+            position: absolute;
+            font-size: 14px;
+            font-weight: 800;
+            color: var(--text);
+            transition: all 0.5s var(--fluid-ease) 0.4s;
+            z-index: 10;
+        }
+
+        .letter-d { transform: translateX(-8px); }
+        .letter-x { transform: translateX(8px); }
+
+        .sidebar:hover .letter-d {
+            transform: translateX(-120px);
+            opacity: 0;
+            transition-delay: 0s;
+        }
+
+        .sidebar:hover .letter-x {
+            transform: translateX(120px);
+            opacity: 0;
+            transition-delay: 0s;
+        }
+
+        .author-content-wrap {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            opacity: 0;
+            transform: scale(0.9);
+            transition: all 0.4s var(--fluid-ease) 0s;
+            pointer-events: none;
+        }
+
+        .sidebar:hover .author-content-wrap {
+            opacity: 1;
+            transform: scale(1);
+            transition-delay: 0.2s;
+            pointer-events: auto;
+        }
+
+        .author-name-lite {
+            font-size: 12px;
+            font-weight: 700;
+            margin-bottom: 8px;
+            color: var(--author-name);
+        }
+
+        .social-row-lite { display: flex; gap: 12px; }
+
+        .social-icon-lite {
+            color: var(--social-icon);
+            transition: color 0.2s, transform 0.2s;
+        }
+
+        .social-icon-lite:hover {
+            color: var(--text);
+            transform: translateY(-1px);
+        }
+
+        /* 主题切换按钮 */
+        .theme-toggle {
+            width: 36px;
+            height: 36px;
+            border-radius: 50%;
+            background: transparent;
+            border: 1px solid var(--border);
+            color: var(--muted);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            transition: all 0.3s var(--fluid-ease);
+            margin: 8px 0;
+            flex-shrink: 0;
+        }
+
+        .theme-toggle:hover {
+            background: var(--nav-hover-bg);
+            color: var(--text);
+            border-color: var(--stage-border);
+        }
+
+        .theme-toggle svg { width: 16px; height: 16px; }
+
+        .sidebar:hover .theme-toggle {
+            /* Expand to match nav item width */
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="app-shell">
+        <aside class="sidebar">
+            <div class="logo-ring mb-12">
+                <div class="w-1.5 h-1.5 rounded-full transition-colors" id="logo-dot" style="background:var(--text)"></div>
+            </div>
+
+            <nav>
+                <div class="nav-item active" onclick="switchUI(this, 'zimage')">
+                    <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.587-1.587a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    </svg>
+                    <span class="nav-text">文生图</span>
+                </div>
+                <div class="nav-item" onclick="switchUI(this, 'enhance')">
+                    <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path d="M13 10V3L4 14h7v7l9-11h-7z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    </svg>
+                    <span class="nav-text">细节增强</span>
+                </div>
+                <div class="nav-item" onclick="switchUI(this, 'klein')">
+                    <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    </svg>
+                    <span class="nav-text">图片编辑</span>
+                </div>
+                <div class="nav-item" onclick="switchUI(this, 'angle')">
+                    <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
+                        <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
+                        <line x1="12" y1="22.08" x2="12" y2="12"></line>
+                    </svg>
+                    <span class="nav-text">角度控制</span>
+                </div>
+
+                <!-- 分隔线 -->
+                <div style="width:32px;height:1px;background:var(--border);margin:8px auto;transition:background 0.3s;"></div>
+
+                <div class="nav-item" onclick="switchUI(this, 'online')">
+                    <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2z"></path>
+                        <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+                    </svg>
+                    <span class="nav-text">在线生图</span>
+                </div>
+                <div class="nav-item" onclick="switchUI(this, 'gpt-chat')">
+                    <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+                    </svg>
+                    <span class="nav-text">GPT 对话</span>
+                </div>
+                <div class="nav-item" onclick="switchUI(this, 'canvas')">
+                    <svg class="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <rect x="3" y="3" width="7" height="7"></rect>
+                        <rect x="14" y="3" width="7" height="7"></rect>
+                        <rect x="14" y="14" width="7" height="7"></rect>
+                        <rect x="3" y="14" width="7" height="7"></rect>
+                    </svg>
+                    <span class="nav-text">无限画布</span>
+                </div>
+            </nav>
+
+            <!-- 主题切换 -->
+            <div style="margin-top:auto;margin-bottom:8px;display:flex;align-items:center;justify-content:center;width:100%;">
+                <button class="theme-toggle" onclick="toggleTheme()" id="theme-toggle-btn" title="切换夜间模式">
+                    <svg id="icon-moon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                    </svg>
+                    <svg id="icon-sun" style="display:none" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <circle cx="12" cy="12" r="5"></circle>
+                        <line x1="12" y1="1" x2="12" y2="3"></line>
+                        <line x1="12" y1="21" x2="12" y2="23"></line>
+                        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                        <line x1="1" y1="12" x2="3" y2="12"></line>
+                        <line x1="21" y1="12" x2="23" y2="12"></line>
+                        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                    </svg>
+                </button>
+            </div>
+
+            <div class="author-box">
+                <span class="dx-letter letter-d">D</span>
+                <span class="dx-letter letter-x">X</span>
+
+                <div class="author-content-wrap">
+                    <div class="author-name-lite">wuli大雄</div>
+                    <div class="social-row-lite">
+                        <a href="https://space.bilibili.com/78652351" target="_blank" class="social-icon-lite">
+                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M17.813 4.653h-.854L15.66 3.053a1.147 1.147 0 00-1.63 0l-1.3 1.6h-1.46L9.97 3.053a1.147 1.147 0 00-1.63 0L7.043 4.653h-.854a3.946 3.946 0 00-3.93 3.934v8.117a3.946 3.946 0 003.93 3.934h11.624a3.946 3.946 0 003.93-3.934V8.587a3.946 3.946 0 00-3.93-3.934zM7.152 13.9a1.465 1.465 0 111.47-1.462 1.465 1.465 0 01-1.47 1.462zm7.696 0a1.465 1.465 0 111.47-1.462 1.465 1.465 0 01-1.47 1.462z" />
+                            </svg>
+                        </a>
+                        <a href="https://www.xiaohongshu.com/user/profile/6433c34c000000001a023538" target="_blank" class="social-icon-lite">
+                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14.5v-9l6 4.5-6 4.5z" />
+                            </svg>
+                        </a>
+                        <a href="https://www.youtube.com/@%E5%A4%A7%E9%9B%84dx" target="_blank" class="social-icon-lite">
+                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
+                            </svg>
+                        </a>
+                        <a href="https://x.com/dx8152?s=21" target="_blank" class="social-icon-lite">
+                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                            </svg>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </aside>
+
+        <main class="stage">
+            <iframe id="frame-zimage" src="/static/zimage.html?v=31" class="active"></iframe>
+            <iframe id="frame-enhance" data-src="/static/enhance.html?v=31"></iframe>
+            <iframe id="frame-klein" data-src="/static/klein.html?v=31"></iframe>
+            <iframe id="frame-angle" data-src="/static/angle.html?v=31"></iframe>
+            <iframe id="frame-online" data-src="/static/online.html?v=1"></iframe>
+            <iframe id="frame-gpt-chat" data-src="/static/gpt-chat.html?v=1"></iframe>
+            <iframe id="frame-canvas" data-src="/static/canvas.html?v=1"></iframe>
+
+            <div class="nano-monitor" id="nano-monitor">
+                <div class="stat-group">
+                    <div class="pulse-dot animate-pulse"></div>
+                    <div class="spinner-nano"></div>
+                    <span class="label-nano">ONLINE</span>
+                    <span id="online-val">1</span>
+                </div>
+                <div class="divider"></div>
+                <div class="stat-group">
+                    <span class="label-nano">QUEUE</span>
+                    <span id="queue-val">0</span>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        function generateUUID() {
+            if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+                try { return crypto.randomUUID(); } catch (e) { }
+            }
+            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                return v.toString(16);
+            });
+        }
+        const CID = localStorage.getItem("client_id") || generateUUID();
+        localStorage.setItem("client_id", CID);
+
+        function switchUI(el, id) {
+            document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+            el.classList.add('active');
+            document.querySelectorAll('iframe').forEach(f => f.classList.remove('active'));
+            const target = document.getElementById('frame-' + id);
+            target.classList.add('active');
+            if (!target.src) target.src = target.dataset.src;
+            // sync theme to newly activated iframe
+            syncThemeToFrame(target);
+        }
+
+        async function syncStatus() {
+            try {
+                const res = await fetch(`/api/queue_status?client_id=${CID}`);
+                const data = await res.json();
+                const monitor = document.getElementById('nano-monitor');
+                const queueVal = document.getElementById('queue-val');
+                const logoDot = document.getElementById('logo-dot');
+                const total = data.total || 0;
+                const pos = data.position || 0;
+                if (pos > 0) {
+                    monitor.classList.add('is-busy');
+                    queueVal.innerText = `${pos}/${total}`;
+                    logoDot.style.backgroundColor = '#3b82f6';
+                } else {
+                    monitor.classList.remove('is-busy');
+                    queueVal.innerText = total > 0 ? total : '0';
+                    logoDot.style.backgroundColor = 'var(--text)';
+                }
+            } catch (e) { }
+        }
+
+        const host = window.location.host;
+        if (host) {
+            const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+            const ws = new WebSocket(`${protocol}://${host}/ws/stats?client_id=${CID}`);
+            ws.onmessage = (event) => {
+                const data = JSON.parse(event.data);
+                if (data.type === 'stats') {
+                    document.getElementById('online-val').innerText = data.online_count;
+                } else if (data.type === 'cloud_status') {
+                    const iframe = document.querySelector('iframe.active');
+                    if (iframe && iframe.contentWindow) {
+                        iframe.contentWindow.postMessage(data, '*');
+                    }
+                }
+            };
+            setInterval(syncStatus, 2000);
+        }
+
+        // --- 夜间模式 ---
+
+        function syncThemeToFrame(iframe) {
+            const theme = (window.StudioTheme || {get: () => 'light'}).get();
+            try {
+                if (iframe && iframe.contentWindow) {
+                    iframe.contentWindow.postMessage({ type: 'studio-theme', theme }, '*');
+                }
+            } catch (e) {}
+        }
+
+        function broadcastTheme(theme) {
+            if (window.StudioTheme) {
+                window.StudioTheme.set(theme);
+            }
+            document.querySelectorAll('iframe').forEach(f => syncThemeToFrame(f));
+            updateThemeIcon(theme);
+        }
+
+        function updateThemeIcon(theme) {
+            const moon = document.getElementById('icon-moon');
+            const sun = document.getElementById('icon-sun');
+            if (theme === 'dark') {
+                moon.style.display = 'none';
+                sun.style.display = 'block';
+            } else {
+                moon.style.display = 'block';
+                sun.style.display = 'none';
+            }
+        }
+
+        function toggleTheme() {
+            const current = window.StudioTheme ? window.StudioTheme.get() : 'light';
+            broadcastTheme(current === 'dark' ? 'light' : 'dark');
+        }
+
+        // listen for theme changes triggered by theme.js
+        window.addEventListener('studio-theme-change', (e) => {
+            updateThemeIcon(e.detail.theme);
+        });
+
+        // init icon state on load
+        window.addEventListener('DOMContentLoaded', () => {
+            const theme = window.StudioTheme ? window.StudioTheme.get() : 'light';
+            updateThemeIcon(theme);
+        });
+
+        // sync theme when iframe loads
+        document.querySelectorAll('iframe').forEach(f => {
+            f.addEventListener('load', () => syncThemeToFrame(f));
+        });
+    </script>
+</body>
+
+</html>

26-5-10-API-Studio/static/klein.html

@@ -0,0 +1,800 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="/static/logo.png" type="image/png">
+    <title>Flux Klein | 极简一体化终端</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="/static/theme.js?v=20260509"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;800&display=swap');
+
+        :root {
+            --accent: #111827;
+            --bg: #f9fafb;
+            --card: #ffffff;
+            --easing: cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        *::-webkit-scrollbar { width:10px!important; height:10px!important; background:transparent!important; }
+        *::-webkit-scrollbar-track { background:transparent!important; border:none!important; }
+        *::-webkit-scrollbar-thumb { background-color:#d8d8d8!important; border:3px solid transparent!important; border-right-width:5px!important; background-clip:padding-box!important; border-radius:10px!important; }
+        *::-webkit-scrollbar-thumb:hover { background-color:#c0c0c0!important; }
+        *::-webkit-scrollbar-corner { background:transparent!important; }
+        * { scrollbar-width:thin!important; scrollbar-color:#d8d8d8 transparent!important; }
+
+        body {
+            background-color: var(--bg);
+            font-family: 'Inter', -apple-system, sans-serif;
+            color: var(--accent);
+            -webkit-font-smoothing: antialiased;
+        }
+
+        .container-box {
+            max-width: 1280px;
+            margin: 0 auto;
+            padding: 0 40px;
+            margin-top: 50px;
+        }
+
+        .nano-input {
+            background: var(--card);
+            border: 1px solid #eef0f2;
+            transition: all 0.3s var(--easing);
+        }
+        .nano-input:focus { border-color: #000; box-shadow: 0 0 0 1px #000; }
+
+        .upload-item {
+            background: var(--card);
+            border: 1px dashed #e2e8f0;
+            transition: all 0.4s var(--easing);
+            position: relative;
+            overflow: hidden;
+        }
+        .upload-item:hover { border-color: #000; background: #fff; transform: translateY(-2px); }
+        .upload-item.drag-over { border-style: solid; border-color: #000; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
+
+        .preview-img {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            animation: fadeIn 0.5s var(--easing);
+        }
+
+        .glass-btn {
+            background: #111827;
+            transition: all 0.3s var(--easing);
+        }
+        .glass-btn:hover { background: #000; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(0,0,0,0.1); }
+        .glass-btn:active { transform: scale(0.98); }
+
+        /* Engine panel (above run button) */
+        .engine-panel {
+            background: #fff;
+            border: 1px solid #edf0f3;
+            border-radius: 24px;
+            padding: 12px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .engine-label {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            color: #94a3b8;
+            font-size: 10px;
+            font-weight: 600;
+            letter-spacing: .04em;
+        }
+        .engine-switch {
+            background: #f8fafc;
+            border: 1px solid #edf2f7;
+            border-radius: 999px;
+            padding: 3px;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 2px;
+        }
+        .engine-btn {
+            border-radius: 999px;
+            height: 34px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 6px;
+            color: #64748b;
+            font-size: 10px;
+            font-weight: 600;
+            letter-spacing: .02em;
+            transition: all .25s var(--easing);
+            cursor: pointer;
+        }
+        .engine-btn.active {
+            background: #fff;
+            color: #111827;
+            box-shadow: 0 1px 3px rgba(15,23,42,.08);
+        }
+        .engine-btn:not(.active):hover { color: #111827; background: rgba(0,0,0,.04); }
+
+        /* Cloud progress */
+        .cloud-status {
+            font-size: 11px;
+            font-weight: 700;
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+            color: #64748b;
+            display: none;
+            align-items: center;
+            gap: 8px;
+        }
+        .cloud-status.visible { display: flex; }
+        .cloud-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
+            background: #10b981;
+            animation: pulse 1.5s ease-in-out infinite;
+        }
+        @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
+
+        .result-frame {
+            background: #ffffff;
+            border-radius: 32px;
+            border: 1px solid #f1f5f9;
+            box-shadow: 0 2px 15px rgba(0,0,0,0.02);
+        }
+
+        .masonry-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 20px;
+        }
+        @media (min-width: 768px) { .masonry-grid { grid-template-columns: repeat(4, 1fr); } }
+
+        .masonry-item {
+            aspect-ratio: 1 / 1;
+            border-radius: 24px;
+            overflow: hidden;
+            background: #fff;
+            border: 1px solid #f1f5f9;
+            transition: all 0.5s var(--easing);
+        }
+        .masonry-item:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
+
+        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+    </style>
+    <link rel="stylesheet" href="/static/theme.css?v=20260510-studio-pages-blue-dark10">
+</head>
+
+<body class="antialiased transition-colors duration-300">
+    <div class="container-box min-h-screen flex flex-col">
+        <header class="flex justify-between items-end mb-10">
+            <div class="space-y-1">
+                <h1 class="text-4xl font-extrabold tracking-tighter italic">FLUX KLEIN</h1>
+                <p class="text-[10px] font-bold uppercase tracking-[0.4em] text-gray-400">Next-Gen Generative Interface</p>
+            </div>
+        </header>
+
+        <main class="grid grid-cols-1 lg:grid-cols-12 gap-12">
+            <div class="lg:col-span-5 space-y-10">
+                <section class="space-y-4">
+                    <div class="flex items-center gap-2 text-gray-400">
+                        <i data-lucide="terminal" class="w-3.5 h-3.5"></i>
+                        <span class="text-[10px] font-black uppercase tracking-widest">Input Prompt</span>
+                    </div>
+                    <textarea id="promptInput" rows="5"
+                        class="nano-input w-full p-6 rounded-3xl text-sm outline-none resize-none placeholder-gray-300"
+                        placeholder="Describe your vision here..."></textarea>
+                </section>
+
+                <section class="space-y-4">
+                    <div class="flex items-center gap-2 text-gray-400">
+                        <i data-lucide="image" class="w-3.5 h-3.5"></i>
+                        <span class="text-[10px] font-black uppercase tracking-widest">Reference Layers</span>
+                        <span id="cloudImgNote" class="hidden ml-auto text-[9px] font-bold text-blue-500 bg-blue-50 px-2 py-0.5 rounded-full">Cloud uses Main image</span>
+                    </div>
+                    <div class="grid grid-cols-3 gap-4">
+                        <div id="drop-zone-1" onclick="document.getElementById('file1').click()"
+                            class="upload-item group aspect-square rounded-2xl flex flex-col items-center justify-center cursor-pointer">
+                            <input type="file" id="file1" class="hidden" onchange="handleFile(this.files[0], 1)">
+                            <i data-lucide="plus" class="w-5 h-5 text-gray-300 group-hover:text-black transition-colors"></i>
+                            <span class="text-[9px] mt-2 font-bold text-gray-400 uppercase">Main</span>
+                            <img id="prev1" class="preview-img hidden">
+                            <button id="del1" onclick="clearSlot(1, event)"
+                                class="hidden absolute top-2 right-2 w-6 h-6 bg-white/90 rounded-full shadow-sm z-10 flex items-center justify-center text-xs">×</button>
+                        </div>
+                        <div id="drop-zone-2" onclick="document.getElementById('file2').click()"
+                            class="upload-item group aspect-square rounded-2xl flex flex-col items-center justify-center cursor-pointer">
+                            <input type="file" id="file2" class="hidden" onchange="handleFile(this.files[0], 2)">
+                            <i data-lucide="plus" class="w-5 h-5 text-gray-300 group-hover:text-black transition-colors"></i>
+                            <span class="text-[9px] mt-2 font-bold text-gray-400 uppercase">Aux A</span>
+                            <img id="prev2" class="preview-img hidden">
+                            <button id="del2" onclick="clearSlot(2, event)"
+                                class="hidden absolute top-2 right-2 w-6 h-6 bg-white/90 rounded-full shadow-sm z-10 flex items-center justify-center text-xs">×</button>
+                        </div>
+                        <div id="drop-zone-3" onclick="document.getElementById('file3').click()"
+                            class="upload-item group aspect-square rounded-2xl flex flex-col items-center justify-center cursor-pointer">
+                            <input type="file" id="file3" class="hidden" onchange="handleFile(this.files[0], 3)">
+                            <i data-lucide="plus" class="w-5 h-5 text-gray-300 group-hover:text-black transition-colors"></i>
+                            <span class="text-[9px] mt-2 font-bold text-gray-400 uppercase">Aux B</span>
+                            <img id="prev3" class="preview-img hidden">
+                            <button id="del3" onclick="clearSlot(3, event)"
+                                class="hidden absolute top-2 right-2 w-6 h-6 bg-white/90 rounded-full shadow-sm z-10 flex items-center justify-center text-xs">×</button>
+                        </div>
+                    </div>
+                </section>
+
+                <div class="engine-panel">
+                    <div class="engine-label">
+                        <i data-lucide="cpu" class="w-3.5 h-3.5"></i>
+                        <span>Engine</span>
+                    </div>
+                    <div class="engine-switch">
+                        <button id="localBtn" class="engine-btn active" onclick="setEngine('local')">
+                            <i data-lucide="cpu" class="w-3 h-3"></i>Local
+                        </button>
+                        <button id="cloudBtn" class="engine-btn" onclick="setEngine('cloud')">
+                            <i data-lucide="cloud" class="w-3 h-3"></i>ModelScope
+                        </button>
+                    </div>
+                    <div id="cloudStatusBar" class="cloud-status">
+                        <div class="cloud-dot"></div>
+                        <span id="cloudStatusText">Connecting...</span>
+                    </div>
+                    <div id="loraSection" class="hidden flex-col gap-3 pt-2 border-t border-gray-100">
+                        <label class="flex items-center gap-3 cursor-pointer select-none" onclick="toggleLora()">
+                            <div class="relative w-9 h-5 flex-shrink-0">
+                                <div id="loraTrack" class="w-full h-full bg-gray-200 rounded-full transition-colors duration-200"></div>
+                                <div id="loraThumb" class="absolute left-0.5 top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform duration-200"></div>
+                            </div>
+                            <span class="text-[10px] font-bold text-gray-600 uppercase tracking-wider">细节增强 LoRA</span>
+                        </label>
+                        <div id="loraStrengthRow" class="hidden flex-col gap-1.5">
+                            <div class="flex justify-between">
+                                <span class="text-[9px] font-bold text-gray-400 uppercase tracking-widest">LoRA Strength</span>
+                                <span id="loraStrengthVal" class="text-[9px] font-bold text-gray-600">0.80</span>
+                            </div>
+                            <input type="range" id="loraStrengthSlider" min="0.1" max="1.0" step="0.05" value="0.8"
+                                class="w-full cursor-pointer accent-black" style="height:2px"
+                                oninput="document.getElementById('loraStrengthVal').textContent=parseFloat(this.value).toFixed(2)">
+                        </div>
+                    </div>
+                </div>
+
+                <button id="genBtn" onclick="submitWorkflow()"
+                    class="glass-btn w-full py-5 text-white rounded-xl font-bold flex items-center justify-center gap-3 shadow-lg">
+                    <i data-lucide="zap" id="btnIcon" class="w-4 h-4 text-yellow-400"></i>
+                    <span id="btnText" class="tracking-[0.3em] text-[11px] uppercase">Execute Synthesis</span>
+                </button>
+            </div>
+
+            <div class="lg:col-span-7">
+                <div id="resultBox"
+                    class="result-frame min-h-[500px] lg:h-full flex items-center justify-center relative overflow-hidden group">
+                    <div id="placeholder" class="text-center space-y-4 opacity-20">
+                        <i data-lucide="layout" class="w-12 h-12 mx-auto stroke-[1px]"></i>
+                        <p class="text-[10px] font-black tracking-[0.5em] uppercase">Canvas Ready</p>
+                    </div>
+                    <div id="loader" class="hidden text-center space-y-4">
+                        <div class="w-8 h-8 border-2 border-black border-t-transparent rounded-full animate-spin mx-auto"></div>
+                        <p class="text-[10px] font-black tracking-[0.5em] uppercase">Synthesizing</p>
+                    </div>
+                    <img id="outputImg"
+                        class="hidden w-full h-full object-contain p-8 cursor-zoom-in transition-all duration-700"
+                        onclick="zoomImage()">
+                    <a id="downloadBtn" href="#" download
+                        class="hidden absolute top-8 right-8 w-12 h-12 bg-white/90 backdrop-blur-md shadow-2xl rounded-2xl flex items-center justify-center hover:bg-black hover:text-white active:scale-95 transition-all">
+                        <i data-lucide="download" class="w-4 h-4"></i>
+                    </a>
+                </div>
+            </div>
+        </main>
+
+        <section class="mt-32">
+            <div class="flex items-center gap-6 mb-12">
+                <h2 class="text-[11px] font-black uppercase tracking-[0.5em]">Archives</h2>
+                <div class="h-px flex-1 bg-gray-100"></div>
+            </div>
+            <div id="masonry" class="masonry-grid"></div>
+            <div id="loadMoreTrigger"
+                class="py-20 text-center text-gray-300 text-[10px] font-bold uppercase tracking-widest cursor-pointer hover:text-black transition-colors">
+                Load More Archive
+            </div>
+        </section>
+    </div>
+
+    <div id="lightbox" onclick="handleOutsideClick(event)"
+        class="hidden fixed inset-0 z-50 flex items-center justify-center p-6 bg-white/95 backdrop-blur-3xl">
+        <div class="max-w-6xl w-full flex flex-col items-center relative">
+            <div class="relative w-full flex justify-center mb-8">
+                <div id="compareContainer"
+                    class="hidden relative w-full h-[75vh] rounded-[2.5rem] overflow-hidden shadow-2xl bg-[#fafafa]">
+                    <img id="compareGenerated" class="absolute inset-0 w-full h-full object-contain">
+                    <div id="compareOriginalWrapper"
+                        class="absolute inset-0 w-full h-full overflow-hidden border-r-2 border-white/50">
+                        <img id="compareOriginal" class="absolute inset-0 w-full h-full object-contain">
+                    </div>
+                    <div id="compareSlider" class="absolute inset-y-0 left-1/2 w-0.5 bg-white z-20 cursor-ew-resize">
+                        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-10 h-10 bg-white shadow-2xl rounded-full flex items-center justify-center border border-gray-100">
+                            <i data-lucide="move-horizontal" class="w-4 h-4 text-black"></i>
+                        </div>
+                    </div>
+                </div>
+                <img id="lightboxImg" src="" class="hidden max-h-[75vh] rounded-[2.5rem] shadow-2xl object-contain">
+                <div id="lightboxRes"
+                    class="absolute top-6 left-6 bg-black/30 backdrop-blur-md border border-white/20 text-white px-3 py-1.5 rounded-full text-[10px] font-medium tracking-wider opacity-0 transition-opacity duration-300 pointer-events-none z-30">
+                </div>
+                <button onclick="downloadLightboxImage()"
+                    class="absolute top-6 right-6 bg-black text-white w-12 h-12 rounded-2xl flex items-center justify-center shadow-2xl z-30 hover:scale-105 transition-transform">
+                    <i data-lucide="download" class="w-5 h-5"></i>
+                </button>
+            </div>
+            <div class="w-full bg-white border border-gray-100 rounded-[2rem] p-8 shadow-sm flex justify-between items-center gap-8">
+                <div class="flex-1">
+                    <span class="text-[9px] font-black text-gray-300 uppercase tracking-widest block mb-2">Prompt Execution</span>
+                    <p id="lightboxPrompt" class="text-gray-700 text-sm leading-relaxed"></p>
+                </div>
+                <button id="sameStyleBtn" onclick="applySameStyle()"
+                    class="hidden whitespace-nowrap bg-black text-white px-8 py-3.5 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-gray-800 transition-all active:scale-95 flex items-center gap-2">
+                    <i data-lucide="copy" class="w-4 h-4"></i> Replicate
+                </button>
+            </div>
+            <button onclick="closeLightbox()"
+                class="absolute -top-12 -right-12 p-4 text-gray-400 hover:text-black transition-colors">
+                <i data-lucide="x" class="w-8 h-8"></i>
+            </button>
+        </div>
+    </div>
+
+    <script>
+        lucide.createIcons();
+
+        function generateUUID() {
+            if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+                try { return crypto.randomUUID(); } catch (e) { }
+            }
+            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                return v.toString(16);
+            });
+        }
+        const CLIENT_ID_KEY = "client_id";
+        let CLIENT_ID = localStorage.getItem(CLIENT_ID_KEY) || generateUUID();
+        localStorage.setItem(CLIENT_ID_KEY, CLIENT_ID);
+
+        let uploadedNames = { 1: "", 2: "", 3: "" };
+        let base64Images = { 1: "", 2: "", 3: "" };
+        let allHistory = [];
+        let currentResult = null;
+        let currentLightboxData = null;
+        let currentIndex = 0;
+        const PAGE_SIZE = 24;
+        let isLoading = false;
+        let engine = 'local';
+        let loraEnabled = false;
+
+        // 引擎切换
+        function setEngine(mode) {
+            engine = mode;
+            document.getElementById('localBtn').classList.toggle('active', mode === 'local');
+            document.getElementById('cloudBtn').classList.toggle('active', mode === 'cloud');
+            document.getElementById('cloudImgNote').classList.toggle('hidden', mode === 'local');
+            const loraSection = document.getElementById('loraSection');
+            if (mode === 'cloud') {
+                loraSection.classList.remove('hidden');
+                loraSection.classList.add('flex');
+            } else {
+                loraSection.classList.add('hidden');
+                loraSection.classList.remove('flex');
+            }
+        }
+
+        function toggleLora() {
+            loraEnabled = !loraEnabled;
+            document.getElementById('loraTrack').style.background = loraEnabled ? '#111827' : '';
+            document.getElementById('loraThumb').style.transform = loraEnabled ? 'translateX(16px)' : '';
+            const row = document.getElementById('loraStrengthRow');
+            row.classList.toggle('hidden', !loraEnabled);
+            row.classList.toggle('flex', loraEnabled);
+        }
+
+        function setCloudStatus(text, visible = true) {
+            const bar = document.getElementById('cloudStatusBar');
+            const label = document.getElementById('cloudStatusText');
+            label.textContent = text;
+            bar.classList.toggle('visible', visible);
+        }
+
+        // 拖拽上传
+        let hoveredSlot = null;
+        [1, 2, 3].forEach(id => {
+            const zone = document.getElementById(`drop-zone-${id}`);
+            if (!zone) return;
+            zone.ondragover = (e) => { e.preventDefault(); zone.classList.add('drag-over'); };
+            zone.ondragleave = () => { zone.classList.remove('drag-over'); };
+            zone.ondrop = (e) => { e.preventDefault(); zone.classList.remove('drag-over'); handleFile(e.dataTransfer.files[0], id); };
+            zone.addEventListener('mouseenter', () => hoveredSlot = id);
+            zone.addEventListener('mouseleave', () => { if (hoveredSlot === id) hoveredSlot = null; });
+        });
+
+        window.addEventListener('paste', (e) => {
+            if (!hoveredSlot) return;
+            const items = (e.clipboardData || e.originalEvent.clipboardData).items;
+            for (let item of items) {
+                if (item.kind === 'file' && item.type.startsWith('image/')) {
+                    handleFile(item.getAsFile(), hoveredSlot);
+                    break;
+                }
+            }
+        });
+
+        async function handleFile(file, index) {
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                base64Images[index] = e.target.result;
+                const prev = document.getElementById(`prev${index}`);
+                prev.src = e.target.result;
+                prev.classList.remove('hidden');
+                document.getElementById(`del${index}`).classList.remove('hidden');
+            };
+            reader.readAsDataURL(file);
+
+            // Also upload to ComfyUI for local mode
+            const formData = new FormData();
+            formData.append('files', file);
+            try {
+                const res = await fetch('/api/upload', { method: 'POST', body: formData });
+                const data = await res.json();
+                uploadedNames[index] = data.files[0].comfy_name;
+            } catch (e) { uploadedNames[index] = file.name; }
+        }
+
+        function clearSlot(index, ev) {
+            if (ev) ev.stopPropagation();
+            const prev = document.getElementById(`prev${index}`);
+            prev.src = ""; prev.classList.add("hidden");
+            document.getElementById(`del${index}`).classList.add("hidden");
+            uploadedNames[index] = "";
+            base64Images[index] = "";
+        }
+
+        async function submitWorkflow() {
+            if (engine === 'cloud') {
+                await submitCloud();
+            } else {
+                await submitLocal();
+            }
+        }
+
+        async function submitLocal() {
+            if (!uploadedNames[1]) { alert("Please upload Main Image (Slot 1)"); return; }
+            const btn = document.getElementById('genBtn');
+            const loader = document.getElementById('loader');
+            const placeholder = document.getElementById('placeholder');
+            const outputImg = document.getElementById('outputImg');
+            const downloadBtn = document.getElementById('downloadBtn');
+
+            btn.disabled = true;
+            btn.style.backgroundColor = '#333';
+            btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400 fill-yellow-400 animate-pulse"></i><span class="tracking-[0.3em] text-[11px] uppercase">Synthesizing...</span>`;
+            lucide.createIcons();
+            placeholder.classList.add('hidden');
+            loader.classList.remove('hidden');
+
+            const payload = {
+                prompt: document.getElementById('promptInput').value,
+                workflow_json: "Flux2-Klein.json",
+                type: "klein",
+                params: {
+                    "168": { "text": document.getElementById('promptInput').value },
+                    "158": { "noise_seed": Math.floor(Math.random() * 1000000) },
+                    "278": { "image": uploadedNames[1] },
+                    "270": { "image": uploadedNames[2] || "" },
+                    "292": { "image": uploadedNames[3] || "" },
+                    "313": { "value": uploadedNames[2] !== "" },
+                    "314": { "value": uploadedNames[3] !== "" }
+                }
+            };
+
+            try {
+                const response = await fetch('/api/generate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ ...payload, client_id: CLIENT_ID })
+                });
+                const result = await response.json();
+                if (result.images?.[0]) {
+                    currentResult = result;
+                    outputImg.src = result.images[0];
+                    outputImg.classList.remove('hidden');
+                    downloadBtn.classList.remove('hidden');
+                    downloadBtn.href = result.images[0];
+                    renderImageCard(result, true);
+                } else if (result.error) {
+                    alert("Generation failed: " + result.error);
+                    placeholder.classList.remove('hidden');
+                }
+            } catch (err) {
+                alert("Generation failed: " + err.message);
+                placeholder.classList.remove('hidden');
+            } finally {
+                loader.classList.add('hidden');
+                btn.disabled = false;
+                btn.style.backgroundColor = '';
+                btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400"></i><span class="tracking-[0.3em] text-[11px] uppercase">Execute Synthesis</span>`;
+                lucide.createIcons();
+            }
+        }
+
+        async function submitCloud() {
+            const prompt = document.getElementById('promptInput').value.trim();
+            if (!prompt) { alert("Please enter a prompt"); return; }
+            if (!base64Images[1]) { alert("Please upload Main Image (Slot 1) for cloud generation"); return; }
+
+            const btn = document.getElementById('genBtn');
+            const loader = document.getElementById('loader');
+            const placeholder = document.getElementById('placeholder');
+            const outputImg = document.getElementById('outputImg');
+            const downloadBtn = document.getElementById('downloadBtn');
+
+            btn.disabled = true;
+            btn.style.backgroundColor = '#333';
+            btn.innerHTML = `<i data-lucide="cloud" class="w-4 h-4 text-blue-400 animate-pulse"></i><span class="tracking-[0.3em] text-[11px] uppercase">Cloud Processing...</span>`;
+            lucide.createIcons();
+            placeholder.classList.add('hidden');
+            loader.classList.remove('hidden');
+            setCloudStatus('Submitting to ModelScope...');
+
+            // Collect image URLs (base64 data URIs)
+            const imageUrls = [base64Images[1], base64Images[2], base64Images[3]].filter(Boolean);
+
+            try {
+                setCloudStatus('Processing with FLUX.2-Klein...');
+                const msPayload = {
+                    prompt,
+                    model: 'black-forest-labs/FLUX.2-klein-9B',
+                    image_urls: imageUrls,
+                    client_id: CLIENT_ID
+                };
+                if (loraEnabled) {
+                    const strength = parseFloat(document.getElementById('loraStrengthSlider').value);
+                    msPayload.loras = { 'Daniel8152/Klein-enhance': strength };
+                }
+                const response = await fetch('/api/ms/generate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(msPayload)
+                });
+
+                if (!response.ok) {
+                    const err = await response.json();
+                    throw new Error(err.detail || 'Cloud generation failed');
+                }
+
+                const result = await response.json();
+                if (result.url) {
+                    const resultData = {
+                        prompt,
+                        images: [result.url],
+                        timestamp: Date.now() / 1000,
+                        type: 'klein',
+                        model: 'black-forest-labs/FLUX.2-klein-9B'
+                    };
+                    currentResult = resultData;
+                    outputImg.src = result.url;
+                    outputImg.classList.remove('hidden');
+                    downloadBtn.classList.remove('hidden');
+                    downloadBtn.href = result.url;
+                    renderImageCard(resultData, true);
+                    setCloudStatus('Done!', false);
+                }
+            } catch (err) {
+                setCloudStatus(err.message, false);
+                alert("Cloud generation failed: " + err.message);
+                placeholder.classList.remove('hidden');
+            } finally {
+                loader.classList.add('hidden');
+                btn.disabled = false;
+                btn.style.backgroundColor = '';
+                btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400"></i><span class="tracking-[0.3em] text-[11px] uppercase">Execute Synthesis</span>`;
+                lucide.createIcons();
+            }
+        }
+
+        // --- Compare Slider ---
+        function initCompareSlider() {
+            const container = document.getElementById('compareContainer');
+            const wrapper = document.getElementById('compareOriginalWrapper');
+            const slider = document.getElementById('compareSlider');
+            let isDragging = false;
+            const updateSlider = (clientX) => {
+                const rect = container.getBoundingClientRect();
+                let percent = Math.max(0, Math.min(100, (clientX - rect.left) / rect.width * 100));
+                wrapper.style.clipPath = `inset(0 ${100 - percent}% 0 0)`;
+                slider.style.left = `${percent}%`;
+            };
+            const start = (e) => { isDragging = true; e.preventDefault(); };
+            const end = () => isDragging = false;
+            const move = (e) => {
+                if (!isDragging) return;
+                updateSlider(e.touches ? e.touches[0].clientX : e.clientX);
+            };
+            container.addEventListener('mousedown', (e) => { if (e.target === slider) return; updateSlider(e.clientX); start(e); });
+            slider.addEventListener('mousedown', start);
+            window.addEventListener('mouseup', end);
+            window.addEventListener('mousemove', move);
+            slider.addEventListener('touchstart', start, { passive: false });
+            window.addEventListener('touchend', end);
+            window.addEventListener('touchmove', move, { passive: false });
+        }
+        initCompareSlider();
+
+        function openLightbox(dataOrUrl) {
+            const lb = document.getElementById('lightbox');
+            const img = document.getElementById('lightboxImg');
+            const comp = document.getElementById('compareContainer');
+            const promptEl = document.getElementById('lightboxPrompt');
+            const sameStyleBtn = document.getElementById('sameStyleBtn');
+            const resPill = document.getElementById('lightboxRes');
+
+            let data = (typeof dataOrUrl === 'string') ? { images: [dataOrUrl] } : dataOrUrl;
+            currentLightboxData = data;
+            promptEl.textContent = data.prompt || "No prompt metadata found";
+            resPill.style.opacity = '0';
+
+            const updateRes = (target) => {
+                if (target.naturalWidth) {
+                    resPill.innerText = `${target.naturalWidth} x ${target.naturalHeight}`;
+                    resPill.style.opacity = '1';
+                }
+            };
+
+            if (data.params?.["278"]?.image) {
+                img.classList.add('hidden');
+                comp.classList.remove('hidden');
+                const genImg = document.getElementById('compareGenerated');
+                genImg.src = data.images[0];
+                document.getElementById('compareOriginal').src = `/api/view?filename=${encodeURIComponent(data.params["278"].image)}&type=input`;
+                document.getElementById('compareOriginalWrapper').style.clipPath = 'inset(0 50% 0 0)';
+                document.getElementById('compareSlider').style.left = '50%';
+                genImg.onload = () => updateRes(genImg);
+                if (genImg.complete) updateRes(genImg);
+            } else {
+                comp.classList.add('hidden');
+                img.classList.remove('hidden');
+                img.src = data.images[0];
+                img.onload = () => updateRes(img);
+                if (img.complete) updateRes(img);
+            }
+
+            sameStyleBtn.classList.toggle('hidden', !data.params);
+            lb.classList.replace('hidden', 'flex');
+            document.body.style.overflow = 'hidden';
+        }
+
+        function closeLightbox() {
+            document.getElementById('lightbox').classList.replace('flex', 'hidden');
+            document.body.style.overflow = 'auto';
+        }
+
+        function handleOutsideClick(e) { if (e.target.id === 'lightbox') closeLightbox(); }
+
+        function renderImageCard(data, isNew = false) {
+            const masonry = document.getElementById('masonry');
+            if (document.getElementById(`history-${data.timestamp}`)) return;
+            const card = document.createElement('div');
+            card.id = `history-${data.timestamp}`;
+            card.className = 'masonry-item group relative cursor-zoom-in';
+            card.onclick = () => openLightbox(data);
+            card.innerHTML = `
+                <img src="${data.images[0]}" class="w-full h-full object-cover block transform group-hover:scale-105 transition-transform duration-1000" loading="lazy">
+                <button onclick="deleteHistoryItem('${data.timestamp}', event)" class="absolute top-4 right-4 text-white hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+                    <i data-lucide="trash-2" class="w-4 h-4"></i>
+                </button>
+                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-all p-6 flex flex-col justify-end">
+                    <p class="text-white text-[10px] font-medium line-clamp-2 uppercase tracking-wider">${data.prompt || "Klein Archive"}</p>
+                    ${data.model ? `<p class="text-white/50 text-[9px] mt-1">${data.model.split('/').pop()}</p>` : ''}
+                </div>
+            `;
+            isNew ? masonry.prepend(card) : masonry.appendChild(card);
+            lucide.createIcons();
+        }
+
+        async function applySameStyle() {
+            if (!currentLightboxData?.params) return;
+            document.getElementById('promptInput').value = currentLightboxData.prompt || "";
+            const params = currentLightboxData.params;
+            const setSlot = (slotId, nodeId) => {
+                if (params[nodeId]?.image) {
+                    const fname = params[nodeId].image;
+                    uploadedNames[slotId] = fname;
+                    const prev = document.getElementById(`prev${slotId}`);
+                    prev.src = `/api/view?filename=${encodeURIComponent(fname)}&type=input`;
+                    prev.classList.remove('hidden');
+                    document.getElementById(`del${slotId}`).classList.remove('hidden');
+                } else { clearSlot(slotId); }
+            };
+            setSlot(1, "278"); setSlot(2, "270"); setSlot(3, "292");
+            closeLightbox();
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+
+        async function loadHistory(page = 0) {
+            if (isLoading) return;
+            const loader = document.getElementById('loadMoreTrigger');
+            try {
+                isLoading = true;
+                if (page === 0) {
+                    loader.innerText = "Loading Archives...";
+                    const res = await fetch('/api/history?type=klein');
+                    allHistory = await res.json();
+                    document.getElementById('masonry').innerHTML = '';
+                    currentIndex = 0;
+                } else {
+                    loader.innerText = "Loading...";
+                    await new Promise(r => setTimeout(r, 400));
+                }
+                const nextData = allHistory.slice(currentIndex, currentIndex + PAGE_SIZE);
+                nextData.forEach(item => renderImageCard(item));
+                currentIndex += nextData.length;
+                if (currentIndex >= allHistory.length) {
+                    loader.classList.add('hidden');
+                } else {
+                    loader.classList.remove('hidden');
+                    loader.innerText = "Load More Archive";
+                }
+            } catch (e) {
+                console.error(e);
+                loader.textContent = "Error loading history";
+            } finally {
+                isLoading = false;
+            }
+        }
+
+        function zoomImage() { if (currentResult) openLightbox(currentResult); }
+
+        function downloadLightboxImage() {
+            const url = currentLightboxData?.images[0];
+            if (!url) return;
+            const link = document.createElement('a');
+            link.href = url;
+            link.download = `Klein-${Date.now()}.png`;
+            link.click();
+        }
+
+        async function deleteHistoryItem(ts, ev) {
+            ev.stopPropagation();
+            if (!confirm("Delete this archive?")) return;
+            try {
+                const res = await fetch('/api/history/delete', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ timestamp: ts })
+                });
+                if ((await res.json()).success) {
+                    document.getElementById(`history-${ts}`).remove();
+                }
+            } catch (e) { alert("Delete failed"); }
+        }
+
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting && !isLoading && currentIndex < allHistory.length) loadHistory(1);
+        }, { threshold: 0.1 });
+
+        window.onload = () => {
+            loadHistory(0).then(() => {
+                const trigger = document.getElementById('loadMoreTrigger');
+                if (trigger) { observer.observe(trigger); trigger.onclick = () => loadHistory(1); }
+            });
+        };
+    </script>
+</body>
+
+</html>

26-5-10-API-Studio/static/login.html

@@ -0,0 +1,292 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <title>Impact & Bound Square - Enhanced</title>
+    <style>
+        body { 
+            margin: 0; 
+            overflow: hidden; 
+            background-color: #000; 
+            font-family: 'Inter', -apple-system, sans-serif;
+        }
+        canvas { display: block; }
+        
+        #loginForm {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -40%);
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+            z-index: 10;
+            width: 280px;
+            padding: 45px;
+            background: rgba(255, 255, 255, 0.02);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-radius: 40px;
+            border: 1px solid rgba(255, 255, 255, 0.08);
+        }
+        
+        #loginForm.visible {
+            opacity: 1;
+            visibility: visible;
+            transform: translate(-50%, -50%);
+        }
+        
+        .label {
+            color: rgba(255, 255, 255, 0.3);
+            font-size: 10px;
+            letter-spacing: 4px;
+            margin-bottom: 8px;
+            text-transform: uppercase;
+        }
+
+        .form-group {
+            position: relative;
+            margin-bottom: 35px;
+        }
+        
+        .form-group input {
+            width: 100%;
+            padding: 12px 0;
+            background: transparent;
+            border: none;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+            color: #fff;
+            font-size: 14px;
+            outline: none;
+        }
+
+        .form-group::after {
+            content: '';
+            position: absolute;
+            bottom: 0; left: 0;
+            width: 0; height: 1px;
+            background: #fff;
+            transition: width 0.6s ease;
+        }
+
+        .form-group input:focus ~ ::after { width: 100%; }
+        
+        #loginButton {
+            width: 100%;
+            padding: 16px;
+            background: #fff;
+            border: none;
+            border-radius: 50px;
+            color: #000;
+            font-size: 11px;
+            font-weight: 800;
+            letter-spacing: 6px;
+            cursor: pointer;
+            transition: all 0.4s;
+            margin-top: 10px;
+        }
+        
+        #loginButton:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
+        }
+
+        .timestamp {
+            position: absolute;
+            top: 40px;
+            right: 40px;
+            color: rgba(255, 255, 255, 0.15);
+            font-size: 10px;
+            font-family: monospace;
+        }
+    </style>
+</head>
+<body>
+<div class="timestamp" id="timer"></div>
+<canvas id="sandCanvas"></canvas>
+
+<div id="loginForm">
+    <div class="form-group">
+        <div class="label">Identity</div>
+        <input type="text" id="username" placeholder=" " autocomplete="off">
+    </div>
+    <div class="form-group">
+        <div class="label">Access Code</div>
+        <input type="password" id="password" placeholder=" " autocomplete="off">
+    </div>
+    <button id="loginButton">CONNECT</button>
+</div>
+
+<script>
+const canvas = document.getElementById('sandCanvas');
+const ctx = canvas.getContext('2d');
+const loginForm = document.getElementById('loginForm');
+const timerEl = document.getElementById('timer');
+
+let width, height, particles = [];
+const particleCount = 4500; 
+const mouseThreshold = 220;
+let isHovering = false;
+let noiseTimer = 0;
+
+function updateTimer() {
+    const now = new Date();
+    timerEl.innerText = now.toLocaleString('en-GB').toUpperCase();
+}
+setInterval(updateTimer, 1000);
+
+window.addEventListener('resize', init);
+window.addEventListener('mousemove', (e) => {
+    const dx = e.clientX - width / 2;
+    const dy = e.clientY - height / 2;
+    isHovering = Math.sqrt(dx*dx + dy*dy) < mouseThreshold;
+});
+
+function isInsideRoundedSquare(px, py, halfSide, radius) {
+    const dx = Math.abs(px - width / 2);
+    const dy = Math.abs(py - height / 2);
+    if (dx > halfSide || dy > halfSide) return false;
+    if (dx > halfSide - radius && dy > halfSide - radius) {
+        const cx = dx - (halfSide - radius);
+        const cy = dy - (halfSide - radius);
+        return (cx * cx + cy * cy <= radius * radius);
+    }
+    return true;
+}
+
+class Particle {
+    constructor() {
+        this.init();
+    }
+
+    init() {
+        const angle = Math.random() * Math.PI * 2;
+        // 重置时从中心稍外一点出生，避免堆在原点
+        const r = 5 + Math.random() * 15; 
+        this.x = width / 2 + Math.cos(angle) * r;
+        this.y = height / 2 + Math.sin(angle) * r;
+        this.vx = Math.cos(angle) * 2;
+        this.vy = Math.sin(angle) * 2;
+        this.size = Math.random() * 1.6;
+        this.alpha = Math.random() * 0.5 + 0.2;
+        this.isEscaping = false; 
+    }
+
+    update(breath) {
+        const dx = this.x - width / 2;
+        const dy = this.y - height / 2;
+        const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+
+        if (isHovering) {
+            this.vx += (Math.random() - 0.5) * 4;
+            this.vy += (Math.random() - 0.5) * 4;
+        } else {
+            // 1. 中心核心斥力 (防止从中心穿过)
+            const repulsionRadius = 45; 
+            if (dist < repulsionRadius) {
+                const force = (repulsionRadius - dist) / repulsionRadius;
+                this.vx += (dx / dist) * force * 6; 
+                this.vy += (dy / dist) * force * 6;
+            }
+
+            // 2. 爆发力 (随呼吸曲线)
+            const pushBase = Math.pow(breath, 5) * 14;
+            const randomScatter = (Math.random() - 0.5) * pushBase * 0.5;
+            this.vx += (dx / dist) * pushBase + randomScatter;
+            this.vy += (dy / dist) * pushBase + randomScatter;
+
+            // 3. 抛飞逃逸逻辑：呼吸最强时极小概率触发
+            if (breath > 0.88 && Math.random() > 0.98) {
+                this.isEscaping = true;
+            }
+
+            // 4. 边界逻辑
+            const side = 180; 
+            const cornerR = 80; 
+
+            if (!this.isEscaping) {
+                if (!isInsideRoundedSquare(this.x + this.vx, this.y + this.vy, side, cornerR)) {
+                    this.vx *= -0.4; // 碰撞衰减
+                    this.vy *= -0.4;
+                    this.vx += (Math.random() - 0.5) * 2;
+                    this.vy += (Math.random() - 0.5) * 2;
+                }
+
+                // 5. 向心引力：回归到圆环
+                const targetR = 140;
+                const pull = (targetR - dist) * 0.012; 
+                this.vx += (dx / dist) * pull;
+                this.vy += (dy / dist) * pull;
+            }
+        }
+
+        this.x += this.vx;
+        this.y += this.vy;
+        
+        // 摩擦力
+        const friction = this.isEscaping ? 0.98 : 0.86;
+        this.vx *= friction;
+        this.vy *= friction;
+
+        // 6. 重置：飞出界外或速度几乎停滞的逃逸粒子
+        if (dist > width * 0.6 || (this.isEscaping && Math.abs(this.vx) < 0.05)) {
+            this.init();
+        }
+    }
+
+    draw(breath) {
+        const b = 180 + breath * 75;
+        const finalAlpha = this.isEscaping ? this.alpha * 0.4 : this.alpha;
+        ctx.fillStyle = `rgba(${b}, ${b}, ${b}, ${finalAlpha})`;
+        ctx.fillRect(this.x, this.y, this.size, this.size);
+    }
+}
+
+function init() {
+    width = canvas.width = window.innerWidth;
+    height = canvas.height = window.innerHeight;
+    particles = [];
+    for (let i = 0; i < particleCount; i++) particles.push(new Particle());
+}
+
+function drawCore(breath) {
+    if (isHovering) return;
+    const size = 10 + breath * 4;
+    ctx.save();
+    ctx.shadowBlur = 40 * breath;
+    ctx.shadowColor = '#fff';
+    ctx.fillStyle = '#fff';
+    ctx.beginPath();
+    ctx.arc(width / 2, height / 2, size, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+}
+
+function animate() {
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+    ctx.fillRect(0, 0, width, height);
+
+    noiseTimer += 0.04;
+    const breath = Math.pow((Math.sin(noiseTimer) + 1) / 2, 2);
+
+    if (isHovering) {
+        loginForm.classList.add('visible');
+    } else {
+        loginForm.classList.remove('visible');
+    }
+
+    particles.forEach(p => {
+        p.update(breath);
+        p.draw(breath);
+    });
+
+    drawCore(breath);
+    requestAnimationFrame(animate);
+}
+
+init();
+updateTimer();
+animate();
+</script>
+</body>
+</html>

26-5-10-API-Studio/static/online.html

@@ -0,0 +1,329 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="/static/logo.png" type="image/png">
+    <title>在线生图</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="/static/theme.js?v=20260509-global-theme-output-drag"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;800&display=swap');
+        :root { --accent:#111827; --bg:#f9fafb; --card:#fff; --easing:cubic-bezier(0.4,0,0.2,1); }
+        body { background:var(--bg); font-family:'Inter',-apple-system,sans-serif; color:var(--accent); -webkit-font-smoothing:antialiased; }
+        .container-box { max-width:1280px; margin:0 auto; padding:0 40px; margin-top:50px; }
+        .nano-input { background:var(--card); border:1px solid #eef0f2; transition:all .3s var(--easing); }
+        .nano-input:focus { border-color:#000; box-shadow:0 0 0 1px #000; }
+        .upload-item { background:var(--card); border:1px dashed #e2e8f0; transition:all .4s var(--easing); position:relative; overflow:hidden; }
+        .upload-item:hover,.upload-item.drag-over { border-color:#000; transform:translateY(-2px); }
+        .preview-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:fadeIn .5s var(--easing); }
+        .glass-btn { background:#111827; transition:all .3s var(--easing); }
+        .glass-btn:hover { background:#000; transform:translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.1); }
+        .result-frame { background:#fff; border-radius:32px; border:1px solid #f1f5f9; box-shadow:0 2px 15px rgba(0,0,0,.02); }
+        .tool-panel { background:#fff; border:1px solid #edf0f3; border-radius:24px; padding:12px; display:flex; flex-direction:column; gap:10px; }
+        .model-pill { background:#f8fafc; border:1px solid #edf2f7; border-radius:999px; padding:3px; display:grid; grid-template-columns:1fr 1fr; gap:2px; }
+        .model-option { border-radius:999px; height:34px; display:flex; align-items:center; justify-content:center; gap:6px; color:#64748b; font-size:10px; font-weight:600; letter-spacing:.02em; transition:all .25s var(--easing); }
+        .model-option.active { background:#fff; color:#111827; box-shadow:0 1px 3px rgba(15,23,42,.08); }
+        .control-panel { background:#fff; border:1px solid #edf0f3; border-radius:24px; padding:12px; display:flex; flex-direction:column; gap:10px; }
+        .control-label { display:flex; align-items:center; gap:6px; color:#94a3b8; font-size:10px; font-weight:600; letter-spacing:.04em; }
+        .size-row { display:flex; align-items:center; gap:8px; }
+        .ratio-grid { flex:1; display:grid; grid-template-columns:repeat(5,1fr); gap:4px; background:#f8fafc; border:1px solid #edf2f7; border-radius:999px; padding:3px; min-width:0; }
+        .ratio-option { height:30px; border-radius:999px; display:flex; align-items:center; justify-content:center; gap:4px; color:#64748b; font-size:10px; font-weight:600; letter-spacing:0; transition:all .25s var(--easing); }
+        .ratio-option.active { background:#fff; color:#111827; box-shadow:0 1px 3px rgba(15,23,42,.08); }
+        .resolution-toggle { flex:0 0 auto; background:#f8fafc; border:1px solid #edf2f7; border-radius:999px; padding:3px; display:flex; gap:2px; }
+        .resolution-option { height:30px; min-width:42px; border-radius:999px; display:flex; align-items:center; justify-content:center; color:#64748b; font-size:10px; font-weight:600; transition:all .25s var(--easing); }
+        .resolution-option.active { background:#fff; color:#111827; box-shadow:0 1px 3px rgba(15,23,42,.08); }
+        .masonry-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
+        @media (min-width:768px){ .masonry-grid{ grid-template-columns:repeat(4,1fr); } }
+        @media (max-width:640px){ .size-row{ align-items:stretch; flex-direction:column; } .ratio-grid{ grid-template-columns:repeat(2,1fr); border-radius:18px; } .resolution-toggle{ align-self:flex-start; } }
+        .masonry-item { aspect-ratio:1/1; border-radius:24px; overflow:hidden; background:#fff; border:1px solid #f1f5f9; transition:all .5s var(--easing); }
+        .masonry-item:hover { transform:translateY(-6px); box-shadow:0 20px 40px rgba(0,0,0,.08); }
+        @keyframes fadeIn { from{opacity:0} to{opacity:1} }
+    </style>
+    <link rel="stylesheet" href="/static/theme.css?v=20260510-studio-pages-blue-dark10">
+</head>
+<body>
+    <div class="container-box min-h-screen flex flex-col">
+        <header class="flex justify-between items-end mb-16">
+            <div class="space-y-1">
+                <h1 class="text-4xl font-extrabold tracking-tighter italic">在线生图</h1>
+                <p class="text-[10px] font-bold uppercase tracking-[0.4em] text-gray-400">GPT / NANO BANANA IMAGE STUDIO</p>
+            </div>
+            <nav class="hidden md:flex gap-8 text-[11px] font-bold uppercase tracking-widest text-gray-400">
+                <span class="text-black border-b-2 border-black pb-1">Create</span>
+            </nav>
+        </header>
+
+        <main class="grid grid-cols-1 lg:grid-cols-12 gap-12">
+            <div class="lg:col-span-5 space-y-8">
+                <section class="space-y-4">
+                    <div class="flex items-center gap-2 text-gray-400">
+                        <i data-lucide="terminal" class="w-3.5 h-3.5"></i>
+                        <span class="text-[10px] font-black uppercase tracking-widest">Prompt</span>
+                    </div>
+                    <textarea id="promptInput" rows="5" class="nano-input w-full p-6 rounded-3xl text-sm outline-none resize-none placeholder-gray-300" placeholder="输入想生成或编辑的画面..."></textarea>
+                </section>
+
+                <section class="space-y-4">
+                    <div class="flex items-center gap-2 text-gray-400">
+                        <i data-lucide="images" class="w-3.5 h-3.5"></i>
+                        <span class="text-[10px] font-black uppercase tracking-widest">Reference Images</span>
+                    </div>
+                    <div class="grid grid-cols-3 gap-4">
+                        <div id="drop-zone-1" onclick="document.getElementById('file1').click()" class="upload-item group aspect-square rounded-2xl flex flex-col items-center justify-center cursor-pointer">
+                            <input type="file" id="file1" accept="image/*" class="hidden" onchange="handleFile(this.files[0],1)">
+                            <i data-lucide="plus" class="w-5 h-5 text-gray-300 group-hover:text-black"></i><span class="text-[9px] mt-2 font-bold text-gray-400 uppercase">Main</span>
+                            <img id="prev1" class="preview-img hidden"><button id="del1" onclick="clearSlot(1,event)" class="hidden absolute top-2 right-2 w-6 h-6 bg-white/90 rounded-full shadow-sm z-10">×</button>
+                        </div>
+                        <div id="drop-zone-2" onclick="document.getElementById('file2').click()" class="upload-item group aspect-square rounded-2xl flex flex-col items-center justify-center cursor-pointer">
+                            <input type="file" id="file2" accept="image/*" class="hidden" onchange="handleFile(this.files[0],2)">
+                            <i data-lucide="plus" class="w-5 h-5 text-gray-300 group-hover:text-black"></i><span class="text-[9px] mt-2 font-bold text-gray-400 uppercase">Aux A</span>
+                            <img id="prev2" class="preview-img hidden"><button id="del2" onclick="clearSlot(2,event)" class="hidden absolute top-2 right-2 w-6 h-6 bg-white/90 rounded-full shadow-sm z-10">×</button>
+                        </div>
+                        <div id="drop-zone-3" onclick="document.getElementById('file3').click()" class="upload-item group aspect-square rounded-2xl flex flex-col items-center justify-center cursor-pointer">
+                            <input type="file" id="file3" accept="image/*" class="hidden" onchange="handleFile(this.files[0],3)">
+                            <i data-lucide="plus" class="w-5 h-5 text-gray-300 group-hover:text-black"></i><span class="text-[9px] mt-2 font-bold text-gray-400 uppercase">Aux B</span>
+                            <img id="prev3" class="preview-img hidden"><button id="del3" onclick="clearSlot(3,event)" class="hidden absolute top-2 right-2 w-6 h-6 bg-white/90 rounded-full shadow-sm z-10">×</button>
+                        </div>
+                    </div>
+                </section>
+
+                <div class="tool-panel">
+                    <div class="control-label">
+                        <i data-lucide="sliders-horizontal" class="w-3.5 h-3.5"></i>
+                        <span>Model</span>
+                    </div>
+                    <div class="model-pill">
+                        <button id="gptOpt" class="model-option active" onclick="setProvider('gpt')"><i data-lucide="sparkles" class="w-3.5 h-3.5"></i>GPT</button>
+                        <button id="nanoOpt" class="model-option" onclick="setProvider('nano')"><i data-lucide="bot" class="w-3.5 h-3.5"></i>Nano</button>
+                    </div>
+                    <div class="control-label mt-1">
+                        <i data-lucide="ruler" class="w-3.5 h-3.5"></i>
+                        <span>Size</span>
+                    </div>
+                    <div class="size-row">
+                        <div class="ratio-grid">
+                            <button id="ratio-square" class="ratio-option active" onclick="setRatio('square')"><i data-lucide="square" class="w-3 h-3"></i>1:1</button>
+                            <button id="ratio-portrait" class="ratio-option" onclick="setRatio('portrait')"><i data-lucide="rectangle-vertical" class="w-3 h-3"></i>2:3</button>
+                            <button id="ratio-landscape" class="ratio-option" onclick="setRatio('landscape')"><i data-lucide="rectangle-horizontal" class="w-3 h-3"></i>3:2</button>
+                            <button id="ratio-story" class="ratio-option" onclick="setRatio('story')"><i data-lucide="smartphone" class="w-3 h-3"></i>9:16</button>
+                            <button id="ratio-wide" class="ratio-option" onclick="setRatio('wide')"><i data-lucide="monitor" class="w-3 h-3"></i>16:9</button>
+                        </div>
+                        <div class="resolution-toggle" title="分辨率">
+                            <button id="res-1k" class="resolution-option active" onclick="setResolution('1k')">1K</button>
+                            <button id="res-2k" class="resolution-option" onclick="setResolution('2k')">2K</button>
+                        </div>
+                    </div>
+                </div>
+
+                <button id="genBtn" onclick="submitImage()" class="glass-btn w-full py-5 text-white rounded-3xl font-bold flex items-center justify-center gap-3 shadow-lg">
+                    <i data-lucide="zap" class="w-4 h-4 text-yellow-400"></i>
+                    <span class="tracking-[0.3em] text-[11px] uppercase">Generate</span>
+                </button>
+            </div>
+
+            <div class="lg:col-span-7">
+                <div id="resultBox" class="result-frame min-h-[500px] lg:h-full flex items-center justify-center relative overflow-hidden">
+                    <div id="placeholder" class="text-center space-y-4 opacity-20"><i data-lucide="layout" class="w-12 h-12 mx-auto stroke-[1px]"></i><p class="text-[10px] font-black tracking-[0.5em] uppercase">Canvas Ready</p></div>
+                    <div id="loader" class="hidden text-center space-y-4"><div class="w-8 h-8 border-2 border-black border-t-transparent rounded-full animate-spin mx-auto"></div><p class="text-[10px] font-black tracking-[0.5em] uppercase">Generating</p></div>
+                    <img id="outputImg" class="hidden w-full h-full object-contain p-8 cursor-zoom-in" onclick="zoomImage()">
+                    <a id="downloadBtn" href="#" download class="hidden absolute top-8 right-8 w-12 h-12 bg-white/90 shadow-2xl rounded-2xl flex items-center justify-center hover:bg-black hover:text-white"><i data-lucide="download" class="w-4 h-4"></i></a>
+                </div>
+            </div>
+        </main>
+
+        <section class="mt-32">
+            <div class="flex items-center gap-6 mb-12"><h2 class="text-[11px] font-black uppercase tracking-[0.5em]">Archives</h2><div class="h-px flex-1 bg-gray-100"></div></div>
+            <div id="masonry" class="masonry-grid"></div>
+            <div id="loadMoreTrigger" class="py-20 text-center text-gray-300 text-[10px] font-bold uppercase tracking-widest cursor-pointer hover:text-black">Load More Archive</div>
+        </section>
+    </div>
+
+    <div id="lightbox" onclick="handleOutsideClick(event)" class="hidden fixed inset-0 z-50 flex items-center justify-center p-6 bg-white/95 backdrop-blur-3xl">
+        <div class="max-w-6xl w-full flex flex-col items-center relative">
+            <img id="lightboxImg" class="max-h-[75vh] rounded-[2.5rem] shadow-2xl object-contain">
+            <div class="w-full bg-white border border-gray-100 rounded-[2rem] p-8 mt-8 shadow-sm flex justify-between items-center gap-8">
+                <div class="flex-1"><span class="text-[9px] font-black text-gray-300 uppercase tracking-widest block mb-2">Prompt</span><p id="lightboxPrompt" class="text-gray-700 text-sm leading-relaxed"></p></div>
+                <button id="sameStyleBtn" onclick="applySameStyle()" class="bg-black text-white px-8 py-3.5 rounded-2xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2"><i data-lucide="copy" class="w-4 h-4"></i>Reuse</button>
+            </div>
+            <button onclick="closeLightbox()" class="absolute -top-12 -right-12 p-4 text-gray-400 hover:text-black"><i data-lucide="x" class="w-8 h-8"></i></button>
+        </div>
+    </div>
+
+    <script>
+        lucide.createIcons();
+        let refs = {1:null,2:null,3:null};
+        let provider = 'gpt';
+        let ratio = 'square';
+        let resolution = '1k';
+        let models = {gpt:'gpt-image-1', nano:'nano-banana'};
+        let allHistory = [], currentIndex = 0, currentResult = null, currentLightboxData = null, isLoading = false;
+        const PAGE_SIZE = 24;
+        const SIZE_OPTIONS = {
+            square: [
+                ['1024x1024', '1k'],
+                ['1536x1536', '2k']
+            ],
+            portrait: [
+                ['720x1080', '1k'],
+                ['1024x1536', '2k']
+            ],
+            landscape: [
+                ['1080x720', '1k'],
+                ['1536x1024', '2k']
+            ],
+            story: [
+                ['720x1280', '1k'],
+                ['1080x1920', '2k']
+            ],
+            wide: [
+                ['1280x720', '1k'],
+                ['1920x1080', '2k']
+            ]
+        };
+
+        async function initModels(){
+            try {
+                const cfg = await fetch('/api/config').then(r=>r.json());
+                const imageModels = cfg.image_models || [];
+                models.nano = imageModels.find(m => m.toLowerCase().includes('nano')) || 'nano-banana';
+                models.gpt = imageModels.find(m => !m.toLowerCase().includes('nano')) || cfg.image_model || 'gpt-image-1';
+            } catch(e) {}
+        }
+
+        function setProvider(next){
+            provider = next;
+            document.getElementById('gptOpt').classList.toggle('active', next === 'gpt');
+            document.getElementById('nanoOpt').classList.toggle('active', next === 'nano');
+        }
+
+        function setRatio(next, preferredSize = ''){
+            ratio = next;
+            ['square','portrait','landscape','story','wide'].forEach(item => {
+                document.getElementById(`ratio-${item}`).classList.toggle('active', item === next);
+            });
+            if (preferredSize) {
+                const match = SIZE_OPTIONS[next].find(([value]) => value === preferredSize);
+                if (match) resolution = match[1];
+            }
+            updateResolutionUI();
+        }
+
+        function setResolution(next){
+            resolution = next;
+            updateResolutionUI();
+        }
+
+        function updateResolutionUI(){
+            document.getElementById('res-1k').classList.toggle('active', resolution === '1k');
+            document.getElementById('res-2k').classList.toggle('active', resolution === '2k');
+        }
+
+        function currentSize(){
+            const options = SIZE_OPTIONS[ratio] || SIZE_OPTIONS.square;
+            const match = options.find(([, label]) => label === resolution) || options[0];
+            return match[0];
+        }
+
+        [1,2,3].forEach(id => {
+            const zone = document.getElementById(`drop-zone-${id}`);
+            zone.ondragover = e => { e.preventDefault(); zone.classList.add('drag-over'); };
+            zone.ondragleave = () => zone.classList.remove('drag-over');
+            zone.ondrop = e => { e.preventDefault(); zone.classList.remove('drag-over'); handleFile(e.dataTransfer.files[0], id); };
+        });
+        window.addEventListener('paste', e => {
+            const item = [...(e.clipboardData?.items || [])].find(x => x.kind === 'file' && x.type.startsWith('image/'));
+            if (item) handleFile(item.getAsFile(), firstEmptySlot());
+        });
+        function firstEmptySlot(){ return [1,2,3].find(id => !refs[id]) || 1; }
+
+        async function handleFile(file, index){
+            if(!file) return;
+            const reader = new FileReader();
+            reader.onload = e => {
+                const prev = document.getElementById(`prev${index}`);
+                prev.src = e.target.result; prev.classList.remove('hidden');
+                document.getElementById(`del${index}`).classList.remove('hidden');
+            };
+            reader.readAsDataURL(file);
+            const form = new FormData();
+            form.append('files', file);
+            const data = await fetch('/api/ai/upload', {method:'POST', body:form}).then(r=>r.json());
+            refs[index] = data.files[0];
+        }
+        function clearSlot(index, ev){
+            if(ev) ev.stopPropagation();
+            refs[index] = null;
+            document.getElementById(`prev${index}`).src = '';
+            document.getElementById(`prev${index}`).classList.add('hidden');
+            document.getElementById(`del${index}`).classList.add('hidden');
+        }
+
+        async function submitImage(){
+            const prompt = document.getElementById('promptInput').value.trim();
+            if(!prompt){ alert('请输入提示词'); return; }
+            const btn = document.getElementById('genBtn'), loader = document.getElementById('loader'), placeholder = document.getElementById('placeholder'), out = document.getElementById('outputImg'), dl = document.getElementById('downloadBtn');
+            btn.disabled = true; placeholder.classList.add('hidden'); out.classList.add('hidden'); dl.classList.add('hidden'); loader.classList.remove('hidden');
+            try {
+                const result = await fetch('/api/online-image', {
+                    method:'POST', headers:{'Content-Type':'application/json'},
+                    body:JSON.stringify({ prompt, model:models[provider], size:currentSize(), reference_images:Object.values(refs).filter(Boolean) })
+                }).then(async r => { if(!r.ok) throw new Error((await r.json()).detail || '生成失败'); return r.json(); });
+                currentResult = result; out.src = result.images[0]; out.classList.remove('hidden'); dl.href = result.images[0]; dl.classList.remove('hidden'); renderImageCard(result, true);
+            } catch(err) {
+                alert(err.message || 'Generation failed'); placeholder.classList.remove('hidden');
+            } finally {
+                loader.classList.add('hidden'); btn.disabled = false;
+            }
+        }
+
+        function renderImageCard(data, isNew=false){
+            if(!data.images?.[0] || document.getElementById(`history-${data.timestamp}`)) return;
+            const card = document.createElement('div');
+            card.id = `history-${data.timestamp}`;
+            card.className = 'masonry-item group relative cursor-zoom-in';
+            card.onclick = () => openLightbox(data);
+            card.innerHTML = `<img src="${data.images[0]}" class="w-full h-full object-cover block group-hover:scale-105 transition-transform duration-1000" loading="lazy">
+                <button onclick="deleteHistoryItem('${data.timestamp}',event)" class="absolute top-4 right-4 text-white hover:text-red-400 opacity-0 group-hover:opacity-100 z-10"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
+                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 p-6 flex flex-col justify-end"><p class="text-white text-[10px] font-medium line-clamp-2 uppercase tracking-wider">${data.prompt || 'Online Image'}</p></div>`;
+            isNew ? document.getElementById('masonry').prepend(card) : document.getElementById('masonry').appendChild(card);
+            lucide.createIcons();
+        }
+        async function loadHistory(page=0){
+            if(isLoading) return; isLoading = true;
+            const loader = document.getElementById('loadMoreTrigger');
+            if(page === 0){ loader.innerText = 'Loading Archives...'; allHistory = await fetch('/api/history?type=online').then(r=>r.json()); document.getElementById('masonry').innerHTML=''; currentIndex=0; }
+            const next = allHistory.slice(currentIndex, currentIndex + PAGE_SIZE);
+            next.forEach(item => renderImageCard(item)); currentIndex += next.length;
+            loader.classList.toggle('hidden', currentIndex >= allHistory.length);
+            loader.innerText = 'Load More Archive'; isLoading = false;
+        }
+        function openLightbox(data){ currentLightboxData = data; document.getElementById('lightboxImg').src = data.images[0]; document.getElementById('lightboxPrompt').textContent = data.prompt || ''; document.getElementById('lightbox').classList.replace('hidden','flex'); document.body.style.overflow='hidden'; }
+        function closeLightbox(){ document.getElementById('lightbox').classList.replace('flex','hidden'); document.body.style.overflow='auto'; }
+        function handleOutsideClick(e){ if(e.target.id === 'lightbox') closeLightbox(); }
+        function zoomImage(){ if(currentResult) openLightbox(currentResult); }
+        function applySameStyle(){
+            if(!currentLightboxData) return;
+            document.getElementById('promptInput').value = currentLightboxData.prompt || '';
+            [1,2,3].forEach(id => clearSlot(id));
+            (currentLightboxData.params?.reference_images || []).slice(0,3).forEach((ref,i) => {
+                refs[i+1] = ref; const prev = document.getElementById(`prev${i+1}`);
+                prev.src = ref.url; prev.classList.remove('hidden'); document.getElementById(`del${i+1}`).classList.remove('hidden');
+            });
+            const size = currentLightboxData.params?.size || '1024x1024';
+            const matchedRatio = Object.keys(SIZE_OPTIONS).find(key => SIZE_OPTIONS[key].some(([value]) => value === size)) || 'square';
+            setRatio(matchedRatio, size);
+            closeLightbox(); window.scrollTo({top:0, behavior:'smooth'});
+        }
+        async function deleteHistoryItem(ts, ev){
+            ev.stopPropagation();
+            if(!confirm('删除这条记录？')) return;
+            const res = await fetch('/api/history/delete', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({timestamp:ts})}).then(r=>r.json());
+            if(res.success) document.getElementById(`history-${ts}`)?.remove();
+        }
+        const observer = new IntersectionObserver(entries => { if(entries[0].isIntersecting && currentIndex < allHistory.length) loadHistory(1); }, {threshold:.1});
+        window.onload = async () => { setRatio('square'); setResolution('1k'); await initModels(); await loadHistory(0); observer.observe(document.getElementById('loadMoreTrigger')); document.getElementById('loadMoreTrigger').onclick = () => loadHistory(1); };
+    </script>
+</body>
+</html>

26-5-10-API-Studio/static/theme.css

@@ -0,0 +1,1591 @@
+html.studio-theme-dark,
+html.studio-theme-dark body,
+body.studio-theme-dark {
+    color-scheme: dark;
+    background: #08090c !important;
+    color: #e8e8ea !important;
+}
+
+body.studio-theme-dark {
+    --accent: #e8e8ea;
+    --bg: #08090c;
+    --bg-base: #08090c;
+    --card: #111216;
+    --text-main: #e8e8ea;
+}
+
+html.studio-theme-dark body .app-shell,
+html.studio-theme-dark body .sidebar,
+html.studio-theme-dark body .stage,
+body.studio-theme-dark .app-shell,
+body.studio-theme-dark .sidebar,
+body.studio-theme-dark .stage {
+    background: #08090c !important;
+    border-color: #25262b !important;
+}
+
+html.studio-theme-dark body .stage,
+body.studio-theme-dark .stage {
+    box-shadow: inset 0 0 42px rgba(255,255,255,.015);
+}
+
+html.studio-theme-dark body .nav-item,
+body.studio-theme-dark .nav-item {
+    color: #8f9aab;
+}
+
+html.studio-theme-dark body .nav-item:hover,
+body.studio-theme-dark .nav-item:hover {
+    background: #111216 !important;
+    color: #e8e8ea !important;
+}
+
+html.studio-theme-dark body .nav-item.active,
+body.studio-theme-dark .nav-item.active {
+    background: #d8dee9 !important;
+    color: #10141d !important;
+    box-shadow: 0 12px 24px rgba(0,0,0,.28);
+}
+
+html.studio-theme-dark body .logo-ring,
+body.studio-theme-dark .logo-ring {
+    border-color: #d8dee9 !important;
+}
+
+html.studio-theme-dark body #logo-dot,
+body.studio-theme-dark #logo-dot {
+    background: #d8dee9 !important;
+}
+
+html.studio-theme-dark body .nano-monitor,
+body.studio-theme-dark .nano-monitor {
+    background: rgba(17,18,22,.88) !important;
+    color: #d8dee9;
+    border-color: rgba(255,255,255,.10) !important;
+    box-shadow: 0 12px 34px rgba(0,0,0,.24);
+}
+
+html.studio-theme-dark body .divider,
+body.studio-theme-dark .divider {
+    background: rgba(216,222,233,.14) !important;
+}
+
+html.studio-theme-dark body .theme-dock-btn,
+body.studio-theme-dark .theme-dock-btn {
+    background: #111216;
+    border-color: #25262b;
+    color: #9aa6b8;
+}
+
+html.studio-theme-dark body .theme-dock-btn:hover,
+html.studio-theme-dark body .theme-dock-btn.active,
+body.studio-theme-dark .theme-dock-btn:hover,
+body.studio-theme-dark .theme-dock-btn.active {
+    background: #d8dee9;
+    border-color: #d8dee9;
+    color: #10141d;
+}
+
+html.studio-theme-dark body .console-card,
+html.studio-theme-dark body .nano-input,
+html.studio-theme-dark body .upload-item,
+html.studio-theme-dark body .result-frame,
+html.studio-theme-dark body .masonry-item,
+html.studio-theme-dark body .work-panel,
+html.studio-theme-dark body .setting-row,
+html.studio-theme-dark body .tool-panel,
+html.studio-theme-dark body .control-panel,
+html.studio-theme-dark body .topbar,
+html.studio-theme-dark body .composer,
+html.studio-theme-dark body .composer-body,
+html.studio-theme-dark body .bubble.assistant,
+html.studio-theme-dark body .history-popover,
+html.studio-theme-dark body .thread-item,
+html.studio-theme-dark body .lightbox-card,
+html.studio-theme-dark body #lightboxCard,
+html.studio-theme-dark body .bg-white,
+html.studio-theme-dark body .bg-gray-50,
+html.studio-theme-dark body .bg-slate-50,
+html.studio-theme-dark body .bg-gray-50\/50,
+html.studio-theme-dark body .bg-white\/90,
+html.studio-theme-dark body .bg-\[\#fbfdff\],
+body.studio-theme-dark .console-card,
+body.studio-theme-dark .nano-input,
+body.studio-theme-dark .upload-item,
+body.studio-theme-dark .result-frame,
+body.studio-theme-dark .masonry-item,
+body.studio-theme-dark .work-panel,
+body.studio-theme-dark .setting-row,
+body.studio-theme-dark .tool-panel,
+body.studio-theme-dark .control-panel,
+body.studio-theme-dark .topbar,
+body.studio-theme-dark .composer,
+body.studio-theme-dark .composer-body,
+body.studio-theme-dark .bubble.assistant,
+body.studio-theme-dark .history-popover,
+body.studio-theme-dark .thread-item,
+body.studio-theme-dark .lightbox-card,
+body.studio-theme-dark #lightboxCard,
+body.studio-theme-dark .bg-white,
+body.studio-theme-dark .bg-gray-50,
+body.studio-theme-dark .bg-slate-50,
+body.studio-theme-dark .bg-gray-50\/50,
+body.studio-theme-dark .bg-white\/90,
+body.studio-theme-dark .bg-\[\#fbfdff\] {
+    background-color: #111216 !important;
+    border-color: #25262b !important;
+    color: #e8e8ea !important;
+}
+
+html.studio-theme-dark body .bg-gray-100,
+html.studio-theme-dark body .bg-slate-100,
+html.studio-theme-dark body .select-shell,
+html.studio-theme-dark body .model-pill,
+html.studio-theme-dark body .ratio-grid,
+html.studio-theme-dark body .resolution-toggle,
+html.studio-theme-dark body .mode-switch,
+html.studio-theme-dark body .mini-ratio,
+body.studio-theme-dark .bg-gray-100,
+body.studio-theme-dark .bg-slate-100,
+body.studio-theme-dark .select-shell,
+body.studio-theme-dark .model-pill,
+body.studio-theme-dark .ratio-grid,
+body.studio-theme-dark .resolution-toggle,
+body.studio-theme-dark .mode-switch,
+body.studio-theme-dark .mini-ratio {
+    background-color: #0c0d10 !important;
+    border-color: #25262b !important;
+}
+
+html.studio-theme-dark body input,
+html.studio-theme-dark body textarea,
+html.studio-theme-dark body select,
+body.studio-theme-dark input,
+body.studio-theme-dark textarea,
+body.studio-theme-dark select {
+    color: #e8e8ea !important;
+}
+
+html.studio-theme-dark body input::placeholder,
+html.studio-theme-dark body textarea::placeholder,
+body.studio-theme-dark input::placeholder,
+body.studio-theme-dark textarea::placeholder {
+    color: #657286 !important;
+}
+
+html.studio-theme-dark body .text-black,
+html.studio-theme-dark body .text-gray-700,
+html.studio-theme-dark body .text-slate-700,
+html.studio-theme-dark body .setting-title,
+html.studio-theme-dark body h1,
+html.studio-theme-dark body h2,
+html.studio-theme-dark body h3,
+body.studio-theme-dark .text-black,
+body.studio-theme-dark .text-gray-700,
+body.studio-theme-dark .text-slate-700,
+body.studio-theme-dark .setting-title,
+body.studio-theme-dark h1,
+body.studio-theme-dark h2,
+body.studio-theme-dark h3 {
+    color: #e8e8ea !important;
+}
+
+html.studio-theme-dark body .text-gray-300,
+html.studio-theme-dark body .text-gray-400,
+html.studio-theme-dark body .text-gray-500,
+html.studio-theme-dark body .text-slate-400,
+html.studio-theme-dark body .text-slate-500,
+html.studio-theme-dark body .setting-meta,
+html.studio-theme-dark body .label-nano,
+body.studio-theme-dark .text-gray-300,
+body.studio-theme-dark .text-gray-400,
+body.studio-theme-dark .text-gray-500,
+body.studio-theme-dark .text-slate-400,
+body.studio-theme-dark .text-slate-500,
+body.studio-theme-dark .setting-meta,
+body.studio-theme-dark .label-nano {
+    color: #8f9aab !important;
+}
+
+html.studio-theme-dark body .border-gray-100,
+html.studio-theme-dark body .border-gray-200,
+html.studio-theme-dark body .border-gray-300,
+html.studio-theme-dark body .border-slate-100,
+html.studio-theme-dark body .border-slate-200,
+html.studio-theme-dark body .border-black,
+html.studio-theme-dark body .border-white,
+html.studio-theme-dark body .border-\[\#f1f5f9\],
+html.studio-theme-dark body .border-\[\#eef2f7\],
+body.studio-theme-dark .border-gray-100,
+body.studio-theme-dark .border-gray-200,
+body.studio-theme-dark .border-gray-300,
+body.studio-theme-dark .border-slate-100,
+body.studio-theme-dark .border-slate-200,
+body.studio-theme-dark .border-black,
+body.studio-theme-dark .border-white,
+body.studio-theme-dark .border-\[\#f1f5f9\],
+body.studio-theme-dark .border-\[\#eef2f7\] {
+    border-color: #2a3444 !important;
+}
+
+html.studio-theme-dark body .glass-btn,
+html.studio-theme-dark body .btn-action-dark,
+html.studio-theme-dark body .send-btn,
+html.studio-theme-dark body .gen-btn,
+html.studio-theme-dark body .comfy-run,
+html.studio-theme-dark body .llm-run,
+html.studio-theme-dark body .primary-btn,
+html.studio-theme-dark body .bg-black,
+body.studio-theme-dark .glass-btn,
+body.studio-theme-dark .btn-action-dark,
+body.studio-theme-dark .send-btn,
+body.studio-theme-dark .gen-btn,
+body.studio-theme-dark .comfy-run,
+body.studio-theme-dark .llm-run,
+body.studio-theme-dark .primary-btn,
+body.studio-theme-dark .bg-black {
+    background-color: #d8dee9 !important;
+    color: #10141d !important;
+}
+
+html.studio-theme-dark body .glass-btn:hover,
+html.studio-theme-dark body .btn-action-dark:hover,
+html.studio-theme-dark body .bg-black:hover,
+body.studio-theme-dark .glass-btn:hover,
+body.studio-theme-dark .btn-action-dark:hover,
+body.studio-theme-dark .bg-black:hover {
+    background-color: #c8d0dc !important;
+}
+
+html.studio-theme-dark body .gallery-lightbox,
+html.studio-theme-dark body #lightbox,
+body.studio-theme-dark .gallery-lightbox,
+body.studio-theme-dark #lightbox {
+    background: rgba(15,20,29,.78) !important;
+    backdrop-filter: blur(22px) saturate(1.05);
+}
+
+html.studio-theme-dark body .masonry-item:hover,
+html.studio-theme-dark body .console-card:focus-within,
+html.studio-theme-dark body .select-shell:focus-within,
+body.studio-theme-dark .masonry-item:hover,
+body.studio-theme-dark .console-card:focus-within,
+body.studio-theme-dark .select-shell:focus-within {
+    border-color: #566174 !important;
+    box-shadow: 0 20px 44px rgba(0,0,0,.28) !important;
+}
+
+html.studio-theme-dark body .console-card textarea,
+html.studio-theme-dark body #prompt,
+html.studio-theme-dark body #promptInput,
+body.studio-theme-dark .console-card textarea,
+body.studio-theme-dark #prompt,
+body.studio-theme-dark #promptInput {
+    color: #e5e9f0 !important;
+    caret-color: #d8dee9;
+}
+
+html.studio-theme-dark body .size-btn,
+html.studio-theme-dark body .model-option,
+html.studio-theme-dark body .ratio-option,
+html.studio-theme-dark body .resolution-option,
+html.studio-theme-dark body .mini-ratio button,
+html.studio-theme-dark body .mode-switch button,
+body.studio-theme-dark .size-btn,
+body.studio-theme-dark .model-option,
+body.studio-theme-dark .ratio-option,
+body.studio-theme-dark .resolution-option,
+body.studio-theme-dark .mini-ratio button,
+body.studio-theme-dark .mode-switch button {
+    background: #111722 !important;
+    border-color: #2a3444 !important;
+    color: #9aa6b8 !important;
+}
+
+html.studio-theme-dark body .size-btn:hover,
+html.studio-theme-dark body .model-option:hover,
+html.studio-theme-dark body .ratio-option:hover,
+html.studio-theme-dark body .resolution-option:hover,
+body.studio-theme-dark .size-btn:hover,
+body.studio-theme-dark .model-option:hover,
+body.studio-theme-dark .ratio-option:hover,
+body.studio-theme-dark .resolution-option:hover {
+    border-color: #566174 !important;
+    color: #d8dee9 !important;
+}
+
+html.studio-theme-dark body .size-btn.active,
+html.studio-theme-dark body .model-option.active,
+html.studio-theme-dark body .ratio-option.active,
+html.studio-theme-dark body .resolution-option.active,
+html.studio-theme-dark body .mini-ratio button.active,
+html.studio-theme-dark body .mode-switch button.active,
+body.studio-theme-dark .size-btn.active,
+body.studio-theme-dark .model-option.active,
+body.studio-theme-dark .ratio-option.active,
+body.studio-theme-dark .resolution-option.active,
+body.studio-theme-dark .mini-ratio button.active,
+body.studio-theme-dark .mode-switch button.active {
+    background: #d8dee9 !important;
+    border-color: #d8dee9 !important;
+    color: #10141d !important;
+    box-shadow: 0 10px 24px rgba(0,0,0,.2) !important;
+}
+
+html.studio-theme-dark body .ios-slider,
+body.studio-theme-dark .ios-slider {
+    background: #2a3444 !important;
+}
+
+html.studio-theme-dark body .ios-switch input:checked + .ios-slider,
+body.studio-theme-dark .ios-switch input:checked + .ios-slider {
+    background: #d8dee9 !important;
+}
+
+html.studio-theme-dark body .ios-slider:before,
+body.studio-theme-dark .ios-slider:before {
+    background: #111722 !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,.38) !important;
+}
+
+html.studio-theme-dark body .composer-wrap,
+body.studio-theme-dark .composer-wrap {
+    background: linear-gradient(to top,#0f141d 82%,rgba(15,20,29,0)) !important;
+}
+
+html.studio-theme-dark body .canvas-gate,
+body.studio-theme-dark .canvas-gate {
+    background-color: #0f141d !important;
+    background-image: radial-gradient(rgba(148,163,184,.18) 1px, transparent 1px) !important;
+}
+
+html.studio-theme-dark body .gate-panel,
+html.studio-theme-dark body .canvas-item,
+html.studio-theme-dark body .canvas-open,
+body.studio-theme-dark .gate-panel,
+body.studio-theme-dark .canvas-item,
+body.studio-theme-dark .canvas-open {
+    background: #171d29 !important;
+    border-color: #2a3444 !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .canvas-item:hover,
+body.studio-theme-dark .canvas-item:hover {
+    background: #202838 !important;
+}
+
+html.studio-theme-dark body .canvas-item.active,
+body.studio-theme-dark .canvas-item.active {
+    background: #263247 !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .canvas-card-title,
+html.studio-theme-dark body .gate-title,
+html.studio-theme-dark body .gate-name-input,
+body.studio-theme-dark .canvas-card-title,
+body.studio-theme-dark .gate-title,
+body.studio-theme-dark .gate-name-input {
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .canvas-card-time,
+html.studio-theme-dark body .gate-subtitle,
+body.studio-theme-dark .canvas-card-time {
+    color: #8f9aab !important;
+}
+
+body.studio-theme-dark .gate-subtitle {
+    color: #8f9aab !important;
+}
+
+html.studio-theme-dark body .canvas-preview-mark,
+html.studio-theme-dark body .canvas-delete,
+html.studio-theme-dark body .secondary-btn,
+html.studio-theme-dark body .gate-back,
+html.studio-theme-dark body .gate-trash-entry,
+html.studio-theme-dark body .create-cancel,
+html.studio-theme-dark body .gate-create-row,
+html.studio-theme-dark body .gate-actions,
+html.studio-theme-dark body .trash-note,
+html.studio-theme-dark body .emoji-picker,
+html.studio-theme-dark body .create-menu,
+html.studio-theme-dark body .selection-hub,
+html.studio-theme-dark body .output-preview,
+body.studio-theme-dark .canvas-preview-mark,
+body.studio-theme-dark .canvas-delete,
+body.studio-theme-dark .secondary-btn,
+body.studio-theme-dark .gate-back,
+body.studio-theme-dark .gate-trash-entry,
+body.studio-theme-dark .create-cancel,
+body.studio-theme-dark .gate-create-row,
+body.studio-theme-dark .gate-actions,
+body.studio-theme-dark .trash-note,
+body.studio-theme-dark .emoji-picker,
+body.studio-theme-dark .create-menu,
+body.studio-theme-dark .selection-hub,
+body.studio-theme-dark .output-preview {
+    background: #111722 !important;
+    border-color: #2a3444 !important;
+    color: #d8dee9 !important;
+}
+
+html.studio-theme-dark body .gate-trash-badge,
+body.studio-theme-dark .gate-trash-badge {
+    background: #d8dee9 !important;
+    color: #10141d !important;
+    border-color: #111722 !important;
+}
+
+html.studio-theme-dark body .secondary-btn.active,
+body.studio-theme-dark .secondary-btn.active {
+    background: #d8dee9 !important;
+    border-color: #d8dee9 !important;
+    color: #10141d !important;
+}
+
+html.studio-theme-dark body .canvas-delete:hover,
+html.studio-theme-dark body .create-cancel:hover,
+body.studio-theme-dark .canvas-delete:hover,
+body.studio-theme-dark .create-cancel:hover {
+    background: rgba(248,113,113,.14) !important;
+    border-color: rgba(248,113,113,.32) !important;
+    color: #fca5a5 !important;
+}
+
+html.studio-theme-dark body .canvas-restore:hover,
+body.studio-theme-dark .canvas-restore:hover {
+    background: rgba(16,185,129,.14) !important;
+    border-color: rgba(16,185,129,.32) !important;
+    color: #6ee7b7 !important;
+}
+
+html.studio-theme-dark body .canvas-delete-box,
+body.studio-theme-dark .canvas-delete-box {
+    background: #202838 !important;
+    border: 1px solid #2a3444;
+}
+
+html.studio-theme-dark body .canvas-confirm-btn,
+html.studio-theme-dark body .create-confirm,
+body.studio-theme-dark .canvas-confirm-btn,
+body.studio-theme-dark .create-confirm {
+    background: #d8dee9 !important;
+    color: #10141d !important;
+}
+
+html.studio-theme-dark body .output-resolution,
+body.studio-theme-dark .output-resolution {
+    background: rgba(17,23,34,.86) !important;
+    color: #d8dee9 !important;
+}
+
+html.studio-theme-dark body .shell .topbar,
+body.studio-theme-dark .shell .topbar {
+    background: transparent !important;
+    border-color: transparent !important;
+    backdrop-filter: none !important;
+}
+
+html.studio-theme-dark body .shell,
+html.studio-theme-dark body .shell .board,
+body.studio-theme-dark .shell,
+body.studio-theme-dark .shell .board {
+    background-color: #0f141d !important;
+    background-image: radial-gradient(rgba(148,163,184,.18) 1px, transparent 1px) !important;
+}
+
+html.studio-theme-dark body .shell.theme-dark,
+body.studio-theme-dark .shell.theme-dark {
+    --page: #0f141d;
+    --grid: rgba(148,163,184,.18);
+    --panel: rgba(17,23,34,.88);
+    --card: #171d29;
+    --card-solid: #171d29;
+    --soft: #111722;
+    --soft-2: #202838;
+    --line: rgba(148,163,184,.16);
+    --line-2: rgba(148,163,184,.22);
+    --text: #e5e9f0;
+    --muted: #9aa6b8;
+    --faint: #78869a;
+    --shadow: rgba(0,0,0,.2);
+    --strong: #d8dee9;
+    --strong-text: #10141d;
+}
+
+html.studio-theme-dark body .shell .panel,
+body.studio-theme-dark .shell .panel {
+    background: rgba(17,23,34,.86) !important;
+    border: 1px solid rgba(148,163,184,.16) !important;
+    box-shadow: 0 14px 36px rgba(0,0,0,.18) !important;
+}
+
+html.studio-theme-dark body .shell .node,
+body.studio-theme-dark .shell .node {
+    background: #171d29 !important;
+    border-color: rgba(148,163,184,.16) !important;
+    box-shadow: 0 16px 42px rgba(0,0,0,.22) !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .shell .node-head,
+body.studio-theme-dark .shell .node-head {
+    background: #171d29 !important;
+    border-bottom-color: rgba(148,163,184,.14) !important;
+}
+
+html.studio-theme-dark body .shell .node-title,
+body.studio-theme-dark .shell .node-title {
+    color: #8f9aab !important;
+}
+
+html.studio-theme-dark body .shell .node.selected,
+body.studio-theme-dark .shell .node.selected {
+    outline-color: rgba(216,222,233,.72) !important;
+}
+
+html.studio-theme-dark body .shell .toolbar,
+body.studio-theme-dark .shell .toolbar {
+    gap: 8px;
+}
+
+html.studio-theme-dark body .shell .tool-btn,
+html.studio-theme-dark body .shell .select-lite,
+html.studio-theme-dark body .shell .gen-count-row,
+html.studio-theme-dark body .shell .seg,
+html.studio-theme-dark body .shell .llm-mode,
+html.studio-theme-dark body .shell .mode-tabs,
+body.studio-theme-dark .shell .tool-btn,
+body.studio-theme-dark .shell .select-lite,
+body.studio-theme-dark .shell .gen-count-row,
+body.studio-theme-dark .shell .seg,
+body.studio-theme-dark .shell .llm-mode,
+body.studio-theme-dark .shell .mode-tabs {
+    background: #111722 !important;
+    border: 1px solid rgba(148,163,184,.16) !important;
+    box-shadow: none !important;
+    color: #9aa6b8 !important;
+}
+
+html.studio-theme-dark body .shell .gen-settings,
+html.studio-theme-dark body .shell .setting-row,
+html.studio-theme-dark body .shell .comfy-settings,
+body.studio-theme-dark .shell .gen-settings,
+body.studio-theme-dark .shell .setting-row,
+body.studio-theme-dark .shell .comfy-settings {
+    background: #111722 !important;
+    border: 1px solid rgba(148,163,184,.16) !important;
+    box-shadow: none !important;
+    color: #d8dee9 !important;
+}
+
+html.studio-theme-dark body .shell .setting-title,
+body.studio-theme-dark .shell .setting-title {
+    color: #8f9aab !important;
+}
+
+html.studio-theme-dark body .shell .setting-input,
+html.studio-theme-dark body .shell .setting-check,
+html.studio-theme-dark body .shell .gen-count-input,
+body.studio-theme-dark .shell .setting-input,
+body.studio-theme-dark .shell .setting-check,
+body.studio-theme-dark .shell .gen-count-input {
+    background: #171d29 !important;
+    border-color: rgba(148,163,184,.16) !important;
+    color: #e5e9f0 !important;
+    box-shadow: none !important;
+}
+
+html.studio-theme-dark body .shell .gen-step-btn,
+body.studio-theme-dark .shell .gen-step-btn {
+    color: #8f9aab !important;
+}
+
+html.studio-theme-dark body .shell .gen-step-btn:hover,
+body.studio-theme-dark .shell .gen-step-btn:hover {
+    background: #202838 !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .shell .tool-btn:hover,
+html.studio-theme-dark body .shell .select-lite:hover,
+body.studio-theme-dark .shell .tool-btn:hover,
+body.studio-theme-dark .shell .select-lite:hover {
+    background: #171d29 !important;
+    border-color: #566174 !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .shell .llm-mode button,
+html.studio-theme-dark body .shell .seg button,
+html.studio-theme-dark body .shell .mode-tabs button,
+body.studio-theme-dark .shell .llm-mode button,
+body.studio-theme-dark .shell .seg button,
+body.studio-theme-dark .shell .mode-tabs button {
+    background: transparent !important;
+    border-color: transparent !important;
+    color: #9aa6b8 !important;
+    box-shadow: none !important;
+}
+
+html.studio-theme-dark body .shell .llm-mode button.active,
+html.studio-theme-dark body .shell .seg button.active,
+html.studio-theme-dark body .shell .mode-tabs button.active,
+body.studio-theme-dark .shell .llm-mode button.active,
+body.studio-theme-dark .shell .seg button.active,
+body.studio-theme-dark .shell .mode-tabs button.active {
+    background: #d8dee9 !important;
+    border-color: #d8dee9 !important;
+    color: #10141d !important;
+}
+
+html.studio-theme-dark body .shell .llm-system,
+html.studio-theme-dark body .shell .llm-chat-input,
+html.studio-theme-dark body .shell .llm-chat-log,
+html.studio-theme-dark body .shell .llm-output,
+html.studio-theme-dark body .shell .llm-chat-pane,
+body.studio-theme-dark .shell .llm-system,
+body.studio-theme-dark .shell .llm-chat-input,
+body.studio-theme-dark .shell .llm-chat-log,
+body.studio-theme-dark .shell .llm-output,
+body.studio-theme-dark .shell .llm-chat-pane {
+    background: #111722 !important;
+    border-color: #2a3444 !important;
+    color: #d8dee9 !important;
+}
+
+html.studio-theme-dark body .shell .llm-pane-resizer::before,
+body.studio-theme-dark .shell .llm-pane-resizer::before {
+    background: #475569 !important;
+}
+
+html.studio-theme-dark body .shell .llm-bubble.assistant,
+body.studio-theme-dark .shell .llm-bubble.assistant {
+    background: #202838 !important;
+    border-color: #2a3444 !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .shell .llm-bubble.user,
+body.studio-theme-dark .shell .llm-bubble.user {
+    background: #d8dee9 !important;
+    color: #10141d !important;
+}
+
+html.studio-theme-dark body .shell .image-node img,
+html.studio-theme-dark body .shell .output-grid img,
+html.studio-theme-dark body .shell .output-preview img,
+html.studio-theme-dark body .shell .blank-image,
+html.studio-theme-dark body .shell .input-item,
+html.studio-theme-dark body .shell .prompt-node textarea,
+html.studio-theme-dark body .shell .llm-system,
+html.studio-theme-dark body .shell .llm-chat-input,
+html.studio-theme-dark body .shell .model-input,
+body.studio-theme-dark .shell .image-node img,
+body.studio-theme-dark .shell .output-grid img,
+body.studio-theme-dark .shell .output-preview img,
+body.studio-theme-dark .shell .blank-image,
+body.studio-theme-dark .shell .input-item,
+body.studio-theme-dark .shell .prompt-node textarea,
+body.studio-theme-dark .shell .llm-system,
+body.studio-theme-dark .shell .llm-chat-input,
+body.studio-theme-dark .shell .model-input {
+    background: #0f141d !important;
+    border-color: rgba(148,163,184,.16) !important;
+}
+
+html.studio-theme-dark body .shell .blank-image,
+body.studio-theme-dark .shell .blank-image {
+    color: #8f9aab !important;
+    border-style: dashed !important;
+}
+
+html.studio-theme-dark body .shell .blank-image:hover,
+html.studio-theme-dark body .shell .blank-image.drag-over,
+body.studio-theme-dark .shell .blank-image:hover,
+body.studio-theme-dark .shell .blank-image.drag-over {
+    background: #151b27 !important;
+    border-color: rgba(216,222,233,.42) !important;
+    color: #d8dee9 !important;
+}
+
+html.studio-theme-dark body .shell .image-caption,
+body.studio-theme-dark .shell .image-caption {
+    color: #8f9aab !important;
+}
+
+html.studio-theme-dark body .shell .input-label,
+body.studio-theme-dark .shell .input-label {
+    background: rgba(15,20,29,.78) !important;
+    color: #d8dee9 !important;
+}
+
+html.studio-theme-dark body .shell .prompt-list .bg-slate-50,
+html.studio-theme-dark body .shell .prompt-list .border-slate-100,
+body.studio-theme-dark .shell .prompt-list .bg-slate-50,
+body.studio-theme-dark .shell .prompt-list .border-slate-100 {
+    background: #111722 !important;
+    border-color: rgba(148,163,184,.16) !important;
+    color: #c8d0dc !important;
+}
+
+html.studio-theme-dark body .shell .input-index,
+body.studio-theme-dark .shell .input-index {
+    background: #d8dee9 !important;
+    color: #10141d !important;
+}
+
+html.studio-theme-dark body .shell .port::after,
+body.studio-theme-dark .shell .port::after {
+    background: #d8dee9 !important;
+    border-color: #111722 !important;
+    box-shadow: 0 0 0 1px rgba(148,163,184,.32) !important;
+}
+
+html.studio-theme-dark body .shell .drop-overlay,
+body.studio-theme-dark .shell .drop-overlay {
+    background: rgba(15,20,29,.44) !important;
+    color: #c8d0dc !important;
+    backdrop-filter: blur(2px) !important;
+}
+
+html.studio-theme-dark body .output-drag-preview,
+body.studio-theme-dark .output-drag-preview,
+.output-drag-preview {
+    position: fixed;
+    left: -10000px;
+    top: -10000px;
+    width: 150px;
+    height: 150px;
+    padding: 8px;
+    border-radius: 18px;
+    background: #0f141d;
+    border: 1px solid rgba(148,163,184,.18);
+    box-shadow: 0 16px 40px rgba(0,0,0,.28);
+    pointer-events: none;
+    z-index: -1;
+}
+
+.output-drag-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    border-radius: 12px;
+    background: #0f141d;
+}
+
+html.studio-theme-dark body .shell .resize-handle,
+body.studio-theme-dark .shell .resize-handle {
+    background: rgba(17,23,34,.86) !important;
+    border-color: rgba(148,163,184,.18) !important;
+    color: #8f9aab !important;
+}
+
+html.studio-theme-dark body .shell .resize-handle:hover,
+body.studio-theme-dark .shell .resize-handle:hover {
+    background: #171d29 !important;
+    border-color: rgba(216,222,233,.36) !important;
+    color: #d8dee9 !important;
+}
+
+/* Standalone studio pages: zimage / enhance / klein / angle */
+html.studio-theme-dark body .layout-container,
+body.studio-theme-dark .layout-container,
+html.studio-theme-dark body .container-box,
+body.studio-theme-dark .container-box {
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .mode-switcher,
+html.studio-theme-dark body .engine-panel,
+html.studio-theme-dark body .engine-switch,
+html.studio-theme-dark body .ios-slider,
+html.studio-theme-dark body .result-frame,
+html.studio-theme-dark body .gallery-lightbox,
+html.studio-theme-dark body #lightbox,
+html.studio-theme-dark body #compareContainer,
+html.studio-theme-dark body #compareContainerKlein,
+html.studio-theme-dark body #lightboxImg,
+body.studio-theme-dark .mode-switcher,
+body.studio-theme-dark .engine-panel,
+body.studio-theme-dark .engine-switch,
+body.studio-theme-dark .ios-slider,
+body.studio-theme-dark .result-frame,
+body.studio-theme-dark .gallery-lightbox,
+body.studio-theme-dark #lightbox,
+body.studio-theme-dark #compareContainer,
+body.studio-theme-dark #compareContainerKlein,
+body.studio-theme-dark #lightboxImg {
+    background-color: #111722 !important;
+    border-color: rgba(148,163,184,.16) !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .mode-glider,
+html.studio-theme-dark body .engine-btn.active,
+html.studio-theme-dark body .ios-slider:before,
+body.studio-theme-dark .mode-glider,
+body.studio-theme-dark .engine-btn.active,
+body.studio-theme-dark .ios-slider:before {
+    background: #d8dee9 !important;
+    color: #10141d !important;
+}
+
+html.studio-theme-dark body .mode-btn.active,
+html.studio-theme-dark body .engine-btn.active,
+body.studio-theme-dark .mode-btn.active,
+body.studio-theme-dark .engine-btn.active {
+    color: #10141d !important;
+}
+
+html.studio-theme-dark body .mode-btn,
+html.studio-theme-dark body .engine-btn,
+html.studio-theme-dark body .cloud-status,
+body.studio-theme-dark .mode-btn,
+body.studio-theme-dark .engine-btn,
+body.studio-theme-dark .cloud-status {
+    color: #8f9aab !important;
+}
+
+html.studio-theme-dark body .engine-btn:not(.active):hover,
+body.studio-theme-dark .engine-btn:not(.active):hover {
+    background: rgba(216,222,233,.08) !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .upload-item:hover,
+html.studio-theme-dark body .upload-item.drag-over,
+body.studio-theme-dark .upload-item:hover,
+body.studio-theme-dark .upload-item.drag-over {
+    background: #171d29 !important;
+    border-color: rgba(216,222,233,.42) !important;
+}
+
+html.studio-theme-dark body .glass-btn,
+html.studio-theme-dark body .btn-render,
+html.studio-theme-dark body #downloadBtn,
+html.studio-theme-dark body #lightboxDownload,
+body.studio-theme-dark .glass-btn,
+body.studio-theme-dark .btn-render,
+body.studio-theme-dark #downloadBtn,
+body.studio-theme-dark #lightboxDownload {
+    background: #d8dee9 !important;
+    color: #10141d !important;
+    border-color: #d8dee9 !important;
+}
+
+html.studio-theme-dark body .glass-btn:hover,
+html.studio-theme-dark body .btn-render:hover,
+body.studio-theme-dark .glass-btn:hover,
+body.studio-theme-dark .btn-render:hover {
+    background: #f1f5f9 !important;
+    color: #0f141d !important;
+}
+
+html.studio-theme-dark body input[type=range]::-webkit-slider-runnable-track,
+body.studio-theme-dark input[type=range]::-webkit-slider-runnable-track {
+    background: #2a3444 !important;
+}
+
+html.studio-theme-dark body input[type=range]::-webkit-slider-thumb,
+body.studio-theme-dark input[type=range]::-webkit-slider-thumb {
+    background: #d8dee9 !important;
+}
+
+html.studio-theme-dark body .masonry-item img,
+html.studio-theme-dark body .result-frame img,
+body.studio-theme-dark .masonry-item img,
+body.studio-theme-dark .result-frame img {
+    background-color: #111722 !important;
+}
+
+html.studio-theme-dark body .bg-black,
+body.studio-theme-dark .bg-black {
+    background-color: #d8dee9 !important;
+    color: #10141d !important;
+}
+
+html.studio-theme-dark body .hover\:text-black:hover,
+body.studio-theme-dark .hover\:text-black:hover {
+    color: #e5e9f0 !important;
+}
+
+/* Final neutral dark pass: remove blue-tinted surfaces from tool pages. */
+html.studio-theme-dark,
+html.studio-theme-dark body,
+body.studio-theme-dark {
+    background: #08090c !important;
+    color: #e8e8ea !important;
+}
+
+body.studio-theme-dark {
+    --bg: #08090c;
+    --bg-base: #08090c;
+    --page: #08090c;
+    --card: #111216;
+    --card-solid: #111216;
+    --soft: #0c0d10;
+    --soft-2: #16171b;
+    --panel: rgba(17,18,22,.92);
+    --text: #e8e8ea;
+    --text-main: #e8e8ea;
+    --accent: #e8e8ea;
+    --line: #25262b;
+    --line-2: #32343a;
+}
+
+html.studio-theme-dark body .app-shell,
+html.studio-theme-dark body .sidebar,
+html.studio-theme-dark body .stage,
+html.studio-theme-dark body .shell,
+body.studio-theme-dark .app-shell,
+body.studio-theme-dark .sidebar,
+body.studio-theme-dark .stage,
+body.studio-theme-dark .shell {
+    background: #08090c !important;
+    border-color: #25262b !important;
+}
+
+html.studio-theme-dark body .console-card,
+html.studio-theme-dark body .nano-input,
+html.studio-theme-dark body .upload-item,
+html.studio-theme-dark body .result-frame,
+html.studio-theme-dark body .masonry-item,
+html.studio-theme-dark body .engine-panel,
+html.studio-theme-dark body .engine-switch,
+html.studio-theme-dark body .mode-switcher,
+html.studio-theme-dark body .setting-row,
+html.studio-theme-dark body .provider-switch,
+html.studio-theme-dark body .ios-slider,
+html.studio-theme-dark body #compareContainer,
+html.studio-theme-dark body #lightboxImg,
+html.studio-theme-dark body #lightbox .bg-white,
+html.studio-theme-dark body .bg-white,
+html.studio-theme-dark body .bg-white\/90,
+html.studio-theme-dark body .bg-white\/95,
+html.studio-theme-dark body .bg-gray-50,
+html.studio-theme-dark body .bg-gray-50\/50,
+html.studio-theme-dark body .bg-gray-100,
+html.studio-theme-dark body .bg-gray-200,
+html.studio-theme-dark body .bg-\[\#f8f8f9\],
+html.studio-theme-dark body .bg-\[\#fafafa\],
+body.studio-theme-dark .console-card,
+body.studio-theme-dark .nano-input,
+body.studio-theme-dark .upload-item,
+body.studio-theme-dark .result-frame,
+body.studio-theme-dark .masonry-item,
+body.studio-theme-dark .engine-panel,
+body.studio-theme-dark .engine-switch,
+body.studio-theme-dark .mode-switcher,
+body.studio-theme-dark .setting-row,
+body.studio-theme-dark .provider-switch,
+body.studio-theme-dark .ios-slider,
+body.studio-theme-dark #compareContainer,
+body.studio-theme-dark #lightboxImg,
+body.studio-theme-dark #lightbox .bg-white,
+body.studio-theme-dark .bg-white,
+body.studio-theme-dark .bg-white\/90,
+body.studio-theme-dark .bg-white\/95,
+body.studio-theme-dark .bg-gray-50,
+body.studio-theme-dark .bg-gray-50\/50,
+body.studio-theme-dark .bg-gray-100,
+body.studio-theme-dark .bg-gray-200,
+body.studio-theme-dark .bg-\[\#f8f8f9\],
+body.studio-theme-dark .bg-\[\#fafafa\] {
+    background-color: #111216 !important;
+    border-color: #25262b !important;
+    color: #e8e8ea !important;
+}
+
+html.studio-theme-dark body #lightbox,
+body.studio-theme-dark #lightbox {
+    background: rgba(8,9,12,.96) !important;
+}
+
+html.studio-theme-dark body .glass-btn,
+html.studio-theme-dark body .btn-render,
+html.studio-theme-dark body .mode-glider,
+html.studio-theme-dark body .engine-btn.active,
+html.studio-theme-dark body .ios-switch input:checked + .ios-slider,
+html.studio-theme-dark body #cloud-progress-bar,
+body.studio-theme-dark .glass-btn,
+body.studio-theme-dark .btn-render,
+body.studio-theme-dark .mode-glider,
+body.studio-theme-dark .engine-btn.active,
+body.studio-theme-dark .ios-switch input:checked + .ios-slider,
+body.studio-theme-dark #cloud-progress-bar {
+    background: #e8e8ea !important;
+    color: #08090c !important;
+    border-color: #e8e8ea !important;
+}
+
+html.studio-theme-dark body .mode-btn.active,
+html.studio-theme-dark body .engine-btn.active,
+html.studio-theme-dark body .text-black,
+body.studio-theme-dark .mode-btn.active,
+body.studio-theme-dark .engine-btn.active,
+body.studio-theme-dark .text-black {
+    color: #e8e8ea !important;
+}
+
+html.studio-theme-dark body .mode-glider + .mode-btn.active,
+body.studio-theme-dark .mode-glider + .mode-btn.active {
+    color: #08090c !important;
+}
+
+html.studio-theme-dark body input,
+html.studio-theme-dark body textarea,
+html.studio-theme-dark body select,
+body.studio-theme-dark input,
+body.studio-theme-dark textarea,
+body.studio-theme-dark select {
+    background-color: #0c0d10 !important;
+    border-color: #32343a !important;
+    color: #e8e8ea !important;
+}
+
+html.studio-theme-dark body .border-gray-100,
+html.studio-theme-dark body .border-gray-200,
+html.studio-theme-dark body .border-gray-200\/50,
+html.studio-theme-dark body .border-black,
+body.studio-theme-dark .border-gray-100,
+body.studio-theme-dark .border-gray-200,
+body.studio-theme-dark .border-gray-200\/50,
+body.studio-theme-dark .border-black {
+    border-color: #25262b !important;
+}
+
+html.studio-theme-dark body .text-gray-300,
+html.studio-theme-dark body .text-gray-400,
+html.studio-theme-dark body .text-gray-500,
+html.studio-theme-dark body .text-gray-600,
+html.studio-theme-dark body .text-gray-700,
+html.studio-theme-dark body .text-gray-800,
+body.studio-theme-dark .text-gray-300,
+body.studio-theme-dark .text-gray-400,
+body.studio-theme-dark .text-gray-500,
+body.studio-theme-dark .text-gray-600,
+body.studio-theme-dark .text-gray-700,
+body.studio-theme-dark .text-gray-800 {
+    color: #a7a7ad !important;
+}
+
+html.studio-theme-dark body h1,
+html.studio-theme-dark body h2,
+html.studio-theme-dark body h3,
+html.studio-theme-dark body label,
+body.studio-theme-dark h1,
+body.studio-theme-dark h2,
+body.studio-theme-dark h3,
+body.studio-theme-dark label {
+    color: #e8e8ea !important;
+}
+
+html.studio-theme-dark body .mode-switcher .mode-btn.active,
+html.studio-theme-dark body .engine-switch .engine-btn.active,
+body.studio-theme-dark .mode-switcher .mode-btn.active,
+body.studio-theme-dark .engine-switch .engine-btn.active {
+    color: #08090c !important;
+}
+
+/* Online-generation dark pass: soft blue-gray instead of heavy black. */
+html.studio-theme-dark,
+html.studio-theme-dark body,
+body.studio-theme-dark {
+    background: #0f141d !important;
+    color: #e5e9f0 !important;
+}
+
+body.studio-theme-dark {
+    --bg: #0f141d;
+    --bg-base: #0f141d;
+    --page: #0f141d;
+    --card: #171d29;
+    --card-solid: #171d29;
+    --soft: #111722;
+    --soft-2: #1d2533;
+    --panel: rgba(23,29,41,.92);
+    --text: #e5e9f0;
+    --text-main: #e5e9f0;
+    --accent: #e5e9f0;
+    --line: #2a3444;
+    --line-2: #334155;
+}
+
+html.studio-theme-dark body .app-shell,
+html.studio-theme-dark body .sidebar,
+html.studio-theme-dark body .stage,
+html.studio-theme-dark body .shell,
+body.studio-theme-dark .app-shell,
+body.studio-theme-dark .sidebar,
+body.studio-theme-dark .stage,
+body.studio-theme-dark .shell {
+    background: #0f141d !important;
+    border-color: #2a3444 !important;
+}
+
+html.studio-theme-dark body .stage,
+body.studio-theme-dark .stage {
+    background: #111722 !important;
+}
+
+html.studio-theme-dark body .console-card,
+html.studio-theme-dark body .nano-input,
+html.studio-theme-dark body .upload-item,
+html.studio-theme-dark body .result-frame,
+html.studio-theme-dark body .masonry-item,
+html.studio-theme-dark body .engine-panel,
+html.studio-theme-dark body .tool-panel,
+html.studio-theme-dark body .control-panel,
+html.studio-theme-dark body .engine-switch,
+html.studio-theme-dark body .mode-switcher,
+html.studio-theme-dark body .setting-row,
+html.studio-theme-dark body .ios-slider,
+html.studio-theme-dark body #compareContainer,
+html.studio-theme-dark body #lightboxImg,
+html.studio-theme-dark body #lightbox .bg-white,
+html.studio-theme-dark body .bg-white,
+html.studio-theme-dark body .bg-white\/90,
+html.studio-theme-dark body .bg-white\/95,
+html.studio-theme-dark body .bg-gray-50,
+html.studio-theme-dark body .bg-gray-50\/50,
+html.studio-theme-dark body .bg-gray-100,
+html.studio-theme-dark body .bg-gray-200,
+html.studio-theme-dark body .bg-\[\#f8f8f9\],
+html.studio-theme-dark body .bg-\[\#fafafa\],
+body.studio-theme-dark .console-card,
+body.studio-theme-dark .nano-input,
+body.studio-theme-dark .upload-item,
+body.studio-theme-dark .result-frame,
+body.studio-theme-dark .masonry-item,
+body.studio-theme-dark .engine-panel,
+body.studio-theme-dark .tool-panel,
+body.studio-theme-dark .control-panel,
+body.studio-theme-dark .engine-switch,
+body.studio-theme-dark .mode-switcher,
+body.studio-theme-dark .setting-row,
+body.studio-theme-dark .ios-slider,
+body.studio-theme-dark #compareContainer,
+body.studio-theme-dark #lightboxImg,
+body.studio-theme-dark #lightbox .bg-white,
+body.studio-theme-dark .bg-white,
+body.studio-theme-dark .bg-white\/90,
+body.studio-theme-dark .bg-white\/95,
+body.studio-theme-dark .bg-gray-50,
+body.studio-theme-dark .bg-gray-50\/50,
+body.studio-theme-dark .bg-gray-100,
+body.studio-theme-dark .bg-gray-200,
+body.studio-theme-dark .bg-\[\#f8f8f9\],
+body.studio-theme-dark .bg-\[\#fafafa\] {
+    background-color: #171d29 !important;
+    border-color: #2a3444 !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .model-pill,
+html.studio-theme-dark body .ratio-grid,
+html.studio-theme-dark body .resolution-toggle,
+html.studio-theme-dark body .select-shell,
+html.studio-theme-dark body .mode-switch,
+html.studio-theme-dark body .mini-ratio,
+html.studio-theme-dark body input,
+html.studio-theme-dark body textarea,
+html.studio-theme-dark body select,
+body.studio-theme-dark .model-pill,
+body.studio-theme-dark .ratio-grid,
+body.studio-theme-dark .resolution-toggle,
+body.studio-theme-dark .select-shell,
+body.studio-theme-dark .mode-switch,
+body.studio-theme-dark .mini-ratio,
+body.studio-theme-dark input,
+body.studio-theme-dark textarea,
+body.studio-theme-dark select {
+    background-color: #111722 !important;
+    border-color: #334155 !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body #lightbox,
+body.studio-theme-dark #lightbox {
+    background: rgba(15,20,29,.9) !important;
+}
+
+html.studio-theme-dark body .glass-btn,
+html.studio-theme-dark body .btn-render,
+html.studio-theme-dark body .mode-glider,
+html.studio-theme-dark body .engine-btn.active,
+html.studio-theme-dark body .model-option.active,
+html.studio-theme-dark body .ratio-option.active,
+html.studio-theme-dark body .resolution-option.active,
+html.studio-theme-dark body .provider-btn.active,
+html.studio-theme-dark body .ios-switch input:checked + .ios-slider,
+html.studio-theme-dark body #cloud-progress-bar,
+html.studio-theme-dark body #downloadBtn,
+html.studio-theme-dark body #lightboxDownload,
+html.studio-theme-dark body .bg-black,
+body.studio-theme-dark .glass-btn,
+body.studio-theme-dark .btn-render,
+body.studio-theme-dark .mode-glider,
+body.studio-theme-dark .engine-btn.active,
+body.studio-theme-dark .model-option.active,
+body.studio-theme-dark .ratio-option.active,
+body.studio-theme-dark .resolution-option.active,
+body.studio-theme-dark .provider-btn.active,
+body.studio-theme-dark .ios-switch input:checked + .ios-slider,
+body.studio-theme-dark #cloud-progress-bar,
+body.studio-theme-dark #downloadBtn,
+body.studio-theme-dark #lightboxDownload,
+body.studio-theme-dark .bg-black {
+    background: #d8dee9 !important;
+    color: #10141d !important;
+    border-color: #d8dee9 !important;
+}
+
+html.studio-theme-dark body .mode-btn,
+html.studio-theme-dark body .engine-btn,
+html.studio-theme-dark body .model-option,
+html.studio-theme-dark body .ratio-option,
+html.studio-theme-dark body .resolution-option,
+html.studio-theme-dark body .provider-btn,
+body.studio-theme-dark .mode-btn,
+body.studio-theme-dark .engine-btn,
+body.studio-theme-dark .model-option,
+body.studio-theme-dark .ratio-option,
+body.studio-theme-dark .resolution-option {
+    color: #8f9aab !important;
+}
+
+body.studio-theme-dark .provider-btn {
+    color: #8f9aab !important;
+}
+
+html.studio-theme-dark body .provider-switch button,
+body.studio-theme-dark .provider-switch button {
+    color: #8f9aab !important;
+}
+
+html.studio-theme-dark body .mode-btn:hover,
+html.studio-theme-dark body .engine-btn:hover,
+html.studio-theme-dark body .model-option:hover,
+html.studio-theme-dark body .ratio-option:hover,
+html.studio-theme-dark body .resolution-option:hover,
+html.studio-theme-dark body .provider-btn:hover,
+body.studio-theme-dark .mode-btn:hover,
+body.studio-theme-dark .engine-btn:hover,
+body.studio-theme-dark .model-option:hover,
+body.studio-theme-dark .ratio-option:hover,
+body.studio-theme-dark .resolution-option:hover,
+body.studio-theme-dark .provider-btn:hover {
+    background: rgba(216,222,233,.08) !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .provider-switch button:hover,
+body.studio-theme-dark .provider-switch button:hover {
+    background: rgba(216,222,233,.08) !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .mode-btn.active,
+html.studio-theme-dark body .engine-btn.active,
+html.studio-theme-dark body .model-option.active,
+html.studio-theme-dark body .ratio-option.active,
+html.studio-theme-dark body .resolution-option.active,
+html.studio-theme-dark body .provider-btn.active,
+html.studio-theme-dark body .mode-switcher .mode-btn.active,
+html.studio-theme-dark body .engine-switch .engine-btn.active,
+body.studio-theme-dark .mode-btn.active,
+body.studio-theme-dark .engine-btn.active,
+body.studio-theme-dark .model-option.active,
+body.studio-theme-dark .ratio-option.active,
+body.studio-theme-dark .resolution-option.active,
+body.studio-theme-dark .provider-btn.active,
+body.studio-theme-dark .mode-switcher .mode-btn.active,
+body.studio-theme-dark .engine-switch .engine-btn.active {
+    color: #10141d !important;
+}
+
+html.studio-theme-dark body .provider-switch button.active,
+body.studio-theme-dark .provider-switch button.active {
+    background: #d8dee9 !important;
+    color: #10141d !important;
+    border-color: #d8dee9 !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
+}
+
+html.studio-theme-dark body .mode-switcher,
+body.studio-theme-dark .mode-switcher,
+html.studio-theme-dark body .provider-switch,
+body.studio-theme-dark .provider-switch,
+html.studio-theme-dark body .engine-switch,
+body.studio-theme-dark .engine-switch {
+    background: #111722 !important;
+    border: 1px solid #334155 !important;
+    box-shadow: none !important;
+}
+
+html.studio-theme-dark body .mode-glider,
+body.studio-theme-dark .mode-glider {
+    background: #d8dee9 !important;
+    box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
+}
+
+html.studio-theme-dark body .mode-btn,
+body.studio-theme-dark .mode-btn,
+html.studio-theme-dark body .engine-btn,
+body.studio-theme-dark .engine-btn,
+html.studio-theme-dark body .provider-btn,
+body.studio-theme-dark .provider-btn {
+    border-radius: 999px !important;
+    letter-spacing: .02em !important;
+}
+
+html.studio-theme-dark body .provider-switch button,
+body.studio-theme-dark .provider-switch button {
+    border-radius: 999px !important;
+    min-height: 30px !important;
+    font-size: 10px !important;
+    font-weight: 600 !important;
+    letter-spacing: .02em !important;
+}
+
+html.studio-theme-dark body .border-gray-100,
+html.studio-theme-dark body .border-gray-200,
+html.studio-theme-dark body .border-gray-200\/50,
+html.studio-theme-dark body .border-black,
+body.studio-theme-dark .border-gray-100,
+body.studio-theme-dark .border-gray-200,
+body.studio-theme-dark .border-gray-200\/50,
+body.studio-theme-dark .border-black {
+    border-color: #2a3444 !important;
+}
+
+html.studio-theme-dark body .text-gray-300,
+html.studio-theme-dark body .text-gray-400,
+html.studio-theme-dark body .text-gray-500,
+html.studio-theme-dark body .text-gray-600,
+html.studio-theme-dark body .text-gray-700,
+html.studio-theme-dark body .text-gray-800,
+body.studio-theme-dark .text-gray-300,
+body.studio-theme-dark .text-gray-400,
+body.studio-theme-dark .text-gray-500,
+body.studio-theme-dark .text-gray-600,
+body.studio-theme-dark .text-gray-700,
+body.studio-theme-dark .text-gray-800 {
+    color: #8f9aab !important;
+}
+
+html.studio-theme-dark body h1,
+html.studio-theme-dark body h2,
+html.studio-theme-dark body h3,
+html.studio-theme-dark body label,
+body.studio-theme-dark h1,
+body.studio-theme-dark h2,
+body.studio-theme-dark h3,
+body.studio-theme-dark label {
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body input[type=range]::-webkit-slider-runnable-track,
+body.studio-theme-dark input[type=range]::-webkit-slider-runnable-track {
+    background: #2a3444 !important;
+}
+
+html.studio-theme-dark body input[type=range]::-webkit-slider-thumb,
+body.studio-theme-dark input[type=range]::-webkit-slider-thumb {
+    background: #d8dee9 !important;
+    border-color: #0f141d !important;
+}
+
+html.studio-theme-dark body ::placeholder,
+body.studio-theme-dark ::placeholder {
+    color: #64748b !important;
+}
+
+/* Z-image console polish: keep the prompt field open and make ModelScope readable. */
+html.studio-theme-dark body #prompt,
+body.studio-theme-dark #prompt {
+    background: transparent !important;
+    border-color: transparent !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .console-card > .bg-gray-50\/50,
+body.studio-theme-dark .console-card > .bg-gray-50\/50 {
+    background: transparent !important;
+}
+
+html.studio-theme-dark body #prompt::placeholder,
+body.studio-theme-dark #prompt::placeholder {
+    color: #6f7b8f !important;
+}
+
+/* GPT chat dark polish: avoid harsh black bars around text areas. */
+html.studio-theme-dark body .chat-shell,
+body.studio-theme-dark .chat-shell,
+html.studio-theme-dark body .messages,
+body.studio-theme-dark .messages {
+    background: #0f141d !important;
+}
+
+html.studio-theme-dark body .topbar,
+body.studio-theme-dark .topbar {
+    background: rgba(15,20,29,.9) !important;
+    border-bottom-color: #2a3444 !important;
+}
+
+html.studio-theme-dark body .composer-wrap,
+body.studio-theme-dark .composer-wrap {
+    background: linear-gradient(to top,#0f141d 82%,rgba(15,20,29,0)) !important;
+}
+
+html.studio-theme-dark body .composer,
+body.studio-theme-dark .composer,
+html.studio-theme-dark body .history-popover,
+body.studio-theme-dark .history-popover {
+    background: #171d29 !important;
+    border-color: #2a3444 !important;
+    color: #e5e9f0 !important;
+    box-shadow: 0 18px 44px rgba(0,0,0,.24) !important;
+}
+
+html.studio-theme-dark body .composer-body,
+body.studio-theme-dark .composer-body {
+    background: #111722 !important;
+    border-color: #334155 !important;
+}
+
+html.studio-theme-dark body #messageInput,
+body.studio-theme-dark #messageInput {
+    background: transparent !important;
+    border-color: transparent !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body #messageInput::placeholder,
+body.studio-theme-dark #messageInput::placeholder {
+    color: #64748b !important;
+}
+
+html.studio-theme-dark body .title-block h1,
+body.studio-theme-dark .title-block h1 {
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .title-block p,
+body.studio-theme-dark .title-block p {
+    color: #8f9aab !important;
+}
+
+html.studio-theme-dark body .action-btn,
+body.studio-theme-dark .action-btn,
+html.studio-theme-dark body .thread-item,
+body.studio-theme-dark .thread-item {
+    background: #111722 !important;
+    border-color: #334155 !important;
+    color: #d8dee9 !important;
+}
+
+html.studio-theme-dark body .action-btn:hover,
+body.studio-theme-dark .action-btn:hover,
+html.studio-theme-dark body .thread-item:hover,
+body.studio-theme-dark .thread-item:hover {
+    background: #1d2533 !important;
+    color: #e5e9f0 !important;
+}
+
+html.studio-theme-dark body .bubble.user,
+body.studio-theme-dark .bubble.user {
+    background: #2f3b52 !important;
+    color: #f1f5f9 !important;
+    border: 1px solid #435169 !important;
+    box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
+}
+
+html.studio-theme-dark body .bubble.assistant,
+body.studio-theme-dark .bubble.assistant {
+    background: #171d29 !important;
+    color: #e5e9f0 !important;
+    border-color: #2a3444 !important;
+    box-shadow: 0 8px 20px rgba(0,0,0,.14) !important;
+}
+
+html.studio-theme-dark body .bubble.assistant.streaming::after,
+body.studio-theme-dark .bubble.assistant.streaming::after {
+    background: #d8dee9 !important;
+}
+
+html.studio-theme-dark body .bubble img.generated,
+body.studio-theme-dark .bubble img.generated {
+    border-color: #334155 !important;
+}
+
+/* Dark-card clipping: keep inner fills from poking through rounded top corners. */
+html.studio-theme-dark body .console-card,
+html.studio-theme-dark body .nano-input,
+html.studio-theme-dark body .upload-item,
+html.studio-theme-dark body .result-frame,
+html.studio-theme-dark body .masonry-item,
+html.studio-theme-dark body .engine-panel,
+html.studio-theme-dark body .tool-panel,
+html.studio-theme-dark body .control-panel,
+html.studio-theme-dark body .composer,
+html.studio-theme-dark body .history-popover,
+html.studio-theme-dark body .model-panel,
+html.studio-theme-dark body .gate-panel,
+body.studio-theme-dark .console-card,
+body.studio-theme-dark .nano-input,
+body.studio-theme-dark .upload-item,
+body.studio-theme-dark .result-frame,
+body.studio-theme-dark .masonry-item,
+body.studio-theme-dark .engine-panel,
+body.studio-theme-dark .tool-panel,
+body.studio-theme-dark .control-panel,
+body.studio-theme-dark .composer,
+body.studio-theme-dark .history-popover,
+body.studio-theme-dark .model-panel,
+body.studio-theme-dark .gate-panel {
+    overflow: hidden !important;
+    background-clip: padding-box !important;
+}
+
+html.studio-theme-dark body .shell .node,
+body.studio-theme-dark .shell .node {
+    background-clip: padding-box !important;
+}
+
+html.studio-theme-dark body .shell .node-head,
+body.studio-theme-dark .shell .node-head {
+    border-radius: 21px 21px 0 0 !important;
+    overflow: hidden !important;
+    background-clip: padding-box !important;
+}
+
+/* Switch contrast: keep iOS toggles visible on blue-gray panels. */
+html.studio-theme-dark body .ios-switch .ios-slider,
+body.studio-theme-dark .ios-switch .ios-slider {
+    background: #253044 !important;
+    border: 1px solid #46556c !important;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,.28), 0 0 0 1px rgba(216,222,233,.05) !important;
+}
+
+html.studio-theme-dark body .ios-switch .ios-slider:before,
+body.studio-theme-dark .ios-switch .ios-slider:before {
+    background: #f8fafc !important;
+    box-shadow: 0 3px 9px rgba(0,0,0,.32) !important;
+}
+
+html.studio-theme-dark body .ios-switch input:checked + .ios-slider,
+body.studio-theme-dark .ios-switch input:checked + .ios-slider {
+    background: #d8dee9 !important;
+    border-color: #d8dee9 !important;
+    box-shadow: 0 0 0 3px rgba(216,222,233,.12) !important;
+}
+
+html.studio-theme-dark body .ios-switch input:checked + .ios-slider:before,
+body.studio-theme-dark .ios-switch input:checked + .ios-slider:before {
+    background: #10141d !important;
+    box-shadow: 0 2px 7px rgba(16,20,29,.22) !important;
+}

26-5-10-API-Studio/static/theme.js

@@ -0,0 +1,41 @@
+(function(){
+    const KEY = 'studio_theme';
+    const LEGACY_KEY = 'canvas_theme';
+
+    function currentTheme(){
+        return localStorage.getItem(KEY) || localStorage.getItem(LEGACY_KEY) || 'light';
+    }
+
+    function applyTheme(theme){
+        const next = theme === 'dark' ? 'dark' : 'light';
+        const dark = next === 'dark';
+        document.documentElement.classList.toggle('studio-theme-dark', dark);
+        if(document.body){
+            document.body.classList.toggle('studio-theme-dark', dark);
+            document.body.classList.toggle('theme-dark', dark);
+        }
+        window.dispatchEvent(new CustomEvent('studio-theme-change', { detail: { theme: next } }));
+    }
+
+    window.StudioTheme = {
+        key: KEY,
+        get: currentTheme,
+        apply: applyTheme,
+        set(theme){
+            const next = theme === 'dark' ? 'dark' : 'light';
+            localStorage.setItem(KEY, next);
+            localStorage.setItem(LEGACY_KEY, next);
+            applyTheme(next);
+        }
+    };
+
+    applyTheme(currentTheme());
+
+    document.addEventListener('DOMContentLoaded', () => applyTheme(currentTheme()));
+    window.addEventListener('message', event => {
+        if(event.data?.type === 'studio-theme') applyTheme(event.data.theme);
+    });
+    window.addEventListener('storage', event => {
+        if(event.key === KEY || event.key === LEGACY_KEY) applyTheme(currentTheme());
+    });
+})();

26-5-10-API-Studio/static/zimage.html

@@ -0,0 +1,586 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="/static/logo.png" type="image/png">
+    <title>Flux Modern Gallery | Unified Console</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="/static/theme.js?v=20260509"></script>
+    <style>
+        :root {
+            --bg-base: #f8f8f8;
+            --text-main: #1a1a1a;
+            --max-w: 1280px;
+            --easing: cubic-bezier(0.4, 0, 0.2, 1);
+            --accent: #000000;
+        }
+
+        /* --- 极简悬浮浅灰滚动条 (无底色/左移) --- */
+        *::-webkit-scrollbar {
+            width: 10px !important;
+            height: 10px !important;
+            background: transparent !important;
+        }
+
+        *::-webkit-scrollbar-track {
+            background: transparent !important;
+            border: none !important;
+        }
+
+        *::-webkit-scrollbar-thumb {
+            background-color: #d8d8d8 !important;
+            border: 3px solid transparent !important;
+            border-right-width: 5px !important;
+            /* 增加右侧间距，使滚动条向左位移 */
+            background-clip: padding-box !important;
+            border-radius: 10px !important;
+        }
+
+        *::-webkit-scrollbar-thumb:hover {
+            background-color: #c0c0c0 !important;
+        }
+
+        *::-webkit-scrollbar-corner {
+            background: transparent !important;
+        }
+
+        * {
+            scrollbar-width: thin !important;
+            scrollbar-color: #d8d8d8 transparent !important;
+        }
+
+        body {
+            background-color: var(--bg-base);
+            font-family: "Inter", -apple-system, "PingFang SC", sans-serif;
+            color: var(--text-main);
+            -webkit-font-smoothing: antialiased;
+        }
+
+        .layout-container {
+            max-width: var(--max-w);
+            margin: 0 auto;
+            padding: 0 40px;
+        }
+
+        .console-card {
+            background: #ffffff;
+            border: 1px solid rgba(0, 0, 0, 0.08);
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
+        }
+
+        /* 复合切换组件样式 */
+        .mode-switcher {
+            position: relative;
+            background: #f1f1f1;
+            padding: 4px;
+            border-radius: 14px;
+            display: flex;
+            width: 260px;
+        }
+
+        .mode-btn {
+            position: relative;
+            z-index: 10;
+            flex: 1;
+            padding: 8px 0;
+            text-align: center;
+            font-size: 11px;
+            font-weight: 800;
+            text-transform: uppercase;
+            color: #999;
+            transition: color 0.3s ease;
+            cursor: pointer;
+        }
+
+        .mode-btn.active {
+            color: #000;
+        }
+
+        .mode-glider {
+            position: absolute;
+            height: calc(100% - 8px);
+            width: calc(50% - 4px);
+            background: #fff;
+            border-radius: 11px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+            transition: transform 0.3s var(--easing);
+            z-index: 1;
+        }
+
+        .masonry-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 20px;
+        }
+
+        @media (min-width: 768px) {
+            .masonry-grid {
+                grid-template-columns: repeat(4, 1fr);
+            }
+        }
+
+        .masonry-item {
+            aspect-ratio: 1 / 1;
+            border-radius: 24px;
+            overflow: hidden;
+            background: #eee;
+            border: 1px solid #f1f5f9;
+            transition: all 0.5s var(--easing);
+            position: relative;
+        }
+
+        .masonry-item:hover {
+            transform: translateY(-6px);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
+        }
+
+        .gallery-lightbox {
+            background: rgba(255, 255, 255, 0.99);
+        }
+
+        .btn-render {
+            background: #000;
+            color: #fff;
+            transition: all 0.3s ease;
+        }
+
+        .btn-render:hover {
+            transform: translateY(-1px);
+            background: #222;
+        }
+
+        .btn-render:disabled {
+            background: #ccc;
+            cursor: not-allowed;
+        }
+
+        input::-webkit-inner-spin-button {
+            display: none;
+        }
+    </style>
+    <link rel="stylesheet" href="/static/theme.css?v=20260510-studio-pages-blue-dark10">
+</head>
+
+<body class="antialiased">
+
+    <header class="pt-20 pb-12">
+        <div class="layout-container">
+            <div class="console-card rounded-3xl p-1.5">
+                <div class="bg-gray-50/50 rounded-[22px] p-8">
+                    <div class="flex justify-between items-center mb-6">
+                        <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Unified Art
+                            Console</span>
+                        <div id="statusDot" class="flex items-center gap-2">
+                            <span id="statusText" class="text-[9px] font-bold text-gray-500 uppercase">System
+                                Ready</span>
+                            <div id="dotColor" class="w-1.5 h-1.5 bg-black rounded-full"></div>
+                        </div>
+                    </div>
+                    <textarea id="prompt" rows="2"
+                        class="w-full bg-transparent text-2xl font-medium outline-none placeholder:text-gray-200 text-black resize-none leading-relaxed"
+                        placeholder="Describe your vision..."></textarea>
+                </div>
+
+                <div class="flex flex-col md:flex-row items-center justify-between p-4 px-6 gap-6">
+                    <div class="flex items-center gap-8">
+                        <div class="flex flex-col">
+                            <span class="text-[9px] font-bold text-gray-400 uppercase mb-1">Engine Source</span>
+                            <div class="mode-switcher">
+                                <div id="modeLocal" class="mode-btn active flex items-center justify-center gap-1.5"
+                                    onclick="switchEngine('local')">
+                                    <i data-lucide="monitor" class="w-3 h-3"></i>
+                                    <span>Local</span>
+                                </div>
+                                <div id="modeCloud" class="mode-btn flex items-center justify-center gap-1.5"
+                                    onclick="switchEngine('cloud')">
+                                    <i data-lucide="cloud" class="w-3 h-3"></i>
+                                    <span>ModelScope</span>
+                                </div>
+                                <div id="glider" class="mode-glider"></div>
+                            </div>
+                        </div>
+
+                        <div class="h-8 w-px bg-gray-100"></div>
+
+                        <div class="flex flex-col">
+                            <span class="text-[9px] font-bold text-gray-400 uppercase mb-1">Dimensions</span>
+                            <div class="flex items-center gap-2 text-xs font-bold">
+                                <input id="width" type="number" value="1024"
+                                    class="w-10 bg-transparent outline-none border-b border-transparent focus:border-black">
+                                <span class="text-gray-200">×</span>
+                                <input id="height" type="number" value="1024"
+                                    class="w-10 bg-transparent outline-none border-b border-transparent focus:border-black">
+                            </div>
+                        </div>
+
+
+                    </div>
+
+                    <button id="mainGenBtn" onclick="handleRender()"
+                        class="w-full md:w-56 h-12 btn-render rounded-xl font-bold text-[11px] uppercase flex items-center justify-center gap-3">
+                        <i data-lucide="zap" id="btnIcon" class="w-4 h-4 text-yellow-400"></i>
+                        <span id="btnText">Render Art</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <main class="pb-24">
+        <div class="layout-container">
+            <div id="masonry" class="masonry-grid"></div>
+            <div id="loadMoreTrigger"
+                class="py-12 text-center text-gray-300 text-[10px] font-bold uppercase tracking-widest cursor-pointer hidden">
+                Load More Archive
+            </div>
+        </div>
+    </main>
+
+    <div id="lightbox" onclick="handleOutsideClick(event)"
+        class="hidden fixed inset-0 z-50 gallery-lightbox flex flex-col items-center justify-center p-8">
+        <button onclick="closeLightbox()" class="absolute top-10 right-10 text-gray-400 hover:text-black"><i
+                data-lucide="x" class="w-8 h-8"></i></button>
+        <div class="max-w-5xl w-full flex flex-col items-center pointer-events-none">
+            <div class="relative pointer-events-auto">
+                <img id="lightboxImg" src="" class="max-h-[60vh] rounded-lg shadow-xl">
+                <div
+                    class="absolute top-6 left-6 bg-black/50 backdrop-blur-md text-white px-3 py-1.5 rounded-xl text-[10px] font-black tracking-widest shadow-2xl">
+                    <span id="lightboxRes">0x0</span>
+                </div>
+                <button onclick="downloadImage()"
+                    class="absolute top-6 right-6 bg-black text-white w-12 h-12 rounded-2xl flex items-center justify-center shadow-2xl hover:scale-105 transition-transform">
+                    <i data-lucide="download" class="w-5 h-5"></i>
+                </button>
+            </div>
+            <div id="lightboxCard"
+                class="w-full mt-16 pointer-events-auto bg-white border border-gray-100 rounded-[2rem] p-8 shadow-sm flex justify-between items-center gap-8">
+                <div class="flex-1">
+                    <span class="text-[9px] font-black text-gray-300 uppercase tracking-widest block mb-2">Prompt
+                        Execution</span>
+                    <p id="lightboxPrompt" class="text-gray-700 text-sm leading-relaxed max-h-32 overflow-y-auto pr-2">
+                    </p>
+                </div>
+                <button onclick="applySameStyle()"
+                    class="bg-black text-white px-8 py-3.5 rounded-2xl text-[10px] font-black uppercase tracking-widest flex items-center gap-2">
+                    <i data-lucide="copy" class="w-3 h-3"></i>
+                    <span>Replicate</span>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        lucide.createIcons();
+
+        function generateUUID() {
+            if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+                try { return crypto.randomUUID(); } catch (e) { }
+            }
+            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+                var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+                return v.toString(16);
+            });
+        }
+        const CLIENT_ID = localStorage.getItem("client_id") || generateUUID();
+        localStorage.setItem("client_id", CLIENT_ID);
+
+        let allHistory = [];
+        let currentIndex = 0;
+        const PAGE_SIZE = 15;
+        let isLoading = false;
+
+        // WebSocket 
+        const socket = new WebSocket(`${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws/stats`);
+        socket.onmessage = (e) => {
+            try {
+                const msg = JSON.parse(e.data);
+                if (msg.type === 'new_image' && msg.data?.type === 'zimage') {
+                    if (!document.getElementById(`history-${msg.data.timestamp}`)) {
+                        allHistory.unshift(msg.data);
+                        renderImageCard(msg.data, true);
+                        currentIndex++;
+                    }
+                }
+            } catch (err) { }
+        };
+
+        let currentEngine = 'local';
+        const MS_TOKEN_KEY = 'modelscope_api_token';
+        const ENGINE_MODE_KEY = 'zimage_engine_mode';
+
+        // 1. Token handled via index.html sidebar
+
+        // 2. 切换引擎逻辑
+        function switchEngine(mode) {
+            currentEngine = mode;
+            localStorage.setItem(ENGINE_MODE_KEY, mode); // Save state
+
+            const glider = document.getElementById('glider');
+            const localBtn = document.getElementById('modeLocal');
+            const cloudBtn = document.getElementById('modeCloud');
+            const btnText = document.getElementById('btnText');
+
+            if (mode === 'local') {
+                glider.style.transform = 'translateX(0)';
+                localBtn.classList.add('active');
+                cloudBtn.classList.remove('active');
+                btnText.innerText = 'Render Art (Local)';
+            } else {
+                glider.style.transform = 'translateX(100%)';
+                cloudBtn.classList.add('active');
+                localBtn.classList.remove('active');
+                btnText.innerText = 'Render Art (Cloud)';
+            }
+        }
+
+        // Initialize Engine Mode
+        const savedEngine = localStorage.getItem(ENGINE_MODE_KEY);
+        if (savedEngine && savedEngine !== 'local') {
+            switchEngine(savedEngine);
+        }
+
+        // 3. 统一渲染入口
+        async function handleRender() {
+            const prompt = document.getElementById('prompt').value.trim();
+            if (!prompt) return alert("Please enter a prompt");
+
+            if (currentEngine === 'local') {
+                runLocalTask(prompt);
+            } else {
+                runCloudTask(prompt);
+            }
+        }
+
+        // 4. ModelScope 云端逻辑
+        async function runCloudTask(prompt) {
+            let apiKey = localStorage.getItem(MS_TOKEN_KEY);
+            if (!apiKey) {
+                try {
+                    const res = await fetch('/api/config/token');
+                    const data = await res.json();
+                    if (data.token) apiKey = data.token;
+                } catch (e) { }
+            }
+            if (!apiKey) return alert("ModelScope Token Required. Please set it in the sidebar (API Token).");
+
+            const btn = document.getElementById('mainGenBtn');
+            setLoading(true);
+
+            const placeholder = createPlaceholder("ModelScope Rendering");
+            document.getElementById('masonry').prepend(placeholder);
+
+            try {
+                const res = await fetch('/generate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        prompt: prompt,
+                        api_key: apiKey,
+                        resolution: `${document.getElementById('width').value}x${document.getElementById('height').value}`
+                    })
+                });
+                const data = await res.json();
+                placeholder.remove();
+                if (res.ok && data.url) {
+                    renderImageCard({ timestamp: Date.now(), prompt, images: [data.url], type: 'cloud' }, true);
+                } else {
+                    throw new Error(data.detail?.errors?.message || data.detail || "Cloud Error");
+                }
+            } catch (e) {
+                placeholder.remove();
+                alert(e.message);
+            } finally {
+                setLoading(false);
+            }
+        }
+
+        // 5. 本地任务逻辑
+        async function runLocalTask(prompt) {
+            setLoading(true);
+            const placeholder = createPlaceholder("Local Rendering");
+            document.getElementById('masonry').prepend(placeholder);
+
+            try {
+                const res = await fetch('/api/generate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        prompt,
+                        width: parseInt(document.getElementById('width').value),
+                        height: parseInt(document.getElementById('height').value),
+                        type: "zimage",
+                        client_id: CLIENT_ID
+                    })
+                });
+                const data = await res.json();
+                placeholder.remove();
+                if (data.images?.length > 0) renderImageCard(data, true);
+            } catch (e) {
+                placeholder.remove();
+                alert("Local render failed");
+            } finally {
+                setLoading(false);
+            }
+        }
+
+        // 工具函数
+        function setLoading(isLoading) {
+            const btn = document.getElementById('mainGenBtn');
+            btn.disabled = isLoading;
+
+            if (isLoading) {
+                // Active state: Dark gray bg, filled yellow pulsing icon
+                btn.style.backgroundColor = '#333';
+                btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400 fill-yellow-400 animate-pulse"></i><span>Processing...</span>`;
+            } else {
+                // Reset state: Original bg (via CSS), outline yellow icon
+                btn.style.backgroundColor = '';
+                btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400"></i><span id="btnText">Render Art (${currentEngine.toUpperCase()})</span>`;
+            }
+            lucide.createIcons();
+        }
+
+        function createPlaceholder(text) {
+            const div = document.createElement('div');
+            div.className = 'masonry-item bg-gray-50 flex flex-col items-center justify-center border-dashed border-2 border-gray-200';
+            div.innerHTML = `<div class="w-6 h-6 border-2 border-gray-100 border-t-black rounded-full animate-spin mb-3"></div><span class="text-[8px] font-bold text-gray-400 uppercase tracking-tighter">${text}</span>`;
+            return div;
+        }
+
+        function renderImageCard(data, isNew = false) {
+            if (document.getElementById(`history-${data.timestamp}`)) return;
+            const masonry = document.getElementById('masonry');
+            const card = document.createElement('div');
+            card.id = `history-${data.timestamp}`;
+            card.className = 'masonry-item group cursor-zoom-in animate-in fade-in duration-700';
+            card.onclick = () => openLightbox(data.images[0], data.prompt);
+            card.innerHTML = `
+            <img src="${data.images[0]}" class="w-full h-full object-cover" loading="lazy">
+            ${data.type === 'cloud' ? '<div class="absolute top-3 left-3 z-10"><img src="/static/modelscope.gif" class="h-4 w-auto object-contain bg-white/90 rounded-full p-0.5 shadow-sm"></div>' : ''}
+            <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity z-10">
+                <button onclick="deleteHistoryItem('${data.timestamp}', event)" class="w-8 h-8 bg-white/90 backdrop-blur text-black hover:bg-black hover:text-white rounded-lg flex items-center justify-center transition-colors">
+                    <i data-lucide="trash-2" class="w-4 h-4"></i>
+                </button>
+            </div>
+        `;
+            isNew ? masonry.prepend(card) : masonry.appendChild(card);
+            lucide.createIcons();
+        }
+
+        async function loadHistory(page = 0) {
+            if (isLoading) return;
+            const trigger = document.getElementById('loadMoreTrigger');
+
+            try {
+                isLoading = true;
+                if (page === 0) {
+                    allHistory = [];
+                    document.getElementById('masonry').innerHTML = '';
+                    currentIndex = 0;
+
+                    trigger.classList.remove('hidden');
+                    trigger.innerText = "Loading Archives...";
+
+                    const res = await fetch('/api/history?type=zimage');
+                    allHistory = await res.json();
+                } else {
+                    trigger.innerText = "Loading...";
+                    await new Promise(r => setTimeout(r, 400));
+                }
+
+                const nextData = allHistory.slice(currentIndex, currentIndex + PAGE_SIZE);
+                nextData.forEach(item => renderImageCard(item));
+                currentIndex += nextData.length;
+
+                if (currentIndex >= allHistory.length) {
+                    trigger.classList.add('hidden');
+                } else {
+                    trigger.classList.remove('hidden');
+                    trigger.innerText = "Load More Archive";
+                }
+
+            } catch (e) {
+                console.error(e);
+                trigger.innerText = "Error Loading History";
+            } finally {
+                isLoading = false;
+            }
+        }
+
+        async function deleteHistoryItem(timestamp, event) {
+            event.stopPropagation();
+            const res = await fetch('/api/history/delete', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ timestamp })
+            });
+            if ((await res.json()).success) document.getElementById(`history-${timestamp}`).remove();
+        }
+
+        const observer = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting && !isLoading && currentIndex < allHistory.length) {
+                loadHistory(1);
+            }
+        }, { threshold: 0.1 });
+
+        window.onload = () => {
+            loadHistory(0).then(() => {
+                const trigger = document.getElementById('loadMoreTrigger');
+                if (trigger) {
+                    observer.observe(trigger);
+                    trigger.onclick = () => loadHistory(1);
+                }
+            });
+
+            setInterval(async () => {
+                try {
+                    const res = await fetch("/api/queue_status?client_id=" + encodeURIComponent(CLIENT_ID));
+                    const data = await res.json();
+                    const statusText = document.getElementById("statusText");
+                    const dotColor = document.getElementById("dotColor");
+                    if (statusText && dotColor) {
+                        if (data.total > 0) {
+                            statusText.innerText = `Queueing ${data.position}/${data.total}`;
+                            statusText.className = "text-[9px] font-bold text-orange-500 uppercase";
+                            dotColor.className = "w-1.5 h-1.5 bg-orange-500 rounded-full animate-pulse";
+                        } else {
+                            statusText.innerText = "System Ready";
+                            statusText.className = "text-[9px] font-bold text-gray-500 uppercase";
+                            dotColor.className = "w-1.5 h-1.5 bg-black rounded-full";
+                        }
+                    }
+                } catch (e) { }
+            }, 3000);
+        };
+
+        // 基础功能
+        function openLightbox(url, prompt) {
+            const img = document.getElementById('lightboxImg');
+            const resDisplay = document.getElementById('lightboxRes');
+            resDisplay.innerText = "...";
+            img.src = url;
+            img.onload = () => {
+                resDisplay.innerText = `${img.naturalWidth} x ${img.naturalHeight}`;
+            };
+            document.getElementById('lightboxPrompt').innerText = prompt;
+            document.getElementById('lightbox').classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        }
+        function closeLightbox() { document.getElementById('lightbox').classList.add('hidden'); document.body.style.overflow = 'auto'; }
+        function handleOutsideClick(e) { if (e.target.id === 'lightbox') closeLightbox(); }
+        function downloadImage() {
+            const a = document.createElement('a'); a.href = document.getElementById('lightboxImg').src;
+            a.download = `Art-${Date.now()}.png`; a.click();
+        }
+        function applySameStyle() {
+            document.getElementById('prompt').value = document.getElementById('lightboxPrompt').innerText;
+            closeLightbox();
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+    </script>
+</body>
+
+</html>

26-5-10-API-Studio/workflows/2511.json

@@ -0,0 +1,264 @@
+{
+  "1": {
+    "inputs": {
+      "strength": 1,
+      "model": [
+        "2",
+        0
+      ]
+    },
+    "class_type": "CFGNorm",
+    "_meta": {
+      "title": "CFG归一化"
+    }
+  },
+  "2": {
+    "inputs": {
+      "shift": 3,
+      "model": [
+        "20",
+        0
+      ]
+    },
+    "class_type": "ModelSamplingAuraFlow",
+    "_meta": {
+      "title": "模型采样算法AuraFlow"
+    }
+  },
+  "3": {
+    "inputs": {
+      "prompt": "",
+      "speak_and_recognation": {
+        "__value__": [
+          false,
+          true
+        ]
+      },
+      "clip": [
+        "87",
+        0
+      ],
+      "vae": [
+        "22",
+        0
+      ],
+      "image1": [
+        "39",
+        0
+      ]
+    },
+    "class_type": "TextEncodeQwenImageEditPlus",
+    "_meta": {
+      "title": "文本编码（QwenImageEditPlus）"
+    }
+  },
+  "10": {
+    "inputs": {
+      "pixels": [
+        "39",
+        0
+      ],
+      "vae": [
+        "22",
+        0
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE编码"
+    }
+  },
+  "11": {
+    "inputs": {
+      "prompt": "将摄像机向右旋转45度",
+      "speak_and_recognation": {
+        "__value__": [
+          false,
+          true
+        ]
+      },
+      "clip": [
+        "87",
+        0
+      ],
+      "vae": [
+        "22",
+        0
+      ],
+      "image1": [
+        "39",
+        0
+      ]
+    },
+    "class_type": "TextEncodeQwenImageEditPlus",
+    "_meta": {
+      "title": "文本编码（QwenImageEditPlus）"
+    }
+  },
+  "12": {
+    "inputs": {
+      "samples": [
+        "14",
+        0
+      ],
+      "vae": [
+        "22",
+        0
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE解码"
+    }
+  },
+  "14": {
+    "inputs": {
+      "seed": 691951626916858,
+      "steps": 8,
+      "cfg": 1,
+      "sampler_name": "euler",
+      "scheduler": "simple",
+      "denoise": 1,
+      "model": [
+        "1",
+        0
+      ],
+      "positive": [
+        "84",
+        0
+      ],
+      "negative": [
+        "85",
+        0
+      ],
+      "latent_image": [
+        "10",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "K采样器"
+    }
+  },
+  "20": {
+    "inputs": {
+      "lora_name": "qwen\\Qwen-Image-Edit-2511-Lightning-4steps-V1.0-bf16.safetensors",
+      "strength_model": 1,
+      "model": [
+        "76",
+        0
+      ]
+    },
+    "class_type": "LoraLoaderModelOnly",
+    "_meta": {
+      "title": "LoRA加载器(仅模型)"
+    }
+  },
+  "22": {
+    "inputs": {
+      "vae_name": "qwen_image_vae.safetensors"
+    },
+    "class_type": "VAELoader",
+    "_meta": {
+      "title": "VAE加载器"
+    }
+  },
+  "31": {
+    "inputs": {
+      "image": "10_start_1.jpg"
+    },
+    "class_type": "LoadImage",
+    "_meta": {
+      "title": "加载图像"
+    }
+  },
+  "39": {
+    "inputs": {
+      "upscale_method": "lanczos",
+      "megapixels": 1,
+      "resolution_steps": 1,
+      "image": [
+        "31",
+        0
+      ]
+    },
+    "class_type": "ImageScaleToTotalPixels",
+    "_meta": {
+      "title": "图像按像素缩放"
+    }
+  },
+  "45": {
+    "inputs": {
+      "images": [
+        "12",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "预览图像"
+    }
+  },
+  "76": {
+    "inputs": {
+      "lora_name": "qwen\\qwen-image-edit-2511-multiple-angles-lora.safetensors",
+      "strength_model": 1,
+      "model": [
+        "86",
+        0
+      ]
+    },
+    "class_type": "LoraLoaderModelOnly",
+    "_meta": {
+      "title": "LoRA加载器(仅模型)"
+    }
+  },
+  "84": {
+    "inputs": {
+      "reference_latents_method": "index_timestep_zero",
+      "conditioning": [
+        "11",
+        0
+      ]
+    },
+    "class_type": "FluxKontextMultiReferenceLatentMethod",
+    "_meta": {
+      "title": "FluxKontext多参考潜在方法"
+    }
+  },
+  "85": {
+    "inputs": {
+      "reference_latents_method": "index_timestep_zero",
+      "conditioning": [
+        "3",
+        0
+      ]
+    },
+    "class_type": "FluxKontextMultiReferenceLatentMethod",
+    "_meta": {
+      "title": "FluxKontext多参考潜在方法"
+    }
+  },
+  "86": {
+    "inputs": {
+      "unet_name": "qwen_image_edit_2511_fp8_e4m3fn.safetensors",
+      "weight_dtype": "default"
+    },
+    "class_type": "UNETLoader",
+    "_meta": {
+      "title": "UNET加载器"
+    }
+  },
+  "87": {
+    "inputs": {
+      "clip_name": "qwen_2.5_vl_7b_fp8_scaled.safetensors",
+      "type": "qwen_image",
+      "device": "default"
+    },
+    "class_type": "CLIPLoader",
+    "_meta": {
+      "title": "CLIP加载器"
+    }
+  }
+}

26-5-10-API-Studio/workflows/Flux2-Klein.json

@@ -0,0 +1,525 @@
+{
+  "151": {
+    "inputs": {
+      "sampler_name": "euler"
+    },
+    "class_type": "KSamplerSelect",
+    "_meta": {
+      "title": "K采样器选择"
+    }
+  },
+  "152": {
+    "inputs": {
+      "steps": 4,
+      "width": [
+        "157",
+        1
+      ],
+      "height": [
+        "157",
+        1
+      ]
+    },
+    "class_type": "Flux2Scheduler",
+    "_meta": {
+      "title": "Flux2Scheduler"
+    }
+  },
+  "153": {
+    "inputs": {
+      "cfg": 1,
+      "model": [
+        "296",
+        0
+      ],
+      "positive": [
+        "307",
+        0
+      ],
+      "negative": [
+        "308",
+        0
+      ]
+    },
+    "class_type": "CFGGuider",
+    "_meta": {
+      "title": "CFG引导"
+    }
+  },
+  "154": {
+    "inputs": {
+      "noise": [
+        "158",
+        0
+      ],
+      "guider": [
+        "153",
+        0
+      ],
+      "sampler": [
+        "151",
+        0
+      ],
+      "sigmas": [
+        "152",
+        0
+      ],
+      "latent_image": [
+        "156",
+        0
+      ]
+    },
+    "class_type": "SamplerCustomAdvanced",
+    "_meta": {
+      "title": "自定义采样器(高级)"
+    }
+  },
+  "155": {
+    "inputs": {
+      "samples": [
+        "154",
+        0
+      ],
+      "vae": [
+        "174",
+        0
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE解码"
+    }
+  },
+  "156": {
+    "inputs": {
+      "width": [
+        "157",
+        0
+      ],
+      "height": [
+        "157",
+        1
+      ],
+      "batch_size": 1
+    },
+    "class_type": "EmptyFlux2LatentImage",
+    "_meta": {
+      "title": "Empty Flux 2 Latent"
+    }
+  },
+  "157": {
+    "inputs": {
+      "image": [
+        "291",
+        0
+      ]
+    },
+    "class_type": "GetImageSize",
+    "_meta": {
+      "title": "获取图像尺寸"
+    }
+  },
+  "158": {
+    "inputs": {
+      "noise_seed": 1046852288816614
+    },
+    "class_type": "RandomNoise",
+    "_meta": {
+      "title": "随机噪波"
+    }
+  },
+  "159": {
+    "inputs": {
+      "conditioning": [
+        "168",
+        0
+      ],
+      "latent": [
+        "162",
+        0
+      ]
+    },
+    "class_type": "ReferenceLatent",
+    "_meta": {
+      "title": "参考Latent"
+    }
+  },
+  "160": {
+    "inputs": {
+      "conditioning": [
+        "167",
+        0
+      ],
+      "latent": [
+        "162",
+        0
+      ]
+    },
+    "class_type": "ReferenceLatent",
+    "_meta": {
+      "title": "参考Latent"
+    }
+  },
+  "162": {
+    "inputs": {
+      "pixels": [
+        "291",
+        0
+      ],
+      "vae": [
+        "174",
+        0
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE编码"
+    }
+  },
+  "164": {
+    "inputs": {
+      "pixels": [
+        "271",
+        0
+      ],
+      "vae": [
+        "174",
+        0
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE编码"
+    }
+  },
+  "165": {
+    "inputs": {
+      "conditioning": [
+        "159",
+        0
+      ],
+      "latent": [
+        "164",
+        0
+      ]
+    },
+    "class_type": "ReferenceLatent",
+    "_meta": {
+      "title": "参考Latent"
+    }
+  },
+  "166": {
+    "inputs": {
+      "conditioning": [
+        "160",
+        0
+      ],
+      "latent": [
+        "164",
+        0
+      ]
+    },
+    "class_type": "ReferenceLatent",
+    "_meta": {
+      "title": "参考Latent"
+    }
+  },
+  "167": {
+    "inputs": {
+      "conditioning": [
+        "168",
+        0
+      ]
+    },
+    "class_type": "ConditioningZeroOut",
+    "_meta": {
+      "title": "条件零化"
+    }
+  },
+  "168": {
+    "inputs": {
+      "text": "改为夜晚",
+      "speak_and_recognation": {
+        "__value__": [
+          false,
+          true
+        ]
+      },
+      "clip": [
+        "295",
+        0
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP文本编码器"
+    }
+  },
+  "174": {
+    "inputs": {
+      "vae_name": "flux2-vae.safetensors"
+    },
+    "class_type": "VAELoader",
+    "_meta": {
+      "title": "VAE加载器"
+    }
+  },
+  "178": {
+    "inputs": {
+      "pixels": [
+        "294",
+        0
+      ],
+      "vae": [
+        "174",
+        0
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE编码"
+    }
+  },
+  "179": {
+    "inputs": {
+      "conditioning": [
+        "165",
+        0
+      ],
+      "latent": [
+        "178",
+        0
+      ]
+    },
+    "class_type": "ReferenceLatent",
+    "_meta": {
+      "title": "参考Latent"
+    }
+  },
+  "180": {
+    "inputs": {
+      "conditioning": [
+        "166",
+        0
+      ],
+      "latent": [
+        "178",
+        0
+      ]
+    },
+    "class_type": "ReferenceLatent",
+    "_meta": {
+      "title": "参考Latent"
+    }
+  },
+  "270": {
+    "inputs": {
+      "image": "05-1.jpg"
+    },
+    "class_type": "LoadImage",
+    "_meta": {
+      "title": "加载图像"
+    }
+  },
+  "271": {
+    "inputs": {
+      "upscale_method": "lanczos",
+      "megapixels": 1,
+      "resolution_steps": 1,
+      "image": [
+        "270",
+        0
+      ]
+    },
+    "class_type": "ImageScaleToTotalPixels",
+    "_meta": {
+      "title": "图像按像素缩放"
+    }
+  },
+  "278": {
+    "inputs": {
+      "image": "1 (4).jpg"
+    },
+    "class_type": "LoadImage",
+    "_meta": {
+      "title": "加载图像"
+    }
+  },
+  "291": {
+    "inputs": {
+      "upscale_method": "lanczos",
+      "megapixels": 1,
+      "resolution_steps": 1,
+      "image": [
+        "278",
+        0
+      ]
+    },
+    "class_type": "ImageScaleToTotalPixels",
+    "_meta": {
+      "title": "图像按像素缩放"
+    }
+  },
+  "292": {
+    "inputs": {
+      "image": "05-1.jpg"
+    },
+    "class_type": "LoadImage",
+    "_meta": {
+      "title": "加载图像"
+    }
+  },
+  "294": {
+    "inputs": {
+      "upscale_method": "lanczos",
+      "megapixels": 1,
+      "resolution_steps": 1,
+      "image": [
+        "292",
+        0
+      ]
+    },
+    "class_type": "ImageScaleToTotalPixels",
+    "_meta": {
+      "title": "图像按像素缩放"
+    }
+  },
+  "295": {
+    "inputs": {
+      "model_name1": "qwen_3_8b_fp8mixed.safetensors",
+      "model_name2": "None",
+      "model_name3": "None",
+      "type": "stable_diffusion",
+      "key_opt": "",
+      "mode": "Auto",
+      "device": "default"
+    },
+    "class_type": "LoadTextEncoderShared //Inspire",
+    "_meta": {
+      "title": "Shared Text Encoder Loader (Inspire)"
+    }
+  },
+  "296": {
+    "inputs": {
+      "model_name": "flux-2-klein-9b-fp8.safetensors",
+      "weight_dtype": "default",
+      "key_opt": "",
+      "mode": "Auto"
+    },
+    "class_type": "LoadDiffusionModelShared //Inspire",
+    "_meta": {
+      "title": "Shared Diffusion Model Loader (Inspire)"
+    }
+  },
+  "305": {
+    "inputs": {
+      "switch": [
+        "313",
+        0
+      ],
+      "on_false": [
+        "160",
+        0
+      ],
+      "on_true": [
+        "166",
+        0
+      ]
+    },
+    "class_type": "ComfySwitchNode",
+    "_meta": {
+      "title": "Switch"
+    }
+  },
+  "306": {
+    "inputs": {
+      "switch": [
+        "313",
+        0
+      ],
+      "on_false": [
+        "159",
+        0
+      ],
+      "on_true": [
+        "165",
+        0
+      ]
+    },
+    "class_type": "ComfySwitchNode",
+    "_meta": {
+      "title": "Switch"
+    }
+  },
+  "307": {
+    "inputs": {
+      "switch": [
+        "314",
+        0
+      ],
+      "on_false": [
+        "306",
+        0
+      ],
+      "on_true": [
+        "179",
+        0
+      ]
+    },
+    "class_type": "ComfySwitchNode",
+    "_meta": {
+      "title": "Switch"
+    }
+  },
+  "308": {
+    "inputs": {
+      "switch": [
+        "314",
+        0
+      ],
+      "on_false": [
+        "305",
+        0
+      ],
+      "on_true": [
+        "180",
+        0
+      ]
+    },
+    "class_type": "ComfySwitchNode",
+    "_meta": {
+      "title": "Switch"
+    }
+  },
+  "313": {
+    "inputs": {
+      "value": false
+    },
+    "class_type": "PrimitiveBoolean",
+    "_meta": {
+      "title": "布尔值2"
+    }
+  },
+  "314": {
+    "inputs": {
+      "value": false
+    },
+    "class_type": "PrimitiveBoolean",
+    "_meta": {
+      "title": "布尔值3"
+    }
+  },
+  "315": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "155",
+        0
+      ]
+    },
+    "class_type": "SaveImage",
+    "_meta": {
+      "title": "保存图像"
+    }
+  }
+}

26-5-10-API-Studio/workflows/Z-Image-Enhance.json

@@ -0,0 +1,383 @@
+{
+  "15": {
+    "inputs": {
+      "image": "pasted/image (794).png"
+    },
+    "class_type": "LoadImage",
+    "_meta": {
+      "title": "加载图像"
+    }
+  },
+  "23": {
+    "inputs": {
+      "text": "丰富的细节",
+      "speak_and_recognation": {
+        "__value__": [
+          false,
+          true
+        ]
+      },
+      "clip": [
+        "34",
+        0
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP文本编码器"
+    }
+  },
+  "24": {
+    "inputs": {
+      "conditioning": [
+        "23",
+        0
+      ]
+    },
+    "class_type": "ConditioningZeroOut",
+    "_meta": {
+      "title": "条件零化"
+    }
+  },
+  "27": {
+    "inputs": {
+      "vae_name": "ae.safetensors"
+    },
+    "class_type": "VAELoader",
+    "_meta": {
+      "title": "VAE加载器"
+    }
+  },
+  "33": {
+    "inputs": {
+      "model_name": "z_image_turbo_bf16.safetensors",
+      "weight_dtype": "default",
+      "key_opt": "",
+      "mode": "Auto"
+    },
+    "class_type": "LoadDiffusionModelShared //Inspire",
+    "_meta": {
+      "title": "Shared Diffusion Model Loader (Inspire)"
+    }
+  },
+  "34": {
+    "inputs": {
+      "model_name1": "qwen_3_4b.safetensors",
+      "model_name2": "None",
+      "model_name3": "None",
+      "type": "stable_diffusion",
+      "key_opt": "",
+      "mode": "Auto",
+      "device": "default"
+    },
+    "class_type": "LoadTextEncoderShared //Inspire",
+    "_meta": {
+      "title": "Shared Text Encoder Loader (Inspire)"
+    }
+  },
+  "142": {
+    "inputs": {
+      "pixels": [
+        "15",
+        0
+      ],
+      "vae": [
+        "27",
+        0
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE编码"
+    }
+  },
+  "146": {
+    "inputs": {
+      "seed": 279629946795727,
+      "steps": 10,
+      "cfg": 0.7,
+      "sampler_name": "euler",
+      "scheduler": "sgm_uniform",
+      "denoise": [
+        "202",
+        0
+      ],
+      "model": [
+        "166",
+        0
+      ],
+      "positive": [
+        "23",
+        0
+      ],
+      "negative": [
+        "24",
+        0
+      ],
+      "latent_image": [
+        "142",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "K采样器"
+    }
+  },
+  "147": {
+    "inputs": {
+      "samples": [
+        "146",
+        0
+      ],
+      "vae": [
+        "27",
+        0
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE解码"
+    }
+  },
+  "164": {
+    "inputs": {
+      "preprocessor": "DepthAnythingV2Preprocessor",
+      "resolution": 1024,
+      "image": [
+        "15",
+        0
+      ]
+    },
+    "class_type": "AIO_Preprocessor",
+    "_meta": {
+      "title": "Aux集成预处理器"
+    }
+  },
+  "165": {
+    "inputs": {
+      "name": "Z-Image-Turbo-Fun-Controlnet-Union.safetensors"
+    },
+    "class_type": "ModelPatchLoader",
+    "_meta": {
+      "title": "加载模型补丁"
+    }
+  },
+  "166": {
+    "inputs": {
+      "strength": 0.8,
+      "model": [
+        "33",
+        0
+      ],
+      "model_patch": [
+        "165",
+        0
+      ],
+      "vae": [
+        "27",
+        0
+      ],
+      "image": [
+        "164",
+        0
+      ]
+    },
+    "class_type": "QwenImageDiffsynthControlnet",
+    "_meta": {
+      "title": "QwenImageDiffsynthControlnet"
+    }
+  },
+  "174": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "180",
+        0
+      ]
+    },
+    "class_type": "SaveImage",
+    "_meta": {
+      "title": "保存图像"
+    }
+  },
+  "180": {
+    "inputs": {
+      "samples": [
+        "181",
+        0
+      ],
+      "vae": [
+        "27",
+        0
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE解码"
+    }
+  },
+  "181": {
+    "inputs": {
+      "seed": 820960346993579,
+      "steps": 10,
+      "cfg": 1,
+      "sampler_name": "euler_cfg_pp",
+      "scheduler": "simple",
+      "denoise": [
+        "202",
+        0
+      ],
+      "model": [
+        "33",
+        0
+      ],
+      "positive": [
+        "23",
+        0
+      ],
+      "negative": [
+        "24",
+        0
+      ],
+      "latent_image": [
+        "186",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "K采样器"
+    }
+  },
+  "184": {
+    "inputs": {
+      "seed": 882274830236035,
+      "strength": [
+        "202",
+        0
+      ],
+      "image": [
+        "15",
+        0
+      ]
+    },
+    "class_type": "ImageAddNoise",
+    "_meta": {
+      "title": "图像添加噪声"
+    }
+  },
+  "186": {
+    "inputs": {
+      "pixels": [
+        "189",
+        0
+      ],
+      "vae": [
+        "27",
+        0
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE编码"
+    }
+  },
+  "189": {
+    "inputs": {
+      "blend_factor": [
+        "202",
+        0
+      ],
+      "blend_mode": "multiply",
+      "image1": [
+        "191",
+        0
+      ],
+      "image2": [
+        "184",
+        0
+      ]
+    },
+    "class_type": "ImageBlend",
+    "_meta": {
+      "title": "图像混合"
+    }
+  },
+  "191": {
+    "inputs": {
+      "sharpen_radius": 1,
+      "sigma": 0.5,
+      "alpha": 0.5,
+      "image": [
+        "147",
+        0
+      ]
+    },
+    "class_type": "ImageSharpen",
+    "_meta": {
+      "title": "图像锐化"
+    }
+  },
+  "193": {
+    "inputs": {
+      "image": [
+        "15",
+        0
+      ]
+    },
+    "class_type": "GetImageSize+",
+    "_meta": {
+      "title": "获取图像尺寸"
+    }
+  },
+  "201": {
+    "inputs": {
+      "expression": "(a+b)*c/10000",
+      "speak_and_recognation": {
+        "__value__": [
+          false,
+          true
+        ]
+      },
+      "a": [
+        "193",
+        0
+      ],
+      "b": [
+        "193",
+        1
+      ],
+      "c": [
+        "204",
+        0
+      ]
+    },
+    "class_type": "MathExpression|pysssss",
+    "_meta": {
+      "title": "数学表达式"
+    }
+  },
+  "202": {
+    "inputs": {
+      "output_type": "float",
+      "*": [
+        "201",
+        1
+      ]
+    },
+    "class_type": "easy convertAnything",
+    "_meta": {
+      "title": "转换任何"
+    }
+  },
+  "204": {
+    "inputs": {
+      "value": 0.5
+    },
+    "class_type": "FloatConstant",
+    "_meta": {
+      "title": "浮点常量"
+    }
+  }
+}

26-5-10-API-Studio/workflows/Z-Image.json

@@ -0,0 +1,176 @@
+{
+  "20": {
+    "inputs": {
+      "samples": [
+        "22",
+        0
+      ],
+      "vae": [
+        "27",
+        0
+      ]
+    },
+    "class_type": "VAEDecode",
+    "_meta": {
+      "title": "VAE解码"
+    }
+  },
+  "22": {
+    "inputs": {
+      "seed": 1104391495230198,
+      "steps": 10,
+      "cfg": 1,
+      "sampler_name": "euler",
+      "scheduler": "simple",
+      "denoise": 1,
+      "model": [
+        "33",
+        0
+      ],
+      "positive": [
+        "23",
+        0
+      ],
+      "negative": [
+        "24",
+        0
+      ],
+      "latent_image": [
+        "144",
+        0
+      ]
+    },
+    "class_type": "KSampler",
+    "_meta": {
+      "title": "K采样器"
+    }
+  },
+  "23": {
+    "inputs": {
+      "text": "",
+      "speak_and_recognation": {
+        "__value__": [
+          false,
+          true
+        ]
+      },
+      "clip": [
+        "34",
+        0
+      ]
+    },
+    "class_type": "CLIPTextEncode",
+    "_meta": {
+      "title": "CLIP文本编码器"
+    }
+  },
+  "24": {
+    "inputs": {
+      "conditioning": [
+        "23",
+        0
+      ]
+    },
+    "class_type": "ConditioningZeroOut",
+    "_meta": {
+      "title": "条件零化"
+    }
+  },
+  "27": {
+    "inputs": {
+      "vae_name": "flux ultra vae.safetensors"
+    },
+    "class_type": "VAELoader",
+    "_meta": {
+      "title": "VAE加载器"
+    }
+  },
+  "33": {
+    "inputs": {
+      "model_name": "z_image_turbo_bf16.safetensors",
+      "weight_dtype": "default",
+      "key_opt": "",
+      "mode": "Auto"
+    },
+    "class_type": "LoadDiffusionModelShared //Inspire",
+    "_meta": {
+      "title": "Shared Diffusion Model Loader (Inspire)"
+    }
+  },
+  "34": {
+    "inputs": {
+      "model_name1": "qwen_3_4b.safetensors",
+      "model_name2": "None",
+      "model_name3": "None",
+      "type": "stable_diffusion",
+      "key_opt": "",
+      "mode": "Auto",
+      "device": "default"
+    },
+    "class_type": "LoadTextEncoderShared //Inspire",
+    "_meta": {
+      "title": "Shared Text Encoder Loader (Inspire)"
+    }
+  },
+  "89": {
+    "inputs": {
+      "rgthree_comparer": {
+        "images": [
+          {
+            "name": "A",
+            "selected": true,
+            "url": "/api/view?filename=rgthree.compare._temp_gmjxy_00001_.png&type=temp&subfolder=&rand=0.7230996201608886"
+          },
+          {
+            "name": "B",
+            "selected": true,
+            "url": "/api/view?filename=rgthree.compare._temp_gmjxy_00002_.png&type=temp&subfolder=&rand=0.6218111120009978"
+          }
+        ]
+      },
+      "image_a": [
+        "20",
+        0
+      ]
+    },
+    "class_type": "Image Comparer (rgthree)",
+    "_meta": {
+      "title": "图像对比"
+    }
+  },
+  "137": {
+    "inputs": {
+      "images": [
+        "20",
+        0
+      ]
+    },
+    "class_type": "PreviewImage",
+    "_meta": {
+      "title": "预览图像"
+    }
+  },
+  "142": {
+    "inputs": {
+      "vae": [
+        "27",
+        0
+      ]
+    },
+    "class_type": "VAEEncode",
+    "_meta": {
+      "title": "VAE编码"
+    }
+  },
+  "144": {
+    "inputs": {
+      "width": 512,
+      "height": 512,
+      "batch_size": 1
+    },
+    "class_type": "EmptyLatentImage",
+    "_meta": {
+      "title": "空Latent"
+    }
+  }
+}

26-5-10-API-Studio/workflows/upscale.json

@@ -0,0 +1,90 @@
+{
+  "15": {
+    "inputs": {
+      "image": "pasted/image (794).png"
+    },
+    "class_type": "LoadImage",
+    "_meta": {
+      "title": "加载图像"
+    }
+  },
+  "169": {
+    "inputs": {
+      "model": "seedvr2_ema_3b_fp16.safetensors",
+      "device": "cuda:0",
+      "blocks_to_swap": 32,
+      "swap_io_components": true,
+      "offload_device": "cpu",
+      "cache_model": false,
+      "attention_mode": "sdpa"
+    },
+    "class_type": "SeedVR2LoadDiTModel",
+    "_meta": {
+      "title": "SeedVR2 (Down)Load DiT Model"
+    }
+  },
+  "170": {
+    "inputs": {
+      "model": "ema_vae_fp16.safetensors",
+      "device": "cuda:0",
+      "encode_tiled": true,
+      "encode_tile_size": 1024,
+      "encode_tile_overlap": 128,
+      "decode_tiled": true,
+      "decode_tile_size": 1024,
+      "decode_tile_overlap": 128,
+      "tile_debug": "false",
+      "offload_device": "cpu",
+      "cache_model": false
+    },
+    "class_type": "SeedVR2LoadVAEModel",
+    "_meta": {
+      "title": "SeedVR2 (Down)Load VAE Model"
+    }
+  },
+  "172": {
+    "inputs": {
+      "seed": 21053977,
+      "resolution": 2048,
+      "max_resolution": 4096,
+      "batch_size": 5,
+      "uniform_batch_size": false,
+      "color_correction": "lab",
+      "temporal_overlap": 0,
+      "prepend_frames": 0,
+      "input_noise_scale": 0,
+      "latent_noise_scale": 0,
+      "offload_device": "cpu",
+      "enable_debug": false,
+      "image": [
+        "15",
+        0
+      ],
+      "dit": [
+        "169",
+        0
+      ],
+      "vae": [
+        "170",
+        0
+      ]
+    },
+    "class_type": "SeedVR2VideoUpscaler",
+    "_meta": {
+      "title": "SeedVR2 Video Upscaler (v2.5.10)"
+    }
+  },
+  "174": {
+    "inputs": {
+      "filename_prefix": "ComfyUI",
+      "images": [
+        "172",
+        0
+      ]
+    },
+    "class_type": "SaveImage",
+    "_meta": {
+      "title": "保存图像"
+    }
+  }
+}

26-5-10-API-Studio/启动服务.bat

@@ -0,0 +1,11 @@
+@echo off
+cd /d "%~dp0"
+echo Starting ComfyUI-API-Modelscope...
+echo Visit: http://127.0.0.1:3000/
+echo Press Ctrl+C to stop.
+echo.
+start /b cmd /c "timeout /t 3 /nobreak >nul && start http://127.0.0.1:3000/"
+python main.py
+echo.
+echo Server stopped.
+pause

26-5-10-API-Studio/安装依赖.bat

@@ -0,0 +1,37 @@
+@echo off
+cd /d "%~dp0"
+echo ============================================
+echo   Installing dependencies (offline)
+echo ============================================
+echo.
+
+python --version >nul 2>&1
+if errorlevel 1 (
+    echo [ERROR] Python not found. Please install Python 3.10+
+    echo Download: https://www.python.org/downloads/
+    pause
+    exit /b 1
+)
+
+python --version
+
+echo.
+echo [1/2] Checking pip...
+python -m pip --version >nul 2>&1
+if errorlevel 1 (
+    echo pip not found, bootstrapping...
+    python -m ensurepip --upgrade
+)
+
+echo [2/2] Installing from local packages folder...
+python -m pip install --no-index --find-links=packages -r requirements.txt
+
+if errorlevel 1 (
+    echo.
+    echo [WARN] Offline install failed, trying online...
+    python -m pip install -r requirements.txt
+)
+
+echo.
+echo Done. Run "启动服务.bat" to start.
+pause

26-5-10-API-Studio/运行说明.txt

@@ -0,0 +1,28 @@
+1. API网站注册：
+https://ai.comfly.chat/register?aff=HAOj137551
+
+2. 新建API key
+https://ai.comfly.chat/token
+
+3. 将key填写到软件的API目录中的.env
+COMFLY_API_KEY=sk-xxxxx
+
+4. 创建modelscope的API key
+https://www.modelscope.cn/my/access/token
+
+5. 填写到API目录中的.env
+MODELSCOPE_API_KEY=ms-xxxx
+
+6. 如果调用本地comfyui，需要确保workflows目录中的所有工作流都可以在本地正常运行
+
+7. 如果本地comfyui默认的端口是8188，就可以不用修改这个值。现在这个值是读取后台8188和4090两个端口的显卡，如果有多显卡可以修改端口号。
+COMFYUI_INSTANCES=127.0.0.1:8188,127.0.0.1:4090
+
+----运行说明-----
+
+直接运行“启动服务.bat”，如果缺少依赖，则运行“安装依赖.bat”。
+
+
+---报错问题---
+
+出现任何报错，可以安装Codex Installer.exe，选中这个文件夹，让codex给你解决运行问题，免费账号每周都有免费额度可以使用