Redesign gallery grid layout and update CSS across all index pages

Increase card density with more columns per breakpoint (2→6 across sm/xl).
Refactor style.css for consistent card sizing, spacing, and responsive layout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app.py

@@ -6,6 +6,9 @@ import requests
 import random
 import asyncio
 import subprocess
+import threading
+import uuid
+from collections import deque
 from mcp import ClientSession, StdioServerParameters
 from mcp.client.stdio import stdio_client
 from flask import Flask, render_template, request, redirect, url_for, flash, session
@@ -39,6 +42,201 @@ app.config['SESSION_PERMANENT'] = False
 db.init_app(app)
 Session(app)
 
+# ---------------------------------------------------------------------------
+# Generation Job Queue
+# ---------------------------------------------------------------------------
+# Each job is a dict:
+#   id              — unique UUID string
+#   label           — human-readable description (e.g. "Tifa Lockhart – preview")
+#   status          — 'pending' | 'processing' | 'done' | 'failed' | 'paused' | 'removed'
+#   workflow        — the fully-prepared ComfyUI workflow dict
+#   finalize_fn     — callable(comfy_prompt_id, job) that saves the image; called after ComfyUI finishes
+#   error           — error message string (when status == 'failed')
+#   result          — dict with image_url etc. (set by finalize_fn on success)
+#   created_at      — unix timestamp
+#   comfy_prompt_id — the prompt_id returned by ComfyUI (set when processing starts)
+
+_job_queue_lock = threading.Lock()
+_job_queue = deque()          # ordered list of job dicts (pending + paused + processing)
+_job_history = {}             # job_id -> job dict (all jobs ever added, for status lookup)
+_queue_worker_event = threading.Event()  # signals worker that a new job is available
+
+
+def _enqueue_job(label, workflow, finalize_fn):
+    """Add a generation job to the queue. Returns the job dict."""
+    job = {
+        'id': str(uuid.uuid4()),
+        'label': label,
+        'status': 'pending',
+        'workflow': workflow,
+        'finalize_fn': finalize_fn,
+        'error': None,
+        'result': None,
+        'created_at': time.time(),
+        'comfy_prompt_id': None,
+    }
+    with _job_queue_lock:
+        _job_queue.append(job)
+        _job_history[job['id']] = job
+    _queue_worker_event.set()
+    return job
+
+
+def _queue_worker():
+    """Background thread: processes jobs from _job_queue sequentially."""
+    while True:
+        _queue_worker_event.wait()
+        _queue_worker_event.clear()
+
+        while True:
+            job = None
+            with _job_queue_lock:
+                # Find the first pending job
+                for j in _job_queue:
+                    if j['status'] == 'pending':
+                        job = j
+                        break
+
+            if job is None:
+                break  # No pending jobs — go back to waiting
+
+            # Mark as processing
+            with _job_queue_lock:
+                job['status'] = 'processing'
+
+            try:
+                with app.app_context():
+                    # Send workflow to ComfyUI
+                    prompt_response = queue_prompt(job['workflow'])
+                    if 'prompt_id' not in prompt_response:
+                        raise Exception(f"ComfyUI rejected job: {prompt_response.get('error', 'unknown error')}")
+
+                    comfy_id = prompt_response['prompt_id']
+                    with _job_queue_lock:
+                        job['comfy_prompt_id'] = comfy_id
+
+                    # Poll until done (max ~10 minutes)
+                    max_retries = 300
+                    finished = False
+                    while max_retries > 0:
+                        history = get_history(comfy_id)
+                        if comfy_id in history:
+                            finished = True
+                            break
+                        time.sleep(2)
+                        max_retries -= 1
+
+                    if not finished:
+                        raise Exception("ComfyUI generation timed out")
+
+                    # Run the finalize callback (saves image to disk / DB)
+                    # finalize_fn(comfy_prompt_id, job) — job is passed so callback can store result
+                    job['finalize_fn'](comfy_id, job)
+
+                with _job_queue_lock:
+                    job['status'] = 'done'
+
+            except Exception as e:
+                print(f"[Queue] Job {job['id']} failed: {e}")
+                with _job_queue_lock:
+                    job['status'] = 'failed'
+                    job['error'] = str(e)
+
+            # Remove completed/failed jobs from the active queue (keep in history)
+            with _job_queue_lock:
+                try:
+                    _job_queue.remove(job)
+                except ValueError:
+                    pass  # Already removed (e.g. by user)
+
+
+# Start the background worker thread
+_worker_thread = threading.Thread(target=_queue_worker, daemon=True, name='queue-worker')
+_worker_thread.start()
+
+
+# ---------------------------------------------------------------------------
+# Queue API routes
+# ---------------------------------------------------------------------------
+
+@app.route('/api/queue')
+def api_queue_list():
+    """Return the current queue as JSON."""
+    with _job_queue_lock:
+        jobs = [
+            {
+                'id': j['id'],
+                'label': j['label'],
+                'status': j['status'],
+                'error': j['error'],
+                'created_at': j['created_at'],
+            }
+            for j in _job_queue
+        ]
+    return {'jobs': jobs, 'count': len(jobs)}
+
+
+@app.route('/api/queue/count')
+def api_queue_count():
+    """Return just the count of active (non-done, non-failed) jobs."""
+    with _job_queue_lock:
+        count = sum(1 for j in _job_queue if j['status'] in ('pending', 'processing', 'paused'))
+    return {'count': count}
+
+
+@app.route('/api/queue/<job_id>/remove', methods=['POST'])
+def api_queue_remove(job_id):
+    """Remove a pending or paused job from the queue."""
+    with _job_queue_lock:
+        job = _job_history.get(job_id)
+        if not job:
+            return {'error': 'Job not found'}, 404
+        if job['status'] == 'processing':
+            return {'error': 'Cannot remove a job that is currently processing'}, 400
+        try:
+            _job_queue.remove(job)
+        except ValueError:
+            pass  # Already not in queue
+        job['status'] = 'removed'
+    return {'status': 'ok'}
+
+
+@app.route('/api/queue/<job_id>/pause', methods=['POST'])
+def api_queue_pause(job_id):
+    """Toggle pause/resume on a pending job."""
+    with _job_queue_lock:
+        job = _job_history.get(job_id)
+        if not job:
+            return {'error': 'Job not found'}, 404
+        if job['status'] == 'pending':
+            job['status'] = 'paused'
+        elif job['status'] == 'paused':
+            job['status'] = 'pending'
+            _queue_worker_event.set()
+        else:
+            return {'error': f'Cannot pause/resume job with status {job["status"]}'}, 400
+    return {'status': 'ok', 'new_status': job['status']}
+
+
+@app.route('/api/queue/<job_id>/status')
+def api_queue_job_status(job_id):
+    """Return the status of a specific job."""
+    with _job_queue_lock:
+        job = _job_history.get(job_id)
+        if not job:
+            return {'error': 'Job not found'}, 404
+        resp = {
+            'id': job['id'],
+            'label': job['label'],
+            'status': job['status'],
+            'error': job['error'],
+            'comfy_prompt_id': job['comfy_prompt_id'],
+        }
+        if job.get('result'):
+            resp['result'] = job['result']
+        return resp
+
+
 # Path to the danbooru-mcp docker-compose project, relative to this file.
 MCP_TOOLS_DIR    = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'tools')
 MCP_COMPOSE_DIR  = os.path.join(MCP_TOOLS_DIR, 'danbooru-mcp')
@@ -1284,7 +1482,6 @@ def generator():
         checkpoint = request.form.get('checkpoint')
         custom_positive = request.form.get('positive_prompt', '')
         custom_negative = request.form.get('negative_prompt', '')
-        client_id = request.form.get('client_id')
 
         action_slugs = request.form.getlist('action_slugs')
         outfit_slugs = request.form.getlist('outfit_slugs')
@@ -1336,44 +1533,33 @@ def generator():
             )
             
             print(f"Queueing generator prompt for {character.character_id}")
-            prompt_response = queue_prompt(workflow, client_id=client_id)
 
-            if 'prompt_id' not in prompt_response:
-                raise Exception(f"ComfyUI failed: {prompt_response.get('error', 'Unknown error')}")
-                
-            prompt_id = prompt_response['prompt_id']
-            
-            if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-                return {'status': 'queued', 'prompt_id': prompt_id}
-            
-            flash("Generation started...")
-            
-            max_retries = 120
-            while max_retries > 0:
-                history = get_history(prompt_id)
-                if prompt_id in history:
-                    outputs = history[prompt_id]['outputs']
+            _char_slug = character.slug
+            def _finalize(comfy_prompt_id, job):
+                history = get_history(comfy_prompt_id)
+                outputs = history[comfy_prompt_id]['outputs']
                 for node_id in outputs:
                     if 'images' in outputs[node_id]:
                         image_info = outputs[node_id]['images'][0]
                         image_data = get_image(image_info['filename'], image_info['subfolder'], image_info['type'])
-                            
-                            char_folder = os.path.join(app.config['UPLOAD_FOLDER'], f"characters/{character.slug}")
+                        char_folder = os.path.join(app.config['UPLOAD_FOLDER'], f"characters/{_char_slug}")
                         os.makedirs(char_folder, exist_ok=True)
                         filename = f"gen_{int(time.time())}.png"
                         file_path = os.path.join(char_folder, filename)
                         with open(file_path, 'wb') as f:
                             f.write(image_data)
+                        relative_path = f"characters/{_char_slug}/{filename}"
+                        image_url = f'/static/uploads/{relative_path}'
+                        job['result'] = {'image_url': image_url, 'relative_path': relative_path}
+                        return
 
-                            relative_path = f"characters/{character.slug}/{filename}"
-                            return render_template('generator.html',
-                                                 characters=characters, checkpoints=checkpoints,
-                                                 actions=actions, outfits=outfits, scenes=scenes,
-                                                 styles=styles, detailers=detailers,
-                                                 generated_image=relative_path, selected_char=char_slug, selected_ckpt=checkpoint)
-                time.sleep(2)
-                max_retries -= 1
-            flash("Generation timed out.")
+            label = f"Generator: {character.name}"
+            job = _enqueue_job(label, workflow, _finalize)
+
+            if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
+                return {'status': 'queued', 'job_id': job['id']}
+
+            flash("Generation queued.")
         except Exception as e:
             print(f"Generator error: {e}")
             if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
@@ -2194,7 +2380,6 @@ def generate_image(slug):
     try:
         # Get action type
         action = request.form.get('action', 'preview')
-        client_id = request.form.get('client_id')
         
         # Get selected fields
         selected_fields = request.form.getlist('include_field')
@@ -2202,17 +2387,45 @@ def generate_image(slug):
         # Save preferences
         session[f'prefs_{slug}'] = selected_fields
         
-        # Queue generation using helper
-        prompt_response = _queue_generation(character, action, selected_fields, client_id=client_id)
+        # Build workflow
+        with open('comfy_workflow.json', 'r') as f:
+            workflow = json.load(f)
+        prompts = build_prompt(character.data, selected_fields, character.default_fields, character.active_outfit)
+        ckpt_path, ckpt_data = _get_default_checkpoint()
+        workflow = _prepare_workflow(workflow, character, prompts, checkpoint=ckpt_path, checkpoint_data=ckpt_data)
 
-        if 'prompt_id' not in prompt_response:
-            raise Exception(f"ComfyUI failed: {prompt_response.get('error', 'Unknown error')}")
+        # Finalize callback — runs in background thread after ComfyUI finishes
+        _action = action
+        _slug = slug
+        _char_name = character.name
+        def _finalize(comfy_prompt_id, job):
+            history = get_history(comfy_prompt_id)
+            outputs = history[comfy_prompt_id]['outputs']
+            for node_id in outputs:
+                if 'images' in outputs[node_id]:
+                    image_info = outputs[node_id]['images'][0]
+                    image_data = get_image(image_info['filename'], image_info['subfolder'], image_info['type'])
+                    char_folder = os.path.join(app.config['UPLOAD_FOLDER'], f"characters/{_slug}")
+                    os.makedirs(char_folder, exist_ok=True)
+                    filename = f"gen_{int(time.time())}.png"
+                    file_path = os.path.join(char_folder, filename)
+                    with open(file_path, 'wb') as f:
+                        f.write(image_data)
+                    relative_path = f"characters/{_slug}/{filename}"
+                    image_url = f'/static/uploads/{relative_path}'
+                    job['result'] = {'image_url': image_url, 'relative_path': relative_path}
+                    if _action == 'replace':
+                        char_obj = Character.query.filter_by(slug=_slug).first()
+                        if char_obj:
+                            char_obj.image_path = relative_path
+                            db.session.commit()
+                    return
 
-        prompt_id = prompt_response['prompt_id']
+        label = f"{character.name} – {action}"
+        job = _enqueue_job(label, workflow, _finalize)
         
-        # Return JSON if AJAX request
         if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-            return {'status': 'queued', 'prompt_id': prompt_id}
+            return {'status': 'queued', 'job_id': job['id']}
             
         return redirect(url_for('detail', slug=slug))
 
@@ -2510,7 +2723,6 @@ def generate_outfit_image(slug):
     try:
         # Get action type
         action = request.form.get('action', 'preview')
-        client_id = request.form.get('client_id')
 
         # Get selected fields
         selected_fields = request.form.getlist('include_field')
@@ -2611,16 +2823,37 @@ def generate_outfit_image(slug):
         ckpt_path, ckpt_data = _get_default_checkpoint()
         workflow = _prepare_workflow(workflow, character, prompts, outfit=outfit, checkpoint=ckpt_path, checkpoint_data=ckpt_data)
 
-        prompt_response = queue_prompt(workflow, client_id=client_id)
+        _action = action
+        _slug = slug
+        def _finalize(comfy_prompt_id, job):
+            history = get_history(comfy_prompt_id)
+            outputs = history[comfy_prompt_id]['outputs']
+            for node_id in outputs:
+                if 'images' in outputs[node_id]:
+                    image_info = outputs[node_id]['images'][0]
+                    image_data = get_image(image_info['filename'], image_info['subfolder'], image_info['type'])
+                    outfit_folder = os.path.join(app.config['UPLOAD_FOLDER'], f"outfits/{_slug}")
+                    os.makedirs(outfit_folder, exist_ok=True)
+                    filename = f"gen_{int(time.time())}.png"
+                    file_path = os.path.join(outfit_folder, filename)
+                    with open(file_path, 'wb') as f:
+                        f.write(image_data)
+                    relative_path = f"outfits/{_slug}/{filename}"
+                    image_url = f'/static/uploads/{relative_path}'
+                    job['result'] = {'image_url': image_url, 'relative_path': relative_path}
+                    if _action == 'replace':
+                        outfit_obj = Outfit.query.filter_by(slug=_slug).first()
+                        if outfit_obj:
+                            outfit_obj.image_path = relative_path
+                            db.session.commit()
+                    return
 
-        if 'prompt_id' not in prompt_response:
-            raise Exception(f"ComfyUI failed: {prompt_response.get('error', 'Unknown error')}")
+        char_label = character.name if character else 'no character'
+        label = f"Outfit: {outfit.name} ({char_label}) – {action}"
+        job = _enqueue_job(label, workflow, _finalize)
 
-        prompt_id = prompt_response['prompt_id']
-        
-        # Return JSON if AJAX request
         if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-            return {'status': 'queued', 'prompt_id': prompt_id}
+            return {'status': 'queued', 'job_id': job['id']}
             
         return redirect(url_for('outfit_detail', slug=slug))
 
@@ -3027,7 +3260,6 @@ def generate_action_image(slug):
     try:
         # Get action type
         action_type = request.form.get('action', 'preview')
-        client_id = request.form.get('client_id')
 
         # Get selected fields
         selected_fields = request.form.getlist('include_field')
@@ -3210,15 +3442,37 @@ def generate_action_image(slug):
         ckpt_path, ckpt_data = _get_default_checkpoint()
         workflow = _prepare_workflow(workflow, character, prompts, action=action_obj, checkpoint=ckpt_path, checkpoint_data=ckpt_data)
 
-        prompt_response = queue_prompt(workflow, client_id=client_id)
+        _action_type = action_type
+        _slug = slug
+        def _finalize(comfy_prompt_id, job):
+            history = get_history(comfy_prompt_id)
+            outputs = history[comfy_prompt_id]['outputs']
+            for node_id in outputs:
+                if 'images' in outputs[node_id]:
+                    image_info = outputs[node_id]['images'][0]
+                    image_data = get_image(image_info['filename'], image_info['subfolder'], image_info['type'])
+                    action_folder = os.path.join(app.config['UPLOAD_FOLDER'], f"actions/{_slug}")
+                    os.makedirs(action_folder, exist_ok=True)
+                    filename = f"gen_{int(time.time())}.png"
+                    file_path = os.path.join(action_folder, filename)
+                    with open(file_path, 'wb') as f:
+                        f.write(image_data)
+                    relative_path = f"actions/{_slug}/{filename}"
+                    image_url = f'/static/uploads/{relative_path}'
+                    job['result'] = {'image_url': image_url, 'relative_path': relative_path}
+                    if _action_type == 'replace':
+                        action_db = Action.query.filter_by(slug=_slug).first()
+                        if action_db:
+                            action_db.image_path = relative_path
+                            db.session.commit()
+                    return
 
-        if 'prompt_id' not in prompt_response:
-            raise Exception(f"ComfyUI failed: {prompt_response.get('error', 'Unknown error')}")
-            
-        prompt_id = prompt_response['prompt_id']
+        char_label = character.name if character else 'no character'
+        label = f"Action: {action_obj.name} ({char_label}) – {action_type}"
+        job = _enqueue_job(label, workflow, _finalize)
 
         if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-            return {'status': 'queued', 'prompt_id': prompt_id}
+            return {'status': 'queued', 'job_id': job['id']}
             
         return redirect(url_for('action_detail', slug=slug))
 
@@ -3654,7 +3908,8 @@ def upload_style_image(slug):
         
     return redirect(url_for('style_detail', slug=slug))
 
-def _queue_style_generation(style_obj, character=None, selected_fields=None, client_id=None):
+def _build_style_workflow(style_obj, character=None, selected_fields=None):
+    """Build and return a prepared ComfyUI workflow dict for a style generation."""
     if character:
         combined_data = character.data.copy()
         combined_data['character_id'] = character.character_id
