styling

app.py

@@ -1,9 +1,9 @@
+import spaces
 import gradio as gr
 from PIL import Image
 import os
 from src.flux.xflux_pipeline import XFluxPipeline
 import random
-import spaces
 
 def run_xflux_pipeline(
     prompt, image, repo_id, name, device,
@@ -124,53 +124,82 @@ def process_image(image, prompt, steps, use_lora, use_controlnet, use_depth, use
 
 
 custom_css = """
-body {
-  background: rgb(24, 24, 27);
-}
-
 .gradio-container {
-  background: rgb(24, 24, 27);
+  margin: unset !important;
+  padding: unset !important;
+  max-width: unset !important;
 }
-
-.app-container {
-  background: rgb(24, 24, 27);
+.gradio-app {
+  min-height: unset !important;
 }
 
-gradio-app {
+.app-container {
+  height: 100vh;
   background: rgb(24, 24, 27);
+  gap: unset;
 }
 
-
 .sidebar {
+  max-width: 300px;
+  padding: 1rem;
   background: rgb(31, 31, 35);
   border-right: 1px solid rgb(41, 41, 41);
 }
+
+.galery {
+  height: 100%;
+}
+
+.gallery-container {
+  height: 100%;
+}
+
+.grid-container {
+  height: 97vh !important;
+}
+
+.grid-wrap {
+  max-height: unset;
+  overflow-y: unset;
+}
+
+.thumbnail-item img {
+  object-fit: contain;
+}
+
+.side_items {
+  height: 96vh;
+}
+
+.form {
+  flex-wrap: unset;
+  height: 100%;
+}
 """
 
 with gr.Blocks(css=custom_css) as demo:
     with gr.Row(elem_classes="app-container"):
-        with gr.Column():
-            input_image = gr.Image(label="Image", type="filepath")
-            negative_image = gr.Image(label="Negative_image", type="filepath")
-            submit_btn = gr.Button("Submit")
-
-        with gr.Column():
-            prompt = gr.Textbox(label="Prompt")
-            neg_prompt = gr.Textbox(label="Neg Prompt")
-            steps = gr.Slider(step=1, minimum=1, maximum=64, value=28, label="Num Steps")
-            use_lora = gr.Checkbox(label="Use LORA", value=True)
-            lora_path = gr.Textbox(label="LoraPath", value="XLabs-AI/flux-lora-collection")
-            lora_name = gr.Textbox(label="LoraName", value="realism_lora.safetensors")
-            lora_weight = gr.Slider(step=0.1, minimum=0, maximum=1, value=0.7, label="Lora Weight")
-            controlnet = gr.Checkbox(label="Use Controlnet(by default uses canny)", value=True)
-            use_ip = gr.Checkbox(label="Use IP")
-            use_depth = gr.Checkbox(label="Use depth")
-            use_hed = gr.Checkbox(label="Use hed")
-            true_gs = gr.Slider(step=0.1, minimum=0, maximum=10, value=3.5, label="TrueGs")
-            guidance = gr.Slider(minimum=1, maximum=10, value=4, label="Guidance")
-            cfg = gr.Slider(minimum=1, maximum=10, value=1, label="CFG")
-
-        with gr.Column():
+        with gr.Column(scale=1, min_width=300, elem_classes="sidebar"):
+            with gr.Column(elem_classes="side_items"):
+                input_image = gr.Image(label="Image", type="filepath")
+                negative_image = gr.Image(label="Negative_image", type="filepath")
+                submit_btn = gr.Button("Submit")
+                prompt = gr.Textbox(label="Prompt")
+                neg_prompt = gr.Textbox(label="Neg Prompt")
+                steps = gr.Slider(step=1, minimum=1, maximum=64, value=28, label="Num Steps")
+                use_lora = gr.Checkbox(label="Use LORA", value=True)
+                lora_path = gr.Textbox(label="LoraPath", value="XLabs-AI/flux-lora-collection")
+                lora_name = gr.Textbox(label="LoraName", value="realism_lora.safetensors")
+                lora_weight = gr.Slider(step=0.1, minimum=0, maximum=1, value=0.7, label="Lora Weight")
+                controlnet = gr.Checkbox(label="Use Controlnet(by default uses canny)", value=True)
+                use_ip = gr.Checkbox(label="Use IP")
+                use_depth = gr.Checkbox(label="Use depth")
+                use_hed = gr.Checkbox(label="Use hed")
+                true_gs = gr.Slider(step=0.1, minimum=0, maximum=10, value=3.5, label="TrueGs")
+                guidance = gr.Slider(minimum=1, maximum=10, value=4, label="Guidance")
+                cfg = gr.Slider(minimum=1, maximum=10, value=1, label="CFG")
+
+        with gr.Column(scale=2, elem_classes="app"):
             output = gr.Gallery(label="Galery output", elem_classes="galery", selected_index=0)
 
     submit_btn.click(process_image, inputs=[input_image, prompt, steps, use_lora, controlnet, use_depth, use_hed, use_ip, lora_name, lora_path, lora_weight, negative_image, neg_prompt, true_gs, guidance, cfg], outputs=output)