Update app.py

app.py

@@ -75,281 +75,73 @@ 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)}"
 
-# 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;
-}
-
+css="""
 #col-container {
-    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;
+    margin: 0 auto;
+    max-width: 520px;
 }
 """
 
-# Gradio UI Layout
 with gr.Blocks(css=css) as demo:
+    
     with gr.Column(elem_id="col-container"):
-        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)]""")
+        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 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"
+        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,
             )
-            with gr.Row():
-                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
+            run_button = gr.Button("Run", scale=0)
+        
+        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,
+            )
+            
+            randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
+            
             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
-                    )
+                width = gr.Slider(
+                    label="Width",
+                    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
-                    )
+                height = gr.Slider(
+                    label="Height",
+                    minimum=256,
+                    maximum=MAX_IMAGE_SIZE,
+                    step=32,
+                    value=1024,
+                )
             
             with gr.Row():
                 guidance_scale = gr.Slider(
@@ -357,14 +149,15 @@ 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