@@ -3733,7 +3988,7 @@ def _queue_style_generation(style_obj, character=None, selected_fields=None, cli
     
     ckpt_path, ckpt_data = _get_default_checkpoint()
     workflow = _prepare_workflow(workflow, character, prompts, style=style_obj, checkpoint=ckpt_path, checkpoint_data=ckpt_data)
-    return queue_prompt(workflow, client_id=client_id)
+    return workflow
 
 @app.route('/style/<path:slug>/generate', methods=['POST'])
 def generate_style_image(slug):
@@ -3742,7 +3997,6 @@ def generate_style_image(slug):
     try:
         # Get action type
         action = request.form.get('action', 'preview')
-        client_id = request.form.get('client_id')
         
         # Get selected fields
         selected_fields = request.form.getlist('include_field')
@@ -3763,16 +4017,40 @@ def generate_style_image(slug):
         session[f'char_style_{slug}'] = character_slug
         session[f'prefs_style_{slug}'] = selected_fields
         
-        # Queue generation using helper
-        prompt_response = _queue_style_generation(style_obj, character, selected_fields, client_id=client_id)
+        # Build workflow using helper (returns workflow dict, not prompt_response)
+        workflow = _build_style_workflow(style_obj, character, selected_fields)
 
-        if 'prompt_id' not in prompt_response:
-            raise Exception(f"ComfyUI failed: {prompt_response.get('error', 'Unknown error')}")
+        _action = action
+        _slug = slug
+        def _finalize(comfy_prompt_id, job):
+            history = get_history(comfy_prompt_id)
+            outputs = history[comfy_prompt_id]['outputs']
+            for node_id in outputs:
+                if 'images' in outputs[node_id]:
+                    image_info = outputs[node_id]['images'][0]
+                    image_data = get_image(image_info['filename'], image_info['subfolder'], image_info['type'])
+                    style_folder = os.path.join(app.config['UPLOAD_FOLDER'], f"styles/{_slug}")
+                    os.makedirs(style_folder, exist_ok=True)
+                    filename = f"gen_{int(time.time())}.png"
+                    file_path = os.path.join(style_folder, filename)
+                    with open(file_path, 'wb') as f:
+                        f.write(image_data)
+                    relative_path = f"styles/{_slug}/{filename}"
+                    image_url = f'/static/uploads/{relative_path}'
+                    job['result'] = {'image_url': image_url, 'relative_path': relative_path}
+                    if _action == 'replace':
+                        style_db = Style.query.filter_by(slug=_slug).first()
+                        if style_db:
+                            style_db.image_path = relative_path
+                            db.session.commit()
+                    return
 
-        prompt_id = prompt_response['prompt_id']
+        char_label = character.name if character else 'no character'
+        label = f"Style: {style_obj.name} ({char_label}) – {action}"
+        job = _enqueue_job(label, workflow, _finalize)
 
         if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-            return {'status': 'queued', 'prompt_id': prompt_id}
+            return {'status': 'queued', 'job_id': job['id']}
             
         return redirect(url_for('style_detail', slug=slug))
 
@@ -3899,7 +4177,8 @@ def generate_missing_styles():
         style_slug = style_obj.slug
         try:
             print(f"Batch generating style: {style_obj.name} with character {character.name}")
-            prompt_response = _queue_style_generation(style_obj, character=character)
+            workflow = _build_style_workflow(style_obj, character=character)
+            prompt_response = queue_prompt(workflow)
             prompt_id = prompt_response['prompt_id']
             
             max_retries = 120
@@ -4370,7 +4649,7 @@ def _queue_scene_generation(scene_obj, character=None, selected_fields=None, cli
     # For scene generation, we want to ensure Node 20 is handled in _prepare_workflow
     ckpt_path, ckpt_data = _get_default_checkpoint()
     workflow = _prepare_workflow(workflow, character, prompts, scene=scene_obj, checkpoint=ckpt_path, checkpoint_data=ckpt_data)
-    return queue_prompt(workflow, client_id=client_id)
+    return workflow
 
 @app.route('/scene/<path:slug>/generate', methods=['POST'])
 def generate_scene_image(slug):
@@ -4379,7 +4658,6 @@ def generate_scene_image(slug):
     try:
         # Get action type
         action = request.form.get('action', 'preview')
-        client_id = request.form.get('client_id')
         
         # Get selected fields
         selected_fields = request.form.getlist('include_field')
@@ -4400,16 +4678,40 @@ def generate_scene_image(slug):
         session[f'char_scene_{slug}'] = character_slug
         session[f'prefs_scene_{slug}'] = selected_fields
         
-        # Queue generation using helper
-        prompt_response = _queue_scene_generation(scene_obj, character, selected_fields, client_id=client_id)
+        # Build workflow using helper
+        workflow = _queue_scene_generation(scene_obj, character, selected_fields)
 
-        if 'prompt_id' not in prompt_response:
-            raise Exception(f"ComfyUI failed: {prompt_response.get('error', 'Unknown error')}")
+        _action = action
+        _slug = slug
+        def _finalize(comfy_prompt_id, job):
+            history = get_history(comfy_prompt_id)
+            outputs = history[comfy_prompt_id]['outputs']
+            for node_id in outputs:
+                if 'images' in outputs[node_id]:
+                    image_info = outputs[node_id]['images'][0]
+                    image_data = get_image(image_info['filename'], image_info['subfolder'], image_info['type'])
+                    scene_folder = os.path.join(app.config['UPLOAD_FOLDER'], f"scenes/{_slug}")
+                    os.makedirs(scene_folder, exist_ok=True)
+                    filename = f"gen_{int(time.time())}.png"
+                    file_path = os.path.join(scene_folder, filename)
+                    with open(file_path, 'wb') as f:
+                        f.write(image_data)
+                    relative_path = f"scenes/{_slug}/{filename}"
+                    image_url = f'/static/uploads/{relative_path}'
+                    job['result'] = {'image_url': image_url, 'relative_path': relative_path}
+                    if _action == 'replace':
+                        scene_db = Scene.query.filter_by(slug=_slug).first()
+                        if scene_db:
+                            scene_db.image_path = relative_path
+                            db.session.commit()
+                    return
 
-        prompt_id = prompt_response['prompt_id']
+        char_label = character.name if character else 'no character'
+        label = f"Scene: {scene_obj.name} ({char_label}) – {action}"
+        job = _enqueue_job(label, workflow, _finalize)
 
         if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-            return {'status': 'queued', 'prompt_id': prompt_id}
+            return {'status': 'queued', 'job_id': job['id']}
             
         return redirect(url_for('scene_detail', slug=slug))
 
@@ -4920,7 +5222,7 @@ def _queue_detailer_generation(detailer_obj, character=None, selected_fields=Non
 
     ckpt_path, ckpt_data = _get_default_checkpoint()
     workflow = _prepare_workflow(workflow, character, prompts, detailer=detailer_obj, action=action, custom_negative=extra_negative or None, checkpoint=ckpt_path, checkpoint_data=ckpt_data)
-    return queue_prompt(workflow, client_id=client_id)
+    return workflow
 
 @app.route('/detailer/<path:slug>/generate', methods=['POST'])
 def generate_detailer_image(slug):
@@ -4928,8 +5230,7 @@ def generate_detailer_image(slug):
     
     try:
         # Get action type
-        action = request.form.get('action', 'preview')
-        client_id = request.form.get('client_id')
+        action_type = request.form.get('action', 'preview')
         
         # Get selected fields
         selected_fields = request.form.getlist('include_field')
@@ -4948,7 +5249,7 @@ def generate_detailer_image(slug):
 
         # Get selected action (if any)
         action_slug = request.form.get('action_slug', '')
-        action = Action.query.filter_by(slug=action_slug).first() if action_slug else None
+        action_obj = Action.query.filter_by(slug=action_slug).first() if action_slug else None
 
         # Get additional prompts
         extra_positive = request.form.get('extra_positive', '').strip()
@@ -4961,16 +5262,40 @@ def generate_detailer_image(slug):
         session[f'extra_neg_detailer_{slug}'] = extra_negative
         session[f'prefs_detailer_{slug}'] = selected_fields
 
-        # Queue generation using helper
-        prompt_response = _queue_detailer_generation(detailer_obj, character, selected_fields, client_id=client_id, action=action, extra_positive=extra_positive, extra_negative=extra_negative)
+        # Build workflow using helper
+        workflow = _queue_detailer_generation(detailer_obj, character, selected_fields, action=action_obj, extra_positive=extra_positive, extra_negative=extra_negative)
 
-        if 'prompt_id' not in prompt_response:
-            raise Exception(f"ComfyUI failed: {prompt_response.get('error', 'Unknown error')}")
+        _action_type = action_type
+        _slug = slug
+        def _finalize(comfy_prompt_id, job):
+            history = get_history(comfy_prompt_id)
+            outputs = history[comfy_prompt_id]['outputs']
+            for node_id in outputs:
+                if 'images' in outputs[node_id]:
+                    image_info = outputs[node_id]['images'][0]
+                    image_data = get_image(image_info['filename'], image_info['subfolder'], image_info['type'])
+                    detailer_folder = os.path.join(app.config['UPLOAD_FOLDER'], f"detailers/{_slug}")
+                    os.makedirs(detailer_folder, exist_ok=True)
+                    filename = f"gen_{int(time.time())}.png"
+                    file_path = os.path.join(detailer_folder, filename)
+                    with open(file_path, 'wb') as f:
+                        f.write(image_data)
+                    relative_path = f"detailers/{_slug}/{filename}"
+                    image_url = f'/static/uploads/{relative_path}'
+                    job['result'] = {'image_url': image_url, 'relative_path': relative_path}
+                    if _action_type == 'replace':
+                        detailer_db = Detailer.query.filter_by(slug=_slug).first()
+                        if detailer_db:
+                            detailer_db.image_path = relative_path
+                            db.session.commit()
+                    return
 
-        prompt_id = prompt_response['prompt_id']
+        char_label = character.name if character else 'no character'
+        label = f"Detailer: {detailer_obj.name} ({char_label}) – {action_type}"
+        job = _enqueue_job(label, workflow, _finalize)
 
         if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-            return {'status': 'queued', 'prompt_id': prompt_id}
+            return {'status': 'queued', 'job_id': job['id']}
             
         return redirect(url_for('detailer_detail', slug=slug))
 
@@ -5316,7 +5641,8 @@ def _apply_checkpoint_settings(workflow, ckpt_data):
 
     return workflow
 
-def _queue_checkpoint_generation(ckpt_obj, character=None, client_id=None):
+def _build_checkpoint_workflow(ckpt_obj, character=None):
+    """Build and return a prepared ComfyUI workflow dict for a checkpoint generation."""
     with open('comfy_workflow.json', 'r') as f:
         workflow = json.load(f)
 
@@ -5344,14 +5670,12 @@ def _queue_checkpoint_generation(ckpt_obj, character=None, client_id=None):
 
     workflow = _prepare_workflow(workflow, character, prompts, checkpoint=ckpt_obj.checkpoint_path,
                                  checkpoint_data=ckpt_obj.data or {})
-
-    return queue_prompt(workflow, client_id=client_id)
+    return workflow
 
 @app.route('/checkpoint/<path:slug>/generate', methods=['POST'])
 def generate_checkpoint_image(slug):
     ckpt = Checkpoint.query.filter_by(slug=slug).first_or_404()
     try:
-        client_id = request.form.get('client_id')
         character_slug = request.form.get('character_slug', '')
         character = None
         if character_slug == '__random__':
@@ -5363,14 +5687,37 @@ def generate_checkpoint_image(slug):
             character = Character.query.filter_by(slug=character_slug).first()
 
         session[f'char_checkpoint_{slug}'] = character_slug
-        prompt_response = _queue_checkpoint_generation(ckpt, character, client_id=client_id)
+        workflow = _build_checkpoint_workflow(ckpt, character)
 
-        if 'prompt_id' not in prompt_response:
-            raise Exception(f"ComfyUI failed: {prompt_response.get('error', 'Unknown error')}")
+        _slug = slug
+        def _finalize(comfy_prompt_id, job):
+            history = get_history(comfy_prompt_id)
+            outputs = history[comfy_prompt_id]['outputs']
+            for node_id in outputs:
+                if 'images' in outputs[node_id]:
+                    image_info = outputs[node_id]['images'][0]
+                    image_data = get_image(image_info['filename'], image_info['subfolder'], image_info['type'])
+                    ckpt_folder = os.path.join(app.config['UPLOAD_FOLDER'], f"checkpoints/{_slug}")
+                    os.makedirs(ckpt_folder, exist_ok=True)
+                    filename = f"gen_{int(time.time())}.png"
+                    file_path = os.path.join(ckpt_folder, filename)
+                    with open(file_path, 'wb') as f:
+                        f.write(image_data)
+                    relative_path = f"checkpoints/{_slug}/{filename}"
+                    image_url = f'/static/uploads/{relative_path}'
+                    job['result'] = {'image_url': image_url, 'relative_path': relative_path}
+                    ckpt_db = Checkpoint.query.filter_by(slug=_slug).first()
+                    if ckpt_db:
+                        ckpt_db.image_path = relative_path
+                        db.session.commit()
+                    return
+
+        char_label = character.name if character else 'random'
+        label = f"Checkpoint: {ckpt.name} ({char_label})"
+        job = _enqueue_job(label, workflow, _finalize)
 
-        prompt_id = prompt_response['prompt_id']
         if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-            return {'status': 'queued', 'prompt_id': prompt_id}
+            return {'status': 'queued', 'job_id': job['id']}
         return redirect(url_for('checkpoint_detail', slug=slug))
     except Exception as e:
         print(f"Checkpoint generation error: {e}")
@@ -5648,7 +5995,6 @@ def generate_look_image(slug):
 
     try:
         action = request.form.get('action', 'preview')
-        client_id = request.form.get('client_id')
         selected_fields = request.form.getlist('include_field')
 
         character_slug = request.form.get('character_slug', '')
@@ -5718,13 +6064,37 @@ def generate_look_image(slug):
         workflow = _prepare_workflow(workflow, character, prompts, checkpoint=ckpt_path,
                                      checkpoint_data=ckpt_data, look=look)
 
-        prompt_response = queue_prompt(workflow, client_id=client_id)
-        if 'prompt_id' not in prompt_response:
-            raise Exception(f"ComfyUI failed: {prompt_response.get('error', 'Unknown error')}")
+        _action = action
+        _slug = slug
+        def _finalize(comfy_prompt_id, job):
+            history = get_history(comfy_prompt_id)
+            outputs = history[comfy_prompt_id]['outputs']
+            for node_id in outputs:
+                if 'images' in outputs[node_id]:
+                    image_info = outputs[node_id]['images'][0]
+                    image_data = get_image(image_info['filename'], image_info['subfolder'], image_info['type'])
+                    look_folder = os.path.join(app.config['UPLOAD_FOLDER'], f"looks/{_slug}")
+                    os.makedirs(look_folder, exist_ok=True)
+                    filename = f"gen_{int(time.time())}.png"
+                    file_path = os.path.join(look_folder, filename)
+                    with open(file_path, 'wb') as f:
+                        f.write(image_data)
+                    relative_path = f"looks/{_slug}/{filename}"
+                    image_url = f'/static/uploads/{relative_path}'
+                    job['result'] = {'image_url': image_url, 'relative_path': relative_path}
+                    if _action == 'replace':
+                        look_db = Look.query.filter_by(slug=_slug).first()
+                        if look_db:
+                            look_db.image_path = relative_path
+                            db.session.commit()
+                    return
+
+        char_label = character.name if character else 'no character'
+        label = f"Look: {look.name} ({char_label}) – {action}"
+        job = _enqueue_job(label, workflow, _finalize)
 
-        prompt_id = prompt_response['prompt_id']
         if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
-            return {'status': 'queued', 'prompt_id': prompt_id}
+            return {'status': 'queued', 'job_id': job['id']}
         return redirect(url_for('look_detail', slug=slug))
 
     except Exception as e:
@@ -6533,7 +6903,6 @@ def strengths_generate(category, slug):
     try:
         strength_value = float(request.form.get('strength_value', 1.0))
         fixed_seed = int(request.form.get('seed', random.randint(1, 10**15)))
-        client_id = request.form.get('client_id', '')
 
         # Resolve character: prefer POST body value (reflects current page dropdown),
         # then fall back to session.
@@ -6584,9 +6953,35 @@ def strengths_generate(category, slug):
             custom_negative=extra_negative
         )
 
-        result = queue_prompt(workflow, client_id)
-        prompt_id = result.get('prompt_id', '')
-        return {'status': 'queued', 'prompt_id': prompt_id}
+        _category = category
+        _slug = slug
+        _strength_value = strength_value
+        _fixed_seed = fixed_seed
+        def _finalize(comfy_prompt_id, job):
+            history = get_history(comfy_prompt_id)
+            outputs = history[comfy_prompt_id].get('outputs', {})
+            img_data = None
+            for node_output in outputs.values():
+                for img in node_output.get('images', []):
+                    img_data = get_image(img['filename'], img.get('subfolder', ''), img.get('type', 'output'))
+                    break
+                if img_data:
+                    break
+            if not img_data:
+                raise Exception('no image in output')
+            strength_str = f"{_strength_value:.2f}".replace('.', '_')
+            upload_dir = os.path.join(app.config['UPLOAD_FOLDER'], _category, _slug, 'strengths')
+            os.makedirs(upload_dir, exist_ok=True)
+            out_filename = f"strength_{strength_str}_seed_{_fixed_seed}.png"
+            out_path = os.path.join(upload_dir, out_filename)
+            with open(out_path, 'wb') as f:
+                f.write(img_data)
+            relative = f"{_category}/{_slug}/strengths/{out_filename}"
+            job['result'] = {'image_url': f"/static/uploads/{relative}", 'strength_value': _strength_value}
+
+        label = f"Strengths: {entity.name} @ {strength_value:.2f}"
+        job = _enqueue_job(label, workflow, _finalize)
+        return {'status': 'queued', 'job_id': job['id']}
 
     except Exception as e:
         print(f"[Strengths] generate error: {e}")

static/style.css

@@ -1,42 +1,78 @@
 /* ============================================================
-   Character Browser — Dark Theme (Indigo / Violet)
+   GAZE — Character Browser Design System
+   Space Grotesk (display) + Inter (body)
+   Deep dark, violet-indigo accent palette
    ============================================================ */
 
 /* --- Variables ------------------------------------------------ */
 :root {
-  --bg-base:      #0f0f1a;
-  --bg-card:      #1a1a2e;
-  --bg-raised:    #222240;
-  --bg-input:     #16162a;
-  --accent:       #6c63ff;
-  --accent-dim:   #4f46e5;
-  --accent-glow:  rgba(108, 99, 255, 0.22);
-  --border:       #2d2d5e;
-  --border-light: #3a3a6a;
-  --text:         #e2e2f0;
-  --text-muted:   #8888aa;
-  --text-dim:     #5555aa;
-  --success:      #22c55e;
-  --danger:       #ef4444;
-  --warning:      #f59e0b;
-  --info:         #38bdf8;
-  --radius:       10px;
+  /* Backgrounds */
+  --bg-base:      #07070f;
+  --bg-card:      #0c0c1c;
+  --bg-raised:    #111128;
+  --bg-input:     #09091a;
+
+  /* Accent — violet */
+  --accent:       #8b7eff;
+  --accent-dim:   #6c5ce7;
+  --accent-bright:#b0a8ff;
+  --accent-glow:  rgba(139, 126, 255, 0.14);
+  --accent-glow-strong: rgba(139, 126, 255, 0.32);
+
+  /* Borders */
+  --border:       #16163a;
+  --border-light: #21214a;
+  --border-focus: #5548c8;
+
+  /* Text */
+  --text:         #e8e8f5;
+  --text-muted:   #6a6a9a;
+  --text-dim:     #35356a;
+
+  /* Status */
+  --success:      #34d399;
+  --danger:       #f87171;
+  --warning:      #fbbf24;
+  --info:         #60c8ff;
+
+  /* Shape */
+  --radius:       12px;
+  --radius-sm:    8px;
+
+  /* Fonts */
+  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
+  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
 }
 
 /* --- Base ----------------------------------------------------- */
 body {
   background-color: var(--bg-base);
+  /* Subtle radial accent glow — premium depth effect */
+  background-image:
+    radial-gradient(ellipse at 18% 0%, rgba(139, 126, 255, 0.06) 0%, transparent 55%),
+    radial-gradient(ellipse at 82% 100%, rgba(192, 132, 252, 0.05) 0%, transparent 55%);
+  background-attachment: fixed;
   color: var(--text);
-  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  font-family: var(--font-body);
+  font-size: 0.9375rem;
+  line-height: 1.6;
   min-height: 100vh;
 }
 
-a { color: var(--accent); }
-a:hover { color: #9d98ff; }
+a { color: var(--accent-bright); text-decoration: none; }
+a:hover { color: #c4b5fd; }
+
+h1, h2, h3, h4 {
+  font-family: var(--font-display);
+  font-weight: 600;
+  color: var(--text);
+  letter-spacing: -0.02em;
+}
+h5, h6 { color: var(--text); }
 
 /* Scrollbar */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: var(--bg-card); }
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
 ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }
 
@@ -44,83 +80,160 @@ a:hover { color: #9d98ff; }
    Navbar
    ============================================================ */
 .navbar {
-  background: rgba(15, 15, 26, 0.95) !important;
-  backdrop-filter: blur(12px);
-  border-bottom: 1px solid var(--border);
-  padding: 0.55rem 0;
+  background: rgba(7, 7, 15, 0.97) !important;
+  backdrop-filter: blur(24px) saturate(1.3);
+  border-bottom: 1px solid var(--border) !important;
+  padding: 0.5rem 0;
 }
 
 .navbar-brand {
+  font-family: var(--font-display);
   font-weight: 700;
   font-size: 1.05rem;
-  letter-spacing: 0.12em;
+  letter-spacing: 0.18em;
   text-transform: uppercase;
-  background: linear-gradient(90deg, #a78bfa, #6c63ff, #c084fc);
+  background: linear-gradient(135deg, #c084fc 0%, #8b7eff 45%, #60a5fa 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
 }
 .navbar-brand:hover {
-  background: linear-gradient(90deg, #c4b5fd, #818cf8, #d8b4fe);
+  background: linear-gradient(135deg, #d8b4fe 0%, #b0a8ff 45%, #93c5fd 100%);
   -webkit-background-clip: text;
   background-clip: text;
 }
 
 .navbar-logo {
-  height: 28px;
+  height: 26px;
   width: auto;
 }
 
-/* All nav outline-light buttons become understated link-style items */
+/* Nav links — borderless, subtle hover */
 .navbar .btn-outline-light {
   border: none;
   color: var(--text-muted) !important;
   background: transparent;
-  font-size: 0.82rem;
-  padding: 0.28rem 0.6rem;
-  border-radius: 6px;
+  font-size: 0.79rem;
+  font-weight: 500;
+  padding: 0.28rem 0.58rem;
+  border-radius: var(--radius-sm);
   transition: color 0.15s, background 0.15s;
+  letter-spacing: 0.01em;
 }
 .navbar .btn-outline-light:hover,
 .navbar .btn-outline-light:focus {
   color: var(--text) !important;
-  background: rgba(255, 255, 255, 0.07);
+  background: rgba(139, 126, 255, 0.08);
   box-shadow: none;
 }
 
-/* Generator and Gallery get accent tint */
 .navbar .btn-outline-light[href="/generator"],
 .navbar .btn-outline-light[href="/gallery"] {
-  color: #9d98ff !important;
+  color: var(--accent-bright) !important;
 }
 .navbar .btn-outline-light[href="/generator"]:hover,
 .navbar .btn-outline-light[href="/gallery"]:hover {
   background: var(--accent-glow);
-  color: #b8b4ff !important;
+  color: #c4b5fd !important;
 }
 
-/* Create Character */
 .navbar .btn-outline-success {
-  border: 1px solid rgba(34, 197, 94, 0.5);
+  border: 1px solid rgba(52, 211, 153, 0.35);
   color: var(--success) !important;
-  font-size: 0.82rem;
+  font-size: 0.79rem;
+  font-weight: 500;
   padding: 0.28rem 0.7rem;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   transition: all 0.15s;
 }
 .navbar .btn-outline-success:hover {
-  background: rgba(34, 197, 94, 0.12);
+  background: rgba(52, 211, 153, 0.1);
   border-color: var(--success);
   box-shadow: none;
   color: var(--success) !important;
 }
 
-/* Vertical divider in navbar */
 .navbar .vr {
-  background-color: var(--border);
+  background-color: var(--border-light);
   opacity: 1;
 }
 
+/* Queue button */
+.queue-btn {
+  position: relative;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  font-size: 0.95rem;
+  padding: 0.2rem 0.48rem;
+  border-radius: var(--radius-sm);
+  transition: color 0.15s, background 0.15s;
+  line-height: 1;
+}
+.queue-btn:hover {
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.06);
+}
+.queue-btn-active { color: var(--accent-bright) !important; }
+.queue-badge {
+  position: absolute;
+  top: -2px;
+  right: -4px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 0.58rem;
+  font-weight: 700;
+  min-width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 3px;
+  line-height: 1;
+}
+.queue-icon { font-size: 0.88rem; }
+
+/* Queue status dots */
+.queue-status-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  display: inline-block;
+}
+.queue-status-pending    { background: var(--text-muted); }
+.queue-status-processing { background: var(--warning); animation: pulse 1s infinite; }
+.queue-status-paused     { background: var(--text-dim); }
+.queue-status-done       { background: var(--success); }
+.queue-status-failed     { background: var(--danger); }
+.queue-status-removed    { background: var(--border-light); }
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.35; }
+}
+
+.btn-xs {
+  padding: 0.1rem 0.35rem;
+  font-size: 0.7rem;
+  border-radius: 4px;
+  line-height: 1.4;
+}
+
+/* ============================================================
+   Checkpoint Bar
+   ============================================================ */
+.default-checkpoint-bar {
+  background:
+    linear-gradient(to right,
+      rgba(139, 126, 255, 0.04) 0%,
+      transparent 25%,
+      transparent 75%,
+      rgba(139, 126, 255, 0.04) 100%);
+  border-bottom: 1px solid var(--border) !important;
+}
+
 /* ============================================================
    Cards
    ============================================================ */
@@ -136,10 +249,10 @@ a:hover { color: #9d98ff; }
   border-bottom: 1px solid var(--border) !important;
   color: var(--text) !important;
   font-weight: 600;
-  font-size: 0.88rem;
+  font-size: 0.84rem;
+  letter-spacing: 0.01em;
 }
 
-/* Override Bootstrap bg utility classes on card-header */
 .card-header.bg-primary,
 .card-header.bg-dark,
 .card-header.bg-secondary,
@@ -156,19 +269,76 @@ a:hover { color: #9d98ff; }
 
 .card-body { color: var(--text); }
 
-/* Character / category card hover */
+/* ============================================================
+   Gallery Cards (.character-card)
+   ============================================================ */
 .character-card {
   cursor: pointer;
-  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
+  overflow: hidden;
+  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+  display: flex !important;
+  flex-direction: column;
 }
 .character-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 32px var(--accent-glow);
+  transform: translateY(-5px);
+  box-shadow: 0 20px 60px rgba(4, 4, 10, 0.7), 0 0 0 1px var(--accent);
   border-color: var(--accent) !important;
 }
 
+/* Gallery card image container — portrait 2:3 ratio */
+.character-card .img-container {
+  aspect-ratio: 2 / 3;
+  height: auto;
+  min-height: unset;
+  flex-shrink: 0;
+}
+
+.character-card .img-container img {
+  transition: transform 0.4s ease;
+}
+.character-card:hover .img-container img {
+  transform: scale(1.07);
+}
+
+/* Subtle accent tint on hover via pseudo-overlay */
+.character-card:hover .img-container::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, transparent 55%, rgba(108, 92, 231, 0.12) 100%);
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Compact name strip */
+.character-card .card-body {
+  padding: 0.55rem 0.7rem 0.4rem;
+  flex: 1;
+}
+.character-card .card-title {
+  font-family: var(--font-display);
+  font-size: 0.84rem;
+  font-weight: 600;
+  margin-bottom: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  letter-spacing: -0.01em;
+}
+.character-card .card-text {
+  display: none; /* Hide verbose prompt text — cleaner gallery look */
+}
+.character-card .card-footer {
+  padding: 0.28rem 0.7rem;
+}
+.character-card .card-footer small {
+  font-size: 0.66rem;
+  font-family: monospace;
+  color: var(--text-dim) !important;
+}
+
 /* ============================================================
-   Image container
+   Image container (detail pages and standalone use)
    ============================================================ */
 .img-container {
   height: 300px;
@@ -178,6 +348,7 @@ a:hover { color: #9d98ff; }
   align-items: center;
   justify-content: center;
   border-radius: var(--radius) var(--radius) 0 0;
+  position: relative;
 }
 .img-container img {
   width: 100%;
@@ -197,15 +368,16 @@ a:hover { color: #9d98ff; }
 .form-control,
 .form-select {
   background-color: var(--bg-input) !important;
-  border-color: var(--border) !important;
+  border-color: var(--border-light) !important;
   color: var(--text) !important;
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
   transition: border-color 0.15s, box-shadow 0.15s;
+  font-size: 0.875rem;
 }
 .form-control:focus,
 .form-select:focus {
-  border-color: var(--accent) !important;
-  box-shadow: 0 0 0 3px var(--accent-glow) !important;
+  border-color: var(--border-focus) !important;
+  box-shadow: 0 0 0 3px rgba(85, 72, 200, 0.22) !important;
   background-color: var(--bg-input) !important;
   color: var(--text) !important;
 }
@@ -214,10 +386,11 @@ a:hover { color: #9d98ff; }
 .form-select:disabled {
   background-color: var(--bg-raised) !important;
   color: var(--text-muted) !important;
+  opacity: 0.65;
 }
 
-.form-label { color: var(--text-muted); font-size: 0.82rem; font-weight: 500; }
-.form-text  { color: var(--text-dim) !important; }
+.form-label { color: var(--text-muted); font-size: 0.8rem; font-weight: 500; margin-bottom: 0.3rem; }
+.form-text  { color: var(--text-dim) !important; font-size: 0.77rem; }
 
 .form-check-input {
   background-color: var(--bg-input);
@@ -227,8 +400,11 @@ a:hover { color: #9d98ff; }
   background-color: var(--accent);
   border-color: var(--accent);
 }
-.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-glow); }
-.form-check-label { color: var(--text); }
+.form-check-input:focus {
+  box-shadow: 0 0 0 3px rgba(85, 72, 200, 0.22);
+  border-color: var(--border-focus);
+}
+.form-check-label { color: var(--text); font-size: 0.875rem; }
 
 option { background-color: var(--bg-raised); color: var(--text); }
 
@@ -236,22 +412,24 @@ option { background-color: var(--bg-raised); color: var(--text); }
    Buttons
    ============================================================ */
 .btn-primary {
-  background-color: var(--accent);
-  border-color: var(--accent-dim);
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
+  border: 1px solid var(--accent-dim);
   color: #fff;
+  font-weight: 500;
 }
 .btn-primary:hover,
 .btn-primary:active,
 .btn-primary:focus {
-  background-color: var(--accent-dim);
-  border-color: #3730a3;
-  box-shadow: 0 0 0 3px var(--accent-glow);
+  background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%);
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(139, 126, 255, 0.22);
   color: #fff;
 }
 
 .btn-outline-primary {
   border-color: var(--accent);
   color: var(--accent);
+  font-weight: 500;
 }
 .btn-outline-primary:hover,
 .btn-outline-primary:active {
@@ -264,9 +442,10 @@ option { background-color: var(--bg-raised); color: var(--text); }
   background-color: var(--bg-raised);
   border-color: var(--border-light);
   color: var(--text);
+  font-weight: 500;
 }
 .btn-secondary:hover {
-  background-color: #2a2a50;
+  background-color: #1c1c38;
   border-color: var(--border-light);
   color: var(--text);
 }
@@ -274,6 +453,7 @@ option { background-color: var(--bg-raised); color: var(--text); }
 .btn-outline-secondary {
   border-color: var(--border-light);
   color: var(--text-muted);
+  font-weight: 500;
 }
 .btn-outline-secondary:hover,
 .btn-outline-secondary:active {
@@ -284,36 +464,36 @@ option { background-color: var(--bg-raised); color: var(--text); }
 
 /* Active resolution preset */
 .btn-secondary.preset-btn {
-  background-color: var(--accent);
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
   border-color: var(--accent-dim);
   color: #fff;
 }
 
-.btn-outline-success { border-color: var(--success); color: var(--success); }
-.btn-outline-success:hover { background-color: rgba(34,197,94,.12); border-color: var(--success); color: var(--success); }
-.btn-success { background-color: var(--success); border-color: #16a34a; color: #fff; }
-.btn-success:hover { background-color: #16a34a; border-color: #15803d; color: #fff; }
+.btn-outline-success { border-color: var(--success); color: var(--success); font-weight: 500; }
+.btn-outline-success:hover { background-color: rgba(52,211,153,.1); border-color: var(--success); color: var(--success); }
+.btn-success { background-color: #059669; border-color: #047857; color: #fff; font-weight: 500; }
+.btn-success:hover { background-color: #047857; border-color: #065f46; color: #fff; }
 
-.btn-outline-danger { border-color: var(--danger); color: var(--danger); }
-.btn-outline-danger:hover { background-color: rgba(239,68,68,.12); border-color: var(--danger); color: var(--danger); }
-.btn-danger { background-color: var(--danger); border-color: #dc2626; color: #fff; }
-.btn-danger:hover { background-color: #dc2626; border-color: #b91c1c; color: #fff; }
+.btn-outline-danger { border-color: var(--danger); color: var(--danger); font-weight: 500; }
+.btn-outline-danger:hover { background-color: rgba(248,113,113,.1); border-color: var(--danger); color: var(--danger); }
+.btn-danger { background-color: #dc2626; border-color: #b91c1c; color: #fff; font-weight: 500; }
+.btn-danger:hover { background-color: #b91c1c; border-color: #991b1b; color: #fff; }
 
-.btn-outline-warning { border-color: var(--warning); color: var(--warning); }
-.btn-outline-warning:hover { background-color: rgba(245,158,11,.12); border-color: var(--warning); color: var(--warning); }
+.btn-outline-warning { border-color: var(--warning); color: var(--warning); font-weight: 500; }
+.btn-outline-warning:hover { background-color: rgba(251,191,36,.1); border-color: var(--warning); color: var(--warning); }
 
 .btn-light, .btn-outline-light {
-  background-color: rgba(255,255,255,.08);
+  background-color: rgba(255,255,255,.06);
   border-color: var(--border-light);
   color: var(--text);
+  font-weight: 500;
 }
 .btn-light:hover, .btn-outline-light:hover {
-  background-color: rgba(255,255,255,.14);
+  background-color: rgba(255,255,255,.1);
   color: var(--text);
 }
 
-/* Close button override (visible on dark bg) */
-.btn-close { filter: invert(1) brightness(0.8); }
+.btn-close { filter: invert(1) brightness(0.7); }
 
 /* ============================================================
    Accordion
@@ -322,60 +502,57 @@ option { background-color: var(--bg-raised); color: var(--text); }
   background-color: var(--bg-card) !important;
   border-color: var(--border) !important;
 }
-
 .accordion-button {
   background-color: var(--bg-raised) !important;
   color: var(--text) !important;
-  font-size: 0.88rem;
+  font-size: 0.875rem;
+  font-weight: 500;
 }
 .accordion-button:not(.collapsed) {
-  background-color: #252450 !important;
-  color: var(--text) !important;
+  background-color: #181835 !important;
+  color: var(--accent-bright) !important;
   box-shadow: inset 0 -1px 0 var(--border);
 }
-/* Make the chevron arrow visible on dark bg */
 .accordion-button::after,
 .accordion-button:not(.collapsed)::after {
-  filter: invert(1) brightness(0.75);
+  filter: invert(1) brightness(0.6);
 }
 .accordion-button:focus { box-shadow: none; }
 .accordion-body { background-color: var(--bg-card); padding: 0.5rem; }
 
 /* Mix & match list items */
-.mix-item { user-select: none; border-radius: 6px; }
-.mix-item:hover { background-color: rgba(108, 99, 255, 0.12) !important; }
-
-/* N/A placeholder for items without images */
+.mix-item { user-select: none; border-radius: var(--radius-sm); }
+.mix-item:hover { background-color: rgba(139, 126, 255, 0.1) !important; }
 .mix-item .bg-light {
   background-color: var(--bg-raised) !important;
   color: var(--text-dim) !important;
 }
 
 /* ============================================================
-   Progress bars
+   Progress Bars
    ============================================================ */
 .progress {
   background-color: var(--bg-raised);
   border: 1px solid var(--border);
-  border-radius: 8px;
+  border-radius: 999px;
 }
 .progress-bar {
-  background-color: var(--accent);
-  border-radius: 8px;
+  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
+  border-radius: 999px;
   transition: width 0.4s ease-in-out;
 }
-.progress-bar.bg-success { background-color: var(--success) !important; }
-.progress-bar.bg-info    { background-color: var(--info)    !important; }
+.progress-bar.bg-success { background: var(--success) !important; }
+.progress-bar.bg-info    { background: var(--info)    !important; }
 
 /* ============================================================
    Badges
    ============================================================ */
 .badge.bg-primary   { background-color: var(--accent)  !important; }
-.badge.bg-secondary { background-color: #2e2e52        !important; color: var(--text-muted) !important; }
-.badge.bg-info      { background-color: var(--info)    !important; color: #0f172a !important; }
-.badge.bg-success   { background-color: var(--success) !important; }
+.badge.bg-secondary { background-color: #1b1b40        !important; color: var(--text-muted) !important; }
+.badge.bg-info      { background-color: var(--info)    !important; color: #0c1a2b !important; }
+.badge.bg-success   { background-color: var(--success) !important; color: #012218 !important; }
 .badge.bg-danger    { background-color: var(--danger)  !important; }
-.badge.bg-warning   { background-color: var(--warning) !important; color: #0f172a !important; }
+.badge.bg-warning   { background-color: var(--warning) !important; color: #1a0f00 !important; }
 .badge.bg-light     { background-color: var(--bg-raised) !important; color: var(--text-muted) !important; border-color: var(--border) !important; }
 
 /* ============================================================
@@ -383,39 +560,50 @@ option { background-color: var(--bg-raised); color: var(--text); }
    ============================================================ */
 .modal-content {
   background-color: var(--bg-card);
-  border: 1px solid var(--border);
+  border: 1px solid var(--border-light);
   border-radius: var(--radius);
   color: var(--text);
+  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(139, 126, 255, 0.08);
 }
 .modal-header {
   border-bottom: 1px solid var(--border);
   background-color: var(--bg-raised);
   border-radius: var(--radius) var(--radius) 0 0;
+  padding: 1rem 1.25rem;
 }
 .modal-footer {
   border-top: 1px solid var(--border);
   background-color: var(--bg-raised);
   border-radius: 0 0 var(--radius) var(--radius);
+  padding: 0.75rem 1.25rem;
+}
+.modal-title {
+  color: var(--text);
+  font-family: var(--font-display);
+  font-weight: 600;
+  font-size: 1rem;
 }
-.modal-title { color: var(--text); }
 
 /* ============================================================
    Alerts
    ============================================================ */
 .alert-info {
-  background-color: rgba(56, 189, 248, 0.1);
-  border-color: rgba(56, 189, 248, 0.3);
+  background-color: rgba(96, 200, 255, 0.08);
+  border-color: rgba(96, 200, 255, 0.22);
   color: var(--info);
+  border-radius: var(--radius-sm);
 }
 .alert-success {
-  background-color: rgba(34, 197, 94, 0.1);
-  border-color: rgba(34, 197, 94, 0.3);
+  background-color: rgba(52, 211, 153, 0.08);
+  border-color: rgba(52, 211, 153, 0.22);
   color: var(--success);
+  border-radius: var(--radius-sm);
 }
 .alert-danger {
-  background-color: rgba(239, 68, 68, 0.1);
-  border-color: rgba(239, 68, 68, 0.3);
+  background-color: rgba(248, 113, 113, 0.08);
+  border-color: rgba(248, 113, 113, 0.22);
   color: var(--danger);
+  border-radius: var(--radius-sm);
 }
 
 /* ============================================================
@@ -425,6 +613,7 @@ option { background-color: var(--bg-raised); color: var(--text); }
   background-color: var(--bg-card);
   border-color: var(--border);
   color: var(--text-muted);
+  font-size: 0.875rem;
 }
 .page-link:hover {
   background-color: var(--bg-raised);
@@ -443,22 +632,31 @@ option { background-color: var(--bg-raised); color: var(--text); }
 }
 
 /* ============================================================
-   Text / utility overrides
+   Text / Utility overrides
    ============================================================ */
 .text-muted { color: var(--text-muted) !important; }
-h1, h2, h3, h4, h5, h6 { color: var(--text); }
 .border-bottom { border-color: var(--border) !important; }
 .border-top    { border-color: var(--border) !important; }
 .border        { border-color: var(--border) !important; }
-hr             { border-color: var(--border); }
-small          { color: var(--text-muted); }
+hr             { border-color: var(--border); opacity: 1; }
+small          { color: var(--text-muted); font-size: 0.8em; }
 .font-monospace { color: var(--text); }
-
-/* Spinner on dark bg */
 .spinner-border.text-secondary { color: var(--text-muted) !important; }
 
+/* List group */
+.list-group-item {
+  background-color: var(--bg-card);
+  border-color: var(--border);
+  color: var(--text);
+}
+.list-group-item:hover { background-color: var(--bg-raised); }
+.list-group-flush .list-group-item {
+  border-left: none;
+  border-right: none;
+}
+
 /* ============================================================
-   Gallery page
+   Gallery Page
    ============================================================ */
 .gallery-card {
   position: relative;
@@ -471,20 +669,20 @@ small          { color: var(--text-muted); }
 }
 .gallery-card:hover {
   border-color: var(--accent);
-  box-shadow: 0 0 20px var(--accent-glow);
+  box-shadow: 0 0 28px var(--accent-glow);
 }
 .gallery-card img {
   width: 100%;
   aspect-ratio: 1;
   object-fit: cover;
   display: block;
-  transition: transform 0.2s;
+  transition: transform 0.25s ease;
 }
 .gallery-card:hover img { transform: scale(1.04); }
 .gallery-card .overlay {
   position: absolute; bottom: 0; left: 0; right: 0;
-  background: linear-gradient(transparent, rgba(0,0,0,0.88));
-  padding: 28px 8px 8px;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
+  padding: 32px 10px 10px;
   opacity: 0;
   transition: opacity 0.2s;
 }
@@ -496,16 +694,16 @@ small          { color: var(--text-muted); }
 
 .gallery-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
   gap: 8px;
 }
-@media (min-width: 768px)  { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
-@media (min-width: 1200px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
+@media (min-width: 768px)  { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } }
+@media (min-width: 1200px) { .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } }
 
 /* Lightbox */
 #lightbox {
   display: none; position: fixed; inset: 0;
-  background: rgba(0, 0, 0, 0.94); z-index: 9999;
+  background: rgba(0, 0, 0, 0.97); z-index: 9999;
   align-items: center; justify-content: center; flex-direction: column;
 }
 #lightbox.active { display: flex; }
@@ -513,16 +711,16 @@ small          { color: var(--text-muted); }
 #lightbox-img {
   max-width: 90vw; max-height: 80vh; object-fit: contain;
   border-radius: 8px;
-  box-shadow: 0 0 60px rgba(108, 99, 255, 0.3);
+  box-shadow: 0 0 80px rgba(139, 126, 255, 0.22);
   cursor: zoom-in; display: block;
 }
-#lightbox-meta  { color: #eee; margin-top: 10px; text-align: center; font-size: .85rem; }
-#lightbox-hint  { color: rgba(255,255,255,.38); font-size: .75rem; margin-top: 3px; }
+#lightbox-meta  { color: #eee; margin-top: 12px; text-align: center; font-size: .85rem; }
+#lightbox-hint  { color: rgba(255,255,255,.3); font-size: .75rem; margin-top: 4px; }
 #lightbox-close { position: fixed; top: 16px; right: 20px; font-size: 2rem; color: #fff; cursor: pointer; z-index: 10000; line-height: 1; }
 #lightbox-actions { position: fixed; bottom: 20px; right: 20px; z-index: 10000; display: flex; gap: 8px; }
 
 /* Prompt modal metadata */
-.meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .85rem; }
+.meta-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .85rem; }
 .meta-grid .meta-label { color: var(--text-muted); white-space: nowrap; font-weight: 600; }
 .meta-grid .meta-value { font-family: monospace; word-break: break-all; color: var(--text); }
 
@@ -534,49 +732,10 @@ small          { color: var(--text-muted); }
   font-size: .8rem; font-family: monospace; margin: 2px;
   color: var(--text);
 }
-.lora-chip .lora-strength { color: var(--accent); }
+.lora-chip .lora-strength { color: var(--accent-bright); }
 
 /* ============================================================
-   Misc
-   ============================================================ */
-/* Vertical rule in navbar */
-.vr { opacity: 1; background-color: var(--border); }
-
-/* Inline icons inside buttons */
-.btn img { height: 1em; vertical-align: -0.125em; }
-
-/* Icon-only square button */
-.btn-icon {
-  width: 34px;
-  height: 34px;
-  padding: 0;
-  display: inline-flex !important;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-.btn-icon img {
-  width: 18px;
-  height: 18px;
-  filter: brightness(0) invert(1);
-}
-
-/* Make forms invisible to flex layout so buttons flow naturally */
-.d-contents { display: contents !important; }
-
-/* Tags display */
-.badge.rounded-pill { font-weight: 400; }
-
-/* Textarea read-only */
-textarea[readonly] {
-  background-color: var(--bg-raised) !important;
-  color: var(--text) !important;
-  border-color: var(--border) !important;
-  resize: vertical;
-}
-
-/* ============================================================
-   Service status indicators (navbar)
+   Service Status Indicators (navbar)
    ============================================================ */
 .service-status {
   display: inline-flex;
@@ -584,30 +743,63 @@ textarea[readonly] {
   gap: 4px;
   cursor: default;
   user-select: none;
-  opacity: 0.85;
+  opacity: 0.8;
 }
 .service-status:hover { opacity: 1; }
 
 .status-dot {
   display: inline-block;
-  width: 8px;
-  height: 8px;
+  width: 7px;
+  height: 7px;
   border-radius: 50%;
   flex-shrink: 0;
   transition: background-color 0.4s ease;
 }
-.status-dot.status-ok       { background-color: #3dd68c; box-shadow: 0 0 4px #3dd68c88; }
-.status-dot.status-error    { background-color: #f06080; box-shadow: 0 0 4px #f0608088; }
-.status-dot.status-checking { background-color: #888; animation: status-pulse 1.2s ease-in-out infinite; }
+.status-dot.status-ok       { background-color: #34d399; box-shadow: 0 0 5px rgba(52, 211, 153, 0.55); }
+.status-dot.status-error    { background-color: #f87171; box-shadow: 0 0 5px rgba(248, 113, 113, 0.55); }
+.status-dot.status-checking { background-color: var(--border-light); animation: status-pulse 1.4s ease-in-out infinite; }
 
 .status-label {
   font-size: 0.7rem;
   font-weight: 500;
-  color: rgba(255,255,255,0.65);
+  color: rgba(255, 255, 255, 0.45);
   letter-spacing: 0.02em;
 }
 
 @keyframes status-pulse {
   0%, 100% { opacity: 1; }
-  50%       { opacity: 0.3; }
+  50%       { opacity: 0.2; }
+}
+
+/* ============================================================
+   Misc
+   ============================================================ */
+.vr { opacity: 1; background-color: var(--border-light); }
+
+.btn img { height: 1em; vertical-align: -0.125em; }
+
+.btn-icon {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  display: inline-flex !important;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.btn-icon img {
+  width: 16px;
+  height: 16px;
+  filter: brightness(0) invert(1);
+}
+
+.d-contents { display: contents !important; }
+
+.badge.rounded-pill { font-weight: 400; }
+
+textarea[readonly] {
+  background-color: var(--bg-raised) !important;
+  color: var(--text) !important;
+  border-color: var(--border) !important;
+  resize: vertical;
 }

templates/actions/detail.html

@@ -326,187 +326,72 @@
             }
         });
 
-        // Generate a unique client ID
-        const clientId = 'action_detail_' + Math.random().toString(36).substring(2, 15);
-
-        // ComfyUI WebSocket
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding Image",
-            "9": "Saving Image"
-        };
-
-        let currentPromptId = null;
+        let currentJobId = null;
         let currentAction = null;
 
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const queueRemaining = msg.data.status.exec_info.queue_remaining;
-                    if (queueRemaining > 0) {
-                        progressLabel.textContent = `Queue position: ${queueRemaining}`;
-                    }
-                }
-            }
-            else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    // Execution finished via WebSocket
-                    console.log('Finished via WebSocket');
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    const nodeName = nodeNames[nodeId] || `Processing...`;
-                    progressLabel.textContent = nodeName;
-                }
-            }
-        });
-
-        let resolveCompletion = null;
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveCompletion = checkResolve;
-                
-                // Fallback polling in case WebSocket is blocked (403)
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') {
-                            console.log('Finished via Polling');
-                            checkResolve();
+                        if (data.status === 'done') {
+                            clearInterval(poll);
+                            resolve(data);
+                        } else if (data.status === 'failed' || data.status === 'removed') {
+                            clearInterval(poll);
+                            reject(new Error(data.error || 'Job failed'));
+                        } else if (data.status === 'processing') {
+                            progressLabel.textContent = 'Generating…';
+                        } else {
+                            progressLabel.textContent = 'Queued…';
                         }
-                    } catch (err) { console.error('Polling error:', err); }
-                }, 2000);
+                    } catch (err) { console.error('Poll error:', err); }
+                }, 1500);
             });
         }
 
         form.addEventListener('submit', async (e) => {
-            // Only intercept generate actions
             const submitter = e.submitter;
-            if (!submitter || submitter.value !== 'preview') {
-                return; 
-            }
-            
+            if (!submitter || submitter.value !== 'preview') return;
             e.preventDefault();
-            
             currentAction = submitter.value;
             const formData = new FormData(form);
             formData.append('action', currentAction);
-            formData.append('client_id', clientId);
-            
-            // UI Reset
             progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
-            
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
             try {
                 const response = await fetch(form.getAttribute('action'), {
-                    method: 'POST',
-                    body: formData,
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest'
-                    }
-                });
-                
-                const data = await response.json();
-                
-                if (data.error) {
-                    alert('Error: ' + data.error);
-                    progressContainer.classList.add('d-none');
-                    return;
-                }
-                
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                
-                // Wait for completion (WebSocket or Polling)
-                await waitForCompletion(currentPromptId);
-                
-                // Finalize
-                finalizeGeneration(currentPromptId, currentAction);
-                currentPromptId = null;
-                
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
-        });
-        
-        async function finalizeGeneration(promptId, action) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/action/{{ action.slug }}/finalize_generation/${promptId}`;
-            const formData = new FormData();
-            formData.append('action', 'preview');  // Always save as preview
-            
-            try {
-                const response = await fetch(url, {
-                    method: 'POST',
-                    body: formData
+                    method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                 });
                 const data = await response.json();
-                
-                if (data.success) {
-                    // Update preview image
-                    previewImg.src = data.image_url;
+                if (data.error) { alert('Error: ' + data.error); progressContainer.classList.add('d-none'); return; }
+                currentJobId = data.job_id;
+                const jobResult = await waitForJob(currentJobId);
+                currentJobId = null;
+                if (jobResult.result && jobResult.result.image_url) {
+                    previewImg.src = jobResult.result.image_url;
                     if (previewCard) previewCard.classList.remove('d-none');
-                    
-                    // Enable the replace cover button if it exists
                     const replaceBtn = document.getElementById('replace-cover-btn');
-                    if (replaceBtn) {
-                        replaceBtn.disabled = false;
-                        // Check if there's a form to update
-                        const form = replaceBtn.closest('form');
-                        if (form) {
-                            form.action = `/action/{{ action.slug }}/replace_cover_from_preview`;
-                        }
-                    }
-                } else {
-                    alert('Save failed: ' + data.error);
+                    if (replaceBtn) replaceBtn.disabled = false;
                 }
             } catch (err) {
                 console.error(err);
-                alert('Finalize request failed');
+                alert('Generation failed: ' + err.message);
             } finally {
                 progressContainer.classList.add('d-none');
+                progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
             }
-        }
+        });
 
         // Batch: Generate All Characters
         const allCharacters = [
             {% for char in characters %}{ slug: "{{ char.slug }}", name: {{ char.name | tojson }} },
             {% endfor %}
         ];
-        const finalizeBaseUrl = '/action/{{ action.slug }}/finalize_generation';
 
         let stopBatch = false;
         const generateAllBtn = document.getElementById('generate-all-btn');
@@ -542,54 +427,43 @@
             stopAllBtn.classList.remove('d-none');
             batchProgress.classList.remove('d-none');
             bootstrap.Tab.getOrCreateInstance(document.getElementById('previews-tab')).show();
-
             for (let i = 0; i < allCharacters.length; i++) {
                 if (stopBatch) break;
                 const char = allCharacters[i];
                 batchBar.style.width = `${Math.round((i / allCharacters.length) * 100)}%`;
                 batchLabel.textContent = `Generating ${char.name} (${i + 1} / ${allCharacters.length})`;
-
                 const genForm = document.getElementById('generate-form');
                 const fd = new FormData();
                 genForm.querySelectorAll('input[name="include_field"]:checked').forEach(cb => fd.append('include_field', cb.value));
                 fd.append('character_slug', char.slug);
                 fd.append('action', 'preview');
-                fd.append('client_id', clientId);
-
                 try {
                     progressContainer.classList.remove('d-none');
-                    progressBar.style.width = '0%';
-                    progressBar.textContent = '0%';
-                    progressLabel.textContent = `${char.name}: Starting...`;
-
+                    progressBar.style.width = '100%';
+                    progressBar.textContent = '';
+                    progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+                    progressLabel.textContent = `${char.name}: Queuing…`;
                     const resp = await fetch(genForm.getAttribute('action'), {
                         method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                     });
                     const data = await resp.json();
                     if (data.error) { console.error(`Error for ${char.name}:`, data.error); progressContainer.classList.add('d-none'); continue; }
-
-                    currentPromptId = data.prompt_id;
-                    await waitForCompletion(currentPromptId);
-
-                    progressLabel.textContent = 'Saving image...';
-                    const finalFD = new FormData();
-                    finalFD.append('action', 'preview');
-                    const finalResp = await fetch(`${finalizeBaseUrl}/${currentPromptId}`, { method: 'POST', body: finalFD });
-                    const finalData = await finalResp.json();
-                    if (finalData.success) {
-                        addToPreviewGallery(finalData.image_url, char.name);
-                        previewImg.src = finalData.image_url;
+                    currentJobId = data.job_id;
+                    const jobResult = await waitForJob(currentJobId);
+                    currentJobId = null;
+                    if (jobResult.result && jobResult.result.image_url) {
+                        addToPreviewGallery(jobResult.result.image_url, char.name);
+                        previewImg.src = jobResult.result.image_url;
                         if (previewCard) previewCard.classList.remove('d-none');
                     }
-                    currentPromptId = null;
                 } catch (err) {
                     console.error(`Failed for ${char.name}:`, err);
-                    currentPromptId = null;
+                    currentJobId = null;
                 } finally {
                     progressContainer.classList.add('d-none');
+                    progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
                 }
             }
-
             batchBar.style.width = '100%';
             batchLabel.textContent = stopBatch ? 'Stopped.' : 'Complete!';
             generateAllBtn.disabled = false;

templates/actions/index.html

@@ -47,7 +47,7 @@
     </div>
 </div>
 
-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
     {% for action in actions %}
     <div class="col" id="card-{{ action.slug }}">
         <div class="card h-100 character-card" onclick="window.location.href='/action/{{ action.slug }}'">
@@ -102,71 +102,18 @@
         const itemNameText = document.getElementById('current-item-name');
         const stepProgressText = document.getElementById('current-step-progress');
         
-        const clientId = 'actions_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding",
-            "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || `Processing...`;
-                    stepProgressText.textContent = "";
-                    if (nodeId !== "3") {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') {
-                            checkResolve();
-                        }
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                     } catch (err) {}
-                }, 2000);
+                }, 1500);
             });
         }
 
@@ -184,67 +131,64 @@
             regenAllBtn.disabled = true;
             container.classList.remove('d-none');
 
-            let completed = 0;
+            // Phase 1: Queue all jobs upfront
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            nodeStatus.textContent = 'Queuing…';
+
+            const jobs = [];
             for (const item of missing) {
-                const percent = Math.round((completed / missing.length) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-                statusText.textContent = `Batch Generating Actions: ${completed + 1} / ${missing.length}`;
-                itemNameText.textContent = `Current: ${item.name}`;
-                nodeStatus.textContent = "Queuing...";
-                
-                taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
-                taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-
+                statusText.textContent = `Queuing ${jobs.length + 1} / ${missing.length}…`;
                 try {
-                    // Random character for action preview
                     const genResp = await fetch(`/action/${item.slug}/generate`, {
                         method: 'POST',
-                        body: new URLSearchParams({ 
-                            'action': 'replace', 
-                            'client_id': clientId,
-                            'character_slug': '__random__' 
-                        }),
+                        body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
                         headers: { 'X-Requested-With': 'XMLHttpRequest' }
                     });
                     const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
+                    if (genData.job_id) jobs.push({ item, jobId: genData.job_id });
+                } catch (err) {
+                    console.error(`Failed to queue ${item.name}:`, err);
+                }
+            }
 
-                    await waitForCompletion(currentPromptId);
+            // Phase 2: Poll all concurrently
+            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
+            progressBar.style.width = '0%';
+            progressBar.textContent = '0%';
+            statusText.textContent = `0 / ${jobs.length} done`;
 
-                    const finResp = await fetch(`/action/${item.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
+            let completed = 0;
+            await Promise.all(jobs.map(async ({ item, jobId }) => {
+                try {
+                    const jobResult = await waitForJob(jobId);
+                    if (jobResult.result && jobResult.result.image_url) {
                         const img = document.getElementById(`img-${item.slug}`);
                         const noImgSpan = document.getElementById(`no-img-${item.slug}`);
-                        if (img) {
-                            img.src = finData.image_url;
-                            img.classList.remove('d-none');
-                        }
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                         if (noImgSpan) noImgSpan.classList.add('d-none');
                     }
                 } catch (err) {
                     console.error(`Failed for ${item.name}:`, err);
                 }
                 completed++;
-            }
+                const pct = Math.round((completed / jobs.length) * 100);
+                progressBar.style.width = `${pct}%`;
+                progressBar.textContent = `${pct}%`;
+                statusText.textContent = `${completed} / ${jobs.length} done`;
+            }));
 
             progressBar.style.width = '100%';
             progressBar.textContent = '100%';
-            statusText.textContent = "Batch Action Generation Complete!";
-            itemNameText.textContent = "";
-            nodeStatus.textContent = "Done";
-            stepProgressText.textContent = "";
+            statusText.textContent = 'Batch Action Generation Complete!';
+            itemNameText.textContent = '';
+            nodeStatus.textContent = 'Done';
             taskProgressBar.style.width = '0%';
             taskProgressBar.textContent = '';
             batchBtn.disabled = false;
             regenAllBtn.disabled = false;
-            setTimeout(() => { container.classList.add('d-none'); }, 5000);
+            setTimeout(() => container.classList.add('d-none'), 5000);
         }
 
         batchBtn.addEventListener('click', async () => {

templates/checkpoints/detail.html

@@ -261,52 +261,20 @@
         const previewCard = document.getElementById('preview-card');
         const previewImg = document.getElementById('preview-img');
 
-        const clientId = 'checkpoint_detail_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
+        let currentJobId = null;
 
-        const nodeNames = {
-            "3": "Sampling", "11": "Face Detailing", "13": "Hand Detailing",
-            "4": "Loading Models", "16": "Character LoRA", "17": "Outfit LoRA",
-            "18": "Action LoRA", "19": "Style/Detailer LoRA", "8": "Decoding Image", "9": "Saving Image"
-        };
-
-        let currentPromptId = null;
-        let resolveCompletion = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const q = msg.data.status.exec_info.queue_remaining;
-                    if (q > 0) progressLabel.textContent = `Queue position: ${q}`;
-                }
-            } else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const percent = Math.round((msg.data.value / msg.data.max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            } else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    progressLabel.textContent = nodeNames[nodeId] || 'Processing...';
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => { clearInterval(pollInterval); resolve(); };
-                resolveCompletion = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') checkResolve();
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') progressLabel.textContent = 'Generating…';
+                        else progressLabel.textContent = 'Queued…';
                     } catch (err) {}
-                }, 2000);
+                }, 1500);
             });
         }
 
