Update app.py

app.py

@@ -159,23 +159,69 @@ def generate_presigned_url(object_url):
 
             
 with gr.Blocks() as demo:
-    with gr.Row():
-        image_url_input = gr.Textbox(label="Image URL", placeholder="Enter image URL here")
-        input_garment_image = gr.Image(label="Garment Image", type="pil", width="384px", height = "512px")
-        uploaded_image = gr.Image(label="Upload or Capture Image", type="pil", width="384px", height="512px")
-        output_display = gr.Image(label="Displayed Image or URL Result", width="384px", height="512px")
-    
-    image_url_input.change(
-        load_image_from_url, 
-        inputs=image_url_input, 
-        outputs=input_garment_image
-    )
-    submit_btn = gr.Button("Submit")
+    gr.Markdown("## Virtual Try-On")
+
+    # Responsive container for different screen sizes
+    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"
+            )
+
+    submit_btn = gr.Button("Submit", elem_id="submit-btn")
     submit_btn.click(
         display_image, 
         inputs=[uploaded_image, image_url_input], 
         outputs=output_display
     )
 
+    # Update the garment image when the URL changes
+    image_url_input.change(
+        load_image_from_url, 
+        inputs=image_url_input, 
+        outputs=input_garment_image
+    )
+
+# Custom CSS for responsiveness
+custom_css = """
+#responsive-container {
+    flex-wrap: wrap !important;  /* Allow wrapping on small screens */
+    justify-content: center;
+}
+#responsive-container .gr-column {
+    flex: 1 1 100%;  /* Full width on small screens */
+    max-width: 100%; /* Prevent exceeding screen width */
+}
+@media (min-width: 768px) {
+    #responsive-container .gr-column {
+        flex: 1 1 50%;  /* Half width on larger screens */
+        max-width: 50%;
+    }
+}
+"""
+
+# Attach the custom CSS
+demo.css = custom_css
+
 
 demo.launch(share=True)