Update app.py

app.py

@@ -1,9 +1,11 @@
-# app.py
+# App.py
 import os
 import io
 import math
 import zipfile
 import tempfile
+import streamlit.components.v1 as components 
+from textwrap import dedent
 from pathlib import Path
 from typing import Optional, List, Dict
 import numpy as np
@@ -17,6 +19,7 @@ from PIL import Image
 from skimage.measure import label as cc_label, regionprops
 import streamlit as st
 from textwrap import dedent
+import base64  # kept for reference; not required when using st.download_button
 
 # ---- Custom layer used by model 
 from utils.layer_util import ResizeAndConcatenate
@@ -72,11 +75,8 @@ GIF_DPI = 300
 # =========================
 #      Branding / UI
 # =========================
-# Raw logo URL so Streamlit can fetch it
 LOGO_URL  = "https://raw.githubusercontent.com/whanisa/Segmentation/main/icon/logo.png"
 LOGO_LINK = "https://github.com/whanisa/Segmentation"
-
-# Optional: adjust fixed logo size and safe top spacing
 LOGO_HEIGHT_PX = 120
 SAFE_INSET_PX  = 18
 
@@ -84,9 +84,9 @@ SAFE_INSET_PX  = 18
 # --- CSS 
 def _inject_layout_css():
     # Tune these three knobs as needed
