update on ui

_utils/image_io.py

@@ -144,6 +144,26 @@ def _shape_axes(path):
         return (h, w), "YX"
 
 
+_PIL_BITS = {"1": 1, "L": 8, "P": 8, "LA": 8, "PA": 8, "RGB": 8, "RGBA": 8,
+             "CMYK": 8, "YCbCr": 8, "LAB": 8, "HSV": 8,
+             "I;16": 16, "I;16B": 16, "I;16L": 16, "I": 32, "F": 32}
+
+
+def bit_depth(path):
+    """Bits per sample, read from metadata only (0 if it cannot be determined)."""
+    if tifffile is not None:
+        try:
+            with _open_tiff(path) as tif:
+                return int(np.dtype(tif.series[0].dtype).itemsize) * 8
+        except Exception:  # noqa: BLE001 - fall through to PIL
+            pass
+    try:
+        with Image.open(path) as img:
+            return int(_PIL_BITS.get(img.mode, 0))
+    except Exception:  # noqa: BLE001
+        return 0
+
+
 def _plan_axes(shape, axes):
     """Drop size-1 axes, infer a channel axis when the file names none, and move
     it last.

app.py

@@ -11,6 +11,7 @@ import uuid
 from pathlib import Path
 import tempfile
 import zipfile
+import html
 from skimage import measure
 from matplotlib import cm
 from glob import glob
@@ -22,7 +23,7 @@ from inference_seg import load_model as load_seg_model, run as run_seg
 from inference_count import load_model as load_count_model, run as run_count
 from inference_track import load_model as load_track_model, run as run_track
 from _utils.image_io import (
-    standardize_image, inspect_image, image_size, array_nbytes, pixel_stats,
+    standardize_image, inspect_image, image_size, array_nbytes, pixel_stats, bit_depth,
     RECOMMENDED_SIZE, WARN_SIZE, MAX_SIZE, MIN_SIZE, MAX_READ_BYTES, TIFF_EXTENSIONS,
 )
 
@@ -1063,16 +1064,16 @@ def track_video_handler(use_box_choice, first_frame_annot, zip_file_obj, overlay
         if box_array:
             bbox_info = f"\n🔲 Using bounding box: [{box_array[0][0]}, {box_array[0][1]}, {box_array[0][2]}, {box_array[0][3]}]"
 
-        result_text = f"""✅ Tracking completed!
-
-            🖼️  Processed frames: {len(valid_tif_files)}{bbox_info}
-
-            📥 Click the button below to download CTC-format results
-            The results include:
-            - res_track.txt (CTC-format tracking data)
-            - Other tracking-related files
-            - README.txt (Results description)
-            """
+        result_text = (
+            f"✅ Tracking completed!\n"
+            f"\n"
+            f"🖼️  Processed frames: {len(valid_tif_files)}{bbox_info}\n"
+            f"\n"
+            f"📥 Use the \"Download (.zip)\" button above to get the results, which include:\n"
+            f"- res_track.txt (CTC-format tracking data)\n"
+            f"- Other tracking-related files\n"
+            f"- README.txt (Results description)"
+        )
 
         if use_box_choice == "Yes" and box_array:
             result_text += f"\n📦 Using bounding box: {box_array}"
@@ -1110,34 +1111,70 @@ example_images_seg = [f for f in glob("example_imgs/seg/*")]
 example_images_cnt = [f for f in glob("example_imgs/cnt/*")]
 example_tracking_zips = [f for f in glob("example_imgs/tra/*.zip")]
 
+_CHANNEL_NOTE = {1: "grayscale", 3: "RGB", 4: "RGBA"}
+
+
+def describe_image_info(raw_path, frame=1):
+    """Metadata line under the result: file, size, channels, bit depth, frames.
+
+    Reads the *original* upload (not the standardized preview) so the numbers
+    describe what the user actually provided. Metadata only - no pixel decode.
+    """
+    if not raw_path or not os.path.exists(raw_path):
+        return gr.update(value="", visible=False)
+
+    info = inspect_image(raw_path)
+    bits = bit_depth(raw_path)
+
+    fields = [f"<span class='ii-k'>File:</span> {html.escape(os.path.basename(raw_path))}"]
+    if info.width and info.height:
+        fields.append(f"<span class='ii-k'>Size:</span> {info.width} × {info.height} px")
+    note = _CHANNEL_NOTE.get(info.channels)
+    fields.append(f"<span class='ii-k'>Channels:</span> {info.channels}"
+                  + (f" ({note})" if note else ""))
+    if bits:
+        fields.append(f"<span class='ii-k'>Bit depth:</span> {bits}-bit")
+    if info.frames > 1:
+        fields.append(f"<span class='ii-k'>Frames:</span> {int(frame)} / {info.frames}")
+    if info.sub_frames > 1:
+        fields.append(f"<span class='ii-k'>{info.sub_label.capitalize()}s:</span> {info.sub_frames}")
+
+    body = "".join(f"<span class='ii-f'>{f}</span>" for f in fields)
+    return gr.update(
+        value=f"<div class='ii-wrap'><span class='ii-title'>ⓘ Image information</span>{body}</div>",
+        visible=True,
+    )
+
+
 # ===== Gradio UI =====
 CSS = """
 /* ── Layout ──────────────────────────────────────────── */
 .gradio-container {
-    max-width: 1380px !important;
+    max-width: 1320px !important;
     margin: 0 auto !important;
     font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
+    background: #fff !important;
 }
 
 /* ── Header markdown polish ───────────────────────────── */
 .gradio-container .prose h1 {
-    font-size: 2rem !important;
+    font-size: 1.4rem !important;
     font-weight: 700 !important;
-    color: #1e293b !important;
-    letter-spacing: -0.5px !important;
-    margin-bottom: 10px !important;
+    color: #1c1c1a !important;
+    letter-spacing: -0.01em !important;
+    margin-bottom: 2px !important;
 }
 .gradio-container .prose h3 {
     font-size: 1rem !important;
     font-weight: 600 !important;
-    color: #0284c7 !important;
+    color: #bf1e2e !important;
     margin-top: 14px !important;
     margin-bottom: 4px !important;
 }
 .gradio-container .prose p {
     margin-top: 4px !important;
     margin-bottom: 6px !important;
-    color: #475569 !important;
+    color: #5c5a52 !important;
     line-height: 1.7 !important;
 }
 .gradio-container .prose ul,