@@ -314,76 +282,36 @@
             const submitter = e.submitter;
             if (!submitter || submitter.value !== 'preview') return;
             e.preventDefault();
-
             const formData = new FormData(form);
             formData.append('action', 'preview');
-            formData.append('client_id', clientId);
-
             progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
-
+            progressBar.style.width = '100%'; progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
             try {
                 const response = await fetch(form.getAttribute('action'), {
-                    method: 'POST',
-                    body: formData,
-                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
+                    method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                 });
                 const data = await response.json();
-                if (data.error) {
-                    alert('Error: ' + data.error);
-                    progressContainer.classList.add('d-none');
-                    return;
-                }
-
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-
-                await waitForCompletion(currentPromptId);
-                await finalizeGeneration(currentPromptId);
-                currentPromptId = null;
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
-        });
-
-        async function finalizeGeneration(promptId) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/checkpoint/{{ ckpt.slug }}/finalize_generation/${promptId}`;
-            const formData = new FormData();
-            formData.append('action', 'preview');
-
-            try {
-                const response = await fetch(url, { method: 'POST', body: formData });
-                const data = await response.json();
-                if (data.success) {
-                    previewImg.src = data.image_url;
+                if (data.error) { alert('Error: ' + data.error); progressContainer.classList.add('d-none'); return; }
+                currentJobId = data.job_id;
+                const jobResult = await waitForJob(currentJobId);
+                currentJobId = null;
+                if (jobResult.result && jobResult.result.image_url) {
+                    previewImg.src = jobResult.result.image_url;
                     if (previewCard) previewCard.classList.remove('d-none');
                     const replaceBtn = document.getElementById('replace-cover-btn');
                     if (replaceBtn) replaceBtn.disabled = false;
-                } else {
-                    alert('Save failed: ' + data.error);
-                }
-            } catch (err) {
-                console.error(err);
-                alert('Finalize request failed');
-            } finally {
-                progressContainer.classList.add('d-none');
-            }
                 }
+            } catch (err) { console.error(err); alert('Generation failed: ' + err.message); }
+            finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
+        });
 
         // Batch: Generate All Characters
         const allCharacters = [
             {% for char in characters %}{ slug: "{{ char.slug }}", name: {{ char.name | tojson }} },
             {% endfor %}
         ];
-        const finalizeBaseUrl = '/checkpoint/{{ ckpt.slug }}/finalize_generation';
 
         let stopBatch = false;
         const generateAllBtn = document.getElementById('generate-all-btn');
@@ -419,53 +347,36 @@
             stopAllBtn.classList.remove('d-none');
             batchProgress.classList.remove('d-none');
             bootstrap.Tab.getOrCreateInstance(document.getElementById('previews-tab')).show();
-
             for (let i = 0; i < allCharacters.length; i++) {
                 if (stopBatch) break;
                 const char = allCharacters[i];
                 batchBar.style.width = `${Math.round((i / allCharacters.length) * 100)}%`;
                 batchLabel.textContent = `Generating ${char.name} (${i + 1} / ${allCharacters.length})`;
-
                 const genForm = document.getElementById('generate-form');
                 const fd = new FormData();
                 fd.append('character_slug', char.slug);
                 fd.append('action', 'preview');
-                fd.append('client_id', clientId);
-
                 try {
                     progressContainer.classList.remove('d-none');
-                    progressBar.style.width = '0%';
-                    progressBar.textContent = '0%';
-                    progressLabel.textContent = `${char.name}: Starting...`;
-
+                    progressBar.style.width = '100%'; progressBar.textContent = '';
+                    progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+                    progressLabel.textContent = `${char.name}: Queuing…`;
                     const resp = await fetch(genForm.getAttribute('action'), {
                         method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                     });
                     const data = await resp.json();
                     if (data.error) { console.error(`Error for ${char.name}:`, data.error); progressContainer.classList.add('d-none'); continue; }
-
-                    currentPromptId = data.prompt_id;
-                    await waitForCompletion(currentPromptId);
-
-                    progressLabel.textContent = 'Saving image...';
-                    const finalFD = new FormData();
-                    finalFD.append('action', 'preview');
-                    const finalResp = await fetch(`${finalizeBaseUrl}/${currentPromptId}`, { method: 'POST', body: finalFD });
-                    const finalData = await finalResp.json();
-                    if (finalData.success) {
-                        addToPreviewGallery(finalData.image_url, char.name);
-                        previewImg.src = finalData.image_url;
+                    currentJobId = data.job_id;
+                    const jobResult = await waitForJob(currentJobId);
+                    currentJobId = null;
+                    if (jobResult.result && jobResult.result.image_url) {
+                        addToPreviewGallery(jobResult.result.image_url, char.name);
+                        previewImg.src = jobResult.result.image_url;
                         if (previewCard) previewCard.classList.remove('d-none');
                     }
-                    currentPromptId = null;
-                } catch (err) {
-                    console.error(`Failed for ${char.name}:`, err);
-                    currentPromptId = null;
-                } finally {
-                    progressContainer.classList.add('d-none');
+                } catch (err) { console.error(`Failed for ${char.name}:`, err); currentJobId = null; }
+                finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
             }
-            }
-
             batchBar.style.width = '100%';
             batchLabel.textContent = stopBatch ? 'Stopped.' : 'Complete!';
             generateAllBtn.disabled = false;

templates/checkpoints/index.html

@@ -44,7 +44,7 @@
     </div>
 </div>
 
-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
     {% for ckpt in checkpoints %}
     <div class="col" id="card-{{ ckpt.slug }}">
         <div class="card h-100 character-card" onclick="window.location.href='/checkpoint/{{ ckpt.slug }}'">
@@ -84,55 +84,20 @@
         const ckptNameText = document.getElementById('current-ckpt-name');
         const stepProgressText = document.getElementById('current-step-progress');
 
-        const clientId = 'checkpoints_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
+        let currentJobId = null;
 
-        const nodeNames = {
-            "3": "Sampling", "11": "Face Detailing", "13": "Hand Detailing",
-            "4": "Loading Models", "16": "Character LoRA", "17": "Outfit LoRA",
-            "18": "Action LoRA", "19": "Style/Detailer LoRA", "8": "Decoding", "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const percent = Math.round((msg.data.value / msg.data.max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            } else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || 'Processing...';
-                    stepProgressText.textContent = '';
-                    if (nodeId !== '3') {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => { clearInterval(pollInterval); resolve(); };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') checkResolve();
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                     } catch (err) {}
-                }, 2000);
+                }, 1500);
             });
         }
 
@@ -157,36 +122,32 @@
                 progressBar.textContent = `${percent}%`;
                 statusText.textContent = `Batch Generating: ${completed + 1} / ${missing.length}`;
                 ckptNameText.textContent = `Current: ${ckpt.name}`;
-                nodeStatus.textContent = 'Queuing...';
+                nodeStatus.textContent = 'Queuing…';
                 taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
+                taskProgressBar.textContent = '';
                 taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
 
                 try {
                     const genResp = await fetch(`/checkpoint/${ckpt.slug}/generate`, {
                         method: 'POST',
-                        body: new URLSearchParams({ 'client_id': clientId, 'character_slug': '__random__' }),
+                        body: new URLSearchParams({ 'character_slug': '__random__' }),
                         headers: { 'X-Requested-With': 'XMLHttpRequest' }
                     });
                     const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
+                    currentJobId = genData.job_id;
 
-                    await waitForCompletion(currentPromptId);
+                    const jobResult = await waitForJob(currentJobId);
+                    currentJobId = null;
 
-                    const finResp = await fetch(`/checkpoint/${ckpt.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
+                    if (jobResult.result && jobResult.result.image_url) {
                         const img = document.getElementById(`img-${ckpt.slug}`);
                         const noImgSpan = document.getElementById(`no-img-${ckpt.slug}`);
-                        if (img) { img.src = finData.image_url; img.classList.remove('d-none'); }
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                         if (noImgSpan) noImgSpan.classList.add('d-none');
                     }
                 } catch (err) {
                     console.error(`Failed for ${ckpt.name}:`, err);
+                    currentJobId = null;
                 }
                 completed++;
             }
