Upload 19 files

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "files.defaultLanguage": "chinese"
+}

global_config.json

@@ -0,0 +1,3 @@
+{
+    "modelscope_token": ""
+}

main.py

@@ -0,0 +1,700 @@
+import json
+import uuid
+import urllib.request
+import urllib.parse
+import urllib.error
+import os
+import random
+import time
+import shutil
+import asyncio
+import requests
+import httpx
+from typing import List, Dict, Any
+from threading import Lock
+from fastapi import FastAPI, HTTPException, WebSocket, WebSocketDisconnect, UploadFile, File
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse, Response
+from pydantic import BaseModel
+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] = []
+
+    async def connect(self, websocket: WebSocket):
+        await websocket.accept()
+        self.active_connections.append(websocket)
+        print(f"WS Connected. Total: {len(self.active_connections)}")
+        await self.broadcast_count()
+
+    async def disconnect(self, websocket: WebSocket):
+        if websocket in self.active_connections:
+            self.active_connections.remove(websocket)
+            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})
+        print(f"Broadcasting online count: {count}")
+        # 创建副本进行遍历，防止遍历时修改列表
+        for connection in self.active_connections[:]:
+            try:
+                await connection.send_text(data)
+            except Exception as e:
+                print(f"Broadcast error for client {id(connection)}: {e}")
+                self.active_connections.remove(connection)
+
+    async def broadcast_new_image(self, image_data: dict):
+        """广播新生成的图片数据给所有客户端"""
+        data = json.dumps({"type": "new_image", "data": image_data})
+        print(f"Broadcasting new image to {len(self.active_connections)} clients")
+        for connection in self.active_connections[:]:
+            try:
+                await connection.send_text(data)
+            except Exception as e:
+                print(f"Broadcast image error for client {id(connection)}: {e}")
+                self.active_connections.remove(connection)
+
+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):
+    await manager.connect(websocket)
+    try:
+        while True:
+            # 接收客户端心跳包
+            data = await websocket.receive_text()
+            if data == "ping":
+                await websocket.send_text(json.dumps({"type": "pong"}))
+    except WebSocketDisconnect:
+        print(f"WebSocket disconnected normally: {id(websocket)}")
+        await manager.disconnect(websocket)
+    except Exception as e:
+        print(f"WS Error for {id(websocket)}: {e}")
+        await manager.disconnect(websocket)
+
+# --- 配置区域 ---
+# 支持多卡负载均衡：配置多个 ComfyUI 地址
+COMFYUI_INSTANCES = [
+    "127.0.0.1:8188",  # 本机默认端口
+    "127.0.0.1:4090",  # 显卡分流端口
+]
+# 保持向后兼容，默认使用第一个
+COMFYUI_ADDRESS = COMFYUI_INSTANCES[0]
+
+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")
+QUEUE = []
+QUEUE_LOCK = Lock()
+HISTORY_LOCK = Lock()
+# 移除全局执行锁，允许并发以便分发到不同显卡
+# EXECUTION_LOCK = Lock() 
+NEXT_TASK_ID = 1
+
+# 负载均衡：本地任务计数（解决 ComfyUI 队列更新延迟导致的竞态问题）
+BACKEND_LOCAL_LOAD = {addr: 0 for addr in COMFYUI_INSTANCES}
+LOAD_LOCK = Lock()
+
+# 确保必要的目录存在
+os.makedirs(OUTPUT_DIR, exist_ok=True)
+os.makedirs(STATIC_DIR, exist_ok=True)
+os.makedirs(WORKFLOW_DIR, exist_ok=True)
+
+GLOBAL_CONFIG_FILE = os.path.join(BASE_DIR, "global_config.json")
+GLOBAL_CONFIG_LOCK = Lock()
+
+# 挂载静态文件
+app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+app.mount("/output", StaticFiles(directory=OUTPUT_DIR), name="output")
+
+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 = ""
+
+class CloudGenRequest(BaseModel):
+    prompt: str
+    api_key: str = ""
+    resolution: str = "1024x1024"
+    client_id: str = "default"
+    type: str = "zimage"
+
+class DeleteHistoryRequest(BaseModel):
+    timestamp: float
+
+# --- 负载均衡辅助功能 ---
+
+def get_best_backend():
+    """选择队列压力最小的后端"""
+    best_backend = COMFYUI_INSTANCES[0]
+    min_queue_size = float('inf')
+    
+    for addr in COMFYUI_INSTANCES:
+        try:
+            # 获取 ComfyUI 队列状态
+            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)
+                
+                # 使用两者的最大值作为有效负载
+                # 这样既能感知外部提交的任务(remote)，也能感知刚提交但未显示的内部任务(local)
+                effective_load = max(remote_load, local_load)
+                
+                print(f"Backend {addr} load: {effective_load} (Remote: {remote_load}, Local: {local_load})")
+                
+                if effective_load < min_queue_size:
+                    min_queue_size = effective_load
+                    best_backend = addr
+        except Exception as e:
+            print(f"Backend {addr} unreachable: {e}")
+            continue
+            
+    print(f"Selected backend: {best_backend}")
+    return best_backend
+
+# --- 辅助功能 ---
+
+def download_image(comfy_address, comfy_url_path, prefix="studio_"):
+    """将远程 ComfyUI 图片保存到本地并返回相对路径"""
+    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} (URL: {full_url})")
+        # 如果下载失败，返回通过本服务代理的地址，而不是直接返回 ComfyUI 地址
+        # ComfyUI 地址 (127.0.0.1) 在外部无法访问
+        # 将 /view?xxx 替换为 /api/view?xxx
+        if comfy_url_path.startswith("/view"):
+             return comfy_url_path.replace("/view", "/api/view", 1)
+        return full_url
+
+def save_to_history(record):
+    """保存记录到 JSON 文件"""
+    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:
+        # print(f"获取 ComfyUI 历史失败: {e}")
+        return {}
+
+# --- 接口路由 ---
+
+@app.get("/api/view")
+def view_image(filename: str, type: str = "input", subfolder: str = ""):
+    try:
+        # 默认尝试从第一个实例查看（通常输入图片上传后各处都有，或者我们只看第一个）
+        # 如果是 output 图片，实际上 generate 接口已经搬运到本地了，不会走这个接口查看结果
+        # 这个接口主要用于查看上传的原图
+        url = f"http://{COMFYUI_INSTANCES[0]}/view"
+        params = {"filename": filename, "type": type, "subfolder": subfolder}
+        r = requests.get(url, params=params)
+        return Response(content=r.content, media_type=r.headers.get('Content-Type'))
+    except Exception as e:
+        raise HTTPException(status_code=404, detail="Image not found")
+
+@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:
+                # Prepare multipart upload for ComfyUI
+                files_data = {'image': (file.filename, content, file.content_type)}
+                
+                # Upload to specific backend
+                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
+                else:
+                    print(f"Upload to {addr} failed: {response.text}")
+                    
+            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=f"Failed to upload to any backend")
+            
+    return {"files": uploaded_files}
+
+@app.get("/")
+async def index():
+    return FileResponse(os.path.join(STATIC_DIR, "index.html"))
+
+@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:
+                    # 如果请求 zimage，同时返回 cloud 类型的记录
+                    target_types = [type]
+                    if type == "zimage":
+                        target_types.append("cloud")
+                    
+                    data = [item for item in data if item.get("type", "zimage") in target_types]
+
+                # 过滤无效数据（无图片）
+                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)
+            
+            # Find and remove
+            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:
+                # Save history first (atomic-like)
+                with open(HISTORY_FILE, 'w', encoding='utf-8') as f:
+                    json.dump(new_history, f, ensure_ascii=False, indent=4)
+
+        # Delete files outside lock (IO operation)
+        if target_record:
+            for img_url in target_record.get("images", []):
+                # img_url is like "/output/filename.png"
+                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)}
+
+class TokenRequest(BaseModel):
+    token: str
+
+@app.get("/api/config/token")
+async def get_global_token():
+    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:
+            return {"token": ""}
+    return {"token": ""}
+
+@app.post("/api/config/token")
+async def set_global_token(req: TokenRequest):
+    with GLOBAL_CONFIG_LOCK:
+        config = {}
+        if os.path.exists(GLOBAL_CONFIG_FILE):
+            try:
+                with open(GLOBAL_CONFIG_FILE, 'r', encoding='utf-8') as f:
+                    config = json.load(f)
+            except: pass
+        
+        config["modelscope_token"] = req.token.strip()
+        
+        with open(GLOBAL_CONFIG_FILE, 'w', encoding='utf-8') as f:
+            json.dump(config, f, indent=4)
+    return {"success": True}
+
+@app.delete("/api/config/token")
+async def delete_global_token():
+    with GLOBAL_CONFIG_LOCK:
+        if os.path.exists(GLOBAL_CONFIG_FILE):
+            try:
+                config = {}
+                with open(GLOBAL_CONFIG_FILE, 'r', encoding='utf-8') as f:
+                    config = json.load(f)
+                
+                if "modelscope_token" in config:
+                    del config["modelscope_token"]
+                    with open(GLOBAL_CONFIG_FILE, 'w', encoding='utf-8') as f:
+                        json.dump(config, f, indent=4)
+            except: pass
+    return {"success": True}
+
+@app.post("/generate")
+async def generate_cloud(req: CloudGenRequest):
+    base_url = 'https://api-inference.modelscope.cn/'
+    clean_token = req.api_key.strip()
+    
+    headers = {
+        "Authorization": f"Bearer {clean_token}",
+        "Content-Type": "application/json",
+    }
+
+    # 按照官方 Z-Image 标准版参数
+    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:
+            # A. 提交异步任务
+            print(f"Submitting ModelScope task for prompt: {req.prompt[:20]}...")
+            submit_res = await client.post(
+                f"{base_url}v1/images/generations",
+                headers={**headers, "X-ModelScope-Async-Mode": "true"},
+                content=json.dumps(payload, ensure_ascii=False).encode('utf-8')
+            )
+            
+            if submit_res.status_code != 200:
+                # 尝试解析错误详情
+                try:
+                    detail = submit_res.json()
+                except:
+                    detail = submit_res.text
+                print(f"ModelScope Submit Error: {detail}")
+                raise HTTPException(status_code=submit_res.status_code, detail=detail)
+
+            task_id = submit_res.json().get("task_id")
+            print(f"Task submitted, ID: {task_id}")
+
+            # B. 轮询任务状态
+            # 增加到 60 次轮询 * 3秒 = 180秒 (3分钟) 超时
+            for i in range(60):
+                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]
+                        print(f"Task {task_id} SUCCEED: {img_url}")
+                        
+                        # 下载保存到本地 output
+                        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}"
+                                    print(f"Image saved locally: {local_path}")
+                                else:
+                                    print(f"Failed to download image: {img_res.status_code}")
+                                    local_path = img_url # Fallback to remote URL
+                        except Exception as dl_e:
+                            print(f"Download error: {dl_e}")
+                            local_path = img_url # Fallback
+
+                        # 保存到本地历史 (使用本地路径以便前端更好加载，或者仍然存 remote 但 download 不 work?)
+                        # 需求是 output 目录保存，前端展示通常优先用本地快
+                        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 as e:
+                            print(f"Broadcast error: {e}")
+
+                        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 (180s)")
+
+    except Exception as e:
+        print(f"Cloud generation error: {e}")
+        raise HTTPException(status_code=400, detail=str(e))
+
+@app.post("/api/generate")
+def generate(req: GenerateRequest):
+    global NEXT_TASK_ID
+    
+    # 1. 入队
+    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:
+        # 2. 负载均衡：选择最佳后端（移除 EXECUTION_LOCK 全局锁以支持并发）
+        target_backend = get_best_backend()
+        
+        # 增加本地负载计数
+        with LOAD_LOCK:
+            BACKEND_LOCAL_LOAD[target_backend] += 1
+        
+        # 3. 开始执行任务
+        workflow_path = os.path.join(WORKFLOW_DIR, req.workflow_json)
+        
+        # 兼容性处理：如果文件不存在且是默认值，尝试使用 WORKFLOW_PATH
+        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)
+        
+        # 参数注入
+        
+        # 基础参数兼容 (针对 Z-Image.json)
+        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
+        # 兼容 Flux2-Klein 工作流
+        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"]:
+             # SeedVR2VideoUpscaler 限制 seed 最大为 2^32 - 1
+             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')
+            print(f"ComfyUI API Error ({e.code}): {error_body}")
+            raise Exception(f"HTTP Error {e.code}: {error_body}")
+        except Exception as e:
+            raise e
+
+        # 轮询结果
+        history_data = None
+        for i in range(300): # 最多等待300秒 (5分钟)
+            try:
+                res = get_comfy_history(target_backend, prompt_id)
+                if prompt_id in res:
+                    history_data = res[prompt_id]
+                    break
+            except Exception as e:
+                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']}"
+                        # 搬家：从 ComfyUI 下载到我们的 output
+                        # 增加文件名标识
+                        prefix = f"{req.type}_{int(current_timestamp)}_"
+                        local_path = download_image(target_backend, comfy_url_path, prefix=prefix)
+                        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
+    # 强制单进程模式确保 WebSocket 计数准确
+    uvicorn.run(app, host="0.0.0.0", port=3000)