@@ -1146,79 +1183,145 @@ CSS = """
     margin-bottom: 6px !important;
 }
 .gradio-container .prose li {
-    color: #475569 !important;
+    color: #5c5a52 !important;
     line-height: 1.7 !important;
 }
 
-/* ── Top-level header section ─────────────────────────── */
+/* ── Top-level header section: slim, no gradient card ─── */
 .gradio-container > .gap > .prose:first-child {
-    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0fdf4 100%) !important;
-    border: 1px solid #bae6fd !important;
-    border-radius: 16px !important;
-    padding: 28px 36px !important;
-    margin-bottom: 20px !important;
-    box-shadow: 0 4px 20px rgba(14,165,233,0.08) !important;
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    padding: 18px 4px 10px !important;
+    margin-bottom: 8px !important;
+    box-shadow: none !important;
 }
 
-/* ── Tabs ────────────────────────────────────────────── */
-.tabs > .tab-nav {
-    border-bottom: 2px solid #e2e8f0 !important;
+/* ── Mode selector: two-line task cards ──────────────── */
+/* Gradio 5.x markup: .tabs > .tab-wrapper > .tab-container[role=tablist] > button */
+
+/* Undo Gradio's fixed-height, clipped, underlined nav strip */
+.tabs > .tab-wrapper {
+    height: auto !important;
+    padding-bottom: 0 !important;
     margin-bottom: 20px !important;
-    gap: 4px !important;
 }
-.tabs button {
+.tabs > .tab-wrapper > .tab-container {
+    height: auto !important;
+    overflow: visible !important;
+    gap: 14px !important;
+    align-items: stretch !important;
+}
+.tabs > .tab-wrapper > .tab-container::after { display: none !important; }  /* bottom hairline */
+.tabs > .tab-wrapper > .overflow-menu { display: none !important; }         /* "…" menu */
+
+/* The card itself */
+.tabs > .tab-wrapper > .tab-container:not(.visually-hidden) > button {
+    flex: 1 1 0 !important;
+    display: grid !important;
+    grid-template-columns: auto 1fr !important;
+    grid-template-rows: auto auto !important;
+    column-gap: 14px !important;
+    row-gap: 2px !important;
+    align-items: center !important;
+    justify-items: start !important;
+    text-align: left !important;
+    white-space: normal !important;
+    height: auto !important;
+    padding: 16px 20px !important;
+    border-radius: 10px !important;
+    border: 1.5px solid #e7e5e1 !important;
+    background: #fff !important;
+    box-shadow: none !important;
+    color: #1c1c1a !important;
     font-size: 15px !important;
-    font-weight: 600 !important;
-    padding: 11px 24px !important;
-    border-radius: 8px 8px 0 0 !important;
-    color: #64748b !important;
-    transition: color 0.15s, background 0.15s !important;
-}
-.tabs button:hover {
-    color: #0ea5e9 !important;
-    background: #f0f9ff !important;
-}
-.tabs button.selected {
-    color: #0284c7 !important;
-    border-bottom: 3px solid #0284c7 !important;
-    background: transparent !important;
+    font-weight: 700 !important;
+    line-height: 1.3 !important;
+    transition: border-color 0.12s, box-shadow 0.12s, color 0.12s !important;
+}
+
+/* Left icon: spans both rows */
+.tabs > .tab-wrapper > .tab-container:not(.visually-hidden) > button::before {
+    grid-column: 1 !important;
+    grid-row: 1 / span 2 !important;
+    font-size: 26px !important;
+    line-height: 1 !important;
+    align-self: center !important;
+}
+
+/* Subtitle: row 2 of the text column.
+   NOTE: also resets Gradio's .selected::after underline bar (position/size/bg/animation). */
+.tabs > .tab-wrapper > .tab-container:not(.visually-hidden) > button::after {
+    grid-column: 2 !important;
+    grid-row: 2 !important;
+    position: static !important;
+    width: auto !important;
+    height: auto !important;
+    background: none !important;
+    animation: none !important;
+    font-size: 13px !important;
+    font-weight: 400 !important;
+    color: #7a7873 !important;
+    line-height: 1.35 !important;
+}
+
+/* Per-tab icon + description */
+.tabs > .tab-wrapper > .tab-container:not(.visually-hidden) > button:nth-of-type(1)::before { content: "🎨"; }
+.tabs > .tab-wrapper > .tab-container:not(.visually-hidden) > button:nth-of-type(1)::after  { content: "Instance segmentation of microscopic objects"; }
+.tabs > .tab-wrapper > .tab-container:not(.visually-hidden) > button:nth-of-type(2)::before { content: "🔢"; }
+.tabs > .tab-wrapper > .tab-container:not(.visually-hidden) > button:nth-of-type(2)::after  { content: "Microscopy Object Counting Analysis"; }
+.tabs > .tab-wrapper > .tab-container:not(.visually-hidden) > button:nth-of-type(3)::before { content: "🎬"; }
+.tabs > .tab-wrapper > .tab-container:not(.visually-hidden) > button:nth-of-type(3)::after  { content: "Microscopy Object Video Tracking - Supports ZIP Upload"; }
+
+/* States */
+.tabs > .tab-wrapper > .tab-container:not(.visually-hidden) > button:hover {
+    border-color: #e6bdb8 !important;
+    background: #fdf3f2 !important;
+}
+.tabs > .tab-wrapper > .tab-container:not(.visually-hidden) > button.selected {
+    color: #bf1e2e !important;
+    border-color: #bf1e2e !important;
+    box-shadow: 0 0 0 1px #bf1e2e !important;
+    background: #fff !important;
+}
+.tabs > .tab-wrapper > .tab-container:not(.visually-hidden) > button.selected::after {
+    color: #7a7873 !important;   /* description stays gray when selected */
 }
 
 /* ── Buttons ─────────────────────────────────────────── */
 button.primary {
-    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
+    background: #bf1e2e !important;
     border: none !important;
-    border-radius: 10px !important;
+    border-radius: 8px !important;
     color: #fff !important;
     font-weight: 600 !important;
     font-size: 15px !important;
-    box-shadow: 0 3px 12px rgba(14,165,233,0.35) !important;
-    transition: transform 0.12s ease, box-shadow 0.15s ease !important;
+    box-shadow: none !important;
+    transition: background 0.12s ease !important;
 }
 button.primary:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(14,165,233,0.45) !important;
+    background: #a61a28 !important;
 }
 button.secondary {
-    border-radius: 10px !important;
+    border-radius: 8px !important;
     font-weight: 500 !important;
-    border: 1.5px solid #cbd5e1 !important;
-    color: #475569 !important;
+    border: 1.5px solid #d8d5cd !important;
+    color: #3a3a36 !important;
     transition: border-color 0.12s, color 0.12s, background 0.12s !important;
 }
 button.secondary:hover {
-    border-color: #94a3b8 !important;
-    color: #1e293b !important;
-    background: #f8fafc !important;
+    border-color: #bf1e2e !important;
+    color: #bf1e2e !important;
+    background: #fdf3f2 !important;
 }
 
 /* ── Blocks and panels ───────────────────────────────── */
-.gradio-container .block { border-radius: 14px !important; }
+.gradio-container .block { border-radius: 8px !important; }
 .gradio-container .gr-form,
 .gradio-container .gr-box,
 .gradio-container .gr-panel {
-    border-radius: 14px !important;
-    border-color: #e2e8f0 !important;
+    border-radius: 8px !important;
+    border-color: #e7e5e1 !important;
 }
 
 /* ── Labels ──────────────────────────────────────────── */
@@ -1288,14 +1391,27 @@ label { font-weight: 500 !important; color: #374151 !important; }
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
-    border-radius: 12px !important;
-    background: #f8fafc !important;
+    border-radius: 8px !important;
+    background: #f0efeb !important;
 }
 .uniform-height img, .uniform-height canvas {
     max-height: 480px !important;
     object-fit: contain !important;
 }
 
+/* ── Input annotator: match the 480px result panel ───── */
+/* width/height auto keeps the <img> box equal to the rendered picture (no
+   letterbox gaps), so the annotator's ResizeObserver still maps bbox
+   coordinates onto the right rect after scaling. */
+.uniform-height-input img {
+    max-height: 480px !important;
+    width: auto !important;
+    height: auto !important;
+    max-width: 100% !important;
+    object-fit: contain !important;
+    margin: 0 auto !important;
+}
+
 /* ── Density map output ──────────────────────────────── */
 #density_map_output { height: 480px !important; }
 #density_map_output .image-container { height: 480px !important; }
@@ -1306,153 +1422,432 @@ label { font-weight: 500 !important; color: #374151 !important; }
     object-fit: contain !important;
 }
 
-/* ── Tab content description markdown ───────────────── */
-.tabitem .prose h2 {
-    font-size: 1.3rem !important;
-    font-weight: 700 !important;
-    color: #1e293b !important;
-    margin-top: 0 !important;
-    margin-bottom: 10px !important;
-    padding-bottom: 8px !important;
-    border-bottom: 2px solid #e0f2fe !important;
+/* ── "How to use" collapsible instructions (was a permanent wall of text) ── */
+.howto-accordion {
+    border: 1px solid #e7e5e1 !important;
+    border-radius: 8px !important;
+    margin-bottom: 14px !important;
 }
-.tabitem .prose:nth-child(2) {
-    background: #f8fafc !important;
-    border: 1px solid #e2e8f0 !important;
-    border-radius: 10px !important;
-    padding: 12px 18px !important;
-    margin-bottom: 16px !important;
+.howto-accordion .label-wrap {
+    color: #bf1e2e !important;
 }
-.tabitem .prose:nth-child(2) p,
-.tabitem .prose:nth-child(2) li {
-    font-size: 0.91rem !important;
-    color: #64748b !important;
+.howto-accordion .label-wrap span:not(.icon) {
+    font-size: 0.9rem !important;
+    font-weight: 700 !important;
+    color: #bf1e2e !important;
 }
-.tabitem .prose:nth-child(2) strong {
-    color: #0f172a !important;
+.howto-accordion .prose p,
+.howto-accordion .prose li {
+    font-size: 0.87rem !important;
+    color: #5c5a52 !important;
+}
+.howto-accordion .prose strong {
+    color: #1c1c1a !important;
 }
 
-/* ════════════════════════════════════════════════════════
-   DARK MODE  (.dark is added to <html> by Gradio)
-   ════════════════════════════════════════════════════════ */
-
-/* ── Header text ─────────────────────────────────────── */
-.dark .gradio-container .prose h1 {
-    color: #e2e8f0 !important;
+/* ── "How to use": top-right button + centered modal ─── */
+#header_row {
+    align-items: center !important;
+    justify-content: space-between !important;
+    flex-wrap: nowrap !important;
 }
-.dark .gradio-container .prose h3 {
-    color: #38bdf8 !important;
+#header_title { flex: 1 1 auto !important; }
+#how_to_use_btn {
+    flex: 0 0 auto !important;
+    width: auto !important;
+    min-width: 0 !important;
+    align-self: center !important;
+    background: #bf1e2e !important;
+    color: #fff !important;
+    font-weight: 600 !important;
+    font-size: 13.5px !important;
+    border: none !important;
+    border-radius: 6px !important;
+    padding: 9px 16px !important;
+    box-shadow: none !important;
+}
+#how_to_use_btn:hover { background: #a61a28 !important; }
+#how_to_use_modal {
+    position: fixed !important;
+    top: 8% !important;
+    left: 50% !important;
+    transform: translateX(-50%) !important;
+    width: min(600px, 92vw) !important;
+    max-height: 82vh !important;
+    overflow-y: auto !important;
+    background: #fff !important;
+    border: 1px solid #e7e5e1 !important;
+    border-radius: 12px !important;
+    box-shadow: 0 24px 70px rgba(0,0,0,0.28) !important;
+    z-index: 1000 !important;
+    padding: 22px 26px !important;
 }
-.dark .gradio-container .prose p,
-.dark .gradio-container .prose li {
-    color: #94a3b8 !important;
+#how_to_use_modal h3 { margin-top: 12px !important; }
+#close_how_to_use_btn {
+    width: auto !important;
+    min-width: 0 !important;
+    margin-top: 8px !important;
+    border: 1px solid #d8d5cd !important;
+    border-radius: 6px !important;
+    color: #3a3a36 !important;
+    background: #fff !important;
 }
 
-/* ── Top-level header card ───────────────────────────── */
-.dark .gradio-container > .gap > .prose:first-child {
-    background: linear-gradient(135deg, #0c1a2e 0%, #0f2942 50%, #0d1f12 100%) !important;
-    border-color: #1e3a5f !important;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
+/* ── Footer note ─────────────────────────────────────── */
+#footer_note {
+    border-top: 1px solid #e7e5e1 !important;
+    padding-top: 16px !important;
+    margin-top: 24px !important;
 }
+#footer_note p { font-size: 12.5px !important; color: #5c5a52 !important; line-height: 1.8 !important; }
+#footer_note strong { color: #1c1c1a !important; }
 
-/* ── Tabs ────────────────────────────────────────────── */
-.dark .tabs > .tab-nav {
-    border-bottom-color: #334155 !important;
+/* ── Requirements: collapsible panel (open by default) ── */
+.req-panel {
+    border: 1.5px solid #e6bdb8 !important;
+    border-radius: 10px !important;
+    padding: 14px 16px !important;
+    margin-bottom: 14px !important;
+    background: #fdf3f2 !important;
+    box-shadow: 0 1px 4px rgba(28, 28, 26, 0.07) !important;
+}
+.req-panel > *, .req-panel .block, .req-panel .form { background: transparent !important; border: none !important; }
+/* Accordion header: crimson, with a divider only while expanded */
+.req-panel .label-wrap {
+    margin: 0 !important;
+    padding: 0 !important;
+    color: #bf1e2e !important;
+}
+.req-panel .label-wrap.open {
+    margin-bottom: 10px !important;
+    padding-bottom: 8px !important;
+    border-bottom: 1.5px solid #f3d9d5 !important;
+}
+.req-panel .label-wrap span:not(.icon) {
+    font-size: 0.92rem !important;
+    font-weight: 800 !important;
+    color: #bf1e2e !important;
 }
-.dark .tabs button {
-    color: #94a3b8 !important;
+.req-panel .label-wrap .icon { color: #bf1e2e !important; }
+.req-warn {
+    font-size: 12px !important;
+    color: #8a5a1c !important;
+    background: #faf3e6 !important;
+    border: 1px solid #f0dfc0 !important;
+    border-radius: 5px !important;
+    padding: 8px 10px !important;
+    margin-bottom: 8px !important;
 }
-.dark .tabs button:hover {
-    color: #38bdf8 !important;
-    background: rgba(56,189,248,0.08) !important;
+.req-row {
+    display: flex !important;
+    justify-content: space-between !important;
+    gap: 16px !important;
+    font-size: 12.5px !important;
+    padding: 7px 0 !important;
+    border-bottom: 1px solid #f0efeb !important;
 }
-.dark .tabs button.selected {
-    color: #38bdf8 !important;
-    border-bottom-color: #38bdf8 !important;
+.req-row:last-of-type { border-bottom: none !important; }
+.req-label { color: #8b8981 !important; flex-shrink: 0 !important; }
+.req-val { color: #1c1c1a !important; font-weight: 500 !important; text-align: right !important; }
+.req-val a { color: #bf1e2e !important; }
+.req-val code {
+    font-size: 12px !important;
+    background: #f5f3f0 !important;
+    padding: 1px 5px !important;
+    border-radius: 4px !important;
+    color: #1c1c1a !important;
 }
+.req-note { font-size: 12px !important; color: #5c5a52 !important; margin-top: 10px !important; line-height: 1.5 !important; }
 
-/* ── Buttons ─────────────────────────────────────────── */
-.dark button.secondary {
-    border-color: #475569 !important;
-    color: #94a3b8 !important;
+/* ── Result card ─────────────────────────────────────── */
+/* The row carries the -8px hug to the frame below, so the pill keeps a normal
+   box and centre-aligns with the download button instead of sitting lower. */
+.result-header {
+    align-items: center !important;
+    gap: 12px !important;
+    /* the download button makes this row taller than a bare pill, so it needs
+       a deeper pull-down than .frame-heading's -8px to hug the card below */
+    margin-bottom: -16px !important;
+}
+.result-header .frame-heading { margin-bottom: 0 !important; }
+.result-download {
+    border: 1px solid #d9d7d2 !important;
+    background: #fff !important;
+    color: #1c1c1a !important;
+    font-weight: 600 !important;
+    border-radius: 8px !important;
+    box-shadow: none !important;
+}
+.result-download:hover {
+    border-color: #bf1e2e !important;
+    color: #bf1e2e !important;
+    background: #fdf3f2 !important;
+}
+
+/* Opacity on one line. Gradio nests the label and the number box together in
+   .head; display:contents lifts them into .wrap's flex row so the track can be
+   ordered between them. */
+.opacity-row .wrap {
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    gap: 14px !important;
+}
+.opacity-row .head { display: contents !important; }
+.opacity-row .head label { order: 1 !important; flex: 0 0 auto !important; margin: 0 !important; }
+/* the theme gives block labels a tinted pill; plain text here */
+.opacity-row .head label,
+.opacity-row .head label span {
     background: transparent !important;
+    padding: 0 !important;
+    color: #1c1c1a !important;
+    font-weight: 600 !important;
+    font-size: 14px !important;
+    white-space: nowrap !important;
 }
-.dark button.secondary:hover {
-    border-color: #64748b !important;
-    color: #e2e8f0 !important;
-    background: rgba(255,255,255,0.05) !important;
+.opacity-row .slider_input_container { order: 2 !important; flex: 1 1 auto !important; }
+.opacity-row .tab-like-container { order: 3 !important; flex: 0 0 auto !important; }
+.opacity-row .min_value, .opacity-row .max_value { display: none !important; }
+
+/* ── Section cards: give each block its own frame ────── */
+.section-card {
+    border: 1px solid #e7e5e1 !important;
+    border-radius: 12px !important;
+    background: #fff !important;
+    padding: 16px !important;
+    box-shadow: 0 1px 3px rgba(28, 28, 26, 0.04) !important;
 }
 
-/* ── Blocks / panels ─────────────────────────────────── */
-.dark .gradio-container .gr-form,
-.dark .gradio-container .gr-box,
-.dark .gradio-container .gr-panel {
-    border-color: #334155 !important;
+/* No card here - it's one short control. But Gradio wraps lone inputs in a
+   .form that paints its own fill, which shows as a grey band behind the row
+   once the control is only one line tall. */
+.bbox-slot .form,
+.bbox-slot > .block {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
 }
 
-/* ── Labels ──────────────────────────────────────────── */
-.dark label {
-    color: #cbd5e1 !important;
+/* Radio label + options on one line (Block = BlockTitle span + .wrap) */
+.inline-radio {
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    flex-wrap: wrap !important;
+    gap: 12px !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
 }
-.dark .block-label,
-.dark .block-label span {
-    color: var(--block-label-text-color) !important;
-    font-weight: var(--block-label-text-weight) !important;
+.inline-radio > span { margin: 0 !important; flex: 0 0 auto !important; }
+.inline-radio .wrap { flex: 0 0 auto !important; margin: 0 !important; }
+
+/* ── Image information line under the result ─────────── */
+/* gr.HTML puts elem_classes on BOTH the outer Block and the inner .prose div,
+   so draw the box once on the inner one and strip the outer wrapper. */
+.block.img-info {
+    border: none !important;
+    background: transparent !important;
+    padding: 0 !important;
+    box-shadow: none !important;
+}
+.img-info.prose {
+    border: 1px solid #e7e5e1 !important;
+    border-radius: 10px !important;
+    background: #fff !important;
+    padding: 12px 14px !important;
+    margin: 4px 0 8px !important;
+}
+.ii-wrap {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: center !important;
+    gap: 6px 20px !important;
+    font-size: 12.5px !important;
+    color: #1c1c1a !important;
+    line-height: 1.5 !important;
 }
+.ii-title { color: #8b8981 !important; white-space: nowrap !important; }
+.ii-f { white-space: nowrap !important; }
+.ii-k { color: #5c5a52 !important; font-weight: 700 !important; margin-right: 3px !important; }
 
-/* ── Image output area ───────────────────────────────── */
-.dark .uniform-height {
-    background: #1e293b !important;
+/* ── Feedback: one row (rating + comment + submit) ───── */
+.feedback-title p { font-size: 14px !important; font-weight: 700 !important; color: #1c1c1a !important; margin: 4px 0 8px !important; }
+.feedback-row {
+    align-items: center !important;
+    gap: 10px !important;
+    /* wrap to a second line rather than crushing the comment box when the
+       column gets narrow */
+    flex-wrap: wrap !important;
+    margin: 0 !important;
+}
+/* kill the per-child block padding/margins that were spreading the row out */
+.feedback-row > *,
+.feedback-row .block,
+.feedback-row .form,
+.feedback-row .wrap {
+    margin: 0 !important;
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
+    min-width: 0 !important;
+}
+/* the comment box (2nd child) keeps a usable width; it takes the free space
+   but never collapses — below its floor the row wraps instead */
+.feedback-row > *:nth-child(2) {
+    flex: 1 1 200px !important;
+    min-width: 170px !important;
+}
+/* the reset above must not let the button shrink below its own label */
+.feedback-row > *:last-child {
+    flex: 0 0 auto !important;
+    width: auto !important;
+    min-width: max-content !important;
+}
+.feedback-row button {
+    color: #bf1e2e !important;
+    border: 1px solid #bf1e2e !important;
+    background: #fff !important;
+    font-weight: 700 !important;
+    font-size: 14px !important;
+    white-space: nowrap !important;
+    padding: 9px 16px !important;
+    border-radius: 8px !important;
+    line-height: 1.2 !important;
+    width: auto !important;
+    min-width: max-content !important;
+}
+/* the input sits in a container=False textbox, so it has no frame of its own */
+.feedback-row textarea,
+.feedback-row input[type="text"] {
+    border: 1px solid #ddd9d2 !important;
+    border-radius: 8px !important;
+    background: #fff !important;
+    padding: 9px 12px !important;
+    font-size: 14px !important;
+    line-height: 1.3 !important;
+    resize: none !important;
+    overflow: hidden !important;
 }
 
-/* ── Tab content markdown ────────────────────────────── */
-.dark .tabitem .prose h2 {
-    color: #e2e8f0 !important;
-    border-bottom-color: #1e3a5f !important;
+/* Star rating: single glyphs, reversed DOM + row-reverse so :checked fills left→right */
+.star-rating, .star-rating * { overflow: visible !important; max-height: none !important; }
+.star-rating { border: none !important; background: transparent !important; width: auto !important; min-width: max-content !important; flex: 0 0 auto !important; margin: 0 !important; }
+.star-rating > * { width: auto !important; min-width: max-content !important; }
+.star-rating .wrap {
+    display: flex !important;
+    flex-direction: row-reverse !important;
+    justify-content: flex-end !important;
+    gap: 2px !important;
+    flex-wrap: nowrap !important;
 }
-.dark .tabitem .prose:nth-child(2) {
-    background: #1e293b !important;
-    border-color: #334155 !important;
+.star-rating label {
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    cursor: pointer !important;
+    line-height: 1 !important;
 }
-.dark .tabitem .prose:nth-child(2) p,
-.dark .tabitem .prose:nth-child(2) li {
-    color: #94a3b8 !important;
+.star-rating label input { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; margin: 0 !important; }
+.star-rating label span { font-size: 0 !important; color: transparent !important; }
+.star-rating label span::before {
+    content: "★";
+    font-size: 19px !important;
+    color: #dcd8d0 !important;
+    transition: color .12s ease;
 }
-.dark .tabitem .prose:nth-child(2) strong {
-    color: #e2e8f0 !important;
+/* hover preview: fill hovered + all visually-left (DOM-following) siblings */
+.star-rating label:hover span::before,
+.star-rating label:hover ~ label span::before { color: #ef8b93 !important; }
+/* selection: fill checked + all visually-left (DOM-following) siblings */
+.star-rating label:has(input:checked) span::before,
+.star-rating label:has(input:checked) ~ label span::before { color: #bf1e2e !important; }
+"""
+
+HOWTO_TITLE_SEG = "### ⓘ How to use (Segmentation)"
+HOWTO_TITLE_COUNT = "### ⓘ How to use (Counting)"
+HOWTO_TITLE_TRACK = "### ⓘ How to use (Tracking)"
+
+HOWTO_SEG = """
+**Instructions:**
+1. Select an example image from the Example Image Gallery or upload your own image (**Please see the "Image Upload Requirements" section before uploading**)
+2. (Optional) Specify a target object with a bounding box and select "Yes", or click "Run Segmentation" directly
+3. Click "Run Segmentation"
+4. View the segmentation results (you can adjust the overlay opacity by sliding the opacity bar below the visualization), download the original predicted mask (.tif format); if needed, click "Clear Selection" to choose a new image
+
+💡 Want to reuse an image? Upload it under "➕ Upload New Example Image to Gallery" and click "➕ Add to Gallery". The uploaded image will appear at the front of the gallery, and can be loaded by clicking its thumbnail. Gallery additions last for the current session only and are cleared when you reload the page.
+
+🤘 Tell us about your experience by rating and submitting feedback, which would greatly help us improve the framework!
+"""
+
+HOWTO_COUNT = """
+**Instructions:**
+1. Select an example image from the Example Image Gallery or upload your own image (**Please see the "Image Upload Requirements" section before uploading**)
+2. (Optional) Specify a target object with a bounding box and select "Yes", or click "Run Counting" directly
+3. Click "Run Counting"
+4. View the density map (you can adjust the density opacity by sliding the opacity bar below the visualization), download the original prediction (.npy format); if needed, click "Clear Selection" to choose a new image to run
+
+💡 Want to reuse an image? Upload it under "➕ Upload New Example Image to Gallery" and click "➕ Add to Gallery". The uploaded image will appear at the front of the gallery, and can be loaded by clicking its thumbnail. Gallery additions last for the current session only and are cleared when you reload the page.
+
+🤘 Tell us about your experience by rating and submitting feedback, which would greatly help us improve the framework!
+"""
+
+# The whole stylesheet is written for a light background, so dark mode renders
+# badly. Gradio has no server-side switch: the frontend picks light/dark from
+# the `__theme` query param, else the OS preference. Pin the param, and also
+# strip the `dark` class directly so there's no flash before the reload.
+FORCE_LIGHT_JS = """
+function () {
+    document.documentElement.classList.remove('dark');
+    document.body.classList.remove('dark');
+    const url = new URL(window.location);
+    if (url.searchParams.get('__theme') !== 'light') {
+        url.searchParams.set('__theme', 'light');
+        window.location.replace(url.href);
+    }
 }
 """
 
