Update app.py

app.py

@@ -356,7 +356,7 @@ class BGSource(Enum):
 # 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 JavaScript for aspect ratio
         gr.HTML("""
         <style>
         body::before {
@@ -381,17 +381,39 @@ def create_demo():
             padding: 6px !important;
         }
         </style>
+        <script>
+        function updateAspectRatio(ratio, widthSliderId, heightSliderId) {
+            const widthSlider = document.querySelector(`#${widthSliderId} input`);
+            const heightSlider = document.querySelector(`#${heightSliderId} input`);
+            if (!widthSlider || !heightSlider) return;
+            
+            if (ratio === "1:1") {
+                widthSlider.value = 640;
+                heightSlider.value = 640;
+            } else if (ratio === "9:16") {
+                widthSlider.value = 512;
+                heightSlider.value = Math.round(512 * 16 / 9);
+            } else if (ratio === "16:9") {
+                widthSlider.value = Math.round(512 * 16 / 9);
+                heightSlider.value = 512;
+            }
+            
+            widthSlider.dispatchEvent(new Event('input'));
+            heightSlider.dispatchEvent(new Event('input'));
+        }
+        </script>
         """)
 
         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')  # Visible output
+            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)
+            image_width = gr.Slider(label="Gjerësia e Imazhit", minimum=256, maximum=1024, value=640, step=64, visible=False, elem_id="image_width_slider")
+            image_height = gr.Slider(label="Lartësia e Imazhit", minimum=256, maximum=1024, value=640, step=64, visible=False, elem_id="image_height_slider")
             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)
@@ -403,6 +425,14 @@ def create_demo():
             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(
+            fn=lambda ratio: None,
+            inputs=[aspect_ratio],
+            outputs=None,
+            _js="function(ratio) { updateAspectRatio(ratio, 'image_width_slider', 'image_height_slider'); }"
+        )
+
         # Bind the relight button
         ips = [
             input_fg, prompt, image_width, image_height, num_samples, seed, steps,