Latest Changes

ui/layout.py

@@ -14,54 +14,78 @@ def build_ui(model, processor):
             style=style
         )
 
-    with gr.Blocks(title="BLIP Image Captioning (Zero-GPU)") as demo:
-        with gr.Column(elem_id="container"):
-            gr.Markdown("## 🖼️ BLIP Image Captioning (Zero-GPU)")
-            gr.Markdown(
-                "Generate captions or explanations from images using a CPU-only BLIP model."
-            )
+    with gr.Blocks(
+        title="BLIP Image Captioning (Zero-GPU)",
+        fill_height=True
+    ) as demo:
 
-            with gr.Row(equal_height=True):
-                with gr.Column():
-                    image_input = gr.Image(
-                        type="pil",
-                        label="Upload Image"
-                    )
-                    generate_btn = gr.Button("Generate")
+        gr.Markdown("## 🖼️ BLIP Image Captioning (Zero-GPU)")
+        gr.Markdown(
+            "Generate captions or explanations from images using a CPU-only BLIP model."
+        )
+
+        # -----------------------------
+        # MAIN FIXED LAYOUT
+        # -----------------------------
+        with gr.Row(equal_height=True):
+
+            # LEFT: Image Column (Fixed)
+            with gr.Column(scale=1, min_width=420):
+                image_input = gr.Image(
+                    type="pil",
+                    label="Upload Image",
+                    height=420,
+                    elem_id="image-box"
+                )
+                generate_btn = gr.Button(
+                    "Generate",
+                    variant="primary"
+                )
+
+            # RIGHT: Controls + Output (Fixed)
+            with gr.Column(scale=1, min_width=420):
 
-                with gr.Column():
-                    style_select = gr.Dropdown(
-                        choices=[
-                            "Short Caption",
-                            "Detailed Caption",
-                            "Creative Caption",
-                            "Image Explanation"
-                        ],
-                        value="Detailed Caption",
-                        label="Caption Style"
-                    )
-                    output_text = gr.Textbox(
-                        label="Generated Output",
-                        lines=5
-                    )
+                style_select = gr.Dropdown(
+                    choices=[
+                        "Short Caption",
+                        "Detailed Caption",
+                        "Creative Caption",
+                        "Image Explanation"
+                    ],
+                    value="Detailed Caption",
+                    label="Caption Style"
+                )
 
-            # ✅ Examples preload inputs ONLY
-            gr.Examples(
-                examples=[
-                    ["./assets/zebra.jpg", "Detailed Caption"],
-                    ["./assets/cat.jpg", "Image Explanation"],
-                    ["./assets/fridge.jpg", "Detailed Caption"],
-                    ["./assets/marriage.jpg", "Creative Caption"],
-                    ["./assets/giraffe.jpg", "Short Caption"]
-                ],
-                inputs=[image_input, style_select]
-            )
+                output_text = gr.Textbox(
+                    label="Generated Output",
+                    lines=6,
+                    max_lines=8,
+                    elem_id="output-box"
+                )
 
-            # ✅ Single source of inference
-            generate_btn.click(
-                fn=run_caption,
-                inputs=[image_input, style_select],
-                outputs=output_text
-            )
+        # -----------------------------
+        # EXAMPLES (SEPARATE SECTION)
+        # -----------------------------
+        gr.Markdown("### Examples")
+
+        gr.Examples(
+            examples=[
+                ["./assets/zebra.jpg", "Detailed Caption"],
+                ["./assets/cat.jpg", "Image Explanation"],
+                ["./assets/fridge.jpg", "Detailed Caption"],
+                ["./assets/marriage.jpg", "Creative Caption"],
+                ["./assets/giraffe.jpg", "Short Caption"]
+            ],
+            inputs=[image_input, style_select]
+        )
+
+        # -----------------------------
+        # EVENT
+        # -----------------------------
+        generate_btn.click(
+            fn=run_caption,
+            inputs=[image_input, style_select],
+            outputs=output_text
+        )
 
     return demo

ui/styles.py

@@ -1,16 +1,25 @@
 CSS_STYLE = """
-#container {
-    max-width: 1280px;
-    margin: auto;
+#image-box {
+    max-height: 420px;
 }
 
-@media (min-width: 1600px) {
-    #container {
-        max-width: 1440px;
-    }
+#image-box img {
+    object-fit: contain;
+}
+
+#output-box textarea {
+    min-height: 180px;
+    max-height: 240px;
 }
 
-#title h1 {
-    font-size: 2.4em !important;
+.gradio-container {
+    max-width: 1100px !important;
+    margin: auto;
+}
+
+@media (max-width: 900px) {
+    .gradio-container {
+        padding: 12px;
+    }
 }
 """