Update app.py

app.py

@@ -161,32 +161,30 @@ def generate_presigned_url(object_url):
 with gr.Blocks() as demo:
     gr.Markdown("## Virtual Try-On")
 
-    # Responsive container for different screen sizes
+    # Fixed layout for desktop, responsive only for mobile
     with gr.Row(elem_id="responsive-container"):
-        with gr.Column(scale=1):
-            image_url_input = gr.Textbox(
-                label="Image URL",
-                placeholder="Enter image URL here",
-                interactive=True,
-                elem_id="url-input"
-            )
-            input_garment_image = gr.Image(
-                label="Garment Image",
-                type="pil",
-                interactive=True,
-                elem_id="garment-image"
-            )
-        with gr.Column(scale=1):
-            uploaded_image = gr.Image(
-                label="Upload or Capture Image",
-                type="pil",
-                interactive=True,
-                elem_id="uploaded-image"
-            )
-            output_display = gr.Image(
-                label="Displayed Image or URL Result",
-                elem_id="output-image"
-            )
+        image_url_input = gr.Textbox(
+            label="Image URL",
+            placeholder="Enter image URL here",
+            interactive=True,
+            elem_id="url-input"
+        )
+        input_garment_image = gr.Image(
+            label="Garment Image",
+            type="pil",
+            interactive=True,
+            elem_id="garment-image"
+        )
+        uploaded_image = gr.Image(
+            label="Upload or Capture Image",
+            type="pil",
+            interactive=True,
+            elem_id="uploaded-image"
+        )
+        output_display = gr.Image(
+            label="Displayed Image or URL Result",
+            elem_id="output-image"
+        )
 
     submit_btn = gr.Button("Submit", elem_id="submit-btn")
     submit_btn.click(
@@ -202,20 +200,30 @@ with gr.Blocks() as demo:
         outputs=input_garment_image
     )
 
-# Custom CSS for responsiveness
+# Custom CSS for mobile responsiveness
 custom_css = """
+/* Default layout for PC screens */
 #responsive-container {
-    flex-wrap: wrap !important;  /* Allow wrapping on small screens */
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
     justify-content: center;
+    align-items: center;
 }
-#responsive-container .gr-column {
-    flex: 1 1 100%;  /* Full width on small screens */
-    max-width: 100%; /* Prevent exceeding screen width */
+#responsive-container .gr-box {
+    flex: 1;
+    max-width: 384px;
 }
-@media (min-width: 768px) {
-    #responsive-container .gr-column {
-        flex: 1 1 50%;  /* Half width on larger screens */
-        max-width: 50%;
+
+/* Responsive layout for mobile screens */
+@media (max-width: 768px) {
+    #responsive-container {
+        flex-wrap: wrap;
+        flex-direction: column;
+    }
+    #responsive-container .gr-box {
+        flex: 1 1 100%;
+        max-width: 100%;
     }
 }
 """