Update app.py

app.py

@@ -10,11 +10,12 @@ from image_gen_aux import DepthPreprocessor
 MAX_SEED = np.iinfo(np.int32).max
 MAX_IMAGE_SIZE = 2048
 
-# Initialize models without moving to CUDA yet
+# Initialize models without moving to CUDA yet - following working version
 pipe = FluxControlPipeline.from_pretrained(
     "black-forest-labs/FLUX.1-Depth-dev", 
     torch_dtype=torch.bfloat16
 )
+pipe.enable_attention_slicing()  # Keep this as it's helpful
 processor = DepthPreprocessor.from_pretrained("LiheYoung/depth-anything-large-hf")
 
 @spaces.GPU
@@ -75,92 +76,227 @@ 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="""
+css = """
+@keyframes gradientMove {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+body {
+    background: black !important;
+    margin: 0;
+    min-height: 100vh;
+}
+body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+    background: 
+        linear-gradient(125deg, rgba(255,105,180,0.3), rgba(0,0,0,0.5)),
+        url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.005" numOctaves="3" /><feColorMatrix type="saturate" values="0"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
+    filter: blur(70px);
+    animation: gradientMove 15s ease infinite;
+    background-size: 400% 400%;
+    opacity: 0.8;
+}
+:root {
+    --hot-pink: #FF69B4;
+    --light-pink: #FFB6C6;
+    --dark-pink: #FF1493;
+}
 #col-container {
     margin: 0 auto;
-    max-width: 520px;
+    max-width: 1200px;
+    padding: 2rem;
+    background: rgba(0, 0, 0, 0.85);
+    border-radius: 15px;
+    box-shadow: 0 0 20px rgba(255, 105, 180, 0.3);
+    border: 2px solid var(--hot-pink);
+    position: relative;
+    z-index: 1;
+}
+.gr-box {
+    background: var(--hot-pink) !important;
+    border: 2px solid black !important;
+    border-radius: 8px !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
+    transition: all 0.3s ease !important;
+}
+.gr-box:hover {
+    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
+}
+.gr-button {
+    background: var(--hot-pink) !important;
+    border: 2px solid black !important;
+    color: black !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+}
+.gr-button:hover {
+    background: var(--dark-pink) !important;
+    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
+    transform: translateY(-2px);
+}
+.gr-input, .gr-input-label {
+    background: var(--hot-pink) !important;
+    border: 2px solid black !important;
+    border-radius: 8px !important;
+    color: black !important;
+    transition: all 0.3s ease !important;
+}
+.gr-input::placeholder {
+    color: rgba(0, 0, 0, 0.6) !important;
+}
+.gr-input:focus {
+    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
+}
+.gr-form {
+    gap: 1.5rem !important;
+}
+.gr-slider {
+    accent-color: var(--hot-pink) !important;
+}
+.gr-slider-value {
+    color: white !important;
+}
+.gr-checkbox {
+    accent-color: var(--hot-pink) !important;
+}
+.gr-panel {
+    background: var(--hot-pink) !important;
+    border: 2px solid black !important;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
+}
+.gr-accordion {
+    border: 2px solid black !important;
+    background: var(--hot-pink) !important;
+    border-radius: 10px !important;
+    margin-top: 1.5rem !important;
+}
+label, .gr-box label, .gr-accordion-title {
+    color: black !important;
+    font-weight: 600 !important;
+}
+.markdown {
+    color: white !important;
+}
+.markdown a {
+    color: var(--hot-pink) !important;
+    text-decoration: none !important;
+    transition: color 0.3s ease !important;
+}
+.markdown a:hover {
+    color: var(--light-pink) !important;
+}
+.upload-box {
+    border: 2px dashed var(--hot-pink) !important;
+    background: rgba(0, 0, 0, 0.3) !important;
+    transition: all 0.3s ease !important;
+}
+.upload-box:hover {
+    border-color: var(--light-pink) !important;
+    box-shadow: 0 0 15px rgba(255, 105, 180, 0.2) !important;
+}
+.generating {
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8) !important;
+}
+.progress-bar {
+    background: var(--hot-pink) !important;
 }
 """
 
 with gr.Blocks(css=css) as demo:
-    
     with gr.Column(elem_id="col-container"):
-        gr.Markdown(f"""# FLUX.1 Depth [dev] with LoRA Support
+        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)]
         """)
 
-        # LoRA controls
         with gr.Row():
             lora_path = gr.Textbox(
                 label="HuggingFace LoRA Path",
-                placeholder="e.g., Borcherding/FLUX.1-dev-LoRA-AutumnSpringTrees"
+                placeholder="e.g., Borcherding/FLUX.1-dev-LoRA-AutumnSpringTrees",
+                scale=3
             )
-            load_lora_btn = gr.Button("Load LoRA")
-            unload_lora_btn = gr.Button("Unload LoRA")
+            load_lora_btn = gr.Button("Load LoRA", scale=1)
+            unload_lora_btn = gr.Button("Unload LoRA", scale=1)
         
         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,
+                show_label=True,
                 max_lines=1,
                 placeholder="Enter your prompt",
-                container=False,
+                container=True,
             )
             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.Row(equal_height=True):
+            with gr.Column(scale=1):
+                control_image = gr.Image(
+                    label="Control Image",
+                    type="pil",
+                    elem_id="image-upload"
+                )
+            with gr.Column(scale=1):
+                result = gr.Image(
+                    label="Generated Result",
+                    elem_id="result-image"
+                )
         
         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():
-                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.Column(scale=1):
+                    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():
-                guidance_scale = gr.Slider(
-                    label="Guidance Scale",
-                    minimum=1,
-                    maximum=30,
-                    step=0.5,
-                    value=10,
-                )
-  
-                num_inference_steps = gr.Slider(
-                    label="Number of inference steps",
-                    minimum=1,
-                    maximum=50,
-                    step=1,
-                    value=28,
-                )
+                with gr.Column(scale=1):
+                    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.Column(scale=1):
+                    guidance_scale = gr.Slider(
+                        label="Guidance Scale",
+                        minimum=1,
+                        maximum=30,
+                        step=0.5,
+                        value=10,
+                    )
+                    num_inference_steps = gr.Slider(
+                        label="Number of inference steps",
+                        minimum=1,
+                        maximum=50,
+                        step=1,
+                        value=28,
+                    )
 
-    # Event handlers
     load_lora_btn.click(
         fn=load_lora,
         inputs=[lora_path],