Fix image display sizes with improved layout

- Switched from Interface to Blocks for better layout control
- Added custom CSS to ensure consistent image display sizes
- Created side-by-side comparison layout with input and enhanced output
- Set max-height and object-fit to maintain aspect ratios
- Full resolution output shown separately below comparison

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app.py

@@ -722,7 +722,7 @@ def upscale_image(image):
     return Image.fromarray(output_np)
 
 
-# Gradio interface
+# Gradio interface using Blocks for better layout control
 def upscale_and_resize_for_display(image):
     # Get the super-resolution output
     upscaled = upscale_image(image)
@@ -732,18 +732,35 @@ def upscale_and_resize_for_display(image):
 
     return upscaled, display_upscaled
 
-iface = gr.Interface(
-    fn=upscale_and_resize_for_display,
-    inputs=gr.Image(type="pil", label="Input Satellite Image"),
-    outputs=[
-        gr.Image(type="pil", label="Super-Resolution Output (4x) - Full Size"),
-        gr.Image(type="pil", label="Super-Resolution Output (4x) - Resized for Comparison")
-    ],
-    title="HAT Super-Resolution for Satellite Images",
-    description="Upload a satellite image to enhance its resolution by 4x using a fine-tuned HAT model. The first output shows the full 4x resolution, while the second output is resized to match the input for easy visual comparison of quality improvements.",
-    examples=None,
-    cache_examples=False
-)
+# Custom CSS to ensure images display at same size
+css = """
+.image-container img {
+    max-width: 100% !important;
+    max-height: 400px !important;
+    object-fit: contain !important;
+}
+"""
+
+with gr.Blocks(css=css, title="HAT Super-Resolution for Satellite Images") as iface:
+    gr.Markdown("# HAT Super-Resolution for Satellite Images")
+    gr.Markdown("Upload a satellite image to enhance its resolution by 4x using a fine-tuned HAT model. Compare the input with the enhanced version side-by-side.")
+
+    with gr.Row():
+        with gr.Column():
+            input_image = gr.Image(type="pil", label="Input Satellite Image", elem_classes=["image-container"])
+            submit_btn = gr.Button("Enhance Image", variant="primary")
+
+        with gr.Column():
+            comparison_output = gr.Image(type="pil", label="Enhanced Output (Same Size for Comparison)", elem_classes=["image-container"])
+
+    with gr.Row():
+        full_output = gr.Image(type="pil", label="Full Resolution Output (4x)")
+
+    submit_btn.click(
+        fn=upscale_and_resize_for_display,
+        inputs=input_image,
+        outputs=[full_output, comparison_output]
+    )
 
 if __name__ == "__main__":
     iface.launch()