Update app.py

app.py

@@ -75,73 +75,281 @@ def infer(control_image, prompt, seed=42, randomize_seed=False, width=1024, heig
     except Exception as e:
         return None, f"Error during inference: {str(e)}"
 
-css="""
+# Modern UI CSS with animated background and noise
+css = """
+:root {
+    --primary-color: #6366f1;
+    --secondary-color: #818cf8;
+    --background-color: #1e1b4b;
+    --text-color: #f3f4f6;
+    --card-bg: rgba(30, 27, 75, 0.7);
+    --border-radius: 12px;
+}
+
+body {
+    background: var(--background-color);
+    color: var(--text-color);
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+/* Animated gradient background */
+.gradio-container {
+    position: relative;
+    overflow: hidden;
+}
+
+.gradio-container::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: linear-gradient(
+        45deg,
+        var(--background-color),
+        var(--primary-color),
+        var(--secondary-color)
+    );
+    animation: gradient 15s ease infinite;
+    background-size: 400% 400%;
+    z-index: -1;
+    opacity: 0.3;
+}
+
+@keyframes gradient {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Noise overlay */
+.gradio-container::after {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+    opacity: 0.05;
+    z-index: -1;
+    pointer-events: none;
+}
+
 #col-container {
-    margin: 0 auto;
-    max-width: 520px;
+    max-width: 1200px !important;
+    margin: 2rem auto;
+    padding: 2rem;
+    background: var(--card-bg);
+    backdrop-filter: blur(10px);
+    border-radius: var(--border-radius);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+/* Typography */
+#col-container h1 {
+    color: var(--text-color);
+    font-size: 2.5rem;
+    margin-bottom: 1.5rem;
+    text-align: center;
+    font-weight: 700;
+}
+
+#col-container a {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: color 0.3s ease;
+}
+
+#col-container a:hover {
+    color: var(--secondary-color);
+}
+
+/* Input elements styling */
+.input-container {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 1.5rem;
+    border-radius: var(--border-radius);
+    margin-bottom: 1.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+
+.input-container:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Button styling */
+button.primary {
+    background: var(--primary-color) !important;
+    border: none !important;
+    padding: 0.75rem 1.5rem !important;
+    border-radius: var(--border-radius) !important;
+    color: white !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+button.primary:hover {
+    background: var(--secondary-color) !important;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+}
+
+/* Slider styling */
+.gr-slider {
+    --slider-color: var(--primary-color) !important;
+}
+
+.gr-slider .handle {
+    background: var(--primary-color) !important;
+    border: 2px solid white !important;
+}
+
+/* Image upload area styling */
+.image-upload-box {
+    border: 2px dashed rgba(255, 255, 255, 0.2);
+    border-radius: var(--border-radius);
+    padding: 2rem;
+    text-align: center;
+    transition: all 0.3s ease;
+    background: rgba(255, 255, 255, 0.03);
+}
+
+.image-upload-box:hover {
+    border-color: var(--primary-color);
+    background: rgba(255, 255, 255, 0.05);
+    cursor: pointer;
+}
+
+/* Results area styling */
+.results-container {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 1.5rem;
+    border-radius: var(--border-radius);
+    margin-top: 1.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Accordion styling */
+.gr-accordion {
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: var(--border-radius) !important;
+    background: rgba(255, 255, 255, 0.05) !important;
+    transition: all 0.3s ease;
+}
+
+.gr-accordion:hover {
+    background: rgba(255, 255, 255, 0.08) !important;
+}
+
+.gr-accordion-title {
+    color: var(--text-color) !important;
+    font-weight: 600 !important;
+}
+
+/* Form elements */
+input[type="text"], 
+input[type="number"],
+textarea {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: var(--border-radius) !important;
+    color: var(--text-color) !important;
+    transition: all 0.3s ease !important;
+}
+
+input[type="text"]:focus,
+input[type="number"]:focus,
+textarea:focus {
+    background: rgba(255, 255, 255, 0.08) !important;
+    border-color: var(--primary-color) !important;
+    outline: none !important;
+}
+
+/* Checkbox styling */
+input[type="checkbox"] {
+    accent-color: var(--primary-color);
+    width: 1.2em;
+    height: 1.2em;
 }
 """
 
+# Gradio UI Layout
 with gr.Blocks(css=css) as demo:
-    
     with gr.Column(elem_id="col-container"):
-        gr.Markdown(f"""# FLUX.1 Depth [dev] with LoRA Support
-12B param rectified flow transformer structural conditioning tuned, guidance-distilled from [FLUX.1 [pro]](https://blackforestlabs.ai/)  
-[[non-commercial license](https://huggingface.co/black-forest-labs/FLUX.1-dev/blob/main/LICENSE.md)] [[blog](https://blackforestlabs.ai/announcing-black-forest-labs/)] [[model](https://huggingface.co/black-forest-labs/FLUX.1-dev)]
-        """)
-
-        # LoRA controls
-        with gr.Row():
-            lora_path = gr.Textbox(
-                label="HuggingFace LoRA Path",
-                placeholder="e.g., Borcherding/FLUX.1-dev-LoRA-AutumnSpringTrees"
-            )
-            load_lora_btn = gr.Button("Load LoRA")
-            unload_lora_btn = gr.Button("Unload LoRA")
-        
-        lora_status = gr.Textbox(label="LoRA Status", interactive=False)
-
-        control_image = gr.Image(label="Upload the image for control", type="pil")
-        with gr.Row():
-            prompt = gr.Text(
-                label="Prompt",
-                show_label=False,
-                max_lines=1,
-                placeholder="Enter your prompt",
-                container=False,
-            )
-            run_button = gr.Button("Run", scale=0)
+        gr.Markdown("""# FLUX.1 Depth [dev] with LoRA Support
+        12B param rectified flow transformer structural conditioning tuned, guidance-distilled from [FLUX.1 [pro]](https://blackforestlabs.ai/)  
+        [[non-commercial license](https://huggingface.co/black-forest-labs/FLUX.1-dev/blob/main/LICENSE.md)] [[blog](https://blackforestlabs.ai/announcing-black-forest-labs/)] [[model](https://huggingface.co/black-forest-labs/FLUX.1-dev)]""")
         
-        result = gr.Image(label="Result", show_label=False)
-        error_message = gr.Textbox(label="Error", visible=False)
-        
-        with gr.Accordion("Advanced Settings", open=False):
-            seed = gr.Slider(
-                label="Seed",
-                minimum=0,
-                maximum=MAX_SEED,
-                step=1,
-                value=0,
+        # LoRA controls in a styled container
+        with gr.Box(elem_classes="input-container"):
+            with gr.Row():
+                lora_path = gr.Textbox(
+                    label="HuggingFace LoRA Path",
+                    placeholder="e.g., Borcherding/FLUX.1-dev-LoRA-AutumnSpringTrees",
+                    show_label=True
+                )
+                load_lora_btn = gr.Button("Load LoRA", elem_classes="primary")
+                unload_lora_btn = gr.Button("Unload LoRA", elem_classes="primary")
+            lora_status = gr.Textbox(label="LoRA Status", interactive=False)
+
+        # Image upload and prompt in styled containers
+        with gr.Box(elem_classes="input-container"):
+            control_image = gr.Image(
+                label="Upload Control Image",
+                type="pil",
+                elem_classes="image-upload-box"
             )
-            
-            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=1024,
+                prompt = gr.Textbox(
+                    label="Your Prompt",
+                    placeholder="Describe what you want to generate...",
+                    lines=2,
+                    show_label=True
                 )
+                run_button = gr.Button("Generate", elem_classes="primary", scale=0)
+
+        # Results area
+        with gr.Box(elem_classes="results-container"):
+            result = gr.Image(label="Generated Result")
+            error_message = gr.Textbox(label="Error", visible=False)
+
+        # Advanced settings in styled accordion
+        with gr.Accordion("Advanced Settings", open=False):
+            with gr.Row():
+                with gr.Column():
+                    seed = gr.Slider(
+                        label="Seed",
+                        minimum=0,
+                        maximum=MAX_SEED,
+                        step=1,
+                        value=0
+                    )
+                    randomize_seed = gr.Checkbox(
+                        label="Randomize seed",
+                        value=True
+                    )
                 
-                height = gr.Slider(
-                    label="Height",
-                    minimum=256,
-                    maximum=MAX_IMAGE_SIZE,
-                    step=32,
-                    value=1024,
-                )
+                with gr.Column():
+                    width = gr.Slider(
+                        label="Width",
+                        minimum=256,
+                        maximum=MAX_IMAGE_SIZE,
+                        step=32,
+                        value=1024
+                    )
+                    height = gr.Slider(
+                        label="Height",
+                        minimum=256,
+                        maximum=MAX_IMAGE_SIZE,
+                        step=32,
+                        value=1024
+                    )
             
             with gr.Row():
                 guidance_scale = gr.Slider(
@@ -149,15 +357,14 @@ with gr.Blocks(css=css) as demo:
                     minimum=1,
                     maximum=30,
                     step=0.5,
-                    value=10,
+                    value=10
                 )
-  
                 num_inference_steps = gr.Slider(
                     label="Number of inference steps",
                     minimum=1,
                     maximum=50,
                     step=1,
-                    value=28,
+                    value=28
                 )
 
     # Event handlers