update style

app.py

@@ -897,44 +897,265 @@ example_images_cnt = [f for f in glob("example_imgs/cnt/*")]
 example_tracking_zips = [f for f in glob("example_imgs/tra/*.zip")]
 
 # ===== Gradio UI =====
-with gr.Blocks(
-    title="Microscopy Analysis Suite", 
-    theme=gr.themes.Soft(),
-    css="""
-    .tabs button {
-        font-size: 18px !important;
-        font-weight: 600 !important;
-        padding: 12px 20px !important;
-    }
-    .uniform-height {
-        height: 500px !important;
-        display: flex !important;
-        align-items: center !important;
-        justify-content: center !important;
-    }
+CSS = """
+/* ── Layout ──────────────────────────────────────────── */
+.gradio-container {
+    max-width: 1380px !important;
+    margin: 0 auto !important;
+    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important;
+}
+
+/* ── Header markdown polish ───────────────────────────── */
+.gradio-container .prose h1 {
+    font-size: 2rem !important;
+    font-weight: 700 !important;
+    color: #1e293b !important;
+    letter-spacing: -0.5px !important;
+    margin-bottom: 10px !important;
+}
+.gradio-container .prose h3 {
+    font-size: 1rem !important;
+    font-weight: 600 !important;
+    color: #0284c7 !important;
+    margin-top: 14px !important;
+    margin-bottom: 4px !important;
+}
+.gradio-container .prose p {
+    margin-top: 4px !important;
+    margin-bottom: 6px !important;
+    color: #475569 !important;
+    line-height: 1.7 !important;
+}
+.gradio-container .prose ul,
+.gradio-container .prose ol {
+    margin-top: 4px !important;
+    margin-bottom: 6px !important;
+}
+.gradio-container .prose li {
+    color: #475569 !important;
+    line-height: 1.7 !important;
+}
+
+/* ── Top-level header section ─────────────────────────── */
+.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;
+}
+
+/* ── Tabs ────────────────────────────────────────────── */
+.tabs > .tab-nav {
+    border-bottom: 2px solid #e2e8f0 !important;
+    margin-bottom: 20px !important;
+    gap: 4px !important;
+}
+.tabs button {
+    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;
+}
+
+/* ── Buttons ─────────────────────────────────────────── */
+button.primary {
+    background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%) !important;
+    border: none !important;
+    border-radius: 10px !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;
+}
+button.primary:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 6px 20px rgba(14,165,233,0.45) !important;
+}
+button.secondary {
+    border-radius: 10px !important;
+    font-weight: 500 !important;
+    border: 1.5px solid #cbd5e1 !important;
+    color: #475569 !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;
+}
+
+/* ── Blocks and panels ───────────────────────────────── */
+.gradio-container .block { border-radius: 14px !important; }
+.gradio-container .gr-form,
+.gradio-container .gr-box,
+.gradio-container .gr-panel {
+    border-radius: 14px !important;
+    border-color: #e2e8f0 !important;
+}
+
+/* ── Labels ──────────────────────────────────────────── */
+label { font-weight: 500 !important; color: #374151 !important; }
+
+/* ── Image output ────────────────────────────────────── */
+.uniform-height {
+    height: 480px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    border-radius: 12px !important;
+    background: #f8fafc !important;
+}
+.uniform-height img, .uniform-height canvas {
+    max-height: 480px !important;
+    object-fit: contain !important;
+}
+
+/* ── Density map output ──────────────────────────────── */
+#density_map_output { height: 480px !important; }
+#density_map_output .image-container { height: 480px !important; }
+#density_map_output img {
+    height: 460px !important;
+    width: auto !important;
+    max-width: 95% !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;
+}
+.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;
+}
+.tabitem .prose:nth-child(2) p,
+.tabitem .prose:nth-child(2) li {
+    font-size: 0.91rem !important;
+    color: #64748b !important;
+}
+.tabitem .prose:nth-child(2) strong {
+    color: #0f172a !important;
+}
+
+/* ════════════════════════════════════════════════════════
+   DARK MODE  (.dark is added to <html> by Gradio)
+   ════════════════════════════════════════════════════════ */
+
+/* ── Header text ─────────────────────────────────────── */
+.dark .gradio-container .prose h1 {
+    color: #e2e8f0 !important;
+}
+.dark .gradio-container .prose h3 {
+    color: #38bdf8 !important;
+}
+.dark .gradio-container .prose p,
+.dark .gradio-container .prose li {
+    color: #94a3b8 !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;
+}
+
+/* ── Tabs ────────────────────────────────────────────── */
+.dark .tabs > .tab-nav {
+    border-bottom-color: #334155 !important;
+}
+.dark .tabs button {
+    color: #94a3b8 !important;
+}
+.dark .tabs button:hover {
+    color: #38bdf8 !important;
+    background: rgba(56,189,248,0.08) !important;
+}
+.dark .tabs button.selected {
+    color: #38bdf8 !important;
+    border-bottom-color: #38bdf8 !important;
+}
+
+/* ── Buttons ─────────────────────────────────────────── */
+.dark button.secondary {
+    border-color: #475569 !important;
+    color: #94a3b8 !important;
+    background: transparent !important;
+}
+.dark button.secondary:hover {
+    border-color: #64748b !important;
+    color: #e2e8f0 !important;
+    background: rgba(255,255,255,0.05) !important;
+}
+
+/* ── Blocks / panels ─────────────────────────────────── */
+.dark .gradio-container .gr-form,
+.dark .gradio-container .gr-box,
+.dark .gradio-container .gr-panel {
+    border-color: #334155 !important;
+}
+
+/* ── Labels ──────────────────────────────────────────── */
+.dark label {
+    color: #cbd5e1 !important;
+}
+
+/* ── Image output area ───────────────────────────────── */
+.dark .uniform-height {
+    background: #1e293b !important;
+}
+
+/* ── Tab content markdown ────────────────────────────── */
+.dark .tabitem .prose h2 {
+    color: #e2e8f0 !important;
+    border-bottom-color: #1e3a5f !important;
+}
+.dark .tabitem .prose:nth-child(2) {
+    background: #1e293b !important;
+    border-color: #334155 !important;
+}
+.dark .tabitem .prose:nth-child(2) p,
+.dark .tabitem .prose:nth-child(2) li {
+    color: #94a3b8 !important;
+}
+.dark .tabitem .prose:nth-child(2) strong {
+    color: #e2e8f0 !important;
+}
+"""
 
-    .uniform-height img,
-    .uniform-height canvas {
-        max-height: 500px !important;
-        object-fit: contain !important;
-    }
-
-    #density_map_output {
-        height: 500px !important;
-    }
-    
-    #density_map_output .image-container {
-        height: 500px !important;
-    }
-    
-    #density_map_output img {
-        height: 480px !important;
-        width: auto !important;
-        max-width: 90% !important;
-        object-fit: contain !important;
-    }
-    """
-    ) as demo:
+with gr.Blocks(
+    title="Microscopy Analysis Suite",
+    theme=gr.themes.Soft(
+        primary_hue=gr.themes.colors.sky,
+        secondary_hue=gr.themes.colors.slate,
+        neutral_hue=gr.themes.colors.slate,
+        font=gr.themes.GoogleFont("Inter"),
+    ),
+    css=CSS,
+) as demo:
     gr.Markdown(
         """
         # 🔬 MicroscopyMatching: Microscopy Image Analysis Suite
@@ -946,7 +1167,7 @@ with gr.Blocks(
 
         ### 💡 Technical Details:
 
-        **MicroscopyMatching** - A general-purpose microscopy image analysis toolkit based on Stable Diffusion
+        **MicroscopyMatching** - A general-purpose microscopy image analysis toolkit based on pre-trained Latent Diffusion Model
         
         ### 📒 Note:
 
@@ -972,7 +1193,7 @@ with gr.Blocks(
                         1. Upload an image or select an example image (supports various formats: .png, .jpg, .tif)
                         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, download the original predicted mask (.tif format); if needed, click "Clear Selection" to choose a new image
+                        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
                         
                         🤘 Rate and submit feedback to help us improve the model!
                         """
@@ -1024,7 +1245,7 @@ with gr.Blocks(
                         maximum=1.0,
                         step=0.05,
                         value=0.5,
-                        label="🎚️ Overlay Opacity"
+                        label="🪄 Overlay Opacity"
                     )
                     
                     # Download Original Prediction
@@ -1157,7 +1378,7 @@ with gr.Blocks(
                 1. Upload an image or select an example image (supports multiple formats: .png, .jpg, .tif)
                 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, download the original prediction (.npy format); if needed, click "Clear Selection" to choose a new image to run
+                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
                 
                 🤘 Rate and submit feedback to help us improve the model!
                 """
@@ -1215,7 +1436,7 @@ with gr.Blocks(
                         maximum=1.0,
                         step=0.05,
                         value=0.3,
-                        label="🎚️ Heatmap Opacity"
+                        label="🪄 Density Opacity"
                     )
                     count_status = gr.Textbox(
                         label="📊 Statistics",
@@ -1351,7 +1572,7 @@ with gr.Blocks(
                         1. Upload a ZIP file or select from the example library. 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. Download the CTC format results; if needed, click "Clear Selection" to choose a new ZIP file to run
+                        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
                         
                         🤘 Rate and submit feedback to help us improve the model!
 
@@ -1413,7 +1634,7 @@ with gr.Blocks(
                         maximum=1.0,
                         step=0.05,
                         value=0.3,
-                        label="🎚️ Overlay Opacity"
+                        label="🪄 Overlay Opacity"
                     )
                     
                     track_output = gr.Textbox(