Add 2K/4K resolution selector to Advanced Settings

- Add `_resolve_output_dimensions` helper to encapsulate max_dim parsing
- Wire `max_output_dim` hidden Gradio Textbox (defaults to MAX_OUTPUT_DIM) through infer
- Add res-btn toggle group in Advanced Settings panel (HTML + CSS)
- Track selection in `window.__setResolution` / `window.__selectedMaxDim` (gallery.js)
- Pass selected resolution through run_preprocess.js to the backend

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

app.py

@@ -263,6 +263,11 @@ def _resolve_seed(seed: int, randomize_seed: bool) -> int:
     return random.randint(0, MAX_SEED) if randomize_seed else seed
 
 
+def _resolve_output_dimensions(image: Image.Image, max_output_dim) -> tuple:
+    max_dim = int(max_output_dim) if str(max_output_dim).strip() else MAX_OUTPUT_DIM
+    return compute_output_dimensions(*image.size, max_dim=max_dim)
+
+
 def _spawn_log(pil_images, result_image, prompt, seed, steps, guidance_scale,
                width, height, duration, success, error=""):
     threading.Thread(
@@ -298,7 +303,7 @@ with open("templates/app.html") as _f:
 # ── Gradio blocks ──────────────────────────────────────────────────────────────
 
 @spaces.GPU
-def infer(images_b64_json, prompt, seed, randomize_seed, guidance_scale, steps, progress=gr.Progress(track_tqdm=True)):
+def infer(images_b64_json, prompt, seed, randomize_seed, guidance_scale, steps, max_output_dim, progress=gr.Progress(track_tqdm=True)):
     _cuda_ok = torch.cuda.is_available()
     timer = _InferTimer(_cuda_ok)
     t0 = time.perf_counter()
@@ -327,7 +332,7 @@ def infer(images_b64_json, prompt, seed, randomize_seed, guidance_scale, steps,
 
     seed = _resolve_seed(seed, randomize_seed)
     generator = torch.Generator(device=device).manual_seed(seed)
-    width, height = update_dimensions_on_upload(pil_images[0])
+    width, height = _resolve_output_dimensions(pil_images[0], max_output_dim)
     print(f"[infer] input={pil_images[0].size}, output={width}x{height}, seed={seed}")
 
     # Per-step callback: syncs the GPU then records a CUDA event so elapsed_time()
@@ -387,6 +392,7 @@ with gr.Blocks() as demo:
     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)
     steps = gr.Slider(minimum=1, maximum=50, step=1, value=4, elem_id="gradio-steps", elem_classes="hidden-input", container=False)
+    max_output_dim = gr.Textbox(value=str(MAX_OUTPUT_DIM), elem_id="gradio-max-output-dim", elem_classes="hidden-input", container=False)
     result = gr.Image(elem_id="gradio-result", elem_classes="hidden-input", container=False, format="png")
 
     example_idx = gr.Textbox(value="", elem_id="example-idx-input", elem_classes="hidden-input", container=False)
@@ -402,7 +408,7 @@ with gr.Blocks() as demo:
 
     run_btn.click(
         fn=infer,
-        inputs=[hidden_images_b64, prompt, seed, randomize_seed, guidance_scale, steps],
+        inputs=[hidden_images_b64, prompt, seed, randomize_seed, guidance_scale, steps, max_output_dim],
         outputs=[result, seed],
         js=run_preprocess_js,
     )

static/app.css

@@ -301,6 +301,16 @@ body:not(.dark) #custom-run-btn *{color:#ffffff!important;-webkit-text-fill-colo
 .checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#a1a1aa}
 .checkbox-row input[type="checkbox"]{accent-color:#ff0080;width:16px;height:16px;cursor:pointer}
 .checkbox-row label{color:#a1a1aa;font-size:13px;cursor:pointer}
+.res-row{display:flex;align-items:center;gap:10px;min-height:28px}
+.res-row label{font-size:13px;font-weight:500;color:#a1a1aa;min-width:72px;flex-shrink:0}
+.res-btn-group{display:flex;gap:4px}
+.res-btn{
+    padding:4px 16px;font-size:12px;font-weight:600;border-radius:6px;cursor:pointer;
+    border:1px solid #4d0030;background:transparent;color:#71717a;
+    font-family:'Inter',sans-serif;transition:all .15s;
+}
+.res-btn.active{background:rgba(255,0,128,.2);border-color:rgba(255,0,128,.5);color:#ff4da6}
+.res-btn:hover:not(.active){background:rgba(255,0,128,.1);border-color:rgba(255,0,128,.3);color:#a1a1aa}
 
 .app-statusbar{
     background:#280018;border-top:1px solid #4d0030;padding:6px 20px;

static/gallery.js

@@ -282,6 +282,13 @@ function init() {
 
     if (runBtnEl) runBtnEl.addEventListener('click', () => window.__clickGradioRunBtn());
 
+    window.__selectedMaxDim = 2048;
+    window.__setResolution = function(dim, btn) {
+        window.__selectedMaxDim = dim;
+        document.querySelectorAll('.res-btn').forEach(b => b.classList.remove('active'));
+        if (btn) btn.classList.add('active');
+    };
+
     renderGallery();
     updateCounts();
 }

static/run_preprocess.js

@@ -1,8 +1,9 @@
-(imgs, p, s, rs, gs, st) => {
+(imgs, p, s, rs, gs, st, mod) => {
     const images = window.__uploadedImages || [];
     const b64Array = images.map(img => img.b64);
     const imgsJson = JSON.stringify(b64Array);
     const promptEl = document.getElementById('custom-prompt-input');
     const promptVal = promptEl ? promptEl.value : p;
-    return [imgsJson, promptVal, s, rs, gs, st];
+    const maxDim = String(window.__selectedMaxDim || 2048);
+    return [imgsJson, promptVal, s, rs, gs, st, maxDim];
 }

templates/app.html

@@ -123,6 +123,13 @@
             <div class="settings-group">
                 <div class="settings-group-title">Advanced Settings</div>
                 <div class="settings-group-body">
+                    <div class="res-row">
+                        <label>Resolution</label>
+                        <div class="res-btn-group">
+                            <button type="button" class="res-btn active" onclick="window.__setResolution(2048, this)">2K</button>
+                            <button type="button" class="res-btn" onclick="window.__setResolution(4096, this)">4K</button>
+                        </div>
+                    </div>
                     <div class="slider-row">
                         <label>Seed</label>
                         <input type="range" id="custom-seed" min="0" max="2147483647" step="1" value="0">