requirements.txt

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

static/angle.html

@@ -0,0 +1,983 @@
+<!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 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-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);
+        }
+
+        .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;
+        }
+
+        .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);
+        }
+    </style>
+</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="8.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="2" max="14" value="8" 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>
+
+                    <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">
+                            <div class="loading-box"></div>
+                            <p class="text-[10px] font-bold uppercase tracking-[0.4em] animate-pulse">Processing...</p>
+                        </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';
+
+        // --- 3D Scene Initialization ---
+        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 = 8;
+                valD.value = 8;
+            }
+            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 > 10) {
+                lensText = "使用广角镜头";
+            } else if (d < 6) {
+                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();
+        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 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;
+            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 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;
+            }
+
+            // 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 {
+                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
+                    })
+                });
+
+                const 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()
+                }, 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;
+                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";
+
+            // Random height logic: aspect ratio between 1.0 (square) and 0.66 (1.5x height)
+            // But user said "height not exceeding 1.5x width", so aspect ratio >= 1/1.5 = 0.666
+            // We want random heights. Let's vary the aspect-ratio style of the image.
+            // A random value between 0.67 and 1.0.
+            const randomRatio = 0.67 + Math.random() * 0.33;
+
+            card.onclick = () => openLightbox(imgUrl);
+            card.innerHTML = `
+                <div style="aspect-ratio: ${randomRatio}; overflow: hidden;">
+                    <img src="${imgUrl}" class="w-full h-full object-cover block transform group-hover:scale-105 transition-transform duration-[1.5s]">
+                </div>
+                <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 = () => {
+            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>

static/enhance.html

@@ -0,0 +1,752 @@
+<!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>
+    <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);
+        }
+    </style>
+</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>
+
+                    <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>
+
+                    <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; // Default to 2x
+
+        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);
+        };
+
+        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');
+            const btnText = document.getElementById('btnText');
+            const isUpscale = document.getElementById('upscaleToggle').checked;
+
+            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 {
+                // Phase 1: Enhance (always run)
+                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");
+
+                let finalData = enhanceData;
+
+                // Phase 2: Upscale (if enabled)
+                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();
+
+                    // 1. Fetch the result from Phase 1
+                    const imgUrl = enhanceData.images[0];
+                    console.log("Phase 1 Output URL:", imgUrl);
+
+                    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 (${imgUrl}): ${e.message}`);
+                    }
+
+                    // 2. Upload it back to ComfyUI as input
+                    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 || !uploadData.files[0]) throw new Error("Intermediate upload failed: No file data returned");
+                    const uploadedInput = uploadData.files[0].comfy_name;
+
+                    // 3. Run Upscale Workflow
+                    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();
+                    // SeedVR2VideoUpscaler limits seed to 32-bit (max 4294967295)
+                    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>

