Update app.py

app.py

@@ -370,7 +370,7 @@ def update_aspect_ratio(ratio):
 # UI Layout
 def create_demo():
     with gr.Blocks() as block:
-        # CSS for 320px gap and download button scaling
+        # CSS for 320px gap, download button scaling, and container width constraint
         gr.HTML("""
         <style>
         body::before {
@@ -394,29 +394,37 @@ def create_demo():
             margin: 0 !important;
             padding: 6px !important;
         }
+        .constrained-container {
+            max-width: 600px; /* Limits container width */
+            margin: 0 auto; /* Centers the container */
+        }
         </style>
         """)
 
-        with gr.Column():
-            input_fg = gr.Image(sources='upload', type="numpy", label="Imazhi i Ngarkuar", height=480)
-            prompt = gr.Textbox(label="Përshkrimi", placeholder="Shkruani përshkrimin këtu")
-            bg_source = gr.Radio(choices=[e.value for e in BGSource], value=BGSource.NONE.value, label="Preferenca e Ndriçimit", type='value')
-            aspect_ratio = gr.Radio(choices=["9:16", "1:1", "16:9"], value="1:1", label="Raporti i Aspektit")
-            relight_button = gr.Button(value="Rindriço")
-            result_gallery = gr.Gallery(label="Rezultatet", height=832, object_fit='contain')
-            # Hidden components for other parameters and output_bg
-            image_width = gr.Slider(label="Gjerësia e Imazhit", minimum=256, maximum=1024, value=640, step=64, visible=False)
-            image_height = gr.Slider(label="Lartësia e Imazhit", minimum=256, maximum=1024, value=640, step=64, visible=False)
-            num_samples = gr.Slider(label="Numri i Imazheve", minimum=1, maximum=12, value=1, step=1, visible=False)
-            seed = gr.Number(label="Fara", value=12345, precision=0, visible=False)
-            steps = gr.Slider(label="Hapat", minimum=1, maximum=100, value=50, step=1, visible=False)
-            a_prompt = gr.Textbox(label="Përshkrim i Shtuar", value='best quality', visible=False)
-            n_prompt = gr.Textbox(label="Përshkrim Negativ", value='lowres, bad anatomy, bad hands, cropped, worst quality', visible=False)
-            cfg = gr.Slider(label="Shkalla CFG", minimum=1.0, maximum=32.0, value=2, step=0.01, visible=False)
-            highres_scale = gr.Slider(label="Shkalla e Rezolutës së Lartë", minimum=1.0, maximum=3.0, value=2, step=0.01, visible=False)
-            highres_denoise = gr.Slider(label="Denoise i Rezolutës së Lartë", minimum=0.1, maximum=1.0, value=0.5, step=0.01, visible=False)
-            lowres_denoise = gr.Slider(label="Denoise i Rezolutës së Ulët", minimum=0.1, maximum=1.0, value=0.9, step=0.01, visible=False)
-            output_bg = gr.Image(type="numpy", label="Parapërpunimi i Planit të Parë", visible=False)
+        gr.Markdown("# Rindriço Imazhin")
+        gr.Markdown("Rindriço imazhin duke ndryshuar sfondin bazuar në përshkrimin e dhënë")
+
+        with gr.Row():
+            with gr.Column(elem_classes="constrained-container"):
+                input_fg = gr.Image(sources='upload', type="numpy", label="Imazhi i Ngarkuar", height=480, width=480)
+                prompt = gr.Textbox(label="Përshkrimi", placeholder="Shkruani përshkrimin këtu")
+                bg_source = gr.Radio(choices=[e.value for e in BGSource], value=BGSource.NONE.value, label="Preferenca e Ndriçimit", type='value')
+                aspect_ratio = gr.Radio(choices=["9:16", "1:1", "16:9"], value="1:1", label="Raporti i Aspektit")
+                relight_button = gr.Button(value="Rindriço")
+                result_gallery = gr.Gallery(label="Rezultatet", height=832, object_fit='contain', elem_classes="constrained-container")
+                # Hidden components for other parameters and output_bg
+                image_width = gr.Slider(label="Gjerësia e Imazhit", minimum=256, maximum=1024, value=640, step=64, visible=False)
+                image_height = gr.Slider(label="Lartësia e Imazhit", minimum=256, maximum=1024, value=640, step=64, visible=False)
+                num_samples = gr.Slider(label="Numri i Imazheve", minimum=1, maximum=12, value=1, step=1, visible=False)
+                seed = gr.Number(label="Fara", value=12345, precision=0, visible=False)
+                steps = gr.Slider(label="Hapat", minimum=1, maximum=100, value=50, step=1, visible=False)
+                a_prompt = gr.Textbox(label="Përshkrim i Shtuar", value='best quality', visible=False)
+                n_prompt = gr.Textbox(label="Përshkrim Negativ", value='lowres, bad anatomy, bad hands, cropped, worst quality', visible=False)
+                cfg = gr.Slider(label="Shkalla CFG", minimum=1.0, maximum=32.0, value=2, step=0.01, visible=False)
+                highres_scale = gr.Slider(label="Shkalla e Rezolutës së Lartë", minimum=1.0, maximum=3.0, value=2, step=0.01, visible=False)
+                highres_denoise = gr.Slider(label="Denoise i Rezolutës së Lartë", minimum=0.1, maximum=1.0, value=0.5, step=0.01, visible=False)
+                lowres_denoise = gr.Slider(label="Denoise i Rezolutës së Ulët", minimum=0.1, maximum=1.0, value=0.9, step=0.01, visible=False)
+                output_bg = gr.Image(type="numpy", label="Parapërpunimi i Planit të Parë", visible=False)
 
         # Update hidden sliders based on aspect ratio
         aspect_ratio.change(