Update app.py

app.py

@@ -353,10 +353,24 @@ class BGSource(Enum):
     TOP = "Dritë nga Sipër"
     BOTTOM = "Dritë nga Poshtë"
 
+# Function to update aspect ratio
+def update_aspect_ratio(ratio):
+    if ratio == "1:1":
+        return 640, 640
+    elif ratio == "9:16":
+        width = 512
+        height = int(round(512 * 16 / 9 / 64)) * 64  # Round to nearest multiple of 64
+        return width, height
+    elif ratio == "16:9":
+        width = int(round(512 * 16 / 9 / 64)) * 64  # Round to nearest multiple of 64
+        height = 512
+        return width, height
+    return 640, 640  # Default to 1:1
+
 # UI Layout
 def create_demo():
     with gr.Blocks() as block:
-        # CSS for 320px gap, download button scaling, and JavaScript for aspect ratio
+        # CSS for 320px gap and download button scaling
         gr.HTML("""
         <style>
         body::before {
@@ -381,27 +395,6 @@ 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():
@@ -412,8 +405,8 @@ def create_demo():
             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, 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")
+            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)
@@ -427,10 +420,9 @@ def create_demo():
 
         # Update hidden sliders based on aspect ratio
         aspect_ratio.change(
-            fn=lambda ratio: None,
+            fn=update_aspect_ratio,
             inputs=[aspect_ratio],
-            outputs=None,
-            _js="function(ratio) { updateAspectRatio(ratio, 'image_width_slider', 'image_height_slider'); }"
+            outputs=[image_width, image_height]
         )
 
         # Bind the relight button