static/index.html

@@ -0,0 +1,515 @@
+<!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>
+    <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);
+        }
+
+        /* --- 极简悬浮浅灰滚动条 (无底色/左移) --- */
+        *::-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: #ffffff;
+            font-family: 'Space Grotesk', sans-serif;
+            overflow: hidden;
+            height: 100vh;
+            color: #121212;
+        }
+
+        .app-shell {
+            display: flex;
+            width: 100%;
+            height: 100vh;
+            background: #fff;
+            position: relative;
+        }
+
+        /* 侧边栏 */
+        .sidebar {
+            width: 80px;
+            min-width: 80px;
+            background: #fff;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            border-right: 1px solid #f2f2f2;
+            padding: 40px 0;
+            transition: width 0.5s var(--fluid-ease) 0.5s;
+            z-index: 50;
+        }
+
+        .sidebar:hover {
+            width: 220px;
+            transition-delay: 0s;
+        }
+
+        .logo-ring {
+            width: 36px;
+            height: 36px;
+            border: 2px solid var(--accent);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.6s var(--fluid-ease) 0.5s;
+        }
+
+        .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: #999;
+            overflow: hidden;
+            padding-left: 14px;
+        }
+
+        .sidebar:hover .nav-item {
+            width: 190px;
+            transition-delay: 0s;
+        }
+
+        .nav-item:hover {
+            background: #fafafa;
+            color: #000;
+        }
+
+        .nav-item.active {
+            background: var(--accent);
+            color: #fff;
+        }
+
+        .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: #fcfcfc;
+            margin: 16px;
+            border-radius: 32px;
+            overflow: hidden;
+            border: 1px solid #f0f0f0;
+            position: relative;
+        }
+
+        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: rgba(255, 255, 255, 0.7);
+            backdrop-filter: blur(12px);
+            padding: 6px 14px;
+            border-radius: 16px;
+            border: 1px solid rgba(0, 0, 0, 0.05);
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
+            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;
+        }
+
+        .divider {
+            width: 1px;
+            height: 12px;
+            background: rgba(0, 0, 0, 0.1);
+        }
+
+        .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;
+        }
+
+        /* --- 设计感：Split-Expansion 作者组件 --- */
+        .author-box {
+            margin-top: auto;
+            width: 100%;
+            height: 60px;
+            position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+        }
+
+        /* 字母 DX 的基础样式 */
+        .dx-letter {
+            position: absolute;
+            font-size: 14px;
+            font-weight: 800;
+            color: f5f5f5;
+            transition: all 0.5s var(--fluid-ease) 0.4s;
+            z-index: 10;
+        }
+
+        .letter-d {
+            transform: translateX(-8px);
+        }
+
+        .letter-x {
+            transform: translateX(8px);
+        }
+
+        /* 侧边栏展开时，DX 向两边消失 */
+        .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: #000;
+        }
+
+        .social-row-lite {
+            display: flex;
+            gap: 12px;
+        }
+
+        .social-icon-lite {
+            color: #ccc;
+            transition: color 0.2s, transform 0.2s;
+        }
+
+        .social-icon-lite:hover {
+            color: #000;
+            transform: translateY(-1px);
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="app-shell">
+        <aside class="sidebar">
+            <div class="logo-ring mb-12">
+                <div class="w-1.5 h-1.5 bg-black rounded-full transition-colors" id="logo-dot"></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>
+            </nav>
+
+            <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=30" class="active"></iframe>
+            <iframe id="frame-enhance" data-src="/static/enhance.html?v=30"></iframe>
+            <iframe id="frame-klein" data-src="/static/klein.html?v=30"></iframe>
+            <iframe id="frame-angle" data-src="/static/angle.html?v=30"></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;
+        }
+
+        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 = '#000';
+                }
+            } catch (e) { }
+        }
+
+        const host = window.location.host;
+        if (host) {
+            const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
+            const ws = new WebSocket(`${protocol}://${host}/ws/stats`);
+            ws.onmessage = (e) => {
+                const d = JSON.parse(e.data);
+                if (d.online_count) {
+                    document.getElementById('online-val').innerText = d.online_count;
+                }
+            };
+            setInterval(syncStatus, 2000);
+        }
+    </script>
+</body>
+
+</html>