@@ -196,7 +157,6 @@
             statusText.textContent = 'Batch Generation Complete!';
             ckptNameText.textContent = '';
             nodeStatus.textContent = 'Done';
-            stepProgressText.textContent = '';
             taskProgressBar.style.width = '0%';
             taskProgressBar.textContent = '';
             batchBtn.disabled = false;

templates/detail.html

@@ -228,82 +228,28 @@
         const previewCard = document.getElementById('preview-card');
         const previewImg = document.getElementById('preview-img');
 
-        // Generate a unique client ID
-        const clientId = 'detail_view_' + Math.random().toString(36).substring(2, 15);
-
-        // ComfyUI WebSocket
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding Image",
-            "9": "Saving Image"
-        };
-
-        let currentPromptId = null;
+        let currentJobId = null;
         let currentAction = null;
 
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const queueRemaining = msg.data.status.exec_info.queue_remaining;
-                    if (queueRemaining > 0) {
-                        progressLabel.textContent = `Queue position: ${queueRemaining}`;
-                    }
-                }
-            }
-            else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    // Execution finished via WebSocket
-                    console.log('Finished via WebSocket');
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    const nodeName = nodeNames[nodeId] || `Processing...`;
-                    progressLabel.textContent = nodeName;
-                }
-            }
-        });
-
-        let resolveCompletion = null;
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveCompletion = checkResolve;
-                
-                // Fallback polling in case WebSocket is blocked (403)
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') {
-                            console.log('Finished via Polling');
-                            checkResolve();
+                        if (data.status === 'done') {
+                            clearInterval(poll);
+                            resolve(data);
+                        } else if (data.status === 'failed' || data.status === 'removed') {
+                            clearInterval(poll);
+                            reject(new Error(data.error || 'Job failed'));
+                        } else if (data.status === 'processing') {
+                            progressLabel.textContent = 'Generating…';
+                        } else {
+                            progressLabel.textContent = 'Queued…';
                         }
