Upload app.py

app.py

@@ -259,7 +259,7 @@ def predict(image: np.ndarray):
 
 SEA_CSS = """
 body, .gradio-container { background: linear-gradient(180deg, #e7f3fb 0%, #d9eef9 60%, #cfe8f5 100%) !important; }
-.gradio-container { max-width: 1100px; margin: 0 auto; }
+.gradio-container { max-width: 1100px; margin: 0 auto; color: #111; }
 .gr-block { gap: 8px; }
 .title { color: #0b3d59; }
 /* Compact slider styling */
@@ -267,8 +267,10 @@ body, .gradio-container { background: linear-gradient(180deg, #e7f3fb 0%, #d9eef
 .compact-slider .wrap { padding: 0 !important; }
 /* Remove component box chrome where undesired */
 .no-box .gr-box { box-shadow: none !important; border: none !important; background: transparent !important; padding: 0 !important; }
-/* Compact legend styling */
-.legend-box { width: 220px; max-height: 480px; overflow: auto; background: transparent; border: none; padding: 4px 4px; }
+/* Horizontal legend styling */
+.legend-row { width: 100%; padding: 4px 0; }
+.legend-row .legend-item { display: inline-flex; align-items: center; gap: 6px; margin: 2px 8px 2px 0; color: #111; font-size: 12px; }
+.legend-row .chip { display: inline-block; width: 14px; height: 14px; border: 1px solid #333; }
 """
 
 with gr.Blocks(css=SEA_CSS) as demo:
@@ -287,14 +289,14 @@ with gr.Blocks(css=SEA_CSS) as demo:
         example_paths = []
 
     with gr.Row():
-        inp = gr.Image(type="numpy", label="Input image", height=320)
-        mix = gr.Slider(0.0, 1.0, value=0.5, step=0.05, label="Segmentation mix (0=image, 1=seg)", elem_classes=["compact-slider", "no-box"])
-    if example_paths:
-        gr.Examples(examples=example_paths, inputs=inp, label="Examples from ./images")
-
-    with gr.Row():
-        out = gr.Image(type="numpy", label="Segmentation overlay", height=512)
-        legend = gr.HTML(value="", elem_classes=["legend-box", "no-box"]) 
+        with gr.Column(scale=6):
+            inp = gr.Image(type="numpy", label="Input image", height=380)
+            if example_paths:
+                gr.Examples(examples=example_paths, inputs=inp, label="Examples from ./images")
+            mix = gr.Slider(0.0, 1.0, value=0.5, step=0.05, label="Segmentation mix (0=image, 1=seg)", elem_classes=["compact-slider", "no-box"])
+        with gr.Column(scale=6):
+            out = gr.Image(type="numpy", label="Segmentation overlay", height=512)
+            legend = gr.HTML(value="", elem_classes=["legend-row", "no-box"]) 
     btn = gr.Button("Segment")
 
     # Hold last input image and segmentation RGB to re-blend without re-inference
@@ -304,13 +306,13 @@ with gr.Blocks(css=SEA_CSS) as demo:
     info = gr.Markdown(value="")
     # Legend
     def _legend_html():
-        rows = []
+        items = []
         for i, name in enumerate(_classes):
             color = _FIXED_PALETTE[i] if i < len(_FIXED_PALETTE) else [128, 128, 128]
-            rows.append(f'<div style="display:flex;align-items:center;gap:8px;margin:2px 0;">'
-                        f'<span style="display:inline-block;width:14px;height:14px;background:rgb({color[0]},{color[1]},{color[2]});border:1px solid #333"></span>'
-                        f'<span style="font-size:12px;">{i}: {name}</span></div>')
-        return "<div>"+"".join(rows)+"</div>"
+            items.append(
+                f'<span class="legend-item"><span class="chip" style="background:rgb({color[0]},{color[1]},{color[2]})"></span>{i}: {name}</span>'
+            )
+        return "<div class=\"legend-row\">"+"".join(items)+"</div>"
     legend.value = _legend_html()
 
     def _predict_with_alpha(img, s_mix):