static/klein.html

@@ -0,0 +1,685 @@
+<!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>
+    <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);
+        }
+
+        /* 结果预览框 */
+        .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>
+</head>
+
+<body class="antialiased transition-colors duration-300">
+    <!-- 使用 container-box 并调整顶部间距�� pt-10，去除 justify-center -->
+    <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">FLUX KLEIN</h1>
+                <p class="text-[10px] font-bold uppercase tracking-[0.4em] text-gray-400">Next-Gen Generative Interface
+                </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-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>
+                    </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>
+
+                <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 allHistory = [];
+        let currentResult = null;
+        let currentLightboxData = null;
+        let currentIndex = 0;
+        const PAGE_SIZE = 24;
+        let isLoading = false;
+
+        // 拖拽上传
+        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); };
+
+            // Paste support
+            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/')) {
+                    const file = item.getAsFile();
+                    handleFile(file, hoveredSlot);
+                    break;
+                }
+            }
+        });
+
+        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 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] = "";
+        }
+
+        async function submitWorkflow() {
+            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');
+
+            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);
+                }
+            } catch (err) {
+                alert("Generation failed");
+                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();
+            }
+        }
+
+        // --- Comparison & Lightbox Logic ---
+        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 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 });
+        }
+        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>
+                </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.classList.remove('hidden');
+                    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"); }
+        }
+
+        // Infinite Scroll Observer
+        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>

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>