-                    } catch (err) { console.error('Polling error:', err); }
-                }, 2000);
+                    } catch (err) { console.error('Poll error:', err); }
+                }, 1500);
             });
         }
 
@@ -319,21 +265,19 @@
             currentAction = submitter.value;
             const formData = new FormData(form);
             formData.append('action', currentAction);
-            formData.append('client_id', clientId);
             
             // UI Reset
             progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
             
             try {
                 const response = await fetch(form.getAttribute('action'), {
                     method: 'POST',
                     body: formData,
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest'
-                    }
+                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                 });
                 
                 const data = await response.json();
@@ -344,64 +288,29 @@
                     return;
                 }
                 
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+                currentJobId = data.job_id;
+                progressLabel.textContent = 'Queued…';
 
-                // Wait for completion (WebSocket or Polling)
-                await waitForCompletion(currentPromptId);
+                // Wait for the background worker to finish
+                const jobResult = await waitForJob(currentJobId);
+                currentJobId = null;
 
-                // Finalize
-                finalizeGeneration(currentPromptId, currentAction);
-                currentPromptId = null;
-                
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
-        });
-        
-        async function finalizeGeneration(promptId, action) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/character/{{ character.slug }}/finalize_generation/${promptId}`;
-            const formData = new FormData();
-            formData.append('action', 'preview');  // Always save as preview
-            
-            try {
-                const response = await fetch(url, {
-                    method: 'POST',
-                    body: formData
-                });
-                const data = await response.json();
-                
-                if (data.success) {
-                    // Update preview image
-                    previewImg.src = data.image_url;
+                // Image is already saved — just display it
+                if (jobResult.result && jobResult.result.image_url) {
+                    previewImg.src = jobResult.result.image_url;
                     if (previewCard) previewCard.classList.remove('d-none');
-                    
-                    // Enable the replace cover button if it exists
                     const replaceBtn = document.getElementById('replace-cover-btn');
-                    if (replaceBtn) {
-                        replaceBtn.disabled = false;
-                        // Check if there's a form to update
-                        const form = replaceBtn.closest('form');
-                        if (form) {
-                            form.action = `/character/{{ character.slug }}/replace_cover_from_preview`;
-                        }
-                    }
-                } else {
-                    alert('Save failed: ' + data.error);
+                    if (replaceBtn) replaceBtn.disabled = false;
                 }
+                
             } catch (err) {
                 console.error(err);
-                alert('Finalize request failed');
+                alert('Generation failed: ' + err.message);
             } finally {
                 progressContainer.classList.add('d-none');
+                progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
             }
-        }
+        });
     });
     
     // Image modal function

templates/detailers/detail.html

@@ -296,171 +296,59 @@
             }
         });
 
-        // Generate a unique client ID
-        const clientId = 'detailer_detail_' + Math.random().toString(36).substring(2, 15);
-
-        // ComfyUI WebSocket
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding Image",
-            "9": "Saving Image"
-        };
-
-        let currentPromptId = null;
+        let currentJobId = null;
         let currentAction = null;
 
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const queueRemaining = msg.data.status.exec_info.queue_remaining;
-                    if (queueRemaining > 0) {
-                        progressLabel.textContent = `Queue position: ${queueRemaining}`;
-                    }
-                }
-            }
-            else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    // Execution finished via WebSocket
-                    console.log('Finished via WebSocket');
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    const nodeName = nodeNames[nodeId] || `Processing...`;
-                    progressLabel.textContent = nodeName;
-                }
-            }
-        });
-
-        let resolveCompletion = null;
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveCompletion = checkResolve;
-                
-                // Fallback polling in case WebSocket is blocked (403)
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') {
-                            console.log('Finished via Polling');
-                            checkResolve();
-                        }
-                    } catch (err) { console.error('Polling error:', err); }
-                }, 2000);
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') progressLabel.textContent = 'Generating…';
+                        else progressLabel.textContent = 'Queued…';
+                    } catch (err) { console.error('Poll error:', err); }
+                }, 1500);
             });
         }
 
         form.addEventListener('submit', async (e) => {
             const submitter = e.submitter;
             if (!submitter || submitter.value !== 'preview') return;
-            
             e.preventDefault();
-            
             currentAction = submitter.value;
             const formData = new FormData(form);
             formData.append('action', currentAction);
-            formData.append('client_id', clientId);
-            
             progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
-            
+            progressBar.style.width = '100%'; progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
             try {
                 const response = await fetch(form.getAttribute('action'), {
-                    method: 'POST',
-                    body: formData,
-                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
+                    method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                 });
-                
                 const data = await response.json();
-                if (data.error) {
-                    alert('Error: ' + data.error);
-                    progressContainer.classList.add('d-none');
-                    return;
-                }
-                
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                
-                await waitForCompletion(currentPromptId);
-                finalizeGeneration(currentPromptId, currentAction);
-                currentPromptId = null;
-                
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
-        });
-        
-        async function finalizeGeneration(promptId, action) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/detailer/{{ detailer.slug }}/finalize_generation/${promptId}`;
-            const formData = new FormData();
-            formData.append('action', 'preview');  // Always save as preview
-            
-            try {
-                const response = await fetch(url, { method: 'POST', body: formData });
-                const data = await response.json();
-                
-                if (data.success) {
-                    previewImg.src = data.image_url;
+                if (data.error) { alert('Error: ' + data.error); progressContainer.classList.add('d-none'); return; }
+                currentJobId = data.job_id;
+                const jobResult = await waitForJob(currentJobId);
+                currentJobId = null;
+                if (jobResult.result && jobResult.result.image_url) {
+                    previewImg.src = jobResult.result.image_url;
                     if (previewCard) previewCard.classList.remove('d-none');
-                    
                     const replaceBtn = document.getElementById('replace-cover-btn');
-                    if (replaceBtn) {
-                        replaceBtn.disabled = false;
-                        const form = replaceBtn.closest('form');
-                        if (form) {
-                            form.action = `/detailer/{{ detailer.slug }}/replace_cover_from_preview`;
-                        }
-                    }
-                } else {
-                    alert('Save failed: ' + data.error);
-                }
-            } catch (err) {
-                console.error(err);
-                alert('Finalize request failed');
-            } finally {
-                progressContainer.classList.add('d-none');
-            }
+                    if (replaceBtn) replaceBtn.disabled = false;
                 }
+            } catch (err) { console.error(err); alert('Generation failed: ' + err.message); }
+            finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
+        });
 
         // Batch: Generate All Characters
         const allCharacters = [
             {% for char in characters %}{ slug: "{{ char.slug }}", name: {{ char.name | tojson }} },
             {% endfor %}
         ];
-        const finalizeBaseUrl = '/detailer/{{ detailer.slug }}/finalize_generation';
 
         let stopBatch = false;
         const generateAllBtn = document.getElementById('generate-all-btn');
@@ -496,13 +384,11 @@
             stopAllBtn.classList.remove('d-none');
             batchProgress.classList.remove('d-none');
             bootstrap.Tab.getOrCreateInstance(document.getElementById('previews-tab')).show();
-
             for (let i = 0; i < allCharacters.length; i++) {
                 if (stopBatch) break;
                 const char = allCharacters[i];
                 batchBar.style.width = `${Math.round((i / allCharacters.length) * 100)}%`;
                 batchLabel.textContent = `Generating ${char.name} (${i + 1} / ${allCharacters.length})`;
-
                 const genForm = document.getElementById('generate-form');
                 const fd = new FormData();
                 genForm.querySelectorAll('input[name="include_field"]:checked').forEach(cb => fd.append('include_field', cb.value));
@@ -511,42 +397,27 @@
                 fd.append('extra_positive', document.getElementById('extra_positive').value);
                 fd.append('extra_negative', document.getElementById('extra_negative').value);
                 fd.append('action', 'preview');
-                fd.append('client_id', clientId);
-
                 try {
                     progressContainer.classList.remove('d-none');
-                    progressBar.style.width = '0%';
-                    progressBar.textContent = '0%';
-                    progressLabel.textContent = `${char.name}: Starting...`;
-
+                    progressBar.style.width = '100%'; progressBar.textContent = '';
+                    progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+                    progressLabel.textContent = `${char.name}: Queuing…`;
                     const resp = await fetch(genForm.getAttribute('action'), {
                         method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                     });
                     const data = await resp.json();
                     if (data.error) { console.error(`Error for ${char.name}:`, data.error); progressContainer.classList.add('d-none'); continue; }
-
-                    currentPromptId = data.prompt_id;
-                    await waitForCompletion(currentPromptId);
-
-                    progressLabel.textContent = 'Saving image...';
-                    const finalFD = new FormData();
-                    finalFD.append('action', 'preview');
-                    const finalResp = await fetch(`${finalizeBaseUrl}/${currentPromptId}`, { method: 'POST', body: finalFD });
-                    const finalData = await finalResp.json();
-                    if (finalData.success) {
-                        addToPreviewGallery(finalData.image_url, char.name);
-                        previewImg.src = finalData.image_url;
+                    currentJobId = data.job_id;
+                    const jobResult = await waitForJob(currentJobId);
+                    currentJobId = null;
+                    if (jobResult.result && jobResult.result.image_url) {
+                        addToPreviewGallery(jobResult.result.image_url, char.name);
+                        previewImg.src = jobResult.result.image_url;
                         if (previewCard) previewCard.classList.remove('d-none');
                     }
-                    currentPromptId = null;
-                } catch (err) {
-                    console.error(`Failed for ${char.name}:`, err);
-                    currentPromptId = null;
-                } finally {
-                    progressContainer.classList.add('d-none');
+                } catch (err) { console.error(`Failed for ${char.name}:`, err); currentJobId = null; }
+                finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
             }
-            }
-
             batchBar.style.width = '100%';
             batchLabel.textContent = stopBatch ? 'Stopped.' : 'Complete!';
             generateAllBtn.disabled = false;

templates/detailers/index.html

@@ -47,7 +47,7 @@
     </div>
 </div>
 
-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
     {% for detailer in detailers %}
     <div class="col" id="card-{{ detailer.slug }}">
         <div class="card h-100 character-card" onclick="window.location.href='/detailer/{{ detailer.slug }}'">
@@ -104,72 +104,18 @@
         const detailerNameText = document.getElementById('current-detailer-name');
         const stepProgressText = document.getElementById('current-step-progress');
         
-        const clientId = 'detailers_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding",
-            "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || `Processing...`;
-                    stepProgressText.textContent = "";
-                    if (nodeId !== "3") {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') {
-                            checkResolve();
-                        }
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                     } catch (err) {}
-                }, 2000);
+                }, 1500);
             });
         }
 
@@ -187,66 +133,65 @@
             regenAllBtn.disabled = true;
             container.classList.remove('d-none');
 