+HOWTO_TRACK = """
+**Instructions:**
+1. Select a video from the example library or Upload your own video ZIP file. The ZIP should contain a sequence of TIF images named in chronological order (e.g., t000.tif, t001.tif...)
+2. (Optional) Specify a target object with a bounding box on the first frame and select "Yes", or click "Run Tracking" directly
+3. Click "Run Tracking"
+4. View the tracking results (you can adjust the overlay opacity by sliding the opacity bar below the visualization), download the CTC format results; if needed, click "Clear Selection" to choose a new ZIP file to run
+
+💡 Want to reuse a video? Upload the ZIP under "➕ Upload New Example Image to Gallery" and click "➕ Add to Gallery". The uploaded video will appear at the front of the gallery, and can be loaded by clicking its thumbnail. Gallery additions last for the current session only and are cleared when you reload the page.
+
+🤘 Tell us about your experience by rating and submitting feedback, which would greatly help us improve the framework!
+"""
+
 with gr.Blocks(
     title="Microscopy Analysis Suite",
     theme=gr.themes.Soft(
-        primary_hue=gr.themes.colors.sky,
-        secondary_hue=gr.themes.colors.slate,
+        primary_hue=gr.themes.Color(c50="#fdeceb", c100="#fbd6d3", c200="#f5a8a3", c300="#ef7a73",
+                                     c400="#c94a44", c500="#bf1e2e", c600="#a9192a", c700="#8f1424",
+                                     c800="#75101e", c900="#5c0c17", c950="#42080f"),
+        secondary_hue=gr.themes.Color(c50="#fdeceb", c100="#fbd6d3", c200="#f5a8a3", c300="#ef7a73",
+                                       c400="#c94a44", c500="#bf1e2e", c600="#a9192a", c700="#8f1424",
+                                       c800="#75101e", c900="#5c0c17", c950="#42080f"),
         neutral_hue=gr.themes.colors.slate,
         # A weight must be listed here to be usable; the default is (400, 600).
         font=gr.themes.GoogleFont("Inter", weights=(400, 600, 700, 800)),
     ),
     css=CSS,
+    js=FORCE_LIGHT_JS,
 ) as demo:
