Add Fast / High-Detail mode toggle (768px vs 2048px output)

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

app.py

@@ -33,7 +33,7 @@ torch.backends.cudnn.allow_tf32 = True
 print("[startup] TF32 enabled", flush=True)
 
 print("[startup] importing dimensions...", flush=True)
-from dimensions import compute_output_dimensions
+from dimensions import compute_output_dimensions, MAX_OUTPUT_DIM_FAST
 print("[startup] importing diffusers...", flush=True)
 from diffusers import FlowMatchEulerDiscreteScheduler
 print("[startup] importing QwenImageEditPlusPipeline...", flush=True)
@@ -207,11 +207,11 @@ def b64_to_pil_list(b64_json_str):
     return pil_images
 
 
-def update_dimensions_on_upload(image):
+def update_dimensions_on_upload(image, max_dim):
     if image is None:
-        return MAX_OUTPUT_DIM, MAX_OUTPUT_DIM
+        return max_dim, max_dim
     w, h = image.size
-    return compute_output_dimensions(w, h)
+    return compute_output_dimensions(w, h, max_dim)
 
 
 class _InferTimer:
@@ -330,7 +330,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, mode="fast", progress=gr.Progress(track_tqdm=True)):
     _cuda_ok = torch.cuda.is_available()
     timer = _InferTimer(_cuda_ok)
     t0 = time.perf_counter()
@@ -359,7 +359,8 @@ 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])
+    max_dim = MAX_OUTPUT_DIM_FAST if mode == "fast" else MAX_OUTPUT_DIM
+    width, height = update_dimensions_on_upload(pil_images[0], max_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()
@@ -419,6 +420,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)
+    mode = gr.Textbox(value="fast", elem_id="gradio-mode", 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)
@@ -434,7 +436,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, mode],
         outputs=[result, seed],
         js=run_preprocess_js,
     )

dimensions.py

@@ -1,4 +1,5 @@
 MAX_OUTPUT_DIM = 2048
+MAX_OUTPUT_DIM_FAST = 768
 
 
 def compute_output_dimensions(w, h, max_dim=MAX_OUTPUT_DIM):

static/app.css

@@ -206,6 +206,19 @@ body:not(.dark) .modern-tb-btn .tb-svg,body:not(.dark) .modern-tb-btn .tb-svg *{
 .toast-notification .toast-icon{font-size:16px;line-height:1}
 .toast-notification .toast-text{line-height:1.3}
 
+.mode-toggle-wrap{display:flex;gap:8px;padding:8px 20px 0}
+.mode-btn{
+    flex:1;padding:8px 12px;border-radius:8px;border:1px solid #4d0030;background:transparent;
+    cursor:pointer;font-size:13px;font-weight:600;font-family:'Inter',sans-serif;
+    color:#a1a1aa;transition:all .2s ease;
+}
+.mode-btn-active{
+    background:linear-gradient(135deg,#ff0080,#cc0066);border-color:transparent;
+    color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
+    box-shadow:0 2px 8px rgba(255,0,128,.35);
+}
+.mode-btn:not(.mode-btn-active):hover{border-color:#ff0080;color:#ff0080}
+
 .btn-run{
     display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
     background:linear-gradient(135deg,#ff0080,#cc0066);border:none;border-radius:10px;

static/run_preprocess.js

@@ -1,8 +1,9 @@
-(imgs, p, s, rs, gs, st) => {
+(imgs, p, s, rs, gs, st, m) => {
     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 mode = window.__selectedMode || 'fast';
+    return [imgsJson, promptVal, s, rs, gs, st, mode];
 }

templates/app.html

@@ -82,6 +82,11 @@
                 </div>
             </div>
 
+            <div class="mode-toggle-wrap">
+                <button id="mode-btn-fast" class="mode-btn mode-btn-active" onclick="window.__setMode('fast')">Fast</button>
+                <button id="mode-btn-hd" class="mode-btn" onclick="window.__setMode('high_detail')">High-Detail</button>
+            </div>
+
             <div style="padding:12px 20px;">
                 <button id="custom-run-btn" class="btn-run">
                     <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 23c-3.6 0-8-2.69-8-7.5 0-3.5 3-6.5 4.5-8 .27-.27.75-.08.75.28v2.44c0 .42.5.63.72.28C12.28 7.5 13 3 13 1c0-.42.48-.64.8-.35C18 4.5 20 9 20 12c0 5.5-3.5 11-8 11z"/></svg>
@@ -174,3 +179,12 @@
     </details>
 
 </div>
+
+<script>
+window.__selectedMode = 'fast';
+window.__setMode = function(m) {
+    window.__selectedMode = m;
+    document.getElementById('mode-btn-fast').classList.toggle('mode-btn-active', m === 'fast');
+    document.getElementById('mode-btn-hd').classList.toggle('mode-btn-active', m === 'high_detail');
+};
+</script>