-            let completed = 0;
+            // Phase 1: Queue all jobs upfront
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            nodeStatus.textContent = 'Queuing…';
+
+            const jobs = [];
             for (const item of missing) {
-                const percent = Math.round((completed / missing.length) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-                statusText.textContent = `Batch Generating Detailers: ${completed + 1} / ${missing.length}`;
-                detailerNameText.textContent = `Current: ${item.name}`;
-                nodeStatus.textContent = "Queuing...";
-                
-                taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
-                taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-
+                statusText.textContent = `Queuing ${jobs.length + 1} / ${missing.length}…`;
                 try {
                     const genResp = await fetch(`/detailer/${item.slug}/generate`, {
                         method: 'POST',
-                        body: new URLSearchParams({ 
-                            'action': 'replace', 
-                            'client_id': clientId,
-                            'character_slug': '__random__' 
-                        }),
+                        body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
                         headers: { 'X-Requested-With': 'XMLHttpRequest' }
                     });
                     const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
+                    if (genData.job_id) jobs.push({ item, jobId: genData.job_id });
+                } catch (err) {
+                    console.error(`Failed to queue ${item.name}:`, err);
+                }
+            }
 
-                    await waitForCompletion(currentPromptId);
+            // Phase 2: Poll all concurrently
+            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
+            progressBar.style.width = '0%';
+            progressBar.textContent = '0%';
+            statusText.textContent = `0 / ${jobs.length} done`;
 
-                    const finResp = await fetch(`/detailer/${item.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
+            let completed = 0;
+            await Promise.all(jobs.map(async ({ item, jobId }) => {
+                try {
+                    const jobResult = await waitForJob(jobId);
+                    if (jobResult.result && jobResult.result.image_url) {
                         const img = document.getElementById(`img-${item.slug}`);
                         const noImgSpan = document.getElementById(`no-img-${item.slug}`);
-                        if (img) {
-                            img.src = finData.image_url;
-                            img.classList.remove('d-none');
-                        }
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                         if (noImgSpan) noImgSpan.classList.add('d-none');
                     }
                 } catch (err) {
                     console.error(`Failed for ${item.name}:`, err);
                 }
                 completed++;
-            }
+                const pct = Math.round((completed / jobs.length) * 100);
+                progressBar.style.width = `${pct}%`;
+                progressBar.textContent = `${pct}%`;
+                statusText.textContent = `${completed} / ${jobs.length} done`;
+            }));
 
             progressBar.style.width = '100%';
             progressBar.textContent = '100%';
-            statusText.textContent = "Batch Detailer Generation Complete!";
-            detailerNameText.textContent = "";
-            nodeStatus.textContent = "Done";
-            stepProgressText.textContent = "";
+            statusText.textContent = 'Batch Detailer Generation Complete!';
+            detailerNameText.textContent = '';
+            nodeStatus.textContent = 'Done';
+            stepProgressText.textContent = '';
             taskProgressBar.style.width = '0%';
             taskProgressBar.textContent = '';
             batchBtn.disabled = false;
             regenAllBtn.disabled = false;
-            setTimeout(() => { container.classList.add('d-none'); }, 5000);
+            setTimeout(() => container.classList.add('d-none'), 5000);
         }
 
         batchBtn.addEventListener('click', async () => {

templates/generator.html

@@ -310,73 +310,24 @@
         const placeholder  = document.getElementById('placeholder-text');
         const resultFooter = document.getElementById('result-footer');
 
-        const clientId = 'generator_view_' + Math.random().toString(36).substring(2, 15);
-        const socket   = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-
-        const nodeNames = {
-            "3": "Sampling", "4": "Loading Models", "8": "Decoding Image", "9": "Saving Image",
-            "11": "Face Detailing", "13": "Hand Detailing",
-            "16": "Character LoRA", "17": "Outfit LoRA", "18": "Action LoRA", "19": "Style/Detailer LoRA"
-        };
-
-        let currentPromptId  = null;
-        let resolveCompletion = null;
+        let currentJobId = null;
         let stopRequested = false;
 
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const q = msg.data.status.exec_info.queue_remaining;
-                    if (q > 0) progressLbl.textContent = `Queue position: ${q}`;
-                }
-            } else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const pct = Math.round((msg.data.value / msg.data.max) * 100);
-                progressBar.style.width = `${pct}%`;
-                progressBar.textContent = `${pct}%`;
-            } else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                if (msg.data.node === null) {
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    progressLbl.textContent = nodeNames[msg.data.node] || 'Processing...';
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const done = () => { clearInterval(poll); resolve(); };
-                resolveCompletion = done;
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
                 const poll = setInterval(async () => {
                     try {
-                        const r = await fetch(`/check_status/${promptId}`);
-                        if ((await r.json()).status === 'finished') done();
-                    } catch (_) {}
-                }, 2000);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
+                        const data = await resp.json();
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') progressLbl.textContent = 'Generating…';
+                        else progressLbl.textContent = 'Queued…';
+                    } catch (err) {}
+                }, 1500);
             });
         }
 
-        async function finalizeGeneration(slug, promptId) {
-            progressLbl.textContent = 'Saving image...';
-            try {
-                const r    = await fetch(`/generator/finalize/${slug}/${promptId}`, { method: 'POST' });
-                const data = await r.json();
-                if (data.success) {
-                    resultImg.src = data.image_url;
-                    resultImg.parentElement.classList.remove('d-none');
-                    if (placeholder) placeholder.classList.add('d-none');
-                    resultFooter.classList.remove('d-none');
-                } else {
-                    alert('Save failed: ' + data.error);
-                }
-            } catch (err) {
-                console.error(err);
-                alert('Finalize request failed');
-            }
-        }
-
         function setGeneratingState(active) {
             generateBtn.disabled = active;
             endlessBtn.disabled  = active;
@@ -388,12 +339,11 @@
             if (document.getElementById('lucky-dip').checked) applyLuckyDip();
 
             progressCont.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
+            progressBar.style.width = '100%'; progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
             progressLbl.textContent = label;
 
             const fd = new FormData(form);
-            fd.append('client_id', clientId);
 
             const resp = await fetch(form.action, {
                 method: 'POST', body: fd,
@@ -402,15 +352,19 @@
             const data = await resp.json();
             if (data.error) throw new Error(data.error);
 
-            currentPromptId = data.prompt_id;
-            progressLbl.textContent = 'Queued...';
-            progressBar.style.width = '100%';
-            progressBar.textContent = 'Queued';
-            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            currentJobId = data.job_id;
+            progressLbl.textContent = 'Queued…';
 
-            await waitForCompletion(currentPromptId);
-            await finalizeGeneration(document.getElementById('character').value, currentPromptId);
-            currentPromptId = null;
+            const jobResult = await waitForJob(currentJobId);
+            currentJobId = null;
+
+            if (jobResult.result && jobResult.result.image_url) {
+                resultImg.src = jobResult.result.image_url;
+                resultImg.parentElement.classList.remove('d-none');
+                if (placeholder) placeholder.classList.add('d-none');
+                resultFooter.classList.remove('d-none');
+            }
+            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
         }
 
         async function runLoop(endless) {

templates/index.html

@@ -39,7 +39,7 @@
     </div>
 </div>
 
-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
     {% for char in characters %}
     <div class="col" id="card-{{ char.slug }}">
         <div class="card h-100 character-card" onclick="window.location.href='/character/{{ char.slug }}'">
@@ -103,72 +103,18 @@
         const charNameText = document.getElementById('current-char-name');
         const stepProgressText = document.getElementById('current-step-progress');
         
-        const clientId = 'gallery_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding",
-            "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || `Processing...`;
-                    stepProgressText.textContent = "";
-                    // Reset task bar for new node if it's not sampling
-                    if (nodeId !== "3") {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') {
-                            checkResolve();
-                        }
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                     } catch (err) {}
-                }, 2000);
+                }, 1500);
             });
         }
 
@@ -186,62 +132,65 @@
             regenAllBtn.disabled = true;
             container.classList.remove('d-none');
 
-            let completed = 0;
+            // Phase 1: Queue all jobs upfront so the page can be navigated away from
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            nodeStatus.textContent = 'Queuing…';
+
+            const jobs = [];
             for (const char of missing) {
-                const percent = Math.round((completed / missing.length) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-                statusText.textContent = `Batch Generating: ${completed + 1} / ${missing.length}`;
-                charNameText.textContent = `Current: ${char.name}`;
-                nodeStatus.textContent = "Queuing...";
-                
-                taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
-                taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-
+                statusText.textContent = `Queuing ${jobs.length + 1} / ${missing.length}…`;
                 try {
                     const genResp = await fetch(`/character/${char.slug}/generate`, {
                         method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace', 'client_id': clientId }),
+                        body: new URLSearchParams({ action: 'replace' }),
                         headers: { 'X-Requested-With': 'XMLHttpRequest' }
                     });
                     const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
-
-                    await waitForCompletion(currentPromptId);
-
-                    const finResp = await fetch(`/character/${char.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
-                        const img = document.getElementById(`img-${char.slug}`);
-                        const noImgSpan = document.getElementById(`no-img-${char.slug}`);
-                        if (img) {
-                            img.src = finData.image_url;
-                            img.classList.remove('d-none');
+                    if (genData.job_id) jobs.push({ item: char, jobId: genData.job_id });
+                } catch (err) {
+                    console.error(`Failed to queue ${char.name}:`, err);
                 }
+            }
+
+            // Phase 2: Poll all jobs concurrently; update UI as each finishes
+            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
+            progressBar.style.width = '0%';
+            progressBar.textContent = '0%';
+            statusText.textContent = `0 / ${jobs.length} done`;
+
+            let completed = 0;
+            await Promise.all(jobs.map(async ({ item, jobId }) => {
+                try {
+                    const jobResult = await waitForJob(jobId);
+                    if (jobResult.result && jobResult.result.image_url) {
+                        const img = document.getElementById(`img-${item.slug}`);
+                        const noImgSpan = document.getElementById(`no-img-${item.slug}`);
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                         if (noImgSpan) noImgSpan.classList.add('d-none');
                     }
                 } catch (err) {
-                    console.error(`Failed for ${char.name}:`, err);
+                    console.error(`Failed for ${item.name}:`, err);
                 }
                 completed++;
-            }
+                const pct = Math.round((completed / jobs.length) * 100);
+                progressBar.style.width = `${pct}%`;
+                progressBar.textContent = `${pct}%`;
+                statusText.textContent = `${completed} / ${jobs.length} done`;
+            }));
 
             progressBar.style.width = '100%';
             progressBar.textContent = '100%';
-            statusText.textContent = "Batch Complete!";
-            charNameText.textContent = "";
-            nodeStatus.textContent = "Done";
-            stepProgressText.textContent = "";
+            statusText.textContent = 'Batch Complete!';
+            charNameText.textContent = '';
+            nodeStatus.textContent = 'Done';
+            stepProgressText.textContent = '';
             taskProgressBar.style.width = '0%';
             taskProgressBar.textContent = '';
             batchBtn.disabled = false;
             regenAllBtn.disabled = false;
-            setTimeout(() => { container.classList.add('d-none'); }, 5000);
+            setTimeout(() => container.classList.add('d-none'), 5000);
         }
 
         batchBtn.addEventListener('click', async () => {

templates/layout.html

@@ -6,7 +6,7 @@
     <title>GAZE</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
 </head>
@@ -29,6 +29,12 @@
                 <a href="/gallery" class="btn btn-sm btn-outline-light">Gallery</a>
                 <a href="/settings" class="btn btn-sm btn-outline-light">Settings</a>
                 <div class="vr mx-1 d-none d-lg-block"></div>
+                <!-- Queue indicator -->
+                <button id="queue-btn" class="btn btn-sm queue-btn" data-bs-toggle="modal" data-bs-target="#queueModal" title="Generation Queue">
+                    <span class="queue-icon">⏳</span>
+                    <span id="queue-count-badge" class="queue-badge d-none">0</span>
+                </button>
+                <div class="vr mx-1 d-none d-lg-block"></div>
                 <!-- Service status indicators -->
                 <span id="status-comfyui" class="service-status" title="ComfyUI" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="ComfyUI: checking…">
                     <span class="status-dot status-checking"></span>
@@ -94,6 +100,31 @@
   </div>
 </div>
 
+<!-- Generation Queue Modal -->
+<div class="modal fade" id="queueModal" tabindex="-1">
+  <div class="modal-dialog modal-dialog-centered modal-lg">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">
+          Generation Queue
+          <span id="queue-modal-count" class="badge bg-secondary ms-2">0</span>
+        </h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+      </div>
+      <div class="modal-body p-0">
+        <div id="queue-empty-msg" class="text-center text-muted py-4">
+          <p class="mb-0">No jobs in queue.</p>
+        </div>
+        <ul id="queue-job-list" class="list-group list-group-flush d-none"></ul>
+      </div>
+      <div class="modal-footer">
+        <small class="text-muted me-auto">Jobs are processed sequentially. Close this window to continue browsing.</small>
+        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
@@ -339,6 +370,148 @@
         });
     })();
     </script>
+    <script>
+    // ---- Generation Queue UI ----
+    (function() {
+        const badge = document.getElementById('queue-count-badge');
+        const modalCount = document.getElementById('queue-modal-count');
+        const jobList = document.getElementById('queue-job-list');
+        const emptyMsg = document.getElementById('queue-empty-msg');
+
+        const STATUS_LABELS = {
+            pending: { text: 'Pending', cls: 'text-muted' },
+            processing: { text: 'Generating…', cls: 'text-warning' },
+            paused: { text: 'Paused', cls: 'text-secondary' },
+            done: { text: 'Done', cls: 'text-success' },
+            failed: { text: 'Failed', cls: 'text-danger' },
+            removed: { text: 'Removed', cls: 'text-muted' },
+        };
+
+        function renderQueue(jobs) {
+            const activeJobs = jobs.filter(j => !['done', 'failed', 'removed'].includes(j.status));
+            const count = activeJobs.length;
+
+            // Update badge
+            if (count > 0) {
+                badge.textContent = count;
+                badge.classList.remove('d-none');
+                document.getElementById('queue-btn').classList.add('queue-btn-active');
+            } else {
+                badge.classList.add('d-none');
+                document.getElementById('queue-btn').classList.remove('queue-btn-active');
+            }
+
+            // Update modal count
+            if (modalCount) modalCount.textContent = jobs.length;
+
+            // Render job list
+            if (!jobList) return;
+            if (jobs.length === 0) {
+                jobList.classList.add('d-none');
+                if (emptyMsg) emptyMsg.classList.remove('d-none');
+                return;
+            }
+            jobList.classList.remove('d-none');
+            if (emptyMsg) emptyMsg.classList.add('d-none');
+
+            jobList.innerHTML = '';
+            jobs.forEach(job => {
+                const li = document.createElement('li');
+                li.className = 'list-group-item d-flex align-items-center gap-2 py-2';
+                li.id = `queue-job-${job.id}`;
+
+                const statusInfo = STATUS_LABELS[job.status] || { text: job.status, cls: 'text-muted' };
+
+                // Status indicator
+                const statusDot = document.createElement('span');
+                statusDot.className = `queue-status-dot queue-status-${job.status}`;
+                li.appendChild(statusDot);
+
+                // Label
+                const label = document.createElement('span');
+                label.className = 'flex-grow-1 small';
+                label.textContent = job.label;
+                li.appendChild(label);
+
+                // Status text
+                const statusText = document.createElement('span');
+                statusText.className = `small ${statusInfo.cls}`;
+                statusText.textContent = statusInfo.text;
+                if (job.status === 'failed' && job.error) {
+                    statusText.title = job.error;
+                    statusText.style.cursor = 'help';
+                }
+                li.appendChild(statusText);
+
+                // Action buttons
+                const btnGroup = document.createElement('div');
+                btnGroup.className = 'd-flex gap-1';
+
+                if (job.status === 'pending') {
+                    const pauseBtn = document.createElement('button');
+                    pauseBtn.className = 'btn btn-xs btn-outline-secondary';
+                    pauseBtn.textContent = '⏸';
+                    pauseBtn.title = 'Pause';
+                    pauseBtn.onclick = () => queuePause(job.id);
+                    btnGroup.appendChild(pauseBtn);
+                }
+                if (job.status === 'paused') {
+                    const resumeBtn = document.createElement('button');
+                    resumeBtn.className = 'btn btn-xs btn-outline-success';
+                    resumeBtn.textContent = '▶';
+                    resumeBtn.title = 'Resume';
+                    resumeBtn.onclick = () => queuePause(job.id);
+                    btnGroup.appendChild(resumeBtn);
+                }
+                if (['pending', 'paused', 'failed'].includes(job.status)) {
+                    const removeBtn = document.createElement('button');
+                    removeBtn.className = 'btn btn-xs btn-outline-danger';
+                    removeBtn.textContent = '✕';
+                    removeBtn.title = 'Remove';
+                    removeBtn.onclick = () => queueRemove(job.id);
+                    btnGroup.appendChild(removeBtn);
+                }
+
+                li.appendChild(btnGroup);
+                jobList.appendChild(li);
+            });
+        }
+
+        async function fetchQueue() {
+            try {
+                const resp = await fetch('/api/queue');
+                const data = await resp.json();
+                renderQueue(data.jobs || []);
+            } catch (e) {}
+        }
+
+        async function queueRemove(jobId) {
+            try {
+                await fetch(`/api/queue/${jobId}/remove`, { method: 'POST' });
+                fetchQueue();
+            } catch (e) {}
+        }
+
+        async function queuePause(jobId) {
+            try {
+                await fetch(`/api/queue/${jobId}/pause`, { method: 'POST' });
+                fetchQueue();
+            } catch (e) {}
+        }
+
+        // Poll queue every 2 seconds
+        document.addEventListener('DOMContentLoaded', () => {
+            fetchQueue();
+            setInterval(fetchQueue, 2000);
+
+            // Refresh when modal opens
+            const queueModal = document.getElementById('queueModal');
+            if (queueModal) {
+                queueModal.addEventListener('show.bs.modal', fetchQueue);
+            }
+        });
+    })();
+    </script>
     {% block scripts %}{% endblock %}
 </body>
 </html>

templates/looks/detail.html

@@ -239,45 +239,20 @@
         const previewCard = document.getElementById('preview-card');
         const previewImg = document.getElementById('preview-img');
 
-        const clientId = 'look_detail_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
+        let currentJobId = null;
 
-        const nodeNames = {
-            "3": "Sampling", "11": "Face Detailing", "13": "Hand Detailing",
-            "4": "Loading Models", "16": "Look LoRA", "17": "Outfit LoRA",
-            "18": "Action LoRA", "19": "Style/Detailer LoRA",
-            "8": "Decoding Image", "9": "Saving Image"
-        };
-
-        let currentPromptId = null;
-        let resolveCompletion = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            if (msg.type === 'progress' && msg.data.prompt_id === currentPromptId) {
-                const percent = Math.round((msg.data.value / msg.data.max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            } else if (msg.type === 'executing' && msg.data.prompt_id === currentPromptId) {
-                if (msg.data.node === null) {
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    progressLabel.textContent = nodeNames[msg.data.node] || 'Processing...';
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => { clearInterval(pollInterval); resolve(); };
-                resolveCompletion = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') checkResolve();
-                    } catch (err) { console.error('Polling error:', err); }
-                }, 2000);
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') progressLabel.textContent = 'Generating…';
+                        else progressLabel.textContent = 'Queued…';
+                    } catch (err) { console.error('Poll error:', err); }
+                }, 1500);
             });
         }
 
@@ -285,63 +260,30 @@
             const submitter = e.submitter;
             if (!submitter || submitter.value !== 'preview') return;
             e.preventDefault();
-
             const formData = new FormData(form);
             formData.append('action', 'preview');
-            formData.append('client_id', clientId);
-
             progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
-
+            progressBar.style.width = '100%'; progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
             try {
                 const response = await fetch(form.getAttribute('action'), {
-                    method: 'POST', body: formData,
-                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
+                    method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                 });
                 const data = await response.json();
                 if (data.error) { alert('Error: ' + data.error); progressContainer.classList.add('d-none'); return; }
-
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-
-                await waitForCompletion(currentPromptId);
-                finalizeGeneration(currentPromptId);
-                currentPromptId = null;
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
-        });
-
-        async function finalizeGeneration(promptId) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/look/{{ look.slug }}/finalize_generation/${promptId}`;
-            try {
-                const response = await fetch(url, {
-                    method: 'POST', body: new FormData()
-                });
-                const data = await response.json();
-                if (data.success) {
-                    previewImg.src = data.image_url;
+                currentJobId = data.job_id;
+                const jobResult = await waitForJob(currentJobId);
+                currentJobId = null;
+                if (jobResult.result && jobResult.result.image_url) {
+                    previewImg.src = jobResult.result.image_url;
                     if (previewCard) previewCard.classList.remove('d-none');
                     const replaceBtn = document.getElementById('replace-cover-btn');
                     if (replaceBtn) replaceBtn.disabled = false;
-                } else {
-                    alert('Save failed: ' + data.error);
-                }
-            } catch (err) {
-                console.error(err);
-                alert('Finalize request failed');
-            } finally {
-                progressContainer.classList.add('d-none');
-            }
                 }
+            } catch (err) { console.error(err); alert('Generation failed: ' + err.message); }
+            finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
+        });
     });
 
     function showImage(src) {

templates/looks/index.html

@@ -47,7 +47,7 @@
     </div>
 </div>
 
-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
     {% for look in looks %}
     <div class="col" id="card-{{ look.slug }}">
         <div class="card h-100 character-card" onclick="window.location.href='{{ url_for('look_detail', slug=look.slug) }}'">
@@ -105,56 +105,20 @@
         const itemNameText = document.getElementById('current-item-name');
         const stepProgressText = document.getElementById('current-step-progress');
 
-        const clientId = 'looks_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
+        let currentJobId = null;
 
-        const nodeNames = {
-            "3": "Sampling", "11": "Face Detailing", "13": "Hand Detailing",
-            "4": "Loading Models", "16": "Look LoRA", "17": "Outfit LoRA",
-            "18": "Action LoRA", "19": "Style/Detailer LoRA",
-            "8": "Decoding", "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const percent = Math.round((msg.data.value / msg.data.max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            } else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || 'Processing...';
-                    stepProgressText.textContent = "";
-                    if (nodeId !== "3") {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => { clearInterval(pollInterval); resolve(); };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') checkResolve();
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                     } catch (err) {}
-                }, 2000);
+                }, 1500);
             });
         }
 
@@ -179,40 +143,32 @@
                 progressBar.textContent = `${percent}%`;
                 statusText.textContent = `Batch Generating Looks: ${completed + 1} / ${missing.length}`;
                 itemNameText.textContent = `Current: ${item.name}`;
-                nodeStatus.textContent = "Queuing...";
+                nodeStatus.textContent = "Queuing…";
                 taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
+                taskProgressBar.textContent = '';
                 taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
 
                 try {
-                    // Looks are self-contained — no character_slug passed
                     const genResp = await fetch(`/look/${item.slug}/generate`, {
                         method: 'POST',
-                        body: new URLSearchParams({
-                            'action': 'replace',
-                            'client_id': clientId
-                        }),
+                        body: new URLSearchParams({ 'action': 'replace' }),
                         headers: { 'X-Requested-With': 'XMLHttpRequest' }
                     });
                     const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
+                    currentJobId = genData.job_id;
 
-                    await waitForCompletion(currentPromptId);
+                    const jobResult = await waitForJob(currentJobId);
+                    currentJobId = null;
 
-                    const finResp = await fetch(`/look/${item.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
+                    if (jobResult.result && jobResult.result.image_url) {
                         const img = document.getElementById(`img-${item.slug}`);
                         const noImgSpan = document.getElementById(`no-img-${item.slug}`);
-                        if (img) { img.src = finData.image_url; img.classList.remove('d-none'); }
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                         if (noImgSpan) noImgSpan.classList.add('d-none');
                     }
                 } catch (err) {
                     console.error(`Failed for ${item.name}:`, err);
+                    currentJobId = null;
                 }
                 completed++;
             }

templates/outfits/detail.html

@@ -272,82 +272,28 @@
         const previewCard = document.getElementById('preview-card');
         const previewImg = document.getElementById('preview-img');
         
-        // Generate a unique client ID
-        const clientId = 'outfit_detail_' + Math.random().toString(36).substring(2, 15);
-
-        // ComfyUI WebSocket
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding Image",
-            "9": "Saving Image"
-        };
-
-        let currentPromptId = null;
+        let currentJobId = null;
         let currentAction = null;
 
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const queueRemaining = msg.data.status.exec_info.queue_remaining;
-                    if (queueRemaining > 0) {
-                        progressLabel.textContent = `Queue position: ${queueRemaining}`;
-                    }
-                }
-            }
-            else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    // Execution finished via WebSocket
-                    console.log('Finished via WebSocket');
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    const nodeName = nodeNames[nodeId] || `Processing...`;
-                    progressLabel.textContent = nodeName;
-                }
-            }
-        });
-
-        let resolveCompletion = null;
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveCompletion = checkResolve;
-                
-                // Fallback polling in case WebSocket is blocked (403)
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') {
-                            console.log('Finished via Polling');
-                            checkResolve();
+                        if (data.status === 'done') {
+                            clearInterval(poll);
+                            resolve(data);
+                        } else if (data.status === 'failed' || data.status === 'removed') {
+                            clearInterval(poll);
+                            reject(new Error(data.error || 'Job failed'));
+                        } else if (data.status === 'processing') {
+                            progressLabel.textContent = 'Generating…';
+                        } else {
+                            progressLabel.textContent = 'Queued…';
                         }
-                    } catch (err) { console.error('Polling error:', err); }
-                }, 2000);
+                    } catch (err) { console.error('Poll error:', err); }
+                }, 1500);
             });
         }
 
@@ -363,21 +309,19 @@
             currentAction = submitter.value;
             const formData = new FormData(form);
             formData.append('action', currentAction);
-            formData.append('client_id', clientId);
             
             // UI Reset
             progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
             
             try {
                 const response = await fetch(form.getAttribute('action'), {
                     method: 'POST',
                     body: formData,
-                    headers: {
-                        'X-Requested-With': 'XMLHttpRequest'
-                    }
+                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
                 });
                 
                 const data = await response.json();
@@ -388,71 +332,33 @@
                     return;
                 }
                 
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+                currentJobId = data.job_id;
+                progressLabel.textContent = 'Queued…';
 