-    gr.Markdown(
-        """
-        # 🔬 MicroscopyMatching: Microscopy Image Analysis Suite
-        
-        ### Supporting three key tasks:
-        - 🎨 **Segmentation**: Instance segmentation of microscopic objects
-        - 🔢 **Counting**: Counting microscopic objects based on density maps
-        - 🎬 **Tracking**: Tracking microscopic objects in video sequences
-
-        ### 💡 Technical Details:
-
-        **MicroscopyMatching** - A general-purpose microscopy image analysis toolkit based on pre-trained Latent Diffusion Model
-        
-        ### 📒 Note:
-
-        This project is currently available with usage limits for research trial use and feedback collection. Please note that response speed may vary depending on GPU allocation queues. We plan to release a free public version in the future. We are actively improving the toolkit and greatly appreciate your feedback!
-
-        """
-    )
+    with gr.Row(elem_id="header_row"):
+        gr.Markdown("# 🔬 MicroscopyMatching: Microscopy Image Analysis Suite", elem_id="header_title")
+        how_to_use_btn = gr.Button("ⓘ How to use", elem_id="how_to_use_btn", scale=0)
+    with gr.Column(visible=False, elem_id="how_to_use_modal") as how_to_use_modal:
+        how_to_use_title = gr.Markdown(HOWTO_TITLE_SEG, elem_id="how_to_use_title")
+        howto_md = gr.Markdown(HOWTO_SEG)
+        close_how_to_use_btn = gr.Button("Close", elem_id="close_how_to_use_btn", size="sm")
+    how_to_use_btn.click(lambda: gr.update(visible=True), outputs=how_to_use_modal)
+    close_how_to_use_btn.click(lambda: gr.update(visible=False), outputs=how_to_use_modal)
     
 
     # Must stay a callable: a plain value is deepcopied, so every session would
