Update app.py

app.py

@@ -1,19 +1,28 @@
-import os
-import io
 import gradio as gr
 import numpy as np
 import random
-import spaces
 import torch
-from diffusers import Flux2KleinPipeline
-from PIL import Image, ImageDraw
-import json
+import spaces
 import base64
+import json
+from io import BytesIO
+from PIL import Image, ImageDraw
+from diffusers import Flux2KleinPipeline
+
+MAX_SEED = np.iinfo(np.int32).max
 
 dtype = torch.bfloat16
 device = "cuda" if torch.cuda.is_available() else "cpu"
 
-MAX_SEED = np.iinfo(np.int32).max
+REPO_ID_DISTILLED = "black-forest-labs/FLUX.2-klein-9B"
+print("Loading 9B Distilled model...")
+pipe = Flux2KleinPipeline.from_pretrained(REPO_ID_DISTILLED, torch_dtype=dtype)
+pipe.to("cuda")
+pipe.load_lora_weights(
+    "linoyts/flux_klein_9b_bbox_lora",
+    weight_name="flux_klein_9b_bbox_lora.safetensors",
+)
+print("Pipeline ready.")
 
 DEFAULT_PROMPT = (
     "Move and resize the object inside the red bounding box to the position "
@@ -22,548 +31,706 @@ DEFAULT_PROMPT = (
     "and all other objects exactly as they are."
 )
 
-REPO_ID_REGULAR = "black-forest-labs/FLUX.2-klein-base-9B"
-REPO_ID_DISTILLED = "black-forest-labs/FLUX.2-klein-9B"
 
-print("Loading 9B Regular model...")
-pipe_regular = Flux2KleinPipeline.from_pretrained(REPO_ID_REGULAR, torch_dtype=dtype)
-pipe_regular.to("cuda")
-pipe_regular.load_lora_weights(
-    "linoyts/flux_klein_9b_bbox_lora",
-    weight_name="flux_klein_9b_bbox_lora.safetensors",
-)
-print("Loading 9B Distilled model...")
-pipe_distilled = Flux2KleinPipeline.from_pretrained(REPO_ID_DISTILLED, torch_dtype=dtype)
-pipe_distilled.to("cuda")
-pipe_distilled.load_lora_weights(
-    "linoyts/flux_klein_9b_bbox_lora",
-    weight_name="flux_klein_9b_bbox_lora.safetensors",
-)
-
-pipes = {
-    "Distilled (4 steps)": pipe_distilled,
-    "Base (50 steps)": pipe_regular,
-}
-DEFAULT_STEPS = {"Distilled (4 steps)": 4, "Base (50 steps)": 50}
-DEFAULT_CFG = {"Distilled (4 steps)": 1.0, "Base (50 steps)": 4.0}
-
-
-def update_steps_from_mode(mode_choice):
-    return DEFAULT_STEPS[mode_choice], DEFAULT_CFG[mode_choice]
+def b64_to_pil(b64_str):
+    if not b64_str or not b64_str.startswith("data:image"):
+        return None
+    try:
+        _, data = b64_str.split(',', 1)
+        return Image.open(BytesIO(base64.b64decode(data))).convert("RGB")
+    except Exception as e:
+        print(f"Error decoding image: {e}")
+        return None
 
 
-def on_image_upload(pil_img):
-    """When gr.Image uploads, encode a display-sized JPEG b64 for the canvas
-    and store the original PIL for inference."""
-    if pil_img is None:
-        return None, ""
-    # Resize for canvas display (keeps b64 small & fast)
-    display = pil_img.copy()
-    display.thumbnail((1280, 1280), Image.LANCZOS)
-    buf = io.BytesIO()
-    display.save(buf, format="JPEG", quality=90)
-    b64 = "data:image/jpeg;base64," + base64.b64encode(buf.getvalue()).decode()
-    return pil_img, b64
+def burn_boxes_onto_image(pil_image, boxes_json_str):
+    """Draw red (source) and green (destination) boxes onto the image."""
+    if not pil_image:
+        return pil_image
+    try:
+        boxes = json.loads(boxes_json_str) if boxes_json_str and boxes_json_str.strip() else {}
+    except Exception:
+        boxes = {}
 
+    src = boxes.get("src")
+    dst = boxes.get("dst")
+    if not src or not dst:
+        return pil_image
 
-def burn_boxes_on_image(pil_image, src, dst):
     img = pil_image.copy().convert("RGB")
     w, h = img.size
     draw = ImageDraw.Draw(img)
-    lw = max(4, w // 150)
-    draw.rectangle(
-        [int(src["x1"]*w), int(src["y1"]*h), int(src["x2"]*w), int(src["y2"]*h)],
-        outline=(255, 0, 0), width=lw,
-    )
-    draw.rectangle(
-        [int(dst["x1"]*w), int(dst["y1"]*h), int(dst["x2"]*w), int(dst["y2"]*h)],
-        outline=(0, 255, 0), width=lw,
-    )
+    bw = max(4, w // 150)
+
+    # Red = source
+    draw.rectangle([int(src["x1"]*w), int(src["y1"]*h), int(src["x2"]*w), int(src["y2"]*h)],
+                    outline=(255, 0, 0), width=bw)
+    # Green = destination
+    draw.rectangle([int(dst["x1"]*w), int(dst["y1"]*h), int(dst["x2"]*w), int(dst["y2"]*h)],
+                    outline=(0, 255, 0), width=bw)
     return img
 
 
-@spaces.GPU(duration=85)
-def infer(
-    original_pil, boxes_json, prompt, mode_choice,
-    seed, randomize_seed, num_inference_steps, guidance_scale,
-    progress=gr.Progress(track_tqdm=True),
-):
-    if original_pil is None:
+@spaces.GPU
+def infer(b64_str, boxes_json, prompt, seed, randomize_seed,
+          guidance_scale, num_inference_steps, height, width):
+    progress = gr.Progress(track_tqdm=True)
+
+    if not prompt or prompt.strip() == "":
+        raise gr.Error("Please enter a prompt.")
+
+    source_image = b64_to_pil(b64_str)
+    if source_image is None:
         raise gr.Error("Please upload an image first.")
+
     try:
-        boxes = json.loads(boxes_json) if boxes_json else {}
+        boxes = json.loads(boxes_json) if boxes_json and boxes_json.strip() else {}
     except Exception:
         boxes = {}
-    src, dst = boxes.get("src"), boxes.get("dst")
-    if not src or not dst:
-        raise gr.Error("Draw a box around the subject, then move it to the target location.")
-    if randomize_seed:
-        seed = random.randint(0, MAX_SEED)
 
-    progress(0.2, desc="Burning bounding boxes...")
-    marked = burn_boxes_on_image(original_pil, src, dst)
+    if not boxes.get("src") or not boxes.get("dst"):
+        raise gr.Error("Draw a box around the subject, then move it to the target location.")
 
-    img_w, img_h = original_pil.size
-    asp = img_w / img_h
-    if asp >= 1:
-        out_w, out_h = 1024, round(1024 / asp / 8) * 8
-    else:
-        out_h, out_w = 1024, round(1024 * asp / 8) * 8
-    out_w = max(256, min(1024, out_w))
-    out_h = max(256, min(1024, out_h))
+    progress(0.3, desc="Burning bounding boxes...")
+    marked = burn_boxes_onto_image(source_image, boxes_json)
 
-    progress(0.4, desc=f"Running {mode_choice}...")
-    pipe = pipes[mode_choice]
+    if randomize_seed:
+        seed = random.randint(0, MAX_SEED)
     generator = torch.Generator(device=device).manual_seed(seed)
+
+    progress(0.5, desc="Running inference...")
     result = pipe(
-        prompt=prompt, image=[marked],
-        height=out_h, width=out_w,
+        image=[marked],
+        prompt=prompt,
+        height=height if height != 0 else None,
+        width=width if width != 0 else None,
         num_inference_steps=num_inference_steps,
-        guidance_scale=guidance_scale,
         generator=generator,
+        guidance_scale=guidance_scale,
     ).images[0]
-    return result, marked, seed
-
-
-# ── Interactive Canvas ────────────────────────────────────────────────────────
-# Upload handled by gr.Image (native Gradio — always works).
-# Canvas JS polls the hidden #image-b64 textbox for new image data.
-
-CANVAS_HTML = """
-<div id="bbox-app">
-<style>
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
-#bbox-app {
-  font-family: 'DM Sans', sans-serif;
-  --c-red: #ef4444; --c-green: #22c55e;
-  --c-s1: #f8fafc; --c-s2: #e2e8f0; --c-s3: #cbd5e1;
-  --c-s4: #94a3b8; --c-s5: #64748b; --c-s6: #475569;
-  --c-s7: #334155; --c-s8: #1e293b; --c-s9: #0f172a;
-  --rad: 10px;
-}
-.dark #bbox-app {
-  --c-s1: #1e293b; --c-s2: #334155; --c-s3: #475569;
-  --c-s4: #64748b; --c-s5: #94a3b8; --c-s6: #cbd5e1;
-  --c-s7: #e2e8f0; --c-s8: #f1f5f9; --c-s9: #f8fafc;
-}
-#bbox-app * { box-sizing: border-box; margin: 0; padding: 0; }
 
-#bbox-wrap {
-  position: relative; border: 2px solid var(--c-s2); border-radius: var(--rad);
-  overflow: hidden; background: var(--c-s1); min-height: 380px;
-  display: flex; align-items: center; justify-content: center;
-}
-#bbox-wrap.has-img { background: var(--c-s9); cursor: crosshair; }
-#bbox-canvas { display: block; max-width: 100%; max-height: 520px; }
+    return result, seed, marked
 
-#bbox-empty {
-  color: var(--c-s4); font-size: 14px; font-weight: 500;
-  text-align: center; padding: 40px; line-height: 1.6;
-}
-#bbox-empty.hidden { display: none; }
 
-#bbox-tb {
-  display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap;
-}
-#bbox-tb button {
-  display: inline-flex; align-items: center; gap: 5px;
-  padding: 6px 14px; border: 1px solid var(--c-s2); border-radius: 8px;
-  background: var(--c-s1); font-size: 13px; font-weight: 600; color: var(--c-s7);
-  cursor: pointer; font-family: 'DM Sans', sans-serif; transition: all 0.12s;
-  user-select: none;
-}
-#bbox-tb button:hover { background: var(--c-s2); }
-#bbox-tb button.on {
-  background: var(--c-s8); color: var(--c-s1); border-color: var(--c-s8);
-}
-.dark #bbox-tb button.on { background: var(--c-s5); color: #fff; border-color: var(--c-s5); }
+def update_dimensions_on_upload(b64_str):
+    image = b64_to_pil(b64_str)
+    if image is None:
+        return 1024, 1024
+    ow, oh = image.size
+    if ow > oh:
+        nw = 1024
+        nh = int(nw * oh / ow)
+    else:
+        nh = 1024
+        nw = int(nh * ow / oh)
+    return (nw // 8) * 8, (nh // 8) * 8
+
+
+# ── CSS ───────────────────────────────────────────────────────────────────────
+css = r"""
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+*{box-sizing:border-box;margin:0;padding:0}
+body,.gradio-container{background:#0f0f13!important;font-family:'DM Sans',system-ui,sans-serif!important;font-size:14px!important;color:#e4e4e7!important;min-height:100vh}
+footer{display:none!important}
+.hidden-input{display:none!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}
+
+.app-shell{background:#18181b;border:1px solid #27272a;border-radius:16px;margin:12px auto;max-width:1400px;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.6)}
+.app-header{background:linear-gradient(135deg,#18181b,#1e1e24);border-bottom:1px solid #27272a;padding:14px 24px;display:flex;align-items:center;gap:12px}
+.app-logo{width:36px;height:36px;background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;box-shadow:0 4px 12px rgba(34,197,94,.35)}
+.app-title{font-size:18px;font-weight:700;background:linear-gradient(135deg,#e4e4e7,#a1a1aa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+.app-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
+
+.app-toolbar{background:#18181b;border-bottom:1px solid #27272a;padding:8px 16px;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
+.tb-sep{width:1px;height:28px;background:#27272a;margin:0 8px}
+.modern-tb-btn{display:inline-flex;align-items:center;gap:6px;min-width:32px;height:34px;background:transparent;border:1px solid transparent;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;padding:0 12px;font-family:'DM Sans',sans-serif;color:#e4e4e7!important;transition:all .15s}
+.modern-tb-btn:hover{background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.3)}
+.modern-tb-btn.active{background:rgba(34,197,94,.25);border-color:rgba(34,197,94,.45)}
+
+.app-main-row{display:flex;gap:0;flex:1;overflow:hidden}
+.app-main-left{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid #27272a}
+.app-main-right{width:420px;display:flex;flex-direction:column;flex-shrink:0;background:#18181b}
+
+#bbox-draw-wrap{position:relative;background:#09090b;min-height:440px;overflow:hidden;cursor:crosshair}
+#bbox-draw-canvas{display:block;margin:0 auto}
+#bbox-status{position:absolute;top:12px;left:12px;background:rgba(34,197,94,.9);color:#fff;padding:4px 12px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;border-radius:6px;z-index:10;display:none;pointer-events:none}
+#bbox-count{position:absolute;top:12px;right:12px;background:rgba(24,24,27,.9);color:#4ade80;padding:4px 12px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;border-radius:6px;border:1px solid rgba(34,197,94,.3);z-index:10;display:none}
+
+.upload-prompt-modern{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20}
+.upload-click-area{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;padding:36px 44px;border:2px dashed #3f3f46;border-radius:16px;background:rgba(34,197,94,.03);transition:all .2s;gap:8px}
+.upload-click-area:hover{background:rgba(34,197,94,.08);border-color:#22c55e;transform:scale(1.03)}
+.upload-click-area svg{width:80px;height:80px}
+.upload-main-text{color:#71717a;font-size:14px;font-weight:500}
+.upload-sub-text{color:#52525b;font-size:12px}
+
+.hint-bar{background:rgba(34,197,94,.06);border-top:1px solid #27272a;border-bottom:1px solid #27272a;padding:10px 20px;font-size:13px;color:#a1a1aa;line-height:1.7}
+.hint-bar b{color:#86efac;font-weight:600}
+
+.panel-card{border-bottom:1px solid #27272a}
+.panel-card-title{padding:12px 20px;font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid rgba(39,39,42,.6)}
+.panel-card-body{padding:16px 20px;display:flex;flex-direction:column;gap:8px}
+.modern-textarea{width:100%;background:#09090b;border:1px solid #27272a;border-radius:8px;padding:10px 14px;font-family:'DM Sans',sans-serif;font-size:14px;color:#e4e4e7;resize:vertical;outline:none;min-height:42px;transition:border-color .2s}
+.modern-textarea:focus{border-color:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.15)}
+.modern-textarea::placeholder{color:#3f3f46}
+.modern-label{font-size:13px;font-weight:500;color:#a1a1aa;margin-bottom:4px;display:block}
+
+.btn-run{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:linear-gradient(135deg,#22c55e,#16a34a);border:none;border-radius:10px;padding:12px 24px;cursor:pointer;font-size:15px;font-weight:600;font-family:'DM Sans',sans-serif;color:#fff;transition:all .2s;box-shadow:0 4px 16px rgba(34,197,94,.3),inset 0 1px 0 rgba(255,255,255,.1)}
+.btn-run:hover{background:linear-gradient(135deg,#4ade80,#22c55e);box-shadow:0 6px 24px rgba(34,197,94,.45);transform:translateY(-1px)}
+
+.output-frame{border-bottom:1px solid #27272a;display:flex;flex-direction:column}
+.output-frame .out-title{padding:10px 20px;font-size:13px;font-weight:700;color:#e4e4e7;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid rgba(39,39,42,.6);display:flex;align-items:center;justify-content:space-between}
+.output-frame .out-body{flex:1;background:#09090b;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:180px;position:relative}
+.output-frame .out-body img{max-width:100%;max-height:460px}
+.output-frame .out-placeholder{color:#3f3f46;font-size:13px;text-align:center;padding:20px}
+
+.modern-loader{display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(9,9,11,.92);z-index:15;flex-direction:column;align-items:center;justify-content:center;gap:16px}
+.modern-loader.active{display:flex}
+.modern-loader .loader-spinner{width:36px;height:36px;border:3px solid #27272a;border-top-color:#22c55e;border-radius:50%;animation:spin .8s linear infinite}
+@keyframes spin{to{transform:rotate(360deg)}}
+.modern-loader .loader-text{font-size:13px;color:#a1a1aa}
+.loader-bar-track{width:200px;height:4px;background:#27272a;border-radius:2px;overflow:hidden}
+.loader-bar-fill{height:100%;background:linear-gradient(90deg,#22c55e,#4ade80,#22c55e);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:2px}
+@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
+
+.settings-group{border:1px solid #27272a;border-radius:10px;margin:12px 16px;overflow:hidden}
+.settings-group-title{font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.8px;padding:10px 16px;border-bottom:1px solid #27272a;background:rgba(24,24,27,.5)}
+.settings-group-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
+.slider-row{display:flex;align-items:center;gap:10px;min-height:28px}
+.slider-row label{font-size:13px;font-weight:500;color:#a1a1aa;min-width:72px;flex-shrink:0}
+.slider-row input[type="range"]{flex:1;-webkit-appearance:none;height:6px;background:#27272a;border-radius:3px;outline:none}
+.slider-row input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(34,197,94,.4)}
+.slider-row .slider-val{min-width:52px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;padding:3px 8px;background:#09090b;border:1px solid #27272a;border-radius:6px;color:#a1a1aa}
+.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#a1a1aa}
+.checkbox-row input[type="checkbox"]{accent-color:#22c55e;width:16px;height:16px;cursor:pointer}
+
+.app-statusbar{background:#18181b;border-top:1px solid #27272a;padding:6px 20px;display:flex;gap:12px;height:34px;align-items:center}
+.app-statusbar .sb-section{flex:1;font-family:'JetBrains Mono',monospace;font-size:12px;color:#52525b}
+.app-statusbar .sb-fixed{flex:0 0 auto;padding:3px 12px;background:rgba(34,197,94,.08);border-radius:6px;color:#4ade80;font-weight:500;font-family:'JetBrains Mono',monospace;font-size:12px}
+
+#gradio-run-btn{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0.01;pointer-events:none}
+@media(max-width:840px){.app-main-row{flex-direction:column}.app-main-right{width:100%}.app-main-left{border-right:none;border-bottom:1px solid #27272a}}
+"""
 
-#bbox-bar {
-  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
-  border: 1px solid var(--c-s2); border-radius: var(--rad); margin-top: 8px;
-  background: var(--c-s1); min-height: 42px; flex-wrap: wrap;
-}
-.sc {
-  display: inline-flex; align-items: center; gap: 5px;
-  padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600;
-}
-.sc.s { background: rgba(239,68,68,0.08); color: var(--c-red); }
-.sc.d { background: rgba(34,197,94,0.08); color: var(--c-green); }
-.sc .dt { width: 8px; height: 8px; border-radius: 50%; }
-.sc.s .dt { background: var(--c-red); }
-.sc.d .dt { background: var(--c-green); }
-#bbox-hint { font-size: 13px; color: var(--c-s5); margin-left: auto; }
-</style>
-
-<div id="bbox-wrap">
-  <canvas id="bbox-canvas" width="512" height="380"></canvas>
-  <div id="bbox-empty">⬆ Upload an image above to start</div>
-</div>
-<div id="bbox-tb">
-  <button id="tb-d" class="on">✏️ Draw</button>
-  <button id="tb-m">✋ Move</button>
-  <button id="tb-c">🗑️ Clear</button>
-</div>
-<div id="bbox-bar">
-  <span id="bbox-hint">Upload an image above to get started</span>
-</div>
-</div>
+# ── JS for canvas interaction ─────────────────────────────────────────────────
+# Loaded via demo.load() so it runs in MAIN PAGE context (not sandboxed).
+# This is why fileInput.click() works.
+
+canvas_js = r"""
+() => {
+function init() {
+  if (window.__bboxInitDone) return;
+
+  const canvas = document.getElementById('bbox-draw-canvas');
+  const wrap = document.getElementById('bbox-draw-wrap');
+  const status = document.getElementById('bbox-status');
+  const badge = document.getElementById('bbox-count');
+  const debugCount = document.getElementById('bbox-debug-count');
+  const uploadPrompt = document.getElementById('upload-prompt');
+  const uploadClickArea = document.getElementById('upload-click-area');
+  const fileInput = document.getElementById('custom-file-input');
+  const promptInput = document.getElementById('custom-prompt-input');
+
+  const btnDraw = document.getElementById('tb-draw');
+  const btnMove = document.getElementById('tb-move');
+  const btnClear = document.getElementById('tb-clear');
+  const btnChange = document.getElementById('tb-change-img');
+
+  if (!canvas || !wrap || !fileInput || !btnDraw) {
+    setTimeout(init, 250);
+    return;
+  }
 
-<script>
-(function(){
-if(window.__bbxInit) return;
-window.__bbxInit = true;
-
-const cv = document.getElementById('bbox-canvas');
-const cx = cv.getContext('2d');
-const wp = document.getElementById('bbox-wrap');
-const emp = document.getElementById('bbox-empty');
-const bar = document.getElementById('bbox-bar');
-const bD = document.getElementById('tb-d');
-const bM = document.getElementById('tb-m');
-const bC = document.getElementById('tb-c');
-
-let img = null, dW = 512, dH = 380, mode = 'draw';
-let srcB = null, dstB = null;
-let drawing = false, dStart = null;
-let dragging = false, dOff = null;
-let resizing = false, rH = null;
-const HS = 7;
-
-/* ── Poll the hidden textbox for image data ──
-   gr.Image upload → Python encodes b64 → hidden textbox → JS picks it up */
-let lastB64 = '';
-setInterval(function(){
-  const el = document.querySelector('#image-b64 textarea, #image-b64 input');
-  if (!el) return;
-  const val = el.value;
-  if (val && val !== lastB64 && val.startsWith('data:image')) {
-    lastB64 = val;
-    loadImg(val);
+  window.__bboxInitDone = true;
+  const ctx = canvas.getContext('2d');
+
+  let baseImg = null;
+  let dispW = 512, dispH = 400;
+  let mode = 'draw'; // 'draw' | 'move'
+  let srcBox = null;  // {x1,y1,x2,y2} normalized [0,1]
+  let dstBox = null;
+  let dragging = false;
+  let dragType = null; // 'new' | 'moveBox' | handle name
+  let dragStart = {x:0, y:0};
+  let dragOrig = null;
+  const HANDLE = 6;
+
+  function n2px(b) { return {x1:b.x1*dispW, y1:b.y1*dispH, x2:b.x2*dispW, y2:b.y2*dispH}; }
+  function px2n(x1,y1,x2,y2) {
+    return {x1:Math.min(x1,x2)/dispW, y1:Math.min(y1,y2)/dispH,
+            x2:Math.max(x1,x2)/dispW, y2:Math.max(y1,y2)/dispH};
   }
-  // Detect clear (user removed image from gr.Image)
-  if ((!val || val === '') && lastB64 !== '') {
-    lastB64 = '';
-    img = null; srcB = null; dstB = null;
-    wp.classList.remove('has-img');
-    emp.classList.remove('hidden');
-    redraw();
+  function clamp01(v){return Math.max(0,Math.min(1,v));}
+  function fitSize(nw,nh) {
+    const mw = wrap.clientWidth || 512, mh = 500;
+    const r = Math.min(mw/nw, mh/nh, 1);
+    dispW = Math.round(nw*r); dispH = Math.round(nh*r);
+    canvas.width=dispW; canvas.height=dispH;
+    canvas.style.width=dispW+'px'; canvas.style.height=dispH+'px';
   }
-}, 250);
-
-/* ── Gradio hidden textbox write ── */
-function gSet(id, v) {
-  const c = document.getElementById(id);
-  if (!c) return;
-  const el = c.querySelector('textarea') || c.querySelector('input');
-  if (!el) return;
-  const proto = el.tagName === 'TEXTAREA' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
-  const desc = Object.getOwnPropertyDescriptor(proto, 'value');
-  if (desc && desc.set) {
-    desc.set.call(el, v);
-    el.dispatchEvent(new Event('input', {bubbles: true}));
-    el.dispatchEvent(new Event('change', {bubbles: true}));
+  function canvasXY(e) {
+    const r = canvas.getBoundingClientRect();
+    const cx = e.touches ? e.touches[0].clientX : e.clientX;
+    const cy = e.touches ? e.touches[0].clientY : e.clientY;
+    return {x:Math.max(0,Math.min(dispW,cx-r.left)), y:Math.max(0,Math.min(dispH,cy-r.top))};
   }
-}
 
-function syncBoxes() {
-  const d = {};
-  if (srcB) d.src = {
-    x1: Math.min(srcB.x1,srcB.x2)/dW, y1: Math.min(srcB.y1,srcB.y2)/dH,
-    x2: Math.max(srcB.x1,srcB.x2)/dW, y2: Math.max(srcB.y1,srcB.y2)/dH
-  };
-  if (dstB) d.dst = {
-    x1: Math.min(dstB.x1,dstB.x2)/dW, y1: Math.min(dstB.y1,dstB.y2)/dH,
-    x2: Math.max(dstB.x1,dstB.x2)/dW, y2: Math.max(dstB.y1,dstB.y2)/dH
-  };
-  gSet('boxes-json', JSON.stringify(d));
-}
+  function setGradioValue(containerId, value) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+    container.querySelectorAll('input, textarea').forEach(el => {
+      if (el.type === 'file' || el.type === 'range' || el.type === 'checkbox') return;
+      const proto = el.tagName === 'TEXTAREA' ? HTMLTextAreaElement.prototype : HTMLInputElement.prototype;
+      const ns = Object.getOwnPropertyDescriptor(proto, 'value');
+      if (ns && ns.set) {
+        ns.set.call(el, value);
+        el.dispatchEvent(new Event('input', {bubbles:true, composed:true}));
+        el.dispatchEvent(new Event('change', {bubbles:true, composed:true}));
+      }
+    });
+  }
 
-/* ── Image loading ── */
-function loadImg(dataUrl) {
-  const i = new window.Image();
-  i.onload = function() {
-    img = i; srcB = null; dstB = null;
-    const mw = wp.clientWidth || 640, mh = 520;
-    const r = Math.min(mw / i.naturalWidth, mh / i.naturalHeight, 1);
-    dW = Math.round(i.naturalWidth * r);
-    dH = Math.round(i.naturalHeight * r);
-    cv.width = dW; cv.height = dH;
-    cv.style.width = dW + 'px'; cv.style.height = dH + 'px';
-    wp.classList.add('has-img');
-    emp.classList.add('hidden');
-    syncBoxes();
-    setMode('draw');
-    redraw();
-  };
-  i.onerror = function(){ console.error('Canvas: failed to load image'); };
-  i.src = dataUrl;
-}
+  function syncToGradio() {
+    const d = {};
+    if (srcBox) d.src = srcBox;
+    if (dstBox) d.dst = dstBox;
+    setGradioValue('boxes-json-input', JSON.stringify(d));
+    if (debugCount) {
+      if (srcBox && dstBox) debugCount.textContent = 'Source + Target defined';
+      else if (srcBox) debugCount.textContent = 'Source defined — move target';
+      else debugCount.textContent = 'No boxes drawn';
+    }
+  }
+  function syncImageToGradio(dataUrl) { setGradioValue('hidden-image-b64', dataUrl); }
+  function syncPromptToGradio() { if (promptInput) setGradioValue('prompt-gradio-input', promptInput.value); }
+
+  function showStatus(t) { status.textContent=t; status.style.display='block'; }
+  function hideStatus() { status.style.display='none'; }
+
+  function handlePoints(b) {
+    const p = n2px(b);
+    const mx=(p.x1+p.x2)/2, my=(p.y1+p.y2)/2;
+    return {tl:{x:p.x1,y:p.y1},tc:{x:mx,y:p.y1},tr:{x:p.x2,y:p.y1},
+            ml:{x:p.x1,y:my},mr:{x:p.x2,y:my},
+            bl:{x:p.x1,y:p.y2},bc:{x:mx,y:p.y2},br:{x:p.x2,y:p.y2}};
+  }
+  function hitHandle(px,py,box) {
+    if (!box) return null;
+    const pts = handlePoints(box);
+    for (const k in pts) if (Math.abs(px-pts[k].x)<=HANDLE+2 && Math.abs(py-pts[k].y)<=HANDLE+2) return k;
+    return null;
+  }
+  function hitBox(px,py,box) {
+    if (!box) return false;
+    const p = n2px(box);
+    return px>=p.x1 && px<=p.x2 && py>=p.y1 && py<=p.y2;
+  }
 
-/* ── Status hint ── */
-function updHint() {
-  let chips = '';
-  if (srcB) chips += '<span class="sc s"><span class="dt"></span>Source</span>';
-  if (dstB) chips += '<span class="sc d"><span class="dt"></span>Target</span>';
-  let h = '';
-  if (!img) h = 'Upload an image above to get started';
-  else if (!srcB) h = 'Draw a box around the subject';
-  else if (mode === 'draw') h = 'Switch to <b>Move</b> to reposition';
-  else if (srcB && dstB) h = 'Drag or resize the green box, then click <b>Run</b>';
-  else h = 'Click on the canvas to place the target';
-  bar.innerHTML = chips + '<span id="bbox-hint">' + h + '</span>';
-}
+  function redraw(tempRect) {
+    ctx.clearRect(0,0,dispW,dispH);
+    if (!baseImg) { ctx.fillStyle='#09090b'; ctx.fillRect(0,0,dispW,dispH); updateBadge(); return; }
+    ctx.drawImage(baseImg, 0, 0, dispW, dispH);
+    const lw = Math.max(2, dispW/250);
+
+    // Source box = red dashed
+    if (srcBox) {
+      const p = n2px(srcBox);
+      ctx.save(); ctx.strokeStyle='rgba(239,68,68,0.95)'; ctx.lineWidth=lw+1;
+      ctx.setLineDash([8,5]); ctx.strokeRect(p.x1,p.y1,p.x2-p.x1,p.y2-p.y1); ctx.setLineDash([]); ctx.restore();
+      // Label
+      ctx.save(); ctx.font='bold 11px "DM Sans",sans-serif';
+      const tw=ctx.measureText('Source').width;
+      const ly=p.y1>20?p.y1-20:p.y1+4;
+      ctx.fillStyle='#ef4444'; ctx.fillRect(p.x1,ly,tw+10,18);
+      ctx.fillStyle='#fff'; ctx.fillText('Source',p.x1+5,ly+13); ctx.restore();
+    }
 
-/* ── Geometry helpers ── */
-function hPts(b) {
-  const lx=Math.min(b.x1,b.x2), rx=Math.max(b.x1,b.x2),
-        ty=Math.min(b.y1,b.y2), by=Math.max(b.y1,b.y2),
-        mx=(lx+rx)/2, my=(ty+by)/2;
-  return {tl:{x:lx,y:ty}, tr:{x:rx,y:ty}, bl:{x:lx,y:by}, br:{x:rx,y:by},
-          tc:{x:mx,y:ty}, bc:{x:mx,y:by}, ml:{x:lx,y:my}, mr:{x:rx,y:my}};
-}
-function hitHdl(px,py,b) {
-  if(!b) return null;
-  const ps = hPts(b);
-  for (const k in ps) if (Math.abs(px-ps[k].x)<=HS+3 && Math.abs(py-ps[k].y)<=HS+3) return k;
-  return null;
-}
-function hitBox(px,py,b) {
-  if(!b) return false;
-  return px>=Math.min(b.x1,b.x2) && px<=Math.max(b.x1,b.x2) &&
-         py>=Math.min(b.y1,b.y2) && py<=Math.max(b.y1,b.y2);
-}
-function evtPt(e) {
-  const r = cv.getBoundingClientRect();
-  const ex = e.clientX !== undefined ? e.clientX : 0;
-  const ey = e.clientY !== undefined ? e.clientY : 0;
-  return {x: Math.max(0, Math.min(dW, ex - r.left)), y: Math.max(0, Math.min(dH, ey - r.top))};
-}
+    // Destination box = green solid + handles
+    if (dstBox) {
+      const p = n2px(dstBox);
+      const w=p.x2-p.x1, h=p.y2-p.y1;
+      ctx.save(); ctx.strokeStyle='rgba(34,197,94,0.95)'; ctx.lineWidth=lw+1;
+      ctx.strokeRect(p.x1,p.y1,w,h);
+      ctx.fillStyle='rgba(34,197,94,0.06)'; ctx.fillRect(p.x1,p.y1,w,h); ctx.restore();
+      // Handles
+      const pts = handlePoints(dstBox); ctx.save();
+      for (const k in pts) {
+        ctx.fillStyle='#22c55e'; ctx.beginPath(); ctx.arc(pts[k].x,pts[k].y,HANDLE,0,Math.PI*2); ctx.fill();
+        ctx.strokeStyle='#fff'; ctx.lineWidth=1.5; ctx.beginPath(); ctx.arc(pts[k].x,pts[k].y,HANDLE,0,Math.PI*2); ctx.stroke();
+      } ctx.restore();
+      // Label
+      ctx.save(); ctx.font='bold 11px "DM Sans",sans-serif';
+      const tw2=ctx.measureText('Target').width;
+      const ly2=p.y1>20?p.y1-20:p.y1+4;
+      ctx.fillStyle='#22c55e'; ctx.fillRect(p.x1,ly2,tw2+10,18);
+      ctx.fillStyle='#fff'; ctx.fillText('Target',p.x1+5,ly2+13); ctx.restore();
+    }
 
-/* ── Canvas rendering ── */
-function redraw(tmp) {
-  cx.clearRect(0, 0, dW, dH);
-  if (!img) { cx.fillStyle = '#f1f5f9'; cx.fillRect(0, 0, dW, dH); updHint(); return; }
-  cx.drawImage(img, 0, 0, dW, dH);
-  const lw = Math.max(2, dW / 250);
-
-  // Source = red dashed
-  if (srcB) {
-    const lx=Math.min(srcB.x1,srcB.x2), ty=Math.min(srcB.y1,srcB.y2),
-          w=Math.abs(srcB.x2-srcB.x1), h=Math.abs(srcB.y2-srcB.y1);
-    cx.save(); cx.strokeStyle='#ef4444'; cx.lineWidth=lw+1;
-    cx.setLineDash([8,5]); cx.strokeRect(lx,ty,w,h); cx.setLineDash([]); cx.restore();
-    cx.save(); cx.font='bold 12px "DM Sans",sans-serif';
-    const tw = cx.measureText('Source').width;
-    const ly = ty > 22 ? ty - 22 : ty + 4;
-    cx.fillStyle='#ef4444'; cx.fillRect(lx, ly, tw+12, 20);
-    cx.fillStyle='#fff'; cx.fillText('Source', lx+6, ly+14); cx.restore();
+    if (tempRect) {
+      ctx.save(); ctx.strokeStyle='rgba(239,68,68,0.95)'; ctx.lineWidth=lw;
+      ctx.setLineDash([4,3]); ctx.strokeRect(
+        Math.min(tempRect.x1,tempRect.x2), Math.min(tempRect.y1,tempRect.y2),
+        Math.abs(tempRect.x2-tempRect.x1), Math.abs(tempRect.y2-tempRect.y1));
+      ctx.setLineDash([]); ctx.restore();
+    }
+    updateBadge();
   }
 
-  // Destination = green solid + handles
-  if (dstB) {
-    const lx=Math.min(dstB.x1,dstB.x2), ty=Math.min(dstB.y1,dstB.y2),
-          w=Math.abs(dstB.x2-dstB.x1), h=Math.abs(dstB.y2-dstB.y1);
-    cx.save(); cx.strokeStyle='#22c55e'; cx.lineWidth=lw+1;
-    cx.strokeRect(lx,ty,w,h);
-    cx.fillStyle='rgba(34,197,94,0.06)'; cx.fillRect(lx,ty,w,h); cx.restore();
-    const ps = hPts(dstB); cx.save();
-    for (const k in ps) {
-      cx.fillStyle='#fff'; cx.strokeStyle='#22c55e'; cx.lineWidth=2;
-      cx.beginPath(); cx.arc(ps[k].x, ps[k].y, HS, 0, Math.PI*2); cx.fill(); cx.stroke();
-    }
-    cx.restore();
-    cx.save(); cx.font='bold 12px "DM Sans",sans-serif';
-    const tw2 = cx.measureText('Target').width;
-    const ly2 = ty > 22 ? ty - 22 : ty + 4;
-    cx.fillStyle='#22c55e'; cx.fillRect(lx, ly2, tw2+12, 20);
-    cx.fillStyle='#fff'; cx.fillText('Target', lx+6, ly2+14); cx.restore();
+  function updateBadge() {
+    if (srcBox || dstBox) {
+      badge.style.display='block';
+      badge.textContent = (srcBox && dstBox) ? 'SRC + DST' : 'SRC only';
+    } else { badge.style.display='none'; }
   }
 
-  // Temp drawing rect
-  if (tmp) {
-    const rx=Math.min(tmp.x1,tmp.x2), ry=Math.min(tmp.y1,tmp.y2),
-          rw=Math.abs(tmp.x2-tmp.x1), rh=Math.abs(tmp.y2-tmp.y1);
-    cx.save(); cx.strokeStyle='#ef4444'; cx.lineWidth=lw;
-    cx.setLineDash([6,4]); cx.strokeRect(rx,ry,rw,rh); cx.setLineDash([]); cx.restore();
+  function setMode(m) {
+    mode = m;
+    btnDraw.classList.toggle('active', m==='draw');
+    btnMove.classList.toggle('active', m==='move');
+    canvas.style.cursor = m==='draw' ? 'crosshair' : 'default';
+    redraw();
   }
-  updHint();
-}
 
-/* ── Mode switching ── */
-function setMode(m) {
-  mode = m;
-  bD.classList.toggle('on', m==='draw');
-  bM.classList.toggle('on', m==='move');
-  wp.style.cursor = m === 'draw' ? 'crosshair' : 'grab';
-  redraw();
-}
+  // ── File upload ──
+  uploadClickArea.addEventListener('click', () => fileInput.click());
+  btnChange.addEventListener('click', () => fileInput.click());
+  fileInput.addEventListener('change', e => {
+    processFile(e.target.files[0]);
+    e.target.value = '';
+  });
+  wrap.addEventListener('dragover', e => { e.preventDefault(); wrap.style.outline='2px solid #22c55e'; });
+  wrap.addEventListener('dragleave', e => { e.preventDefault(); wrap.style.outline=''; });
+  wrap.addEventListener('drop', e => { e.preventDefault(); wrap.style.outline=''; processFile(e.dataTransfer.files[0]); });
+
+  function processFile(file) {
+    if (!file || !file.type.startsWith('image/')) return;
+    const reader = new FileReader();
+    reader.onload = ev => {
+      const dataUrl = ev.target.result;
+      const img = new window.Image();
+      img.crossOrigin = 'anonymous';
+      img.onload = () => {
+        baseImg = img; srcBox = null; dstBox = null;
+        fitSize(img.naturalWidth, img.naturalHeight);
+        syncToGradio(); redraw(); hideStatus();
+        uploadPrompt.style.display = 'none';
+        syncImageToGradio(dataUrl);
+      };
+      img.src = dataUrl;
+    };
+    reader.readAsDataURL(file);
+  }
 
-bD.addEventListener('click', function(){ setMode('draw'); });
-bM.addEventListener('click', function(){ if (srcB) setMode('move'); });
-bC.addEventListener('click', function(){ srcB=null; dstB=null; syncBoxes(); setMode('draw'); redraw(); });
+  // ── Toolbar ──
+  btnDraw.addEventListener('click', () => setMode('draw'));
+  btnMove.addEventListener('click', () => { if (srcBox) setMode('move'); });
+  btnClear.addEventListener('click', () => {
+    srcBox=null; dstBox=null; syncToGradio(); setMode('draw'); redraw();
+  });
+
+  // ── Canvas events ──
+  canvas.addEventListener('mousedown', onDown);
+  canvas.addEventListener('mousemove', onMove);
+  canvas.addEventListener('mouseup', onUp);
+  canvas.addEventListener('mouseleave', e => { if(dragging) onUp(e); });
+  canvas.addEventListener('touchstart', onDown, {passive:false});
+  canvas.addEventListener('touchmove', onMove, {passive:false});
+  canvas.addEventListener('touchend', onUp, {passive:false});
+
+  function onDown(e) {
+    if (!baseImg) return;
+    e.preventDefault();
+    const {x,y} = canvasXY(e);
+
+    if (mode === 'draw') {
+      dragging=true; dragType='new'; dragStart={x,y}; srcBox=null; dstBox=null;
+      return;
+    }
+    // Move mode
+    if (dstBox) {
+      const h = hitHandle(x,y,dstBox);
+      if (h) { dragging=true; dragType=h; dragStart={x,y}; dragOrig={...dstBox}; showStatus('Resizing'); return; }
+      if (hitBox(x,y,dstBox)) { dragging=true; dragType='moveBox'; dragStart={x,y}; dragOrig={...dstBox}; showStatus('Moving'); return; }
+    }
+  }
 
-/* ── Pointer events ── */
-cv.addEventListener('pointerdown', onDown);
-cv.addEventListener('pointermove', onMove);
-cv.addEventListener('pointerup', onUp);
-cv.addEventListener('touchstart', function(e){ e.preventDefault(); }, {passive: false});
+  function onMove(e) {
+    if (!baseImg) return;
+    e.preventDefault();
+    const {x,y} = canvasXY(e);
+
+    if (!dragging) {
+      if (mode==='move' && dstBox) {
+        if (hitHandle(x,y,dstBox)) { canvas.style.cursor='nwse-resize'; }
+        else if (hitBox(x,y,dstBox)) { canvas.style.cursor='grab'; }
+        else { canvas.style.cursor='default'; }
+      }
+      return;
+    }
 
-function onDown(e) {
-  if (!img) return;
-  e.preventDefault();
-  cv.setPointerCapture(e.pointerId);
-  const p = evtPt(e);
+    if (dragType === 'new') {
+      redraw({x1:dragStart.x, y1:dragStart.y, x2:x, y2:y});
+      return;
+    }
 
-  if (mode === 'draw') {
-    drawing = true; dStart = p; srcB = null; dstB = null;
-    return;
-  }
-  if (mode === 'move' && dstB) {
-    const h = hitHdl(p.x, p.y, dstB);
-    if (h) { resizing = true; rH = h; return; }
-    if (hitBox(p.x, p.y, dstB)) {
-      dragging = true;
-      dOff = {x: p.x - Math.min(dstB.x1,dstB.x2), y: p.y - Math.min(dstB.y1,dstB.y2)};
-      wp.style.cursor = 'grabbing'; return;
+    const dx = (x - dragStart.x) / dispW;
+    const dy = (y - dragStart.y) / dispH;
+    const o = dragOrig;
+
+    if (dragType === 'moveBox') {
+      const bw=o.x2-o.x1, bh=o.y2-o.y1;
+      let nx=clamp01(o.x1+dx), ny=clamp01(o.y1+dy);
+      if (nx+bw>1) nx=1-bw; if (ny+bh>1) ny=1-bh;
+      dstBox = {x1:nx, y1:ny, x2:nx+bw, y2:ny+bh};
+    } else {
+      // Resize handles
+      let {x1,y1,x2,y2} = {...o};
+      const t = dragType;
+      if (t.includes('l')) x1 = clamp01(o.x1+dx);
+      if (t.includes('r')) x2 = clamp01(o.x2+dx);
+      if (t.includes('t')) y1 = clamp01(o.y1+dy);
+      if (t.includes('b')) y2 = clamp01(o.y2+dy);
+      if (x1>x2) {const tmp=x1;x1=x2;x2=tmp;}
+      if (y1>y2) {const tmp=y1;y1=y2;y2=tmp;}
+      if (Math.abs(x2-x1)<0.01||Math.abs(y2-y1)<0.01) return;
+      dstBox = {x1,y1,x2,y2};
     }
+    redraw();
   }
-  if (mode === 'move' && srcB && !dstB) {
-    dstB = {...srcB}; dragging = true;
-    dOff = {x: p.x - Math.min(dstB.x1,dstB.x2), y: p.y - Math.min(dstB.y1,dstB.y2)};
-    wp.style.cursor = 'grabbing';
-  }
-}
 
-function onMove(e) {
-  if (!img) return;
-  e.preventDefault();
-  const p = evtPt(e);
+  function onUp(e) {
+    if (!dragging) return;
+    if (e) e.preventDefault();
+
+    if (dragType === 'new') {
+      const pt = e ? canvasXY(e) : dragStart;
+      if (Math.abs(pt.x-dragStart.x)>8 && Math.abs(pt.y-dragStart.y)>8) {
+        srcBox = px2n(dragStart.x, dragStart.y, pt.x, pt.y);
+        dstBox = {...srcBox};
+        showStatus('Box drawn — now move/resize the target');
+        setMode('move');
+      } else { hideStatus(); }
+    } else {
+      showStatus('Target updated');
+    }
 
-  if (mode === 'draw' && drawing && dStart) {
-    redraw({x1:dStart.x, y1:dStart.y, x2:p.x, y2:p.y}); return;
-  }
-  if (mode === 'move' && resizing && dstB && rH) {
-    const lx=Math.min(dstB.x1,dstB.x2), rx=Math.max(dstB.x1,dstB.x2),
-          ty=Math.min(dstB.y1,dstB.y2), by=Math.max(dstB.y1,dstB.y2);
-    if      (rH==='tl'){dstB.x1=p.x;dstB.y1=p.y;dstB.x2=rx;dstB.y2=by}
-    else if (rH==='tr'){dstB.x1=lx;dstB.y1=p.y;dstB.x2=p.x;dstB.y2=by}
-    else if (rH==='bl'){dstB.x1=p.x;dstB.y1=ty;dstB.x2=rx;dstB.y2=p.y}
-    else if (rH==='br'){dstB.x1=lx;dstB.y1=ty;dstB.x2=p.x;dstB.y2=p.y}
-    else if (rH==='tc'){dstB.x1=lx;dstB.y1=p.y;dstB.x2=rx;dstB.y2=by}
-    else if (rH==='bc'){dstB.x1=lx;dstB.y1=ty;dstB.x2=rx;dstB.y2=p.y}
-    else if (rH==='ml'){dstB.x1=p.x;dstB.y1=ty;dstB.x2=rx;dstB.y2=by}
-    else if (rH==='mr'){dstB.x1=lx;dstB.y1=ty;dstB.x2=p.x;dstB.y2=by}
-    redraw(); return;
+    dragging=false; dragType=null; dragOrig=null;
+    syncToGradio(); redraw();
   }
-  if (mode === 'move' && dragging && dstB && dOff) {
-    const w = Math.abs(dstB.x2-dstB.x1), h = Math.abs(dstB.y2-dstB.y1);
-    dstB.x1 = p.x - dOff.x; dstB.y1 = p.y - dOff.y;
-    dstB.x2 = dstB.x1 + w; dstB.y2 = dstB.y1 + h;
-    redraw(); return;
+
+  // ── Prompt sync ──
+  if (promptInput) { promptInput.addEventListener('input', syncPromptToGradio); }
+
+  // ── Slider sync ──
+  function syncSlider(customId, gradioId) {
+    const slider = document.getElementById(customId);
+    const valSpan = document.getElementById(customId + '-val');
+    if (!slider) return;
+    slider.addEventListener('input', () => {
+      if (valSpan) valSpan.textContent = slider.value;
+      const container = document.getElementById(gradioId);
+      if (!container) return;
+      container.querySelectorAll('input[type="range"],input[type="number"]').forEach(el => {
+        const ns = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+        if (ns && ns.set) { ns.set.call(el, slider.value); el.dispatchEvent(new Event('input',{bubbles:true})); el.dispatchEvent(new Event('change',{bubbles:true})); }
+      });
+    });
   }
-  // Hover cursors
-  if (mode === 'move' && dstB) {
-    if (hitHdl(p.x, p.y, dstB)) wp.style.cursor = 'nwse-resize';
-    else if (hitBox(p.x, p.y, dstB)) wp.style.cursor = 'grab';
-    else wp.style.cursor = 'default';
+  syncSlider('custom-seed','gradio-seed');
+  syncSlider('custom-guidance','gradio-guidance');
+  syncSlider('custom-steps','gradio-steps');
+  syncSlider('custom-width','gradio-width');
+  syncSlider('custom-height','gradio-height');
+
+  const randCheck = document.getElementById('custom-randomize');
+  if (randCheck) { randCheck.addEventListener('change', () => {
+    const cb = document.querySelector('#gradio-randomize input[type="checkbox"]');
+    if (cb && cb.checked !== randCheck.checked) cb.click();
+  }); }
+
+  // ── Run button ──
+  function showLoaders() { document.querySelectorAll('.modern-loader').forEach(l=>l.classList.add('active')); }
+  function hideLoaders() { document.querySelectorAll('.modern-loader').forEach(l=>l.classList.remove('active')); }
+  window.__hideLoaders = hideLoaders;
+
+  const customRunBtn = document.getElementById('custom-run-btn');
+  if (customRunBtn) customRunBtn.addEventListener('click', () => {
+    syncPromptToGradio(); syncToGradio(); showLoaders();
+    setTimeout(() => {
+      const gb = document.getElementById('gradio-run-btn');
+      if (gb) { const b=gb.querySelector('button'); if(b)b.click(); else gb.click(); }
+    }, 200);
+  });
+
+  // ── Watch outputs ──
+  function watchOutputs() {
+    const rc=document.getElementById('gradio-result'), pc=document.getElementById('gradio-preview');
+    const ob=document.getElementById('output-image-container'), pb=document.getElementById('preview-image-container');
+    if(!rc||!pc||!ob||!pb){setTimeout(watchOutputs,500);return;}
+    function sync() {
+      const ri=rc.querySelector('img'); if(ri&&ri.src){
+        let e=ob.querySelector('img.oimg'); if(!e){e=document.createElement('img');e.className='oimg';ob.appendChild(e);}
+        if(e.src!==ri.src){e.src=ri.src;const ph=ob.querySelector('.out-placeholder');if(ph)ph.style.display='none';hideLoaders();}
+      }
+      const pi=pc.querySelector('img'); if(pi&&pi.src){
+        let e2=pb.querySelector('img.oimg'); if(!e2){e2=document.createElement('img');e2.className='oimg';pb.appendChild(e2);}
+        if(e2.src!==pi.src){e2.src=pi.src;const ph2=pb.querySelector('.out-placeholder');if(ph2)ph2.style.display='none';}
+      }
+    }
+    new MutationObserver(sync).observe(rc,{childList:true,subtree:true,attributes:true,attributeFilter:['src']});
+    new MutationObserver(sync).observe(pc,{childList:true,subtree:true,attributes:true,attributeFilter:['src']});
+    setInterval(sync,800);
   }
-}
-
-function onUp(e) {
-  if (mode === 'draw' && drawing && dStart) {
-    const p = evtPt(e);
-    if (Math.abs(p.x - dStart.x) > 10 && Math.abs(p.y - dStart.y) > 10) {
-      srcB = {
-        x1: Math.min(dStart.x, p.x), y1: Math.min(dStart.y, p.y),
-        x2: Math.max(dStart.x, p.x), y2: Math.max(dStart.y, p.y)
-      };
-      dstB = {...srcB};
-      syncBoxes();
-      setMode('move');
+  watchOutputs();
+
+  // ── Dimension sync from Gradio ──
+  function watchDims() {
+    const wc=document.getElementById('gradio-width'),hc=document.getElementById('gradio-height');
+    const ws=document.getElementById('custom-width'),hs=document.getElementById('custom-height');
+    if(!wc||!hc||!ws||!hs){setTimeout(watchDims,500);return;}
+    function s(){
+      const wi=wc.querySelector('input[type="range"],input[type="number"]');
+      const hi=hc.querySelector('input[type="range"],input[type="number"]');
+      if(wi){ws.value=wi.value;const v=document.getElementById('custom-width-val');if(v)v.textContent=wi.value;}
+      if(hi){hs.value=hi.value;const v=document.getElementById('custom-height-val');if(v)v.textContent=hi.value;}
     }
+    new MutationObserver(s).observe(wc,{childList:true,subtree:true,attributes:true});
+    new MutationObserver(s).observe(hc,{childList:true,subtree:true,attributes:true});
+    setInterval(s,1000);
   }
-  if (resizing || dragging) syncBoxes();
-  drawing = false; dStart = null; dragging = false; dOff = null; resizing = false; rH = null;
-  if (mode === 'move') wp.style.cursor = 'grab';
-  redraw();
-}
-
-redraw();
-})();
-</script>
-"""
+  watchDims();
 
+  new ResizeObserver(() => { if(baseImg){fitSize(baseImg.naturalWidth,baseImg.naturalHeight);redraw();} }).observe(wrap);
 
-# ── Gradio Layout ─────────────────────────────────────────────────────────────
-
-css = """
-#col-container { margin: 0 auto; max-width: 1200px; }
-/* Hide the b64 and boxes textboxes from view */
-#image-b64, #boxes-json { display: none !important; height: 0 !important; overflow: hidden !important; }
+  setMode('draw'); fitSize(512,400); redraw(); syncToGradio();
+}
+init();
+}
 """
 
-with gr.Blocks(css=css, theme=gr.themes.Default()) as demo:
-    # gr.State holds the original PIL image for inference (not displayed)
-    original_pil = gr.State(value=None)
 
-    with gr.Column(elem_id="col-container"):
-        gr.Markdown("""# Bbox Move & Resize – FLUX.2 Klein 9B + LoRA
-**1.** Upload an image &nbsp;→&nbsp; **2.** Draw a box around the subject &nbsp;→&nbsp; **3.** Drag / resize the green box &nbsp;→&nbsp; **4.** Run
+# ── Gradio Blocks ─────────────────────────────────────────────────────────────
+
+with gr.Blocks(css=css) as demo:
+
+    # Hidden Gradio inputs
+    hidden_image_b64 = gr.Textbox(elem_id="hidden-image-b64", elem_classes="hidden-input", container=False)
+    boxes_json = gr.Textbox(value="{}", elem_id="boxes-json-input", elem_classes="hidden-input", container=False)
+    prompt = gr.Textbox(value=DEFAULT_PROMPT, elem_id="prompt-gradio-input", elem_classes="hidden-input", container=False)
+    seed = gr.Slider(minimum=0, maximum=MAX_SEED, step=1, value=0, elem_id="gradio-seed", elem_classes="hidden-input", container=False)
+    randomize_seed = gr.Checkbox(value=True, elem_id="gradio-randomize", elem_classes="hidden-input", container=False)
+    guidance_scale = gr.Slider(minimum=1.0, maximum=10.0, step=0.1, value=1.0, elem_id="gradio-guidance", elem_classes="hidden-input", container=False)
+    num_inference_steps = gr.Slider(minimum=1, maximum=50, step=1, value=4, elem_id="gradio-steps", elem_classes="hidden-input", container=False)
+    height_slider = gr.Slider(minimum=256, maximum=2048, step=8, value=1024, elem_id="gradio-height", elem_classes="hidden-input", container=False)
+    width_slider = gr.Slider(minimum=256, maximum=2048, step=8, value=1024, elem_id="gradio-width", elem_classes="hidden-input", container=False)
+    result = gr.Image(elem_id="gradio-result", elem_classes="hidden-input", container=False, format="png")
+    preview = gr.Image(elem_id="gradio-preview", elem_classes="hidden-input", container=False)
+
+    # The entire visible UI
+    gr.HTML(f"""
+<div class="app-shell">
+  <div class="app-header">
+    <div class="app-logo">↗</div>
+    <span class="app-title">Bbox Move &amp; Resize</span>
+    <span class="app-badge">FLUX.2 Klein 9B + LoRA</span>
+  </div>
+  <div class="app-toolbar">
+    <button id="tb-draw" class="modern-tb-btn active"><span>▬</span> Draw</button>
+    <button id="tb-move" class="modern-tb-btn"><span>⇉</span> Move</button>
+    <div class="tb-sep"></div>
+    <button id="tb-clear" class="modern-tb-btn"><span>✖</span> Clear</button>
+    <button id="tb-change-img" class="modern-tb-btn">Upload…</button>
+  </div>
+
+  <div class="app-main-row">
+    <div class="app-main-left">
+      <div id="bbox-draw-wrap">
+        <div id="upload-prompt" class="upload-prompt-modern">
+          <div id="upload-click-area" class="upload-click-area">
+            <svg viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect x="8" y="14" width="64" height="52" rx="6" fill="none" stroke="#22c55e" stroke-width="2" stroke-dasharray="4 3"/>
+              <polygon points="12,62 30,40 42,50 54,34 68,62" fill="rgba(34,197,94,0.15)" stroke="#22c55e" stroke-width="1.5"/>
+              <circle cx="28" cy="30" r="6" fill="rgba(34,197,94,0.2)" stroke="#22c55e" stroke-width="1.5"/>
+            </svg>
+            <span class="upload-main-text">Click to upload an image</span>
+            <span class="upload-sub-text">or drag &amp; drop</span>
+          </div>
+        </div>
+        <input id="custom-file-input" type="file" accept="image/*" style="display:none;" />
+        <canvas id="bbox-draw-canvas" width="512" height="400"></canvas>
+        <div id="bbox-status"></div>
+        <div id="bbox-count"></div>
+      </div>
+      <div class="hint-bar">
+        <b>Draw:</b> Click &amp; drag to select the subject &nbsp;·&nbsp;
+        <b>Move:</b> Drag the green box to reposition &nbsp;·&nbsp;
+        Resize via corner handles
+      </div>
+    </div>
+
+    <div class="app-main-right">
+      <div class="panel-card">
+        <div class="panel-card-title">Edit Instruction</div>
+        <div class="panel-card-body">
+          <label class="modern-label">Prompt</label>
+          <textarea id="custom-prompt-input" class="modern-textarea" rows="3">{DEFAULT_PROMPT}</textarea>
+        </div>
+      </div>
+      <div style="padding:12px 20px;">
+        <button id="custom-run-btn" class="btn-run">▶ Run</button>
+      </div>
+
+      <div class="output-frame" style="flex:1">
+        <div class="out-title"><span>Output</span></div>
+        <div class="out-body" id="output-image-container">
+          <div class="modern-loader" id="output-loader"><div class="loader-spinner"></div><div class="loader-text">Processing…</div><div class="loader-bar-track"><div class="loader-bar-fill"></div></div></div>
+          <div class="out-placeholder">Result will appear here</div>
+        </div>
+      </div>
+      <div class="output-frame">
+        <div class="out-title"><span>Input Preview (with boxes)</span></div>
+        <div class="out-body" id="preview-image-container">
+          <div class="modern-loader" id="preview-loader"><div class="loader-spinner"></div><div class="loader-text">Preparing…</div><div class="loader-bar-track"><div class="loader-bar-fill"></div></div></div>
+          <div class="out-placeholder">Preview will appear here</div>
+        </div>
+      </div>
+
+      <div class="settings-group">
+        <div class="settings-group-title">Settings</div>
+        <div class="settings-group-body">
+          <div class="slider-row"><label>Seed</label><input type="range" id="custom-seed" min="0" max="2147483647" step="1" value="0"><span class="slider-val" id="custom-seed-val">0</span></div>
+          <div class="checkbox-row"><input type="checkbox" id="custom-randomize" checked><label for="custom-randomize">Randomize seed</label></div>
+          <div class="slider-row"><label>Guidance</label><input type="range" id="custom-guidance" min="1" max="10" step="0.1" value="1.0"><span class="slider-val" id="custom-guidance-val">1.0</span></div>
+          <div class="slider-row"><label>Steps</label><input type="range" id="custom-steps" min="1" max="50" step="1" value="4"><span class="slider-val" id="custom-steps-val">4</span></div>
+          <div class="slider-row"><label>Width</label><input type="range" id="custom-width" min="256" max="2048" step="8" value="1024"><span class="slider-val" id="custom-width-val">1024</span></div>
+          <div class="slider-row"><label>Height</label><input type="range" id="custom-height" min="256" max="2048" step="8" value="1024"><span class="slider-val" id="custom-height-val">1024</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="app-statusbar">
+    <div class="sb-section" id="bbox-debug-count">No boxes drawn</div>
+    <div class="sb-section sb-fixed">Ready</div>
+  </div>
+</div>
 """)
 
-        with gr.Row():
-            with gr.Column(scale=3):
-                # Native Gradio upload — this always works
-                upload_image = gr.Image(
-                    label="Upload image",
-                    type="pil",
-                    sources=["upload", "clipboard"],
-                    height=100,
-                )
-                # Interactive canvas (no upload logic — just box drawing/moving)
-                gr.HTML(CANVAS_HTML)
-                # Hidden bridge textboxes
-                image_b64 = gr.Textbox(elem_id="image-b64", visible=False)
-                boxes_json = gr.Textbox(elem_id="boxes-json", visible=False)
-
-                with gr.Row():
-                    prompt = gr.Text(label="Prompt", value=DEFAULT_PROMPT, lines=2, scale=3)
-                    run_button = gr.Button("Run", variant="primary", scale=1, min_width=100)
-
-                mode_choice = gr.Radio(
-                    label="Mode",
-                    choices=["Distilled (4 steps)", "Base (50 steps)"],
-                    value="Distilled (4 steps)",
-                )
-                with gr.Accordion("Advanced Settings", open=False):
-                    seed = gr.Slider(label="Seed", minimum=0, maximum=MAX_SEED, step=1, value=0)
-                    randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
-                    with gr.Row():
-                        num_inference_steps = gr.Slider(label="Inference steps", minimum=1, maximum=100, step=1, value=4)
-                        guidance_scale = gr.Slider(label="Guidance scale", minimum=0.0, maximum=10.0, step=0.1, value=1.0)
-
-            with gr.Column(scale=2):
-                result = gr.Image(label="Result")
-                marked_preview = gr.Image(label="Input sent to model (with boxes)")
-
-    # ── Wiring ────────────────────────────────────────────────────────────────
-
-    # Upload → Python encodes b64 for canvas + stores PIL in State
-    upload_image.change(
-        fn=on_image_upload,
-        inputs=[upload_image],
-        outputs=[original_pil, image_b64],
-    )
+    run_btn = gr.Button("Run", elem_id="gradio-run-btn")
 
-    mode_choice.change(fn=update_steps_from_mode, inputs=[mode_choice], outputs=[num_inference_steps, guidance_scale])
+    # JS loaded via demo.load — runs in MAIN page context, NOT sandboxed
+    demo.load(fn=None, js=canvas_js)
 
-    # Run uses the State (original PIL), not the b64
-    gr.on(
-        triggers=[run_button.click],
+    run_btn.click(
         fn=infer,
-        inputs=[original_pil, boxes_json, prompt, mode_choice, seed, randomize_seed, num_inference_steps, guidance_scale],
-        outputs=[result, marked_preview, seed],
+        inputs=[hidden_image_b64, boxes_json, prompt, seed, randomize_seed,
+                guidance_scale, num_inference_steps, height_slider, width_slider],
+        outputs=[result, seed, preview],
+    )
+
+    hidden_image_b64.change(
+        fn=update_dimensions_on_upload,
+        inputs=[hidden_image_b64],
+        outputs=[width_slider, height_slider],
     )
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch(ssr_mode=False, show_error=True)