-                // Wait for completion (WebSocket or Polling)
-                await waitForCompletion(currentPromptId);
+                const jobResult = await waitForJob(currentJobId);
+                currentJobId = null;
 
-                // Finalize
-                finalizeGeneration(currentPromptId, currentAction);
-                currentPromptId = null;
-                
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
-        });
-        
-        async function finalizeGeneration(promptId, action) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/outfit/{{ outfit.slug }}/finalize_generation/${promptId}`;
-            const formData = new FormData();
-            formData.append('action', 'preview');  // Always save as preview
-            
-            try {
-                const response = await fetch(url, {
-                    method: 'POST',
-                    body: formData
-                });
-                const data = await response.json();
-                
-                if (data.success) {
-                    // Update preview image
-                    previewImg.src = data.image_url;
+                if (jobResult.result && jobResult.result.image_url) {
+                    previewImg.src = jobResult.result.image_url;
                     if (previewCard) previewCard.classList.remove('d-none');
-                    
-                    // Enable the replace cover button if it exists
                     const replaceBtn = document.getElementById('replace-cover-btn');
-                    if (replaceBtn) {
-                        replaceBtn.disabled = false;
-                        // Check if there's a form to update
-                        const form = replaceBtn.closest('form');
-                        if (form) {
-                            form.action = `/outfit/{{ outfit.slug }}/replace_cover_from_preview`;
-                        }
-                    }
-                } else {
-                    alert('Save failed: ' + data.error);
+                    if (replaceBtn) replaceBtn.disabled = false;
                 }
+                
             } catch (err) {
                 console.error(err);
-                alert('Finalize request failed');
+                alert('Generation failed: ' + err.message);
             } finally {
                 progressContainer.classList.add('d-none');
+                progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
             }
-        }
+        });
 
         // Batch: Generate All Characters
         const allCharacters = [
             {% for char in characters %}{ slug: "{{ char.slug }}", name: {{ char.name | tojson }} },
             {% endfor %}
         ];
-        const finalizeBaseUrl = '/outfit/{{ outfit.slug }}/finalize_generation';
         let stopBatch = false;
         const generateAllBtn = document.getElementById('generate-all-btn');
         const stopAllBtn = document.getElementById('stop-all-btn');
@@ -497,35 +403,31 @@
                 genForm.querySelectorAll('input[name="include_field"]:checked').forEach(cb => fd.append('include_field', cb.value));
                 fd.append('character_slug', char.slug);
                 fd.append('action', 'preview');
-                fd.append('client_id', clientId);
                 try {
                     progressContainer.classList.remove('d-none');
-                    progressBar.style.width = '0%';
-                    progressBar.textContent = '0%';
-                    progressLabel.textContent = `${char.name}: Starting...`;
+                    progressBar.style.width = '100%';
+                    progressBar.textContent = '';
+                    progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+                    progressLabel.textContent = `${char.name}: Queuing…`;
                     const resp = await fetch(genForm.getAttribute('action'), {
                         method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                     });
                     const data = await resp.json();
                     if (data.error) { console.error(`Error for ${char.name}:`, data.error); progressContainer.classList.add('d-none'); continue; }
-                    currentPromptId = data.prompt_id;
-                    await waitForCompletion(currentPromptId);
-                    progressLabel.textContent = 'Saving image...';
-                    const finalFD = new FormData();
-                    finalFD.append('action', 'preview');
-                    const finalResp = await fetch(`${finalizeBaseUrl}/${currentPromptId}`, { method: 'POST', body: finalFD });
-                    const finalData = await finalResp.json();
-                    if (finalData.success) {
-                        addToPreviewGallery(finalData.image_url, char.name);
-                        previewImg.src = finalData.image_url;
+                    currentJobId = data.job_id;
+                    const jobResult = await waitForJob(currentJobId);
+                    currentJobId = null;
+                    if (jobResult.result && jobResult.result.image_url) {
+                        addToPreviewGallery(jobResult.result.image_url, char.name);
+                        previewImg.src = jobResult.result.image_url;
                         if (previewCard) previewCard.classList.remove('d-none');
                     }
-                    currentPromptId = null;
                 } catch (err) {
                     console.error(`Failed for ${char.name}:`, err);
-                    currentPromptId = null;
+                    currentJobId = null;
                 } finally {
                     progressContainer.classList.add('d-none');
+                    progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
                 }
             }
             batchBar.style.width = '100%';

templates/outfits/index.html

@@ -47,7 +47,7 @@
     </div>
 </div>
 
-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
     {% for outfit in outfits %}
     <div class="col" id="card-{{ outfit.slug }}">
         <div class="card h-100 character-card" onclick="window.location.href='/outfit/{{ outfit.slug }}'">
@@ -102,71 +102,18 @@
         const itemNameText = document.getElementById('current-item-name');
         const stepProgressText = document.getElementById('current-step-progress');
         
-        const clientId = 'outfits_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding",
-            "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || `Processing...`;
-                    stepProgressText.textContent = "";
-                    if (nodeId !== "3") {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') {
-                            checkResolve();
-                        }
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                     } catch (err) {}
-                }, 2000);
+                }, 1500);
             });
         }
 
@@ -184,66 +131,65 @@
             regenAllBtn.disabled = true;
             container.classList.remove('d-none');
 
-            let completed = 0;
+            // Phase 1: Queue all jobs upfront
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            nodeStatus.textContent = 'Queuing…';
+
+            const jobs = [];
             for (const item of missing) {
-                const percent = Math.round((completed / missing.length) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-                statusText.textContent = `Batch Generating Outfits: ${completed + 1} / ${missing.length}`;
-                itemNameText.textContent = `Current: ${item.name}`;
-                nodeStatus.textContent = "Queuing...";
-                
-                taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
-                taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-
+                statusText.textContent = `Queuing ${jobs.length + 1} / ${missing.length}…`;
                 try {
                     const genResp = await fetch(`/outfit/${item.slug}/generate`, {
                         method: 'POST',
-                        body: new URLSearchParams({ 
-                            'action': 'replace', 
-                            'client_id': clientId,
-                            'character_slug': '__random__' 
-                        }),
+                        body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
                         headers: { 'X-Requested-With': 'XMLHttpRequest' }
                     });
                     const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
+                    if (genData.job_id) jobs.push({ item, jobId: genData.job_id });
+                } catch (err) {
+                    console.error(`Failed to queue ${item.name}:`, err);
+                }
+            }
 
-                    await waitForCompletion(currentPromptId);
+            // Phase 2: Poll all concurrently
+            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
+            progressBar.style.width = '0%';
+            progressBar.textContent = '0%';
+            statusText.textContent = `0 / ${jobs.length} done`;
 
-                    const finResp = await fetch(`/outfit/${item.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
+            let completed = 0;
+            await Promise.all(jobs.map(async ({ item, jobId }) => {
+                try {
+                    const jobResult = await waitForJob(jobId);
+                    if (jobResult.result && jobResult.result.image_url) {
                         const img = document.getElementById(`img-${item.slug}`);
                         const noImgSpan = document.getElementById(`no-img-${item.slug}`);
-                        if (img) {
-                            img.src = finData.image_url;
-                            img.classList.remove('d-none');
-                        }
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                         if (noImgSpan) noImgSpan.classList.add('d-none');
                     }
                 } catch (err) {
                     console.error(`Failed for ${item.name}:`, err);
                 }
                 completed++;
-            }
+                const pct = Math.round((completed / jobs.length) * 100);
+                progressBar.style.width = `${pct}%`;
+                progressBar.textContent = `${pct}%`;
+                statusText.textContent = `${completed} / ${jobs.length} done`;
+            }));
 
             progressBar.style.width = '100%';
             progressBar.textContent = '100%';
-            statusText.textContent = "Batch Outfit Generation Complete!";
-            itemNameText.textContent = "";
-            nodeStatus.textContent = "Done";
-            stepProgressText.textContent = "";
+            statusText.textContent = 'Batch Outfit Generation Complete!';
+            itemNameText.textContent = '';
+            nodeStatus.textContent = 'Done';
+            stepProgressText.textContent = '';
             taskProgressBar.style.width = '0%';
             taskProgressBar.textContent = '';
             batchBtn.disabled = false;
             regenAllBtn.disabled = false;
-            setTimeout(() => { container.classList.add('d-none'); }, 5000);
+            setTimeout(() => container.classList.add('d-none'), 5000);
         }
 
         batchBtn.addEventListener('click', async () => {

templates/partials/strengths_gallery.html

@@ -101,11 +101,10 @@
 
   const SG_CAT  = {{ sg_category | tojson }};
   const SG_SLUG = {{ sg_entity.slug | tojson }};
-  const SG_WS   = {{ COMFYUI_WS_URL | tojson }};
-  const SG_CLIENT_ID = 'sg_' + Math.random().toString(36).slice(2, 10);
 
   let sgRunning = false;
   let sgShouldStop = false;
+  let sgQueuedJobs = []; // track all queued job IDs so stop can cancel them
 
   // ---- helpers ----
 
@@ -241,52 +240,23 @@
     sgHighlightBounds();
   }
 
-  // ---- WebSocket wait ----
+  // ---- Job queue wait ----
 
-  function sgWaitForCompletion(promptId) {
+  function sgWaitForJob(jobId) {
     return new Promise((resolve, reject) => {
-      let ws;
+      const poll = setInterval(async () => {
         try {
-        ws = new WebSocket(`${SG_WS}?clientId=${SG_CLIENT_ID}`);
-      } catch (e) {
-        // Fall back to polling if WS unavailable
-        sgPollUntilDone(promptId).then(resolve).catch(reject);
-        return;
+          const resp = await fetch(`/api/queue/${jobId}/status`);
+          const data = await resp.json();
+          if (data.status === 'done') { clearInterval(poll); resolve(data); }
+          else if (data.status === 'failed' || data.status === 'removed') {
+            clearInterval(poll); reject(new Error(data.error || 'Job failed'));
           }
-
-      const timeout = setTimeout(() => {
-        ws.close();
-        sgPollUntilDone(promptId).then(resolve).catch(reject);
-      }, 120000);
-
-      ws.onmessage = (event) => {
-        let msg;
-        try { msg = JSON.parse(event.data); } catch { return; }
-        if (msg.type === 'executing' && msg.data && msg.data.prompt_id === promptId) {
-          if (msg.data.node === null) {
-            clearTimeout(timeout);
-            ws.close();
-            resolve();
-          }
-        }
-      };
-
-      ws.onerror = () => {
-        clearTimeout(timeout);
-        sgPollUntilDone(promptId).then(resolve).catch(reject);
-      };
+        } catch (err) { console.error('[Strengths] poll error:', err); }
+      }, 1500);
     });
   }
 
-  async function sgPollUntilDone(promptId) {
-    for (let i = 0; i < 120; i++) {
-      await new Promise(r => setTimeout(r, 2000));
-      const r = await fetch(`/check_status/${promptId}`);
-      const d = await r.json();
-      if (d.status === 'complete' || d.status === 'finished' || d.done) return;
-    }
-  }
-
   // ---- main flow ----
 
   async function sgClearImages() {
@@ -310,64 +280,65 @@
     const steps = sgBuildSteps(min, max, sgGetInterval());
     if (!steps.length) return;
 
-    // Clear any previous set before starting a new one
     await sgClearImages();
 
     sgRunning = true;
     sgShouldStop = false;
+    sgQueuedJobs = [];
     document.getElementById('sg-btn-run').classList.add('d-none');
     document.getElementById('sg-btn-stop').classList.remove('d-none');
     document.getElementById('sg-progress').classList.remove('d-none');
 
-    for (let i = 0; i < steps.length; i++) {
-      if (sgShouldStop) break;
-
-      const sv = steps[i];
-      const pct = Math.round(((i) / steps.length) * 100);
-      document.getElementById('sg-progress-bar').style.width = pct + '%';
-      document.getElementById('sg-progress-label').textContent =
-        `${i} / ${steps.length} \u2014 weight: ${sv}`;
-
-      try {
-        // Queue one generation
-        // Pick up the character currently selected on this detail page (if any)
     const charSelect = document.getElementById('character_select');
     const charSlug = charSelect ? charSelect.value : '';
-        const formData = new URLSearchParams({
-          strength_value: sv,
-          seed: seed,
-          client_id: SG_CLIENT_ID,
-          character_slug: charSlug,
-        });
+
+    // Phase 1: Queue all steps upfront so generation continues even if the page is navigated away
+    document.getElementById('sg-progress-bar').style.width = '100%';
+    document.getElementById('sg-progress-bar').classList.add('progress-bar-striped', 'progress-bar-animated');
+    for (let i = 0; i < steps.length; i++) {
+      if (sgShouldStop) break;
+      const sv = steps[i];
+      document.getElementById('sg-progress-label').textContent =
+        `Queuing ${i + 1} / ${steps.length} \u2014 weight: ${sv}`;
+      try {
+        const formData = new URLSearchParams({ strength_value: sv, seed, character_slug: charSlug });
         const queueResp = await fetch(`/strengths/${SG_CAT}/${SG_SLUG}/generate`, {
           method: 'POST',
           headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/x-www-form-urlencoded' },
           body: formData,
         });
         const queueData = await queueResp.json();
-        if (!queueData.prompt_id) throw new Error('No prompt_id returned');
+        if (!queueData.job_id) throw new Error('No job_id returned');
+        sgQueuedJobs.push({ jobId: queueData.job_id, sv });
+      } catch (err) {
+        console.error('[Strengths] queue error:', sv, err);
+      }
+    }
 
-        await sgWaitForCompletion(queueData.prompt_id);
+    // Phase 2: Poll all jobs concurrently; show results as each finishes
+    document.getElementById('sg-progress-bar').classList.remove('progress-bar-striped', 'progress-bar-animated');
+    document.getElementById('sg-progress-bar').style.width = '0%';
 
-        // Finalize
-        const finData = new URLSearchParams({ strength_value: sv, seed: seed });
-        const finResp = await fetch(`/strengths/${SG_CAT}/${SG_SLUG}/finalize/${queueData.prompt_id}`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-          body: finData,
-        });
-        const finJson = await finResp.json();
-        if (finJson.success && finJson.image_url) {
-          sgAddImage(finJson.image_url, sv);
+    let completed = 0;
+    await Promise.all(sgQueuedJobs.map(async ({ jobId, sv }) => {
+      try {
+        const jobResult = await sgWaitForJob(jobId);
+        if (jobResult.result && jobResult.result.image_url) {
+          sgAddImage(jobResult.result.image_url, sv);
         }
       } catch (err) {
-        console.error('[Strengths] step error:', sv, err);
-      }
+        console.error('[Strengths] job error:', sv, err);
       }
+      completed++;
+      const pct = Math.round((completed / sgQueuedJobs.length) * 100);
+      document.getElementById('sg-progress-bar').style.width = pct + '%';
+      document.getElementById('sg-progress-label').textContent =
+        `${completed} / ${sgQueuedJobs.length} done`;
+    }));
 
     document.getElementById('sg-progress-bar').style.width = '100%';
     document.getElementById('sg-progress-label').textContent =
-      `Done \u2014 ${steps.length} images generated`;
+      `Done \u2014 ${sgQueuedJobs.length} images generated`;
     setTimeout(() => document.getElementById('sg-progress').classList.add('d-none'), 3000);
 
     document.getElementById('sg-btn-stop').classList.add('d-none');
@@ -377,6 +348,10 @@
 
   function sgStop() {
     sgShouldStop = true;
+    // Cancel any pending (not yet processing) queued jobs
+    sgQueuedJobs.forEach(({ jobId }) => {
+      fetch(`/api/queue/${jobId}/remove`, { method: 'POST' }).catch(() => {});
+    });
     document.getElementById('sg-btn-stop').classList.add('d-none');
     document.getElementById('sg-btn-run').classList.remove('d-none');
   }

templates/scenes/detail.html

@@ -292,173 +292,57 @@
             }
         });
 
-        // Generate a unique client ID
-        const clientId = 'scene_detail_' + Math.random().toString(36).substring(2, 15);
+        let currentJobId = null;
 
-        // ComfyUI WebSocket
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding Image",
-            "9": "Saving Image"
-        };
-
-        let currentPromptId = null;
-        let resolveCompletion = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const queueRemaining = msg.data.status.exec_info.queue_remaining;
-                    if (queueRemaining > 0) {
-                        progressLabel.textContent = `Queue position: ${queueRemaining}`;
-                    }
-                }
-            }
-            else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    // Execution finished via WebSocket
-                    console.log('Finished via WebSocket');
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    const nodeName = nodeNames[nodeId] || `Processing...`;
-                    progressLabel.textContent = nodeName;
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveCompletion = checkResolve;
-                
-                // Fallback polling in case WebSocket is blocked (403)
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') {
-                            console.log('Finished via Polling');
-                            checkResolve();
-                        }
-                    } catch (err) { console.error('Polling error:', err); }
-                }, 2000);
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') progressLabel.textContent = 'Generating…';
+                        else progressLabel.textContent = 'Queued…';
+                    } catch (err) { console.error('Poll error:', err); }
+                }, 1500);
             });
         }
 
         form.addEventListener('submit', async (e) => {
             const submitter = e.submitter;
             if (!submitter || submitter.value !== 'preview') return;
-            
             e.preventDefault();
-            
             const formData = new FormData(form);
             formData.append('action', 'preview');
-            formData.append('client_id', clientId);
-            
             progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
-            
+            progressBar.style.width = '100%'; progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
             try {
                 const response = await fetch(form.getAttribute('action'), {
-                    method: 'POST',
-                    body: formData,
-                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
+                    method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                 });
-                
                 const data = await response.json();
-                if (data.error) {
-                    alert('Error: ' + data.error);
-                    progressContainer.classList.add('d-none');
-                    return;
-                }
-                
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                
-                // Wait for completion (WebSocket or Polling)
-                await waitForCompletion(currentPromptId);
-                
-                // Finalize
-                finalizeGeneration(currentPromptId);
-                currentPromptId = null;
-                
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
-        });
-        
-        async function finalizeGeneration(promptId) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/scene/{{ scene.slug }}/finalize_generation/${promptId}`;
-            const formData = new FormData();
-            formData.append('action', 'preview');
-            
-            try {
-                const response = await fetch(url, { method: 'POST', body: formData });
-                const data = await response.json();
-                
-                if (data.success) {
-                    // Update preview image
-                    previewImg.src = data.image_url;
+                if (data.error) { alert('Error: ' + data.error); progressContainer.classList.add('d-none'); return; }
+                currentJobId = data.job_id;
+                const jobResult = await waitForJob(currentJobId);
+                currentJobId = null;
+                if (jobResult.result && jobResult.result.image_url) {
+                    previewImg.src = jobResult.result.image_url;
                     if (previewCard) previewCard.classList.remove('d-none');
-                    
                     const replaceBtn = document.getElementById('replace-cover-btn');
-                    if (replaceBtn) {
-                        replaceBtn.disabled = false;
-                        const form = replaceBtn.closest('form');
-                        if (form) {
-                            form.action = `/scene/{{ scene.slug }}/replace_cover_from_preview`;
-                        }
-                    }
-                } else {
-                    alert('Save failed: ' + data.error);
-                }
-            } catch (err) {
-                console.error(err);
-                alert('Finalize request failed');
-            } finally {
-                progressContainer.classList.add('d-none');
-            }
+                    if (replaceBtn) replaceBtn.disabled = false;
                 }
+            } catch (err) { console.error(err); alert('Generation failed: ' + err.message); }
+            finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
+        });
 
         // Batch: Generate All Characters
         const allCharacters = [
             {% for char in characters %}{ slug: "{{ char.slug }}", name: {{ char.name | tojson }} },
             {% endfor %}
         ];
-        const finalizeBaseUrl = '/scene/{{ scene.slug }}/finalize_generation';
 
         let stopBatch = false;
         const generateAllBtn = document.getElementById('generate-all-btn');
@@ -494,54 +378,37 @@
             stopAllBtn.classList.remove('d-none');
             batchProgress.classList.remove('d-none');
             bootstrap.Tab.getOrCreateInstance(document.getElementById('previews-tab')).show();
-
             for (let i = 0; i < allCharacters.length; i++) {
                 if (stopBatch) break;
                 const char = allCharacters[i];
                 batchBar.style.width = `${Math.round((i / allCharacters.length) * 100)}%`;
                 batchLabel.textContent = `Generating ${char.name} (${i + 1} / ${allCharacters.length})`;
-
                 const genForm = document.getElementById('generate-form');
                 const fd = new FormData();
                 genForm.querySelectorAll('input[name="include_field"]:checked').forEach(cb => fd.append('include_field', cb.value));
                 fd.append('character_slug', char.slug);
                 fd.append('action', 'preview');
-                fd.append('client_id', clientId);
-
                 try {
                     progressContainer.classList.remove('d-none');
-                    progressBar.style.width = '0%';
-                    progressBar.textContent = '0%';
-                    progressLabel.textContent = `${char.name}: Starting...`;
-
+                    progressBar.style.width = '100%'; progressBar.textContent = '';
+                    progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+                    progressLabel.textContent = `${char.name}: Queuing…`;
                     const resp = await fetch(genForm.getAttribute('action'), {
                         method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                     });
                     const data = await resp.json();
                     if (data.error) { console.error(`Error for ${char.name}:`, data.error); progressContainer.classList.add('d-none'); continue; }
-
-                    currentPromptId = data.prompt_id;
-                    await waitForCompletion(currentPromptId);
-
-                    progressLabel.textContent = 'Saving image...';
-                    const finalFD = new FormData();
-                    finalFD.append('action', 'preview');
-                    const finalResp = await fetch(`${finalizeBaseUrl}/${currentPromptId}`, { method: 'POST', body: finalFD });
-                    const finalData = await finalResp.json();
-                    if (finalData.success) {
-                        addToPreviewGallery(finalData.image_url, char.name);
-                        previewImg.src = finalData.image_url;
+                    currentJobId = data.job_id;
+                    const jobResult = await waitForJob(currentJobId);
+                    currentJobId = null;
+                    if (jobResult.result && jobResult.result.image_url) {
+                        addToPreviewGallery(jobResult.result.image_url, char.name);
+                        previewImg.src = jobResult.result.image_url;
                         if (previewCard) previewCard.classList.remove('d-none');
                     }
-                    currentPromptId = null;
-                } catch (err) {
-                    console.error(`Failed for ${char.name}:`, err);
-                    currentPromptId = null;
-                } finally {
-                    progressContainer.classList.add('d-none');
+                } catch (err) { console.error(`Failed for ${char.name}:`, err); currentJobId = null; }
+                finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
             }
-            }
-
             batchBar.style.width = '100%';
             batchLabel.textContent = stopBatch ? 'Stopped.' : 'Complete!';
             generateAllBtn.disabled = false;

templates/scenes/index.html

@@ -47,7 +47,7 @@
     </div>
 </div>
 
-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
     {% for scene in scenes %}
     <div class="col" id="card-{{ scene.slug }}">
         <div class="card h-100 character-card" onclick="window.location.href='/scene/{{ scene.slug }}'">
@@ -102,71 +102,18 @@
         const sceneNameText = document.getElementById('current-scene-name');
         const stepProgressText = document.getElementById('current-step-progress');
         
-        const clientId = 'scenes_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding",
-            "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || `Processing...`;
-                    stepProgressText.textContent = "";
-                    if (nodeId !== "3") {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') {
-                            checkResolve();
-                        }
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                     } catch (err) {}
-                }, 2000);
+                }, 1500);
             });
         }
 
@@ -184,65 +131,64 @@
             regenAllBtn.disabled = true;
             container.classList.remove('d-none');
 
-            let completed = 0;
+            // Phase 1: Queue all jobs upfront
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            nodeStatus.textContent = 'Queuing…';
+
+            const jobs = [];
             for (const scene of missing) {
-                const percent = Math.round((completed / missing.length) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-                statusText.textContent = `Batch Generating Scenes: ${completed + 1} / ${missing.length}`;
-                sceneNameText.textContent = `Current: ${scene.name}`;
-                nodeStatus.textContent = "Queuing...";
-                
-                taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
-                taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-
+                statusText.textContent = `Queuing ${jobs.length + 1} / ${missing.length}…`;
                 try {
                     const genResp = await fetch(`/scene/${scene.slug}/generate`, {
                         method: 'POST',
-                        body: new URLSearchParams({ 
-                            'action': 'replace', 
-                            'client_id': clientId,
-                            'character_slug': '__random__' 
-                        }),
+                        body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
                         headers: { 'X-Requested-With': 'XMLHttpRequest' }
                     });
                     const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
-
-                    await waitForCompletion(currentPromptId);
-
-                    const finResp = await fetch(`/scene/${scene.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
-                        const img = document.getElementById(`img-${scene.slug}`);
-                        const noImgSpan = document.getElementById(`no-img-${scene.slug}`);
-                        if (img) {
-                            img.src = finData.image_url;
-                            img.classList.remove('d-none');
+                    if (genData.job_id) jobs.push({ item: scene, jobId: genData.job_id });
+                } catch (err) {
+                    console.error(`Failed to queue ${scene.name}:`, err);
                 }
+            }
+
+            // Phase 2: Poll all concurrently
+            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
+            progressBar.style.width = '0%';
+            progressBar.textContent = '0%';
+            statusText.textContent = `0 / ${jobs.length} done`;
+
+            let completed = 0;
+            await Promise.all(jobs.map(async ({ item, jobId }) => {
+                try {
+                    const jobResult = await waitForJob(jobId);
+                    if (jobResult.result && jobResult.result.image_url) {
+                        const img = document.getElementById(`img-${item.slug}`);
+                        const noImgSpan = document.getElementById(`no-img-${item.slug}`);
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                         if (noImgSpan) noImgSpan.classList.add('d-none');
                     }
                 } catch (err) {
-                    console.error(`Failed for ${scene.name}:`, err);
+                    console.error(`Failed for ${item.name}:`, err);
                 }
                 completed++;
-            }
+                const pct = Math.round((completed / jobs.length) * 100);
+                progressBar.style.width = `${pct}%`;
+                progressBar.textContent = `${pct}%`;
+                statusText.textContent = `${completed} / ${jobs.length} done`;
+            }));
 
             progressBar.style.width = '100%';
             progressBar.textContent = '100%';