@@ -1469,136 +1864,113 @@ with gr.Blocks(
     
     with gr.Tabs():
         # ===== Tab 1: Segmentation =====
-        with gr.Tab("🎨 Segmentation"):
-            gr.Markdown("## Instance Segmentation of Microscopic Objects")
-            gr.Markdown(
-                        """
-                        **Instructions:**
-                        1. Select an example image from the Example Image Gallery or upload your own image (**Please see the "Image Upload Requirements" section below before uploading**)
-                        2. (Optional) Specify a target object with a bounding box and select "Yes", or click "Run Segmentation" directly
-                        3. Click "Run Segmentation"
-                        4. View the segmentation results (you can adjust the overlay opacity by sliding the opacity bar below the visualization), download the original predicted mask (.tif format); if needed, click "Clear Selection" to choose a new image
-
-                        💡 Want to reuse an image? Upload it under "➕ Upload New Example Image to Gallery" and click "➕ Add to Gallery". The uploaded image will appear at the front of the gallery, and can be loaded by clicking its thumbnail. Gallery additions last for the current session only and are cleared when you reload the page.
-
-                        🤘 Tell us about your experience by rating and submitting feedback, which would greatly help us improve the framework!
-                        """
-                    )
-            # Must stay after the instructions markdown: the CSS targets it with
-            # .prose:nth-child(2).
-            with gr.Accordion("📋 Image Upload Requirements (click to expand or fold)", open=False, elem_classes="req-accordion"):
-                gr.Markdown(
-                    """
-                    **Please do not upload images or data containing protected health information (PHI) or personally identifiable information (PII).**
-
-                    - **Formats:** Supports TIFF / OME-TIFF (8/16/32-bit, stacks, multi-channel), PNG, JPG, as well as various other microscopy image formats supported by [tifffiles](https://github.com/cgohlke/tifffile)
-                    - **Maximum image size:** 4096 × 4096 pixels
-                    - **Channels:** Accepts RGB (3-channel), Grayscale (single-channel); for images with more than 3 channels, only the first three channels are used as RGB channels.
-                    - **For image stacks:** First frame is loaded by default; you can pick another with the stack frame slider that appears after upload
-                    
-                    **Alternatively, you can use existing tools (e.g., ImageJ/Fiji) to convert your image to a 8-bit RGB/Grayscale PNG/JPG/TIFF file before uploading.**
-                    
-                    """
-                )
+        with gr.Tab("Segment") as seg_tab:
+            # gr.Markdown("## Instance Segmentation of Microscopic Objects")
             
             with gr.Row():
                 with gr.Column(scale=1):
                     gr.Markdown("🖼️ Upload Image (Optional: Provide a Bounding Box)", elem_classes="frame-heading")
-                    annotator = BBoxAnnotator(
-                        show_label=False,
-                        categories=["cell"],
-                    )
-                    seg_frame_slider = gr.Slider(
-                        minimum=1, maximum=1, step=1, value=1,
-                        label="📚 Stack frame (choose frame to use)",
-                        visible=False,
-                    )
-                    seg_zplane_slider = gr.Slider(
-                        minimum=1, maximum=1, step=1, value=1,
-                        label="🔬 Z-plane (choose plane to use)",
-                        visible=False,
-                    )
+                    with gr.Column(elem_classes="section-card"):
+                        annotator = BBoxAnnotator(
+                            show_label=False,
+                            categories=["cell"],
+                            elem_classes="uniform-height-input",
+                        )
+                        seg_frame_slider = gr.Slider(
+                            minimum=1, maximum=1, step=1, value=1,
+                            label="📚 Stack frame (choose frame to use)",
+                            visible=False,
+                        )
+                        seg_zplane_slider = gr.Slider(
+                            minimum=1, maximum=1, step=1, value=1,
+                            label="🔬 Z-plane (choose plane to use)",
+                            visible=False,
+                        )
 
                     # Example Images Gallery
                     gr.Markdown("📁 Example Image Gallery", elem_classes="frame-heading")
-                    example_gallery = gr.Gallery(
-                        show_label=True,
-                        columns=len(example_images_seg),
-                        rows=1,
-                        height=120,
-                        object_fit="cover",
-                        show_download_button=False
-                    )
-                    
-                    
-                    with gr.Row():
+                    with gr.Column(elem_classes="section-card"):
+                        example_gallery = gr.Gallery(
+                            show_label=True,
+                            columns=len(example_images_seg),
+                            rows=1,
+                            height=120,
+                            object_fit="cover",
+                            show_download_button=False
+                        )
+
+                    with gr.Column(elem_classes="bbox-slot"):
                         use_box_radio = gr.Radio(
                             choices=["Yes", "No"],
                             value="No",
-                            label="🔲 Specify Bounding Box?"
+                            label="🔲 Specify Bounding Box?",
+                            elem_classes="inline-radio",
                         )
                     with gr.Row():
                         run_seg_btn = gr.Button("▶️ Run Segmentation", variant="primary", size="lg")
                         clear_btn = gr.Button("🔄 Clear Selection", variant="secondary")
 
+                    with gr.Accordion("📋 Image Upload Requirements", open=True, elem_classes="req-panel"):
+                        gr.HTML(
+                            """
+                            <div class="req-warn">⚠️ Do not upload images or data containing protected health information (PHI) or personally identifiable information (PII).</div>
+                            <div class="req-row"><span class="req-label">Formats</span><span class="req-val">TIFF / OME-TIFF (8/16/32-bit, stacks, multi-channel), PNG, JPG, and other formats supported by <a href="https://github.com/cgohlke/tifffile" target="_blank">tifffile</a></span></div>
+                            <div class="req-row"><span class="req-label">Max size</span><span class="req-val">4096 × 4096 px</span></div>
+                            <div class="req-row"><span class="req-label">Channels</span><span class="req-val">RGB (3-channel) or grayscale; channels beyond the first 3 are ignored</span></div>
+                            <div class="req-row"><span class="req-label">Stacks</span><span class="req-val">first frame loaded by default; frame slider appears after upload</span></div>
+                            <div class="req-note">Alternatively, convert to an 8-bit RGB/grayscale PNG/JPG/TIFF first (e.g. with ImageJ/Fiji).</div>
+                            """
+                        )
+
                     # Upload Example Image
                     gr.Markdown("➕ Upload New Example Image to Gallery", elem_classes="frame-heading")
-                    image_uploader = gr.File(
-                        show_label=False,
-                        file_types=["image"] + list(TIFF_EXTENSIONS),
-                        type="filepath"
-                    )
-                    add_to_gallery_btn = gr.Button("➕ Add to Gallery", variant="secondary", size="sm")
-                    add_gallery_status = gr.Markdown(visible=False)
-
-
-                with gr.Column(scale=2):
-                    gr.Markdown("📸 Segmentation Result", elem_classes="frame-heading")
-                    seg_output = gr.Image(
-                        type="pil",
-                        show_label=False,
-                        elem_classes="uniform-height"
-                    )
-                    seg_alpha_slider = gr.Slider(
-                        minimum=0.0,
-                        maximum=1.0,
-                        step=0.05,
-                        value=0.5,
-                        label="🪄 Overlay Opacity"
-                    )
-                    
-                    # Download Original Prediction
-                    gr.Markdown("📥 Download Original Prediction (.tif format)", elem_classes="frame-heading")
-                    download_mask_btn = gr.File(
-                        show_label=False,
-                        visible=True,
-                        height=40,
-                    )
-
-                    # Satisfaction Rating
-                    score_slider = gr.Slider(
-                        minimum=1,
-                        maximum=5,
-                        step=1,
-                        value=5,
-                        label="🌟 Satisfaction Rating (1-5)"
-                    )
-
-                    # Feedback Textbox
-                    feedback_box = gr.Textbox(
-                        placeholder="Please enter your feedback...",
-                        lines=2,
-                        label="💬 Feedback"
-                    )
+                    with gr.Column(elem_classes="section-card"):
+                        image_uploader = gr.File(
+                            show_label=False,
+                            file_types=["image"] + list(TIFF_EXTENSIONS),
+                            type="filepath"
+                        )
+                        add_to_gallery_btn = gr.Button("➕ Add to Gallery", variant="secondary", size="sm")
+                        add_gallery_status = gr.Markdown(visible=False)
 
-                    # Submit Button
-                    submit_feedback_btn = gr.Button("💾 Submit Feedback", variant="secondary")
 
-                    feedback_status = gr.Textbox(
-                        label="✅ Submission Status",
-                        lines=1,
-                        visible=False
-                    )
+                with gr.Column(scale=1):
+                    with gr.Row(elem_classes="result-header"):
+                        gr.Markdown("📸 Segmentation Result", elem_classes="frame-heading")
+                        download_mask_btn = gr.DownloadButton(
+                            "⬇️ Download (.tif)",
+                            size="sm",
+                            scale=0,
+                            elem_classes="result-download",
+                        )
+                    with gr.Column(elem_classes="section-card"):
+                        seg_output = gr.Image(
+                            type="pil",
+                            show_label=False,
+                            elem_classes="uniform-height"
+                        )
+                        seg_alpha_slider = gr.Slider(
+                            minimum=0.0,
+                            maximum=1.0,
+                            step=0.05,
+                            value=0.5,
+                            label="Overlay opacity",
+                            elem_classes="opacity-row",
+                        )
+                        seg_info_html = gr.HTML(visible=False, elem_classes="img-info")
+
+                        # Feedback: rating + comment + submit on one row
+                        gr.Markdown("How was this result?", elem_classes="feedback-title")
+                        with gr.Row(elem_classes="feedback-row"):
+                            score_slider = gr.Radio(choices=[("5", 5), ("4", 4), ("3", 3), ("2", 2), ("1", 1)], value=5, show_label=False, container=False, scale=0, elem_classes="star-rating")
+                            feedback_box = gr.Textbox(placeholder="Tell us about your experience (optional)", lines=1, max_lines=1, show_label=False, container=False, scale=2)
+                            submit_feedback_btn = gr.Button("Submit feedback", variant="secondary", scale=0)
+
+                        feedback_status = gr.Textbox(
+                            label="✅ Submission Status",
+                            lines=1,
+                            visible=False
+                        )
             
             annotator.upload(
                 fn=prepare_uploaded_image,
@@ -1612,6 +1984,20 @@ with gr.Blocks(
                     outputs=annotator
                 )
 
+            # Image information line. Driven off the raw-path state so it covers
+            # every way an image arrives (upload, gallery, clear); the frame
+            # slider refreshes the "Frames: n / total" counter.
+            seg_raw_state.change(
+                fn=describe_image_info,
+                inputs=[seg_raw_state, seg_frame_slider],
+                outputs=seg_info_html
+            )
+            seg_frame_slider.release(
+                fn=describe_image_info,
+                inputs=[seg_raw_state, seg_frame_slider],
+                outputs=seg_info_html
+            )
+
             # click event for segmentation
             run_seg_btn.click(
                 fn=segment_with_choice,
@@ -1711,58 +2097,32 @@ with gr.Blocks(
             )
         
         # ===== Tab 2: Counting =====
-        with gr.Tab("🔢 Counting"):
-            gr.Markdown("## Microscopy Object Counting Analysis")
-            gr.Markdown(
-                """
-                **Usage Instructions:**
-                1. Select an example image from the Example Image Gallery or upload your own image (**Please see the "Image Upload Requirements" section below before uploading**)
-                2. (Optional) Specify a target object with a bounding box and select "Yes", or click "Run Counting" directly
-                3. Click "Run Counting"
-                4. View the density map (you can adjust the density opacity by sliding the opacity bar below the visualization), download the original prediction (.npy format); if needed, click "Clear Selection" to choose a new image to run
-
-                💡 Want to reuse an image? Upload it under "➕ Upload New Example Image to Gallery" and click "➕ Add to Gallery". The uploaded image will appear at the front of the gallery, and can be loaded by clicking its thumbnail. Gallery additions last for the current session only and are cleared when you reload the page.
-
-                🤘 Tell us about your experience by rating and submitting feedback, which would greatly help us improve the framework!
-                """
-            )
-            # Must stay after the instructions markdown: the CSS targets it with
-            # .prose:nth-child(2).
-            with gr.Accordion("📋 Image requirements", open=False, elem_classes="req-accordion"):
-                gr.Markdown(
-                    """
-                    **Please do not upload images or data containing protected health information (PHI) or personally identifiable information (PII).**
-
-                    - **Formats:** Supports TIFF / OME-TIFF (8/16/32-bit, stacks, multi-channel), PNG, JPG, as well as various other microscopy image formats supported by [tifffiles](https://github.com/cgohlke/tifffile)
-                    - **Maximum image size:** 4096 × 4096 pixels
-                    - **Channels:** Accepts RGB (3-channel), Grayscale (single-channel); for images with more than 3 channels, only the first three channels are used as RGB channels.
-                    - **For image stacks:** First frame is loaded by default; you can pick another with the stack frame slider that appears after upload
-                    
-                    **Alternatively, you can use existing tools (e.g., ImageJ/Fiji) to convert your image to a 8-bit RGB/Grayscale PNG/JPG/TIFF file before uploading.**
-                    """
-                )
+        with gr.Tab("Count") as count_tab:
+            # gr.Markdown("## Microscopy Object Counting Analysis")
             
             with gr.Row():
                 with gr.Column(scale=1):
                     gr.Markdown("🖼️ Upload Image (Optional: Provide a Bounding Box)", elem_classes="frame-heading")
-                    count_annotator = BBoxAnnotator(
-                        show_label=False,
-                        categories=["cell"],
-                    )
-                    count_frame_slider = gr.Slider(
-                        minimum=1, maximum=1, step=1, value=1,
-                        label="📚 Stack frame (choose frame to use)",
-                        visible=False,
-                    )
-                    count_zplane_slider = gr.Slider(
-                        minimum=1, maximum=1, step=1, value=1,
-                        label="🔬 Z-plane (choose plane to use)",
-                        visible=False,
-                    )
+                    with gr.Column(elem_classes="section-card"):
+                        count_annotator = BBoxAnnotator(
+                            show_label=False,
+                            categories=["cell"],
+                            elem_classes="uniform-height-input",
+                        )
+                        count_frame_slider = gr.Slider(
+                            minimum=1, maximum=1, step=1, value=1,
+                            label="📚 Stack frame (choose frame to use)",
+                            visible=False,
+                        )
+                        count_zplane_slider = gr.Slider(
+                            minimum=1, maximum=1, step=1, value=1,
+                            label="🔬 Z-plane (choose plane to use)",
+                            visible=False,
+                        )
 
                     # Example gallery with "add" functionality
                     gr.Markdown("📁 Example Image Gallery", elem_classes="frame-heading")
-                    with gr.Row():
+                    with gr.Column(elem_classes="section-card"):
                         count_example_gallery = gr.Gallery(
                             show_label=False,
                             columns=len(example_images_cnt),
@@ -1772,80 +2132,86 @@ with gr.Blocks(
                             value=example_images_cnt.copy(),  # Initialize with examples
                             show_download_button=False
                         )
-                    
-                    
-                    with gr.Row():
+
+                    with gr.Column(elem_classes="bbox-slot"):
                         count_use_box_radio = gr.Radio(
                             choices=["Yes", "No"],
                             value="No",
-                            label="🔲 Specify Bounding Box?"
+                            label="🔲 Specify Bounding Box?",
+                            elem_classes="inline-radio",
                         )
 
                     with gr.Row():
                         count_btn = gr.Button("▶️ Run Counting", variant="primary", size="lg")
                         clear_btn = gr.Button("🔄 Clear Selection", variant="secondary")
+
+                    with gr.Accordion("📋 Image Upload Requirements", open=True, elem_classes="req-panel"):
+                        gr.HTML(
+                            """
+                            <div class="req-warn">⚠️ Do not upload images or data containing protected health information (PHI) or personally identifiable information (PII).</div>
+                            <div class="req-row"><span class="req-label">Formats</span><span class="req-val">TIFF / OME-TIFF (8/16/32-bit, stacks, multi-channel), PNG, JPG, and other formats supported by <a href="https://github.com/cgohlke/tifffile" target="_blank">tifffile</a></span></div>
+                            <div class="req-row"><span class="req-label">Max size</span><span class="req-val">4096 × 4096 px</span></div>
+                            <div class="req-row"><span class="req-label">Channels</span><span class="req-val">RGB (3-channel) or grayscale; channels beyond the first 3 are ignored</span></div>
+                            <div class="req-row"><span class="req-label">Stacks</span><span class="req-val">first frame loaded by default; frame slider appears after upload</span></div>
+                            <div class="req-note">Alternatively, convert to an 8-bit RGB/grayscale PNG/JPG/TIFF first (e.g. with ImageJ/Fiji).</div>
+                            """
+                        )
                     
                     # Add button to upload new examples
                     gr.Markdown("➕ Add Example Image to Gallery", elem_classes="frame-heading")
-                    count_image_uploader = gr.File(
-                        show_label=False,
-                        file_types=["image"] + list(TIFF_EXTENSIONS),
-                        type="filepath"
-                    )
-                    add_to_count_gallery_btn = gr.Button("➕ Add to Gallery", variant="secondary", size="sm")
-                    count_add_status = gr.Markdown(visible=False)
+                    with gr.Column(elem_classes="section-card"):
+                        count_image_uploader = gr.File(
+                            show_label=False,
+                            file_types=["image"] + list(TIFF_EXTENSIONS),
+                            type="filepath"
+                        )
+                        add_to_count_gallery_btn = gr.Button("➕ Add to Gallery", variant="secondary", size="sm")
+                        count_add_status = gr.Markdown(visible=False)
 
                 
-                with gr.Column(scale=2):
-                    gr.Markdown("📸 Density Map", elem_classes="frame-heading")
-                    count_output = gr.Image(
-                        show_label=False,
-                        type="filepath",
-                        elem_id="density_map_output"
-
-                    )
-                    count_alpha_slider = gr.Slider(
-                        minimum=0.0,
-                        maximum=1.0,
-                        step=0.05,
-                        value=0.3,
-                        label="🪄 Density Opacity"
-                    )
-                    count_status = gr.Textbox(
-                        label="📊 Statistics",
-                        lines=2
-                    )
-                    gr.Markdown("📥 Download Original Prediction (.npy format)", elem_classes="frame-heading")
-                    download_density_btn = gr.File(
-                        show_label=False,
-                        visible=True
-                    )
-
-                    # Satisfaction rating
-                    score_slider = gr.Slider(
-                        minimum=1,
-                        maximum=5,
-                        step=1,
-                        value=5,
-                        label="🌟 Satisfaction Rating (1-5)"
-                    )
+                with gr.Column(scale=1):
+                    with gr.Row(elem_classes="result-header"):
+                        gr.Markdown("📸 Density Map", elem_classes="frame-heading")
+                        download_density_btn = gr.DownloadButton(
+                            "⬇️ Download (.npy)",
+                            size="sm",
+                            scale=0,
+                            elem_classes="result-download",
+                        )
+                    with gr.Column(elem_classes="section-card"):
+                        count_output = gr.Image(
+                            show_label=False,
+                            type="filepath",
+                            elem_id="density_map_output"
 
-                    # Feedback textbox
-                    feedback_box = gr.Textbox(
-                        placeholder="Please enter your feedback...",
-                        lines=2,
-                        label="💬 Feedback"
-                    )
+                        )
+                        count_alpha_slider = gr.Slider(
+                            minimum=0.0,
+                            maximum=1.0,
+                            step=0.05,
+                            value=0.3,
+                            label="Density opacity",
+                            elem_classes="opacity-row",
+                        )
+                        count_info_html = gr.HTML(visible=False, elem_classes="img-info")
+                        count_status = gr.Textbox(
+                            label="📊 Statistics",
+                            lines=2
+                        )
 
-                    # Submit button
-                    submit_feedback_btn = gr.Button("💾 Submit Feedback", variant="secondary")
+                        # Feedback: rating + comment + submit on one row
+                        gr.Markdown("How was this result?", elem_classes="feedback-title")
+                        with gr.Row(elem_classes="feedback-row"):
+                            score_slider = gr.Radio(choices=[("5", 5), ("4", 4), ("3", 3), ("2", 2), ("1", 1)], value=5, show_label=False, container=False, scale=0, elem_classes="star-rating")
+                            feedback_box = gr.Textbox(placeholder="Tell us about your experience (optional)", lines=1, max_lines=1, show_label=False, container=False, scale=2)
+                            submit_feedback_btn = gr.Button("Submit feedback", variant="secondary", scale=0)
+
+                        feedback_status = gr.Textbox(
+                            label="✅ Submission Status",
+                            lines=1,
+                            visible=False
+                        )
 
-                    feedback_status = gr.Textbox(
-                        label="✅ Submission Status",
-                        lines=1,
-                        visible=False
-                    )
-            
             # State for managing gallery images
             count_user_examples = gr.State(example_images_cnt.copy())
             
@@ -1892,6 +2258,18 @@ with gr.Blocks(
                     outputs=count_annotator
                 )
 
+            # Image information line (same pattern as the Segment tab).
+            count_raw_state.change(
+                fn=describe_image_info,
+                inputs=[count_raw_state, count_frame_slider],
+                outputs=count_info_html
+            )
+            count_frame_slider.release(
+                fn=describe_image_info,
+                inputs=[count_raw_state, count_frame_slider],
+                outputs=count_info_html
+            )
+
             # When user selects from gallery, load into annotator
             def load_from_count_gallery(evt: gr.SelectData, all_imgs):
                 """Load a gallery image, reusing the upload path."""
@@ -1952,124 +2330,122 @@ with gr.Blocks(
             )
         
         # ===== Tab 3: Tracking =====
-        with gr.Tab("🎬 Tracking"):
-            gr.Markdown("## Microscopy Object Video Tracking - Supports ZIP Upload")
-            gr.Markdown(
-                        """
-                        **Instructions:**
-                        1. Select a video from the example library or Upload your own video ZIP file. The ZIP should contain a sequence of TIF images named in chronological order (e.g., t000.tif, t001.tif...)
-                        2. (Optional) Specify a target object with a bounding box on the first frame and select "Yes", or click "Run Tracking" directly
-                        3. Click "Run Tracking"
-                        4. View the tracking results (you can adjust the overlay opacity by sliding the opacity bar below the visualization), download the CTC format results; if needed, click "Clear Selection" to choose a new ZIP file to run
-
-                        💡 Want to reuse a video? Upload the ZIP under "➕ Upload New Example Image to Gallery" and click "➕ Add to Gallery". The uploaded video will appear at the front of the gallery, and can be loaded by clicking its thumbnail. Gallery additions last for the current session only and are cleared when you reload the page.
-                        
-                        🤘 Tell us about your experience by rating and submitting feedback, which would greatly help us improve the framework!
-
-                        """
-                    )
+        with gr.Tab("Track") as track_tab:
+            # gr.Markdown("## Microscopy Object Video Tracking - Supports ZIP Upload")
             
             with gr.Row():
                 with gr.Column(scale=1):
-                    gr.Markdown("📦 Upload Image Sequence in ZIP File", elem_classes="frame-heading")
-                    track_zip_upload = gr.File(
-                        show_label=False,
-                        file_types=[".zip"]
-                    )
+                    gr.Markdown("📦 Upload Image Sequence in ZIP File (Optional: Provide a Bounding Box)", elem_classes="frame-heading")
+                    with gr.Column(elem_classes="section-card"):
+                        track_zip_upload = gr.File(
+                            show_label=False,
+                            file_types=[".zip"]
+                        )
 
                     # First frame annotation for bounding box (heading + annotator
                     # share one column so they show/hide together)
                     with gr.Column(visible=False) as track_annot_group:
                         gr.Markdown("🖼️ (Optional) First Frame Bounding Box Annotation", elem_classes="frame-heading")
-                        track_first_frame_annotator = BBoxAnnotator(
-                            show_label=False,
-                            categories=["cell"],
-                        )
+                        with gr.Column(elem_classes="section-card"):
+                            track_first_frame_annotator = BBoxAnnotator(
+                                show_label=False,
+                                categories=["cell"],
+                                elem_classes="uniform-height-input",
+                            )
 
                     # Example ZIP gallery
                     gr.Markdown("📁 Example Video Gallery (Click to Select)", elem_classes="frame-heading")
-                    track_example_gallery = gr.Gallery(
-                        show_label=False,
-                        columns=10,
-                        rows=1,
-                        height=120,
-                        object_fit="contain",
-                        show_download_button=False
-                    )
-                    
-                    with gr.Row():
+                    with gr.Column(elem_classes="section-card"):
+                        track_example_gallery = gr.Gallery(
+                            show_label=False,
+                            columns=10,
+                            rows=1,
+                            height=120,
+                            object_fit="contain",
+                            show_download_button=False
+                        )
+
+                    with gr.Column(elem_classes="bbox-slot"):
                         track_use_box_radio = gr.Radio(
                             choices=["Yes", "No"],
                             value="No",
-                            label="🔲 Specify Bounding Box?"
+                            label="🔲 Specify Bounding Box?",
+                            elem_classes="inline-radio",
                         )
 
                     with gr.Row():
                         track_btn = gr.Button("▶️ Run Tracking", variant="primary", size="lg")
                         clear_btn = gr.Button("🔄 Clear Selection", variant="secondary")
-                    
+
+                    with gr.Accordion("📋 Upload Requirements", open=True, elem_classes="req-panel"):
+                        gr.HTML(
+                            """
+                            <div class="req-warn">⚠️ Do not upload images or data containing protected health information (PHI) or personally identifiable information (PII).</div>
+                            <div class="req-row"><span class="req-label">Format</span><span class="req-val">A <code>.zip</code> containing a sequence of <code>.tif</code> / <code>.tiff</code> frames</span></div>
+                            <div class="req-row"><span class="req-label">Frame order</span><span class="req-val">Sorted naturally by filename; use consistent names such as frame_001.tif, frame_002.tif, …</span></div>
+                            <div class="req-row"><span class="req-label">Image size</span><span class="req-val">Every frame must share the same width and height</span></div>
+                            <div class="req-row"><span class="req-label">Channels</span><span class="req-val">Grayscale and RGB TIFF frames; beyond 3 channels only the first three are used</span></div>
+                            <div class="req-row"><span class="req-label">Bit depth</span><span class="req-val">8-bit and 16-bit TIFFs</span></div>
+                            <div class="req-note">You can use ImageJ/Fiji or a similar tool to export your video as a numbered TIFF image sequence, then compress the frames into a ZIP before uploading.</div>
+                            """
+                        )
+
                     # Add to gallery button
                     gr.Markdown("➕ Add ZIP to Example Gallery", elem_classes="frame-heading")
-                    track_gallery_upload = gr.File(
-                        show_label=False,
-                        file_types=[".zip"],
-                        type="filepath"
-                    )
+                    with gr.Column(elem_classes="section-card"):
+                        track_gallery_upload = gr.File(
+                            show_label=False,
+                            file_types=[".zip"],
+                            type="filepath"
+                        )
                 
-                with gr.Column(scale=2):
-                    gr.Markdown("📸 Tracking Visualization", elem_classes="frame-heading")
-                    track_first_frame_preview = gr.Image(
-                        show_label=False,
-                        type="filepath",
-                        # height=400,
-                        elem_classes="uniform-height",
-                        interactive=False
-                    )
-                    track_alpha_slider = gr.Slider(
-                        minimum=0.0,
-                        maximum=1.0,
-                        step=0.05,
-                        value=0.3,
-                        label="🪄 Overlay Opacity"
-                    )
-                    
-                    track_output = gr.Textbox(
-                        label="📊 Tracking Information",
-                        lines=8,
-                        interactive=False
-                    )
-                    
-                    # heading + download share one column so they show/hide together
-                    with gr.Column(visible=False) as track_dl_group:
-                        gr.Markdown("📥 Download Tracking Results (CTC Format)", elem_classes="frame-heading")
-                        track_download = gr.File(
+                with gr.Column(scale=1):
+                    with gr.Row(elem_classes="result-header"):
+                        gr.Markdown("📸 Tracking Visualization", elem_classes="frame-heading")
+                        # keep the wrapper so the existing show/hide wiring still
+                        # targets a container, with the button inside it
+                        with gr.Column(visible=False, scale=0, min_width=170) as track_dl_group:
+                            track_download = gr.DownloadButton(
+                                "⬇️ Download (.zip)",
+                                size="sm",
+                                elem_classes="result-download",
+                            )
+                    with gr.Column(elem_classes="section-card"):
+                        track_first_frame_preview = gr.Image(
                             show_label=False,
+                            type="filepath",
+                            # height=400,
+                            elem_classes="uniform-height",
+                            interactive=False
+                        )
+                        track_alpha_slider = gr.Slider(
+                            minimum=0.0,
+                            maximum=1.0,
+                            step=0.05,
+                            value=0.3,
+                            label="Overlay opacity",
+                            elem_classes="opacity-row",
                         )
 
-                    # Satisfaction rating
-                    score_slider = gr.Slider(
-                        minimum=1,
-                        maximum=5,
-                        step=1,
-                        value=5,
-                        label="🌟 Satisfaction Rating (1-5)"
-                    )
-
-                    # Feedback textbox
-                    feedback_box = gr.Textbox(
-                        placeholder="Please enter your feedback...",
-                        lines=2,
-                        label="💬 Feedback"
-                    )
-
-                    # Submit button
-                    submit_feedback_btn = gr.Button("💾 Submit Feedback", variant="secondary")
+                        track_output = gr.Textbox(
+                            label="📊 Tracking Information",
+                            lines=9,
+                            max_lines=20,
+                            interactive=False
+                        )
 
-                    feedback_status = gr.Textbox(
-                        label="✅ Submission Status",
-                        lines=1,
-                        visible=False
-                    )
+                        # Feedback: rating + comment + submit on one row
+                        gr.Markdown("How was this result?", elem_classes="feedback-title")
+                        with gr.Row(elem_classes="feedback-row"):
+                            score_slider = gr.Radio(choices=[("5", 5), ("4", 4), ("3", 3), ("2", 2), ("1", 1)], value=5, show_label=False, container=False, scale=0, elem_classes="star-rating")
+                            feedback_box = gr.Textbox(placeholder="Tell us about your experience (optional)", lines=1, max_lines=1, show_label=False, container=False, scale=2)
+                            submit_feedback_btn = gr.Button("Submit feedback", variant="secondary", scale=0)
+
+                        feedback_status = gr.Textbox(
+                            label="✅ Submission Status",
+                            lines=1,
+                            visible=False
+                        )
             
             # State for tracking examples
             track_user_examples = gr.State(example_tracking_zips.copy())
@@ -2286,8 +2662,26 @@ with gr.Blocks(
                 inputs=[current_query_id, score_slider, feedback_box, annotator],
                 outputs=[feedback_status, feedback_status]
             )
-    
-    
+
+    seg_tab.select(lambda: (HOWTO_TITLE_SEG, HOWTO_SEG), outputs=[how_to_use_title, howto_md])
+    count_tab.select(lambda: (HOWTO_TITLE_COUNT, HOWTO_COUNT), outputs=[how_to_use_title, howto_md])
+    track_tab.select(lambda: (HOWTO_TITLE_TRACK, HOWTO_TRACK), outputs=[how_to_use_title, howto_md])
+
+    gr.Markdown(
+        """
+        **Supporting three key tasks:**
+
+        🎨 **Segmentation**: Instance segmentation of microscopic objects
+         
+        🔢 **Counting**: Counting microscopic objects based on density maps 
+        
+        🎬 **Tracking**: Tracking microscopic objects in video sequences
+
+        📒 **Note:** This project is currently available with usage limits for research trial use and feedback collection. Response speed may vary depending on GPU allocation queues. We plan to release a free public version in the future. We are actively improving the toolkit and greatly appreciate your feedback!
+        """,
+        elem_id="footer_note"
+    )
+
 
 if __name__ == "__main__":
     demo.queue().launch(

tracking_one.py

@@ -938,6 +938,16 @@ class TrackingModule(pl.LightningModule):
 
         self.eval()
         imgs, imgs_raw, images_stable, tra_imgs, imgs_01, height, width = load_track_images(file_dir)
+        if boxes is not None:
+            boxes = torch.as_tensor(boxes, dtype=torch.float32)
+            if boxes.ndim == 2:
+                boxes = boxes.unsqueeze(0)
+            boxes = boxes * torch.tensor(
+                [512.0 / width, 512.0 / height, 512.0 / width, 512.0 / height],
+                dtype=torch.float32,
+            )
+            boxes[..., 0::2].clamp_(0, 512)
+            boxes[..., 1::2].clamp_(0, 512)
         imgs_stable = torch.from_numpy(images_stable).float().to(self.device)
         imgs_enc = torch.from_numpy(imgs).float().to(self.device)