-    CONTENT_MEASURE_PX = 920  # width of the hero + paragraphs column 
-    LEFT_OFFSET_PX     = 40   # push BOTH text and uploader to the right 
-    UPLOAD_WIDTH_PX    = 420  # make uploader column narrower 
+    CONTENT_MEASURE_PX = 920  # width of the hero + paragraphs column
+    LEFT_OFFSET_PX     = 40   # push BOTH text and uploader to the right (aligns with left gutter)
+    UPLOAD_WIDTH_PX    = 420  # make uploader column narrower
 
     st.markdown(f"""
     <style>
@@ -94,8 +94,27 @@ def _inject_layout_css():
         --content-measure: {CONTENT_MEASURE_PX}px;
         --left-offset:     {LEFT_OFFSET_PX}px;
         --upload-width:    {UPLOAD_WIDTH_PX}px;
+
+        /* Fixed-edge logo tunables */
+        --logo-height: {LOGO_HEIGHT_PX}px;
+        --edge-x: max(12px, env(safe-area-inset-left));
+        /* Height of Streamlit/HF header; adjust to 40-56–64px if needed */
+        --header-clear: 40px;
+        --edge-y: calc(env(safe-area-inset-top) + var(--header-clear) + 0px);
+
+        /* Gap below the logo before the tabs appear */
+        --tabs-top-gap: calc(var(--logo-height) + 16px);
+
+        /* Shift the tabs a bit to the right */
+        --tabs-left-shift: 32px;
+
+        /* Accent color for the active tab underline/text */
+        --accent: #ef4444; /* red-500 */
       }}
 
+      /* Ensure the fixed logo isn't clipped by Streamlit containers */
+      .stApp, .appview-container, .main {{ overflow: visible !important; }}
+
       /* Compact page padding */
       .appview-container .main .block-container {{
         padding-top: 0.75rem;
@@ -117,35 +136,79 @@ def _inject_layout_css():
         margin-right: auto;
       }}
 
-      /* HERO: one H1 + inline spans; remove all extra margins */
+      /* ---- Fixed, far-left edge logo ---- */
+      #fixed-edge-logo {{
+        position: fixed;
+        left: var(--edge-x);
+        top: var(--edge-y);
+        z-index: 1000;             
+        pointer-events: none;       
+      }}
+      #fixed-edge-logo img {{
+        height: var(--logo-height);
+        width: auto;
+        display: block;
+      }}
+
+      /* Spacer so tabs/hero don't hide under the fixed logo */
+      .edge-logo-spacer {{ height: var(--tabs-top-gap); }}
+
+
+      /* Title: justify both sides */
       .hero-title {{
-        text-align: left;
-        font-size: 32px;
-        line-height: 1.25;       /* exact line-height */
+        font-size: 40px;
+        line-height: 1.25;
         font-weight: 800;
-        margin: 0;                /* kill default h1 margins */
+        margin: 0 0 25px;             /* adjust to control gap to first paragraph */
+        text-align: justify;          /* both edges */
+        text-justify: inter-word;
       }}
+      
+    
+      /* Optional subtitle inside the H1 */
       .hero-title .sub {{
-        display: block;           /* forces each to its own line */
-        font-size: 28px;          /* exact size */
-        line-height: 1.25;        /* keep same rhythm */
-        margin: 0;                /* kill gaps between lines */
+        display: block;
+        font-size: 28px;
+        line-height: 1.25;
+        margin: 0;
       }}
-
-      /* Body text */
+    
+      /* Body paragraphs: justified, but last line remains ragged-right */
       .text-wrap p {{
-        margin: 0 0 14px 0;
+        margin: 0 0 14px 0;           /* paragraph spacing */
         font-size: 17px;
         line-height: 1.5;
         text-align: justify;
+        text-justify: inter-word;
         color: #333;
+        hyphens: auto;
+        -webkit-hyphens: auto;
+        -ms-hyphens: auto;
+      }}
+
+      /* Let long URLs wrap so they don’t wreck the right edge */
+      .text-wrap p a {{
+        overflow-wrap: anywhere;
+        word-break: break-word;
       }}
+    
+      /* Link aesthetics (optional) */
       .text-wrap a {{
-        color: #0066cc !important;
-        text-decoration: underline !important;
+        color: #0066cc;
+        text-decoration: underline;
+        text-underline-offset: 2px;
+        text-decoration-thickness: 1.5px;
+      }}
+    
+      /* Note under last paragraph */
+      .note-text {{
+        font-size: 14px;      /* smaller than normal text */
+        color: #333;          /* optional: softer gray */
+        line-height: 1.4;     /* a bit tighter spacing */
+        margin-top: 4px;     /* space above note */
       }}
 
-      /* Uploader block: same left offset; narrower width so it doesn't drift right */
+      /* Uploader block alignment */
       #upload-wrap {{
         max-width: var(--upload-width);
         margin-left: var(--left-offset);
@@ -161,33 +224,52 @@ def _inject_layout_css():
         padding-right: 44px !important;
       }}
 
-      /* Fixed, NON-INTERACTIVE logo (won't steal clicks) */
-      #fixed-logo {{
-        position: fixed;
-        top: 40px;
-        left: 25px;
-        z-index: 5;               /* lower than big overlays; high enough to be visible */
-        pointer-events: none;     /* <-- key: pass clicks through */
+      /* ---- REAL Streamlit tabs styling and alignment ---- */
+      /* Shift the tab strip to align with content */
+      div[data-testid="stTabs"] > div[role="tablist"],
+      div[data-baseweb="tab-list"],
+      .stTabs [role="tablist"] {{
+        margin-left: calc(var(--left-offset) + var(--tabs-left-shift)) !important;
+        margin-right: 18px !important;
+        border-bottom: 0; /* remove gray baseline */
+        padding-bottom: 6px;
       }}
-      #fixed-logo img {{
-        height: 120px;
-        display: block;
+
+      /* Tab buttons */
+      div[data-baseweb="tab-list"] button[role="tab"],
+      .stTabs [role="tab"] {{
+        color: #374151; /* gray-700 */
+        background: transparent;
+        border: none;
+        outline: none;
+        padding: 6px 14px 10px 14px;
+        margin: 0 4px;
+        font-weight: 600;
       }}
-      .top-spacer {{ height: 120px; }}
 
-      /* Remove Streamlit paperclip/anchor icons on headings */
-      [data-testid="stHeaderAction"] {{ display: none !important; }}
-      .stMarkdown h1 a, .stMarkdown h2 a, .stMarkdown h3 a {{ display: none !important; }}
+      /* Active tab: keep ONLY our single orange underline */
+      div[data-baseweb="tab-list"] button[aria-selected="true"],
+      .stTabs [role="tab"][aria-selected="true"] {{
+        color: var(--accent) !important;
+        border-bottom: 3px solid var(--accent) !important;
+      }}
+      /* Hide BaseWeb's moving highlight to avoid double orange lines */
+      div[data-baseweb="tab-highlight"] {{ display: none !important; }}
+
+      /* Small screens */
+      @media (max-width: 480px) {{
+        :root {{
+          --logo-height: {max(48, int(LOGO_HEIGHT_PX*0.7))}px;
+          --header-clear: 64px;
+          --tabs-left-shift: 16px;
+        }}
+      }}
     </style>
-
-    <!-- Fixed, NON-clickable logo (no <a> wrapper) -->
-    <div id="fixed-logo" aria-hidden="true" role="presentation">
-      <img src="{LOGO_URL}" alt="">
-    </div>
-    <div class="top-spacer"></div>
     """, unsafe_allow_html=True)
 
 
+
+
 # =========================
 #      Small utilities
 # =========================
