Update app.py

app.py

@@ -159,77 +159,22 @@ def generate_presigned_url(object_url):
 
             
 with gr.Blocks() as demo:
-    gr.Markdown("## Virtual Try-On")
-
-    # Fixed layout for desktop, responsive only for mobile
-    with gr.Row(elem_id="responsive-container"):
-        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(
-        display_image, 
-        inputs=[uploaded_image, image_url_input], 
-        outputs=output_display
-    )
-
-    # Update the garment image when the URL changes
+    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
     )
-
-# Custom CSS for mobile responsiveness
-custom_css = """
-/* Default layout for PC screens */
-#responsive-container {
-    display: flex;
-    flex-direction: row;
-    gap: 20px;
-    justify-content: center;
-    align-items: center;
-}
-#responsive-container .gr-box {
-    flex: 1;
-    max-width: 384px;
-}
-
-/* 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%;
-    }
-}
-"""
-
-# Attach the custom CSS
-demo.css = custom_css
-
+    submit_btn = gr.Button("Submit")
+    submit_btn.click(
+        display_image, 
+        inputs=[uploaded_image, image_url_input], 
+        outputs=output_display
+    )
 
 demo.launch(share=True)