Add user-adjustable GPU Duration slider to Advanced Settings

Exposes the spaces.GPU duration as a UI slider (10–120s, step 5s) so
users can tune quota usage per request. Switching modes auto-resets the
slider to its default (fast=20s, high_detail=60s).

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

app.py

@@ -332,7 +332,7 @@ with open("templates/app.html") as _f:
 
 # ── Gradio blocks ──────────────────────────────────────────────────────────────
 
-def infer(images_b64_json, prompt, seed, randomize_seed, guidance_scale, steps, mode, progress=gr.Progress(track_tqdm=True)):
+def infer(images_b64_json, prompt, seed, randomize_seed, guidance_scale, steps, mode, gpu_duration=20, progress=gr.Progress(track_tqdm=True)):
     # CPU-only preprocessing — GPU not yet allocated
     gc.collect()
     pil_images = b64_to_pil_list(images_b64_json)
@@ -341,7 +341,7 @@ def infer(images_b64_json, prompt, seed, randomize_seed, guidance_scale, steps,
     width, height = update_dimensions_on_upload(pil_images[0], max_dim_for_mode(mode))
     t0 = time.perf_counter()
     try:
-        result_image, seed, duration = _infer_gpu(pil_images, prompt, seed, guidance_scale, steps, width, height, mode)
+        result_image, seed, duration = _infer_gpu(pil_images, prompt, seed, guidance_scale, steps, width, height, mode, int(gpu_duration))
         # _spawn_log is called here (main process) so the thread survives after _infer_gpu's
         # @spaces.GPU subprocess exits — previously the daemon thread was killed on subprocess exit.
         _spawn_log(pil_images, result_image, prompt, seed, steps, guidance_scale, width, height, duration, True)
@@ -352,8 +352,8 @@ def infer(images_b64_json, prompt, seed, randomize_seed, guidance_scale, steps,
         raise
 
 
-@spaces.GPU(duration=lambda *a, **kw: 20 if (len(a) > 7 and a[7] == "fast") else 60)
-def _infer_gpu(pil_images, prompt, seed, guidance_scale, steps, width, height, mode):
+@spaces.GPU(duration=lambda *a, **kw: int(a[8]) if len(a) > 8 else 60)
+def _infer_gpu(pil_images, prompt, seed, guidance_scale, steps, width, height, mode, gpu_duration=20):
     _cuda_ok = torch.cuda.is_available()
     timer = _InferTimer(_cuda_ok)
     t0 = time.perf_counter()
@@ -427,6 +427,7 @@ with gr.Blocks() as demo:
     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)
+    gpu_duration = gr.Slider(minimum=10, maximum=120, step=5, value=20, elem_id="gradio-gpu-duration", 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)
@@ -443,7 +444,7 @@ with gr.Blocks() as demo:
 
     run_btn.click(
         fn=infer,
-        inputs=[hidden_images_b64, prompt, seed, randomize_seed, guidance_scale, steps, mode],
+        inputs=[hidden_images_b64, prompt, seed, randomize_seed, guidance_scale, steps, mode, gpu_duration],
         outputs=[result, seed],
         js=run_preprocess_js,
     )

static/gallery.js

@@ -234,6 +234,7 @@ function init() {
     syncSlider('custom-seed', 'gradio-seed');
     syncSlider('custom-guidance', 'gradio-guidance');
     syncSlider('custom-steps', 'gradio-steps');
+    syncSlider('custom-gpu-duration', 'gradio-gpu-duration');
 
     const randCheck = document.getElementById('custom-randomize');
     if (randCheck) {

static/mode_toggle.js

@@ -1,10 +1,18 @@
 () => {
 window.__selectedMode = 'fast';
+var MODE_GPU_DURATION = { fast: 20, high_detail: 60 };
 window.__setMode = function(m) {
     window.__selectedMode = m;
     var fast = document.getElementById('mode-btn-fast');
     var hd   = document.getElementById('mode-btn-hd');
     if (fast) fast.classList.toggle('mode-btn-active', m === 'fast');
     if (hd)   hd.classList.toggle('mode-btn-active',   m === 'high_detail');
+    var dur = MODE_GPU_DURATION[m];
+    if (dur !== undefined) {
+        var sl = document.getElementById('custom-gpu-duration');
+        var vl = document.getElementById('custom-gpu-duration-val');
+        if (sl) { sl.value = dur; sl.dispatchEvent(new Event('input', {bubbles: true})); }
+        if (vl) vl.textContent = dur;
+    }
 };
 }

static/run_preprocess.js

@@ -1,9 +1,11 @@
-(imgs, p, s, rs, gs, st, m) => {
+(imgs, p, s, rs, gs, st, m, gd) => {
     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;
     const mode = window.__selectedMode || 'fast';
-    return [imgsJson, promptVal, s, rs, gs, st, mode];
+    const gpuDurEl = document.getElementById('custom-gpu-duration');
+    const gpuDuration = gpuDurEl ? parseInt(gpuDurEl.value, 10) : gd;
+    return [imgsJson, promptVal, s, rs, gs, st, mode, gpuDuration];
 }

templates/app.html

@@ -133,6 +133,11 @@
                         <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>GPU Duration (s)</label>
+                        <input type="range" id="custom-gpu-duration" min="10" max="120" step="5" value="20">
+                        <span class="slider-val" id="custom-gpu-duration-val">20</span>
+                    </div>
                 </div>
             </div>
         </div>