@@ -494,6 +576,137 @@ def write_all_in_one_csv(rows, per_frame_rows, csv_dir):
     log(f"CSV written: {out_csv}")
     return out_csv
 
+
+
+# =========================
+#   Same-tab download (no /media, no new tab)
+#   Styled like Streamlit buttons
+# =========================
+def _same_tab_download_button(label: str, data_bytes: bytes, file_name: str, mime: str = "text/csv", *, key: Optional[str] = None):
+    """
+    Streamlit-like download button that:
+      • hovers as white bg + red text/border
+      • turns solid red with white text while pressed
+      • downloads in the SAME TAB (Blob + programmatic click)
+    """
+    import html, hashlib, base64
+    import streamlit as st
+    import streamlit.components.v1 as components
+
+    b64 = base64.b64encode(data_bytes).decode("ascii")
+    btn_id = f"dl_{(key or file_name)}_{hashlib.sha256((key or file_name).encode()).hexdigest()[:8]}"
+
+    # CSS: normal -> hover -> pressed (solid red)
+    st.markdown(f"""
+    <style>
+      a#{btn_id} {{
+        appearance: none;
+        display: inline-flex; align-items: center; justify-content: center;
+        padding: 0.5rem 0.75rem;
+        border-radius: 0.5rem;
+        border: 1px solid rgba(49,51,63,.2);
+        background: var(--background-color);
+        color: var(--text-color);
+        font-weight: 600; text-decoration: none !important;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
+        transition: color .15s ease, border-color .15s ease,
+                   box-shadow .15s ease, transform .05s ease, background-color .15s;
+        cursor: pointer;
+        user-select: none;
+        -webkit-tap-highlight-color: transparent;
+      }}
+      /* Hover: white bg, red border/text */
+      a#{btn_id}:hover, a#{btn_id}:focus {{
+        background: var(--background-color);
+        color: var(--accent) !important;
+        border-color: var(--accent) !important;
+        box-shadow: 0 2px 6px rgba(239,68,68,0.20);
+        transform: translateY(-1px);
+      }}
+      /* Active/pressed: solid red with white text */
+      a#{btn_id}:active,
+      a#{btn_id}.pressed {{
+        background: var(--accent) !important;
+        border-color: var(--accent) !important;
+        color: #fff !important;
+        box-shadow: 0 3px 10px rgba(239,68,68,0.35);
+        transform: translateY(0);
+      }}
+      a#{btn_id}:focus-visible {{
+        outline: none;
+        box-shadow: 0 0 0 0.2rem rgba(239,68,68,0.35);
+      }}
+    </style>
+    """, unsafe_allow_html=True)
+
+    # Render the button (no navigation in href)
+    st.markdown(
+        f'<a id="{btn_id}" href="#" '
+        f' data-b64="{b64}" data-mime="{html.escape(mime)}" data-fname="{html.escape(file_name)}">{html.escape(label)}</a>',
+        unsafe_allow_html=True
+    )
+
+    # JS: add a temporary "pressed" class on mousedown/touch, then same-tab download via Blob
+    components.html(f"""
+<script>
+(function () {{
+  try {{
+    const doc = window.parent.document;
+    const a = doc.getElementById("{btn_id}");
+    if (!a) return;
+
+    const pressOn = () => a.classList.add("pressed");
+    const pressOff = () => a.classList.remove("pressed");
+
+    a.addEventListener("mousedown", pressOn, true);
+    a.addEventListener("mouseup",   pressOff, true);
+    a.addEventListener("mouseleave",pressOff, true);
+    a.addEventListener("touchstart",pressOn,  {{passive:true}});
+    a.addEventListener("touchend",  pressOff, true);
+    a.addEventListener("touchcancel",pressOff, true);
+
+    a.addEventListener("click", function(ev) {{
+      ev.preventDefault();
+      ev.stopImmediatePropagation();
+
+      const b64 = a.getAttribute("data-b64");
+      const mime = a.getAttribute("data-mime") || "application/octet-stream";
+      const fname = a.getAttribute("data-fname") || "download";
+
+      // base64 → Blob
+      const bstr = atob(b64);
+      const len = bstr.length;
+      const u8 = new Uint8Array(len);
+      for (let i = 0; i < len; i++) u8[i] = bstr.charCodeAt(i);
+      const blob = new Blob([u8], {{ type: mime }});
+      const url = URL.createObjectURL(blob);
+
+      // programmatic same-tab download
+      const tmp = doc.createElement("a");
+      tmp.href = url;
+      tmp.download = fname;
+      tmp.style.display = "none";
+      doc.body.appendChild(tmp);
+      tmp.click();
+
+      // keep the red state briefly so it's visible, then clean up
+      setTimeout(() => {{
+        URL.revokeObjectURL(url);
+        tmp.remove();
+        pressOff();
+      }}, 150);
+    }}, true);
+  }} catch (err) {{
+    console.debug("download handler error:", err);
+  }}
+}})();
+</script>
+""", height=0)
+
+
+
+
+
 # =========================
 #    Per-file processing
 # =========================