static/zimage.html

@@ -0,0 +1,668 @@
+<!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>
+    <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: 220px;
+        }
+
+        .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>
+</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="hard-drive" class="w-3 h-3"></i>
+                                    <span>Local</span>
+                                </div>
+                                <div id="modeCloud" class="mode-btn flex items-center justify-center"
+                                    onclick="switchEngine('cloud')">
+                                    <img src="/static/modelscope.gif"
+                                        class="h-4 object-contain opacity-50 transition-opacity group-hover:opacity-100"
+                                        style="filter: grayscale(100%);" id="msLogo">
+                                </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 id="tokenSeparator" class="h-8 w-px bg-gray-100 hidden"></div>
+
+                        <div id="tokenContainer" class="hidden flex-col">
+                            <span class="text-[9px] font-bold text-gray-400 uppercase mb-1">ModelScope Token</span>
+                            <div class="flex items-center gap-2">
+                                <input id="msToken" type="password"
+                                    class="text-xs font-bold bg-transparent border-b border-gray-100 focus:border-black outline-none w-36 py-1 transition-colors"
+                                    placeholder="Stored in LocalStorage">
+                                <button onclick="saveGlobalToken()"
+                                    class="text-[8px] bg-gray-100 hover:bg-black hover:text-white px-2 py-0.5 rounded transition-colors"
+                                    title="Save as default for all users">SAVE GLOBAL</button>
+                                <button onclick="deleteGlobalToken()"
+                                    class="text-[8px] bg-gray-100 hover:bg-red-500 hover:text-white px-1.5 py-0.5 rounded transition-colors"
+                                    title="Delete global default">
+                                    <i data-lucide="trash-2" class="w-3 h-3"></i>
+                                </button>
+                            </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 逻辑
+        const tokenInput = document.getElementById('msToken');
+
+        async function initToken() {
+            // First check local storage
+            let token = localStorage.getItem(MS_TOKEN_KEY);
+            if (!token) {
+                // If no local token, check global config
+                try {
+                    const res = await fetch('/api/config/token');
+                    const data = await res.json();
+                    if (data.token) {
+                        token = data.token;
+                        // Don't save to local storage immediately to distinguish source
+                        // But fill input
+                    }
+                } catch (e) { }
+            }
+            if (token) tokenInput.value = token;
+        }
+        initToken();
+
+        tokenInput.addEventListener('input', (e) => {
+            localStorage.setItem(MS_TOKEN_KEY, e.target.value.trim());
+        });
+
+        async function saveGlobalToken() {
+            const token = tokenInput.value.trim();
+            if (!token) return alert("Please enter a token first");
+
+            try {
+                await fetch('/api/config/token', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ token })
+                });
+                alert("Global token saved successfully!");
+            } catch (e) {
+                alert("Failed to save global token: " + e.message);
+            }
+        }
+
+        async function deleteGlobalToken() {
+            if (!confirm("Are you sure you want to delete the GLOBAL default token? This will affect all new users.")) return;
+            try {
+                await fetch('/api/config/token', { method: 'DELETE' });
+                alert("Global token deleted.");
+                tokenInput.value = '';
+                localStorage.removeItem(MS_TOKEN_KEY);
+            } catch (e) {
+                alert("Failed to delete: " + e.message);
+            }
+        }
+
+        // 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');
+            const msLogo = document.getElementById('msLogo');
+            const tokenContainer = document.getElementById('tokenContainer');
+            const tokenSeparator = document.getElementById('tokenSeparator');
+
+            if (mode === 'local') {
+                glider.style.transform = 'translateX(0)';
+                localBtn.classList.add('active');
+                cloudBtn.classList.remove('active');
+                btnText.innerText = 'Render Art (Local)';
+
+                tokenContainer.classList.add('hidden');
+                tokenContainer.classList.remove('flex');
+
+                tokenSeparator.classList.add('hidden');
+                if (msLogo) {
+                    msLogo.classList.add('opacity-50');
+                    msLogo.style.filter = 'grayscale(100%)';
+                }
+            } else {
+                glider.style.transform = 'translateX(100%)';
+                cloudBtn.classList.add('active');
+                localBtn.classList.remove('active');
+                btnText.innerText = 'Render Art (Cloud)';
+
+                tokenContainer.classList.remove('hidden');
+                tokenContainer.classList.add('flex');
+
+                tokenSeparator.classList.remove('hidden');
+                if (msLogo) {
+                    msLogo.classList.remove('opacity-50');
+                    msLogo.style.filter = 'none';
+                }
+            }
+        }
+
+        // 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) {
+            const apiKey = tokenInput.value;
+            if (!apiKey) return alert("ModelScope Token Required");
+
+            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>

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加载器"
+    }
+  }
+}

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": "保存图像"
+    }
+  }
+}

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": "浮点常量"
+    }
+  }
+}

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"
+    }
+  }
+}

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": "保存图像"
+    }
+  }
+}