-            statusText.textContent = "Batch Scene Generation Complete!";
-            sceneNameText.textContent = "";
-            nodeStatus.textContent = "Done";
-            stepProgressText.textContent = "";
+            statusText.textContent = 'Batch Scene Generation Complete!';
+            sceneNameText.textContent = '';
+            nodeStatus.textContent = 'Done';
+            stepProgressText.textContent = '';
             taskProgressBar.style.width = '0%';
             taskProgressBar.textContent = '';
             batchBtn.disabled = false;
-            setTimeout(() => { container.classList.add('d-none'); }, 5000);
+            setTimeout(() => container.classList.add('d-none'), 5000);
         }
 
         batchBtn.addEventListener('click', async () => {

templates/styles/detail.html

@@ -285,170 +285,59 @@
             }
         });
 
-        // Generate a unique client ID
-        const clientId = 'style_detail_' + Math.random().toString(36).substring(2, 15);
-
-        // ComfyUI WebSocket
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding Image",
-            "9": "Saving Image"
-        };
-
-        let currentPromptId = null;
+        let currentJobId = null;
         let currentAction = null;
 
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'status') {
-                if (!currentPromptId) {
-                    const queueRemaining = msg.data.status.exec_info.queue_remaining;
-                    if (queueRemaining > 0) {
-                        progressLabel.textContent = `Queue position: ${queueRemaining}`;
-                    }
-                }
-            }
-            else if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    // Execution finished via WebSocket
-                    console.log('Finished via WebSocket');
-                    if (resolveCompletion) resolveCompletion();
-                } else {
-                    const nodeName = nodeNames[nodeId] || `Processing...`;
-                    progressLabel.textContent = nodeName;
-                }
-            }
-        });
-
-        let resolveCompletion = null;
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveCompletion = checkResolve;
-                
-                // Fallback polling in case WebSocket is blocked (403)
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') {
-                            checkResolve();
-                        }
-                    } catch (err) { console.error('Polling error:', err); }
-                }, 2000);
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') progressLabel.textContent = 'Generating…';
+                        else progressLabel.textContent = 'Queued…';
+                    } catch (err) { console.error('Poll error:', err); }
+                }, 1500);
             });
         }
 
         form.addEventListener('submit', async (e) => {
             const submitter = e.submitter;
             if (!submitter || submitter.value !== 'preview') return;
-            
             e.preventDefault();
-            
             currentAction = submitter.value;
             const formData = new FormData(form);
             formData.append('action', currentAction);
-            formData.append('client_id', clientId);
-            
             progressContainer.classList.remove('d-none');
-            progressBar.style.width = '0%';
-            progressBar.textContent = '0%';
-            progressLabel.textContent = 'Starting...';
-            
+            progressBar.style.width = '100%'; progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            progressLabel.textContent = 'Queuing…';
             try {
                 const response = await fetch(form.getAttribute('action'), {
-                    method: 'POST',
-                    body: formData,
-                    headers: { 'X-Requested-With': 'XMLHttpRequest' }
+                    method: 'POST', body: formData, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                 });
-                
                 const data = await response.json();
-                if (data.error) {
-                    alert('Error: ' + data.error);
-                    progressContainer.classList.add('d-none');
-                    return;
-                }
-                
-                currentPromptId = data.prompt_id;
-                progressLabel.textContent = 'Queued...';
-                progressBar.style.width = '100%';
-                progressBar.textContent = 'Queued';
-                progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                
-                await waitForCompletion(currentPromptId);
-                finalizeGeneration(currentPromptId, currentAction);
-                currentPromptId = null;
-                
-            } catch (err) {
-                console.error(err);
-                alert('Request failed');
-                progressContainer.classList.add('d-none');
-            }
-        });
-        
-        async function finalizeGeneration(promptId, action) {
-            progressLabel.textContent = 'Saving image...';
-            const url = `/style/{{ style.slug }}/finalize_generation/${promptId}`;
-            const formData = new FormData();
-            formData.append('action', 'preview');  // Always save as preview
-            
-            try {
-                const response = await fetch(url, { method: 'POST', body: formData });
-                const data = await response.json();
-                
-                if (data.success) {
-                    previewImg.src = data.image_url;
+                if (data.error) { alert('Error: ' + data.error); progressContainer.classList.add('d-none'); return; }
+                currentJobId = data.job_id;
+                const jobResult = await waitForJob(currentJobId);
+                currentJobId = null;
+                if (jobResult.result && jobResult.result.image_url) {
+                    previewImg.src = jobResult.result.image_url;
                     if (previewCard) previewCard.classList.remove('d-none');
-                    
                     const replaceBtn = document.getElementById('replace-cover-btn');
-                    if (replaceBtn) {
-                        replaceBtn.disabled = false;
-                        const form = replaceBtn.closest('form');
-                        if (form) {
-                            form.action = `/style/{{ style.slug }}/replace_cover_from_preview`;
-                        }
-                    }
-                } else {
-                    alert('Save failed: ' + data.error);
-                }
-            } catch (err) {
-                console.error(err);
-                alert('Finalize request failed');
-            } finally {
-                progressContainer.classList.add('d-none');
-            }
+                    if (replaceBtn) replaceBtn.disabled = false;
                 }
+            } catch (err) { console.error(err); alert('Generation failed: ' + err.message); }
+            finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
+        });
 
         // Batch: Generate All Characters
         const allCharacters = [
             {% for char in characters %}{ slug: "{{ char.slug }}", name: {{ char.name | tojson }} },
             {% endfor %}
         ];
-        const finalizeBaseUrl = '/style/{{ style.slug }}/finalize_generation';
 
         let stopBatch = false;
         const generateAllBtn = document.getElementById('generate-all-btn');
@@ -484,54 +373,37 @@
             stopAllBtn.classList.remove('d-none');
             batchProgress.classList.remove('d-none');
             bootstrap.Tab.getOrCreateInstance(document.getElementById('previews-tab')).show();
-
             for (let i = 0; i < allCharacters.length; i++) {
                 if (stopBatch) break;
                 const char = allCharacters[i];
                 batchBar.style.width = `${Math.round((i / allCharacters.length) * 100)}%`;
                 batchLabel.textContent = `Generating ${char.name} (${i + 1} / ${allCharacters.length})`;
-
                 const genForm = document.getElementById('generate-form');
                 const fd = new FormData();
                 genForm.querySelectorAll('input[name="include_field"]:checked').forEach(cb => fd.append('include_field', cb.value));
                 fd.append('character_slug', char.slug);
                 fd.append('action', 'preview');
-                fd.append('client_id', clientId);
-
                 try {
                     progressContainer.classList.remove('d-none');
-                    progressBar.style.width = '0%';
-                    progressBar.textContent = '0%';
-                    progressLabel.textContent = `${char.name}: Starting...`;
-
+                    progressBar.style.width = '100%'; progressBar.textContent = '';
+                    progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+                    progressLabel.textContent = `${char.name}: Queuing…`;
                     const resp = await fetch(genForm.getAttribute('action'), {
                         method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' }
                     });
                     const data = await resp.json();
                     if (data.error) { console.error(`Error for ${char.name}:`, data.error); progressContainer.classList.add('d-none'); continue; }
-
-                    currentPromptId = data.prompt_id;
-                    await waitForCompletion(currentPromptId);
-
-                    progressLabel.textContent = 'Saving image...';
-                    const finalFD = new FormData();
-                    finalFD.append('action', 'preview');
-                    const finalResp = await fetch(`${finalizeBaseUrl}/${currentPromptId}`, { method: 'POST', body: finalFD });
-                    const finalData = await finalResp.json();
-                    if (finalData.success) {
-                        addToPreviewGallery(finalData.image_url, char.name);
-                        previewImg.src = finalData.image_url;
+                    currentJobId = data.job_id;
+                    const jobResult = await waitForJob(currentJobId);
+                    currentJobId = null;
+                    if (jobResult.result && jobResult.result.image_url) {
+                        addToPreviewGallery(jobResult.result.image_url, char.name);
+                        previewImg.src = jobResult.result.image_url;
                         if (previewCard) previewCard.classList.remove('d-none');
                     }
-                    currentPromptId = null;
-                } catch (err) {
-                    console.error(`Failed for ${char.name}:`, err);
-                    currentPromptId = null;
-                } finally {
-                    progressContainer.classList.add('d-none');
+                } catch (err) { console.error(`Failed for ${char.name}:`, err); currentJobId = null; }
+                finally { progressContainer.classList.add('d-none'); progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated'); }
             }
-            }
-
             batchBar.style.width = '100%';
             batchLabel.textContent = stopBatch ? 'Stopped.' : 'Complete!';
             generateAllBtn.disabled = false;

templates/styles/index.html

@@ -47,7 +47,7 @@
     </div>
 </div>
 
-<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
+<div class="row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 row-cols-xl-6 g-3">
     {% for style in styles %}
     <div class="col" id="card-{{ style.slug }}">
         <div class="card h-100 character-card" onclick="window.location.href='/style/{{ style.slug }}'">
@@ -102,71 +102,18 @@
         const styleNameText = document.getElementById('current-style-name');
         const stepProgressText = document.getElementById('current-step-progress');
         
-        const clientId = 'styles_batch_' + Math.random().toString(36).substring(2, 15);
-        const socket = new WebSocket('{{ COMFYUI_WS_URL }}?clientId=' + clientId);
-        
-        const nodeNames = {
-            "3": "Sampling",
-            "11": "Face Detailing",
-            "13": "Hand Detailing",
-            "4": "Loading Models",
-            "16": "Character LoRA",
-            "17": "Outfit LoRA",
-            "18": "Action LoRA",
-            "19": "Style/Detailer LoRA",
-            "8": "Decoding",
-            "9": "Saving"
-        };
-
-        let currentPromptId = null;
-        let resolveGeneration = null;
-
-        socket.addEventListener('message', (event) => {
-            const msg = JSON.parse(event.data);
-            
-            if (msg.type === 'progress') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const value = msg.data.value;
-                const max = msg.data.max;
-                const percent = Math.round((value / max) * 100);
-                stepProgressText.textContent = `${percent}%`;
-                taskProgressBar.style.width = `${percent}%`;
-                taskProgressBar.textContent = `${percent}%`;
-                taskProgressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
-            }
-            else if (msg.type === 'executing') {
-                if (msg.data.prompt_id !== currentPromptId) return;
-                const nodeId = msg.data.node;
-                if (nodeId === null) {
-                    if (resolveGeneration) resolveGeneration();
-                } else {
-                    nodeStatus.textContent = nodeNames[nodeId] || `Processing...`;
-                    stepProgressText.textContent = "";
-                    if (nodeId !== "3") {
-                        taskProgressBar.style.width = '100%';
-                        taskProgressBar.textContent = nodeNames[nodeId] || 'Processing...';
-                        taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-                    }
-                }
-            }
-        });
-
-        async function waitForCompletion(promptId) {
-            return new Promise((resolve) => {
-                const checkResolve = () => {
-                    clearInterval(pollInterval);
-                    resolve();
-                };
-                resolveGeneration = checkResolve;
-                const pollInterval = setInterval(async () => {
+        async function waitForJob(jobId) {
+            return new Promise((resolve, reject) => {
+                const poll = setInterval(async () => {
                     try {
-                        const resp = await fetch(`/check_status/${promptId}`);
+                        const resp = await fetch(`/api/queue/${jobId}/status`);
                         const data = await resp.json();
-                        if (data.status === 'finished') {
-                            checkResolve();
-                        }
+                        if (data.status === 'done') { clearInterval(poll); resolve(data); }
+                        else if (data.status === 'failed' || data.status === 'removed') { clearInterval(poll); reject(new Error(data.error || 'Job failed')); }
+                        else if (data.status === 'processing') nodeStatus.textContent = 'Generating…';
+                        else nodeStatus.textContent = 'Queued…';
                     } catch (err) {}
-                }, 2000);
+                }, 1500);
             });
         }
 
@@ -184,61 +131,60 @@
             regenAllBtn.disabled = true;
             container.classList.remove('d-none');
 
-            let completed = 0;
+            // Phase 1: Queue all jobs upfront
+            progressBar.style.width = '100%';
+            progressBar.textContent = '';
+            progressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
+            nodeStatus.textContent = 'Queuing…';
+
+            const jobs = [];
             for (const style of missing) {
-                const percent = Math.round((completed / missing.length) * 100);
-                progressBar.style.width = `${percent}%`;
-                progressBar.textContent = `${percent}%`;
-                statusText.textContent = `Batch Generating Styles: ${completed + 1} / ${missing.length}`;
-                styleNameText.textContent = `Current: ${style.name}`;
-                nodeStatus.textContent = "Queuing...";
-                
-                taskProgressBar.style.width = '100%';
-                taskProgressBar.textContent = 'Queued';
-                taskProgressBar.classList.add('progress-bar-striped', 'progress-bar-animated');
-
+                statusText.textContent = `Queuing ${jobs.length + 1} / ${missing.length}…`;
                 try {
                     const genResp = await fetch(`/style/${style.slug}/generate`, {
                         method: 'POST',
-                        body: new URLSearchParams({ 
-                            'action': 'replace', 
-                            'client_id': clientId,
-                            'character_slug': '__random__' 
-                        }),
+                        body: new URLSearchParams({ action: 'replace', character_slug: '__random__' }),
                         headers: { 'X-Requested-With': 'XMLHttpRequest' }
                     });
                     const genData = await genResp.json();
-                    currentPromptId = genData.prompt_id;
-
-                    await waitForCompletion(currentPromptId);
-
-                    const finResp = await fetch(`/style/${style.slug}/finalize_generation/${currentPromptId}`, {
-                        method: 'POST',
-                        body: new URLSearchParams({ 'action': 'replace' })
-                    });
-                    const finData = await finResp.json();
-
-                    if (finData.success) {
-                        const img = document.getElementById(`img-${style.slug}`);
-                        const noImgSpan = document.getElementById(`no-img-${style.slug}`);
-                        if (img) {
-                            img.src = finData.image_url;
-                            img.classList.remove('d-none');
+                    if (genData.job_id) jobs.push({ item: style, jobId: genData.job_id });
+                } catch (err) {
+                    console.error(`Failed to queue ${style.name}:`, err);
                 }
+            }
+
+            // Phase 2: Poll all concurrently
+            progressBar.classList.remove('progress-bar-striped', 'progress-bar-animated');
+            progressBar.style.width = '0%';
+            progressBar.textContent = '0%';
+            statusText.textContent = `0 / ${jobs.length} done`;
+
+            let completed = 0;
+            await Promise.all(jobs.map(async ({ item, jobId }) => {
+                try {
+                    const jobResult = await waitForJob(jobId);
+                    if (jobResult.result && jobResult.result.image_url) {
+                        const img = document.getElementById(`img-${item.slug}`);
+                        const noImgSpan = document.getElementById(`no-img-${item.slug}`);
+                        if (img) { img.src = jobResult.result.image_url; img.classList.remove('d-none'); }
                         if (noImgSpan) noImgSpan.classList.add('d-none');
                     }
                 } catch (err) {
-                    console.error(`Failed for ${style.name}:`, err);
+                    console.error(`Failed for ${item.name}:`, err);
                 }
                 completed++;
-            }
+                const pct = Math.round((completed / jobs.length) * 100);
+                progressBar.style.width = `${pct}%`;
+                progressBar.textContent = `${pct}%`;
+                statusText.textContent = `${completed} / ${jobs.length} done`;
+            }));
 
             progressBar.style.width = '100%';
             progressBar.textContent = '100%';
-            statusText.textContent = "Batch Style Generation Complete!";
-            styleNameText.textContent = "";
-            nodeStatus.textContent = "Done";
-            stepProgressText.textContent = "";
+            statusText.textContent = 'Batch Style Generation Complete!';
+            styleNameText.textContent = '';
+            nodeStatus.textContent = 'Done';
+            stepProgressText.textContent = '';
             taskProgressBar.style.width = '0%';
             taskProgressBar.textContent = '';
             batchBtn.disabled = false;