Update app.py

app.py

@@ -184,125 +184,104 @@ examples = [
 ]
 
 # --- Gradio UI ---
-with gr.Blocks(css="#app-container { max-width: 1280px; margin: auto; }") as demo:
-    gr.Markdown("# 🎨 Realtime FLUX Image Generator")
-    gr.Markdown("Generate stunning images in real-time with Modified Flux.Schnell pipeline. Optimized for speed.")
-    gr.Markdown("<span style='color: red;'>Note: Realtime generation requires a capable GPU. If generation stops or fails, try refreshing or reducing image size/steps.</span>")
-
-    if pipe is None:
-        gr.Markdown("<h2 style='color: red; text-align: center;'>Critical Error: Failed to load models. The application cannot function. Please check the logs.</h2>")
-
-    with gr.Row():
-        with gr.Column(scale=3): # Give image slightly more space
-            result = gr.Image(label="Generated Image", show_label=False, interactive=False, height=768) # Adjust height as needed
-            latency = gr.Text(label="Generation Info", interactive=False)
-        
-        with gr.Column(scale=2):
-            prompt = gr.Text(
-                label="Prompt",
-                placeholder="Describe the image you want to generate...",
-                lines=3,
-                show_label=False,
-                container=False,
-            )
-            
-            with gr.Row():
-                 generateBtn = gr.Button("🖼️ Generate Image", variant="primary", interactive=pipe is not None)
-                 enhanceBtn = gr.Button(f"🚀 Enhance (Steps: {ENHANCE_STEPS})", interactive=pipe is not None) # Use fixed steps for enhance
-            
-            realtime = gr.Checkbox(label="⚡ Realtime Generation", info="Generates image automatically as you type or adjust sliders (requires more GPU).", value=False, interactive=pipe is not None)
-
-            with gr.Accordion("Advanced Options", open=False):
-                with gr.Row():
-                    seed = gr.Number(label="Seed", value=42, precision=0, interactive=pipe is not None) # Use precision=0 for integers
-                    randomize_seed = gr.Checkbox(label="Randomize Seed", value=True, interactive=pipe is not None)
-                with gr.Row():
-                    width = gr.Slider(label="Width", minimum=256, maximum=MAX_IMAGE_SIZE, step=64, value=DEFAULT_WIDTH, interactive=pipe is not None) # Increase step for faster adjustment
-                    height = gr.Slider(label="Height", minimum=256, maximum=MAX_IMAGE_SIZE, step=64, value=DEFAULT_HEIGHT, interactive=pipe is not None)
-                num_inference_steps = gr.Slider(
-                    label="Inference Steps", 
-                    minimum=MIN_INFERENCE_STEPS, 
-                    maximum=MAX_INFERENCE_STEPS, 
-                    step=1, 
-                    value=DEFAULT_INFERENCE_STEPS, 
-                    info=f"Controls quality vs speed. Default: {DEFAULT_INFERENCE_STEPS}. Enhance uses {ENHANCE_STEPS}.",
-                    interactive=pipe is not None
+with gr.Blocks() as demo:
+    with gr.Column(elem_id="app-container"):
+        gr.Markdown("# 🎨 Realtime FLUX Image Generator")
+        gr.Markdown("Generate stunning images in real-time with Modified Flux.Schnell pipeline.")
+        gr.Markdown("<span style='color: red;'>Note: Sometimes it stucks or stops generating images (I don't know why). In that situation just refresh the site.</span>")
+
+        with gr.Row():
+            with gr.Column(scale=2.5):
+                result = gr.Image(label="Generated Image", show_label=False, interactive=False)
+            with gr.Column(scale=1):
+                prompt = gr.Text(
+                    label="Prompt",
+                    placeholder="Describe the image you want to generate...",
+                    lines=3,
+                    show_label=False,
+                    container=False,
                 )
+                generateBtn = gr.Button("🖼️ Generate Image")
+                enhanceBtn = gr.Button("🚀 Enhance Image")
+
+                with gr.Column("Advanced Options"):
+                    with gr.Row():
+                        realtime = gr.Checkbox(label="Realtime Toggler", info="If TRUE then uses more GPU but create image in realtime.", value=False)
+                        latency = gr.Text(label="Latency")
+                    with gr.Row():
+                        seed = gr.Number(label="Seed", value=42)
+                        randomize_seed = gr.Checkbox(label="Randomize Seed", value=True)
+                    with gr.Row():
+                        width = gr.Slider(label="Width", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=DEFAULT_WIDTH)
+                        height = gr.Slider(label="Height", minimum=256, maximum=MAX_IMAGE_SIZE, step=32, value=DEFAULT_HEIGHT)
+                        num_inference_steps = gr.Slider(label="Inference Steps", minimum=1, maximum=4, step=1, value=DEFAULT_INFERENCE_STEPS)
+
+        with gr.Row():
+            gr.Markdown("### 🌟 Inspiration Gallery")
+        with gr.Row():
+            gr.Examples(
+                examples=examples,
+                fn=generate_image,
+                inputs=[prompt],
+                outputs=[result, seed, latency],
+                cache_examples="lazy" 
+            )
 
-    gr.Markdown("---") # Separator
-    gr.Markdown("### 🌟 Inspiration Gallery")
-    gr.Examples(
-        examples=examples,
-        fn=generate_image, # Examples directly call generate_image
-        inputs=[prompt], # Only prompt needed for examples, others use defaults
-        outputs=[result, seed, latency], # Match output components
-        cache_examples="lazy", # Use caching
-        run_on_click=True, # Ensure examples run when clicked
-        label="Example Prompts"
+    enhanceBtn.click(
+        fn=generate_image,
+        inputs=[prompt, seed, width, height],
+        outputs=[result, seed, latency],
+        show_progress="full",
+        queue=False,
+        concurrency_limit=None
     )
 
-    # --- Event Listeners ---
-
-    # Combine inputs needed for generate_image
-    gen_inputs = [prompt, seed, width, height, randomize_seed, num_inference_steps]
-    outputs = [result, seed, latency]
-
-    # Generate Button Click
     generateBtn.click(
         fn=generate_image,
-        inputs=gen_inputs,
-        outputs=outputs,
-        show_progress="full", # Show progress for explicit clicks
-        api_name="generate_flux_image",
-        queue=True # Use queue for button clicks to handle multiple requests gracefully
+        inputs=[prompt, seed, width, height, randomize_seed, num_inference_steps],
+        outputs=[result, seed, latency],
+        show_progress="full",
+        api_name="RealtimeFlux",
+        queue=False
     )
 
-    # Enhance Button Click - uses fixed steps
-    enhanceBtn.click(
-        fn=generate_image,
-        # Pass is_enhance=True as the last argument
-        inputs=[prompt, seed, width, height, randomize_seed, num_inference_steps, gr.Checkbox(value=True, visible=False)], # Pass True for is_enhance
-        outputs=outputs,
-        show_progress="full",
-        queue=True 
+    def update_ui(realtime_enabled):
+        return {
+            prompt: gr.update(interactive=True),
+            generateBtn: gr.update(visible=not realtime_enabled)
+        }
+
+    realtime.change(
+        fn=update_ui,
+        inputs=[realtime],
+        outputs=[prompt, generateBtn],
+        queue=False,
+        concurrency_limit=None
     )
-    
-    # Prompt Submission (Enter key)
+
+    def realtime_generation(*args):
+        if args[0]:  # If realtime is enabled
+            return next(generate_image(*args[1:]))
+
     prompt.submit(
         fn=generate_image,
-        inputs=gen_inputs,
-        outputs=outputs,
+        inputs=[prompt, seed, width, height, randomize_seed, num_inference_steps],
+        outputs=[result, seed, latency],
         show_progress="full",
-        queue=True 
+        queue=False,
+        concurrency_limit=None
     )
 
-    # --- Realtime Updates ---
-    # List of components that trigger realtime updates
-    realtime_triggers = [prompt, width, height, num_inference_steps, seed, randomize_seed]
-    
-    # Inputs for the realtime handler function
-    realtime_inputs = [realtime, prompt, seed, width, height, randomize_seed, num_inference_steps]
-
-    for component in realtime_triggers:
-        # Use 'input' for sliders/text, 'change' for checkboxes/radio if needed
-        # Using .input for text allows updates while typing
-        # Using .change for sliders updates when released (default) or continuously if specified
-        event_type = "input" if isinstance(component, (gr.Textbox, gr.Number)) else "change"
-        
-        getattr(component, event_type)(
-            fn=handle_realtime_update,
-            inputs=realtime_inputs,
-            outputs=outputs,
-            show_progress="hidden", # Hide progress for realtime updates
-            # queue=False essential for responsiveness & cancelling previous requests
-            # trigger_mode='throttle' with a small delay (e.g., 0.5s) can prevent excessive calls
-            # 'always_last' ensures only the latest input value triggers execution
-            queue=False, 
-            trigger_mode="throttle", 
-            throttle_delay=0.5 # Throttle updates slightly (e.g., every 500ms)
-            # trigger_mode="always_last", # Alternative: trigger only after user stops changing for a bit
+    for component in [prompt, width, height, num_inference_steps]:
+        component.input(
+            fn=realtime_generation,
+            inputs=[realtime, prompt, seed, width, height, randomize_seed, num_inference_steps],
+            outputs=[result, seed, latency],
+            show_progress="hidden",
+            trigger_mode="always_last",
+            queue=False,
+            concurrency_limit=None
         )
 
-# --- Launch the App ---
-if __name__ == "__main__":
-    demo.queue().launch(debug=True) # Enable queue for better handling of multiple users/requests, add debug=True for more logs
+# Launch the app
+demo.launch()