@@ -553,7 +766,7 @@ def process_nifti_case(nifti_path: str, model, rows_acc: List[Dict], per_frame_r
     per_frame_df.insert(0, "Patient_ID", pid)
     per_frame_rows_acc.append(per_frame_df)
 
-    # -------- Append summary row BEFORE any UI drawing (so UI errors don't drop data)
+    # -------- Append summary row BEFORE any UI drawing
     rows_acc.append({
         'Patient_ID': pid,
         'EDV_uL': EDV_uL,
@@ -585,129 +798,369 @@ def main():
     st.set_page_config(layout="wide", initial_sidebar_state="collapsed")
     _inject_layout_css()
 
-    # Optional: also register the logo with Streamlit (for favicon/header in newer builds)
-    try:
-        st.logo(LOGO_URL, size="large", link=LOGO_LINK, icon_image=LOGO_URL)
-    except Exception:
-        pass
+    # ---- Fixed, far-left logo; spacer prevents overlap with tabs ----
+    st.markdown(
+        f'''
+        <div id="fixed-edge-logo" aria-hidden="true" role="presentation">
+          <img src="{LOGO_URL}" alt="Pre-Clinical Cardiac MRI Segmentation">
+        </div>
+        <div class="edge-logo-spacer"></div>
+        ''',
+        unsafe_allow_html=True,
+    )
 
-    # ---------- HERO (kept indentation; dedent removes it safely) ----------
-    HERO_HTML = dedent("""
+    # ---------- REAL tabs ----------
+    tab1, tab2, tab3 = st.tabs(["Segmentation App", "Dataset", "NIfTI converter"])
+
+
+    
+    # ===== Tab 1: Segmentation App =====
+    with tab1:
+        # ---------- REMOVE PAPERCLIP ----------
+        st.markdown(
+            """
+            <style>
+            /* Hide Streamlit's hover anchor/paperclip on all headings */
+            [data-testid="stHeading"] a,
+            h1 a[href^="#"],
+            h2 a[href^="#"],
+            h3 a[href^="#"] {
+                display: none !important;
+                visibility: hidden !important;
+            }
+            </style>
+            """,
+            unsafe_allow_html=True
+        )
+
+        
+        # ---------- HERO ----------
+        HERO_HTML = dedent("""\
         <div class="content-wrap">
         <div class="measure-wrap">
-        <div class="hero-wrap">
-          <h1 class="hero-title">
-            This Hugging Face model is developed as part of the publication:<br>
-            <span class="sub">Open-Source Pre-Clinical Image Segmentation:</span>
-            <span class="sub">Mouse cardiac MRI datasets with a deep learning segmentation framework</span>
-            submitted to the Journal of Cardiovascular Magnetic Resonance
-          </h1>
+        <div class="text-wrap">
+        <h1 class="hero-title">
+        Open-Source Pre-Clinical Image Segmentation:<br>
+        Mouse cardiac MRI datasets with a deep learning segmentation framework
+        </h1>
         </div>
         <div class="text-wrap">
-          <p>In this paper, we present the first publicly-available pre-clinical cardiac MRI dataset, along with an open-source DL segmentation model (both available on GitHub:
-          <a href="https://github.com/mrphys/Open-Source_Pre-Clinical_Segmentation.git" target="_blank" rel="noopener">https://github.com/mrphys/Open-Source_Pre-Clinical_Segmentation.git</a>) and this web-based interface for easy deployment.</p>
-          <p>The dataset comprises complete cine short-axis cardiac MRI images from 130 mice with diverse phenotypes. It also contains expert manual segmentations of left ventricular (LV) blood pool and myocardium at end-diastole, end-systole, as well as additional timeframes with artefacts to improve robustness.</p>
-          <p>Using this resource, we developed an open-source DL segmentation model based on the UNet3+ architecture.</p>
-          <p>This Streamlit application consists of the inference model to provide an easy-to-use interface for our DL segmentation model, without the need for local installation. The application requires the complete SAX cine image data to be uploaded in NIfTI format, as a ZIP file using the simple file browser below.</p>
-          <p>Pre-processing and inference are then performed on all 2D images. The resulting blood-pool and myocardial volumes are combined across all slices at each timeframe and output to a .csv file. The blood-pool volumes are used to identify ED and ES, and these volumes are displayed as a GIF with the segmentations overlaid.</p>
+        <p>We present the first publicly-available pre-clinical cardiac MRI dataset, along with an open-source DL segmentation model (both available on GitHub:
+        <a href="https://github.com/mrphys/Open-Source_Pre-Clinical_Segmentation.git" target="_blank" rel="noopener">https://github.com/mrphys/Open-Source_Pre-Clinical_Segmentation.git</a>) and this web-based interface for easy deployment.</p>
+        <p>The dataset comprises complete cine short-axis cardiac MRI images from 130 mice with diverse phenotypes. It also contains expert manual segmentations of left ventricular (LV) blood pool and myocardium at end-diastole, end-systole, as well as additional timeframes with artefacts to improve robustness.</p>
+        <p>Using this resource, we developed an open-source DL segmentation model based on the UNet3+ architecture.</p>
+        <p>This Streamlit application consists of the inference model to provide an easy-to-use interface for our DL segmentation model, without the need for local installation. The application requires the complete SAX cine image data to be uploaded in NIfTI format, as a ZIP file using the simple file browser below.</p>
+        <p>Pre-processing and inference are then performed on all 2D images. The resulting blood-pool and myocardial volumes are combined across all slices at each timeframe and output to a .csv file. The blood-pool volumes are used to identify ED and ES, and these volumes are displayed as a GIF with the segmentations overlaid.</p>
+        <p class="note-text">(Note: This Hugging Face model was developed as part of a manuscript submitted to the <em>Journal of Cardiovascular Magnetic Resonance</em>)</p>
         </div>
         </div>
         </div>
-    """)
-    st.markdown(HERO_HTML, unsafe_allow_html=True)
-
-    # ---------- DATA UPLOAD (same column; perfect left alignment) ----------
-    st.markdown('<div class="content-wrap"><div class="measure-wrap" id="upload-wrap">', unsafe_allow_html=True)
-    st.markdown(
-        """
-        <h2 style='margin-bottom:0.2rem;'>
-            Data Upload <span style='font-size:31px;'>📤</span>
-        </h2>
-        """,
-        unsafe_allow_html=True
-    )
-    uploaded_zip = st.file_uploader(
-        "Upload ZIP of NIfTI files 🐭",
-        type="zip",
-        label_visibility="visible"
-    )
-    st.markdown('</div></div>', unsafe_allow_html=True)
-
-    # ---- Extract helper ----
-    def extract_zip(zip_path, extract_to):
-        os.makedirs(extract_to, exist_ok=True)
-        with zipfile.ZipFile(zip_path, 'r') as zip_ref:
-            valid_files = [
-                f for f in zip_ref.namelist()
-                if "__MACOSX" not in f and not os.path.basename(f).startswith("._")
-            ]
-            zip_ref.extractall(extract_to, members=valid_files)
-
-    if uploaded_zip is None:
-        st.stop()
-
-    if st.button("Process Data"):
-        zip_label = uploaded_zip.name or "ZIP"
-        with st.spinner(f"Processing {zip_label}..."):
-            tmpdir = tempfile.mkdtemp()
-            zpath = os.path.join(tmpdir, uploaded_zip.name)
-            with open(zpath, "wb") as f:
-                f.write(uploaded_zip.read())
-            extract_zip(zpath, tmpdir)
-
-            # Find NIfTI files inside ZIP
-            nii_files: List[str] = []
-            for root, _, files in os.walk(tmpdir):
-                for fn in files:
-                    low = fn.lower()
-                    if low.endswith(".nii") or low.endswith(".nii.gz"):
-                        nii_files.append(os.path.join(root, fn))
-
-            if not nii_files:
-                st.error("No NIfTI files (.nii / .nii.gz) found in the uploaded ZIP.")
-                st.stop()
-
-            # Load model
-            model = keras.models.load_model(
-                MODEL_PATH,
-                custom_objects={
-                    'focal_tversky_loss': None,
-                    'dice_coef_no_bkg': None,
-                    'ResizeAndConcatenate': ResizeAndConcatenate,
-                    'dice_myo': None,
-                    'dice_blood': None,
-                    'dice': None
-                },
-                compile=False
-            )
-            log("Model loaded.")
-
-            rows: List[Dict] = []
-            per_frame_rows: List[pd.DataFrame] = []
-
-            for fp in sorted(nii_files):
-                try:
-                    process_nifti_case(fp, model, rows, per_frame_rows)
-                except Exception as e:
-                    st.warning(f"Failed: {Path(fp).name} — {e}")
-
-            # Write merged CSV and show download
-            csv_path = write_all_in_one_csv(rows, per_frame_rows, CSV_DIR)
-            st.success(f"Processed {len(rows)} NIfTI file(s).")
-            csv_download_name = f"{Path(zip_label).stem}_Results.csv"
-
-            # -------- PASS BYTES (not a file object) --------
-            with open(csv_path, "rb") as f:
-                csv_bytes = f.read()
-            st.download_button(
+        """)
+        st.markdown(HERO_HTML, unsafe_allow_html=True)
+
+
+
+        
+        # HERO_HTML = dedent("""
+        #     <div class="content-wrap">
+        #     <div class="measure-wrap">
+        #     <div class="hero-wrap">
+        #       <h1 class="hero-title">
+        #         Open-Source Pre-Clinical Image Segmentation:<br>
+        #         Mouse cardiac MRI datasets with a deep learning segmentation framework
+        #       </h1>
+        #     </div>
+        #     <div class="text-wrap">
+        #       <p>We present the first publicly-available pre-clinical cardiac MRI dataset, along with an open-source DL segmentation model (both available on GitHub:
+        #       <a href="https://github.com/mrphys/Open-Source_Pre-Clinical_Segmentation.git" target="_blank" rel="noopener">https://github.com/mrphys/Open-Source_Pre-Clinical_Segmentation.git</a>) and this web-based interface for easy deployment.</p>
+        #       <p>The dataset comprises complete cine short-axis cardiac MRI images from 130 mice with diverse phenotypes. It also contains expert manual segmentations of left ventricular (LV) blood pool and myocardium at end-diastole, end-systole, as well as additional timeframes with artefacts to improve robustness.</p>
+        #       <p>Using this resource, we developed an open-source DL segmentation model based on the UNet3+ architecture.</p>
+        #       <p>This Streamlit application consists of the inference model to provide an easy-to-use interface for our DL segmentation model, without the need for local installation. The application requires the complete SAX cine image data to be uploaded in NIfTI format, as a ZIP file using the simple file browser below.</p>
+        #       <p>Pre-processing and inference are then performed on all 2D images. The resulting blood-pool and myocardial volumes are combined across all slices at each timeframe and output to a .csv file. The blood-pool volumes are used to identify ED and ES, and these volumes are displayed as a GIF with the segmentations overlaid.</p>
+        #       <p>
+        #         Pre-processing and inference are then performed on all 2D images. The resulting blood-pool and myocardial volumes are combined across all slices at each timeframe and output to a .csv file. The blood-pool volumes are used to identify ED and ES, and these volumes are displayed as a GIF with the segmentations overlaid.
+        #         <br>
+        #         (Note: This Hugging Face model was developed as part of a manuscript submitted to the <em>Journal of Cardiovascular Magnetic Resonance</em>).
+        #       </p>
+        #     </div>
+        #     </div>
+        #     </div>
+        # """)
+        # st.markdown(HERO_HTML, unsafe_allow_html=True)
+
+        # ---------- DATA UPLOAD (aligned) ----------
+        st.markdown('<div class="content-wrap"><div class="measure-wrap" id="upload-wrap">', unsafe_allow_html=True)
+        st.markdown(
+            """
+            <h2 style='margin-bottom:0.2rem;'>
+                Data Upload <span style='font-size:33px;'>📤</span>
+            </h2>
+            """,
+            unsafe_allow_html=True
+        )
+        uploaded_zip = st.file_uploader(
+            "Upload ZIP of NIfTI files 🐭",
+            type="zip",
+            label_visibility="visible"
+        )
+
+        
+        st.markdown(
+            """
+            <p style="margin-top:0.3rem; font-size:15px; color:#444;">
+            Or download our <a href="https://huggingface.co/spaces/mrphys/Pre-clinical_DL_segmentation/tree/main/NIfTI_dataset" target="_blank" rel="noopener">
+            sample NIfTI dataset</a> to try it out!
+            </p>
+            """,
+            unsafe_allow_html=True
+        )
+    
+        st.markdown('</div></div>', unsafe_allow_html=True)
+
+        # ---- Clear stale CSV when a new ZIP is picked ----
+        if uploaded_zip is not None:
+            if st.session_state.get("_last_zip_name") != uploaded_zip.name:
+                st.session_state.pop("csv_bytes", None)
+                st.session_state.pop("csv_name", None)
+                st.session_state.pop("rows_count", None)
+                st.session_state.pop("_dl_token", None)  # reset download-button identity
+                st.session_state["_last_zip_name"] = uploaded_zip.name
+
+        # ---- Extract helper ----
+        def extract_zip(zip_path, extract_to):
+            os.makedirs(extract_to, exist_ok=True)
+            with zipfile.ZipFile(zip_path, 'r') as zip_ref:
+                valid_files = [
+                    f for f in zip_ref.namelist()
+                    if "__MACOSX" not in f and not os.path.basename(f).startswith("._")
+                ]
+                zip_ref.extractall(extract_to, members=valid_files)
+
+        # ---------- PROCESS ----------
+        if uploaded_zip and st.button("Process Data"):
+            zip_label = uploaded_zip.name or "ZIP"
+            with st.spinner(f"Processing {zip_label}..."):
+                tmpdir = tempfile.mkdtemp()
+                zpath = os.path.join(tmpdir, uploaded_zip.name)
+                with open(zpath, "wb") as f:
+                    f.write(uploaded_zip.read())
+                extract_zip(zpath, tmpdir)
+
+                # Find NIfTI files inside ZIP
+                nii_files: List[str] = []
+                for root, _, files in os.walk(tmpdir):
+                    for fn in files:
+                        low = fn.lower()
+                        if low.endswith(".nii") or low.endswith(".nii.gz"):
+                            nii_files.append(os.path.join(root, fn))
+
+                if not nii_files:
+                    st.error("No NIfTI files (.nii / .nii.gz) found in the uploaded ZIP.")
+                else:
+                    # Load model
+                    model = keras.models.load_model(
+                        MODEL_PATH,
+                        custom_objects={
+                            'focal_tversky_loss': None,
+                            'dice_coef_no_bkg': None,
+                            'ResizeAndConcatenate': ResizeAndConcatenate,
+                            'dice_myo': None,
+                            'dice_blood': None,
+                            'dice': None
+                        },
+                        compile=False
+                    )
+                    log("Model loaded.")
+
+                    rows: List[Dict] = []
+                    per_frame_rows: List[pd.DataFrame] = []
+
+                    for fp in sorted(nii_files):
+                        try:
+                            process_nifti_case(fp, model, rows, per_frame_rows)
+                        except Exception as e:
+                            st.warning(f"Failed: {Path(fp).name} — {e}")
+
+                    # ---- BELOW the GIF(s): write CSV & persist bytes/name ----
+                    csv_path = write_all_in_one_csv(rows, per_frame_rows, CSV_DIR)
+                    csv_download_name = f"{Path(zip_label).stem}_Results.csv"
+                    with open(csv_path, "rb") as f:
+                        csv_bytes = f.read()
+
+                    st.session_state["csv_bytes"] = csv_bytes
+                    st.session_state["csv_name"]  = csv_download_name
+                    st.session_state["rows_count"] = len(rows)
+
+        # ---- Re-render success + robust download on EVERY run (same tab, no 404) ----
+        if "csv_bytes" in st.session_state and "csv_name" in st.session_state:
+            st.success(f"Processed {st.session_state.get('rows_count', 0)} NIfTI file(s).")
+
+            # Use our same-tab data:URI button that looks like Streamlit's and turns red on hover
+            _same_tab_download_button(
                 label="Download CSV",
-                data=csv_bytes,                 # <-- bytes, best practice on HuggingFace/iframes
-                file_name=csv_download_name,
+                data_bytes=st.session_state["csv_bytes"],
+                file_name=st.session_state["csv_name"],
                 mime="text/csv",
-                key="dl_csv_results"            # stable key helps HF embed
+                key="results"
             )
 
 
+
+    # ===== Tab 2: Dataset =====
+    with tab2:
+        st.markdown(
+            """
+    <style>
+    /* --- Full-width dark hero section --- */
+    .ds-hero-section {
+      background: #082c3a;
+      padding: 30px 10px;
+      text-align: center;
+      margin-left: -100vw;
+      margin-right: -100vw;
+      left: 0; right: 0; position: relative;
+    }
+    .ds-hero-section-inner { max-width: 1100px; margin: 0 auto; }
+    
+    /* --- Hero image (centered) --- */
+    .ds-heroimg {
+      max-width: 1000px; width: 100%; height: auto;
+      border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
+      display: block; margin: 0 auto;
+    }
+    
+    /* --- Caption (light on dark) --- */
+    .ds-caption {
+      text-align: center; color: #e0f2f1;
+      font-size: 18px; line-height: 1.5;
+      margin: 14px 6px 0; font-style: italic;
+    }
+    
+    /* --- Thicker orange divider --- */
+    .ds-hr {
+      height: 8px;
+      border: 0; background: #ea580c;
+      margin: 24px 0 20px;
+      border-radius: 3px;
+    }
+    
+    /* --- White background lower content --- */
+    .ds-wrap {
+      max-width: var(--content-measure, 920px);
+      margin-left: var(--left-offset, 40px);
+      margin-right: auto;
+      background: #fff; padding: 16px 24px; border-radius: 6px;
+    }
+    
+    /* --- Section headers --- */
+    .ds-section h2 {
+      font-size: 20px; font-weight: 700;
+      margin: 0 0 2px;
+      color: #082c3a;
+    }
+    
+    /* --- Text content --- */
+    .ds-section p {
+      font-size: 16px; line-height: 1.6; color: #333;
+      margin: 0 0 6px;
+    }
+    .ds-section ul {
+      margin: 2px 0 8px 18px;
+      padding: 0;
+    }
+    .ds-section li {
+      font-size: 16px; line-height: 1.6; color: #333;
+      margin-bottom: 10px;
+    }
+    .ds-section a {
+      color: #0b66c3 !important; text-decoration: underline !important;
+    }
+    
+    /* --- Remove Streamlit paperclip/anchor on headings --- */
+    h2 a, [data-testid="stHeading"] a { display: none !important; }
+    </style>
+    
+    <!-- Full-width dark top section -->
+    <div class="ds-hero-section">
+      <div class="ds-hero-section-inner">
+        <img class="ds-heroimg"
+             src="https://raw.githubusercontent.com/whanisa/Segmentation/main/icon/open_source.png"
+             alt="Illustration of mouse with heart representing open-source pre-clinical cardiac MRI dataset" />
+        <p class="ds-caption">
+          The first publicly-available pre-clinical cardiac MRI dataset,<br/>
+          with an open-source segmentation model and an easy-to-use web app.
+        </p>
+      </div>
+    </div>
+    
+    <hr class="ds-hr"/>
+    
+    <!-- White lower content -->
+    <div class="ds-wrap">
+      <div class="ds-section">
+        <h2>Repository & Paper Resources</h2>
+        <p>GitHub:
+          <a href="https://github.com/mrphys/Open-Source_Pre-Clinical_Segmentation.git" target="_blank">
+            Open-Source_Pre-Clinical_Segmentation
+          </a>
+        </p>
+    
+    <h2>📊 Dataset Availability</h2>
+    <ul>
+      <li>
+        <strong>Full dataset (130 mice, HDF5 format):</strong><br/>
+        Available in our
+        <a href="https://github.com/mrphys/Open-Source_Pre-Clinical_Segmentation/tree/master/Data" target="_blank">
+          GitHub repository
+        </a>.<br/>
+        Each .h5 file contains the complete cine SAX MRI and expert manual segmentations.
+      </li>
+      <li>
+        <strong>Sample datasets (3 mice, NIfTI format):</strong><br/>
+        Available here:
+        <a href="https://huggingface.co/spaces/mrphys/Pre-clinical_DL_segmentation/tree/main/NIfTI_dataset" target="_blank">
+          NIfTI Sample Dataset
+        </a>.<br/>
+        We provide 3 example NIfTI datasets for quick download and direct use within the app.
+      </li>
+    </ul>
+      </div>
+    
+      <hr class="ds-hr"/>
+    
+      <div class="ds-section">
+        <h2>Notes</h2>
+        <ul>
+          <li>Complete SAX cine MRI for 130 mice with expert LV blood & myocardium labels (ED/ES).</li>
+        </ul>
+      </div>
+    </div>
+    """,
+            unsafe_allow_html=True
+        )
+
+
+
+
+    # ===== Tab 3: NIfTI converter =====
+    with tab3:
+        st.subheader("NIfTI converter")
+        st.markdown(
+            """
+            **Working with Agilent data?**  
+            Easily convert your fid files to NIfTI using our **fid2niix**.  
+    
+            ```bash
+            fid2niix -z y -o /path/to/out -f "%p_%s" /path/to/fid_folder
+            ```
+    
+            **💡 Tips**  
+            - Upload a ZIP file that includes both `fid` and `procpar`.
+            - Conversion outputs **NIfTI-1** format, ready to use with our web app.
+            """
+        )
+
+
+
 if __name__ == "__main__":
     main()
-