Seg: rename label to 'Outputs (29 classes)', vertical legend right of overlay, active opacity 0.70, heights 640

app.py

@@ -204,17 +204,25 @@ CUSTOM_CSS = """
 #seg-out .mask { opacity: 0.55 !important;
                  transition: opacity 180ms ease, filter 180ms ease; }
 #seg-out .image-container:hover .mask { opacity: 0.15 !important; }
-#seg-out .mask.active { opacity: 1.0 !important;
-                        filter: brightness(1.10) drop-shadow(0 4px 14px rgba(0,0,0,0.30)); }
+#seg-out .mask.active { opacity: 0.70 !important;
+                        filter: brightness(1.12) drop-shadow(0 4px 14px rgba(0,0,0,0.30)); }
 #seg-out .mask.inactive { opacity: 0 !important; }
 
-/* Legend: compact, single-line scroll instead of wrapping (keeps right column near image height). */
-#seg-out .legend { gap: 6px; padding: 8px 4px; max-height: 96px; overflow-y: auto;
-                   flex-wrap: wrap; justify-content: flex-start; }
+/* Legend: vertical column on the right of the image instead of horizontal below. */
+#seg-out .container { flex-direction: row !important; align-items: stretch !important; gap: 12px; }
+#seg-out .image-container { flex: 1 1 auto; min-width: 0; }
+#seg-out .legend {
+    flex: 0 0 180px; flex-direction: column !important; flex-wrap: nowrap !important;
+    align-items: stretch; justify-content: flex-start;
+    gap: 4px; padding: 8px 4px;
+    max-height: 640px; overflow-y: auto;
+    border-left: 1px solid var(--border-color-primary, #e2e8f0);
+}
 #seg-out .legend-item { font-size: 12px; font-weight: 500;
-                        padding: 3px 8px; cursor: pointer;
+                        padding: 4px 10px; width: 100%; cursor: pointer;
+                        border-radius: 6px;
                         transition: transform 140ms ease, background 140ms ease; }
-#seg-out .legend-item:hover { transform: translateY(-1px); }
+#seg-out .legend-item:hover { transform: translateX(2px); }
 """
 
 HEADER_HTML = """
@@ -243,11 +251,11 @@ with gr.Blocks(title="Sapiens2 Seg", theme=gr.themes.Soft(), css=CUSTOM_CSS) as
     gr.HTML(HEADER_HTML)
 
     with gr.Row(equal_height=True):
-        inp = gr.Image(label="Input", type="pil", height=768)
+        inp = gr.Image(label="Input", type="pil", height=640)
         out_annot = gr.AnnotatedImage(
-            label="Body parts",
+            label="Outputs (29 classes)",
             color_map=_CLASS_COLORS_HEX,
-            height=768,
+            height=640,
             show_legend=True,
             elem_id="seg-out",
         )