Update app.py

app.py

@@ -100,22 +100,33 @@ def run_example(image):
     
     return output_image
 css = """
-  #output {
-    height: 1000px; 
-    overflow: auto; 
-    border: 1px solid #ccc; 
-  }
+#output_img {
+    height: 600px;
+    width: 100%;
+    object-fit: contain;
+}
+#input_img {
+    max-width: 150px;
+    max-height: 150px;
+    object-fit: cover;
+    cursor: pointer;
+}
+#input_img img:hover {
+    opacity: 0.8;
+}
 """
+
 with gr.Blocks(css=css) as demo:
     gr.Markdown(TITLE)
     gr.Markdown(DESCRIPTION)
     with gr.Tab(label="Florence-2 Image Processing"):
         with gr.Row():
-            with gr.Column():
-                input_img = gr.Image(label="Input Picture")
+            with gr.Column(scale=1):
+                input_img = gr.Image(label="Input Picture (click to expand)", elem_id="input_img")
                 submit_btn = gr.Button(value="Submit")
-            with gr.Column():
-                output_img = gr.Image(label="Output Image with Bounding Boxes")
+            with gr.Column(scale=3):
+                output_img = gr.Image(label="Output Image with Bounding Boxes", elem_id="output_img")
+        
         gr.Examples(
             examples=[
                 ["https://huggingface.co/datasets/CATMuS/medieval-segmentation/resolve/main/data/train/cambridge-corpus-christi-college-ms-111/page-002-of-003.jpg"],