Update app.py

app.py

@@ -6,7 +6,6 @@ import zipfile
 import tempfile
 from pathlib import Path
 from typing import Optional, List, Dict
-
 import numpy as np
 import pandas as pd
 import nibabel as nib
@@ -17,6 +16,7 @@ from matplotlib import animation
 from PIL import Image
 from skimage.measure import label as cc_label, regionprops
 import streamlit as st
+from textwrap import dedent
 
 # ---- Custom layer used by model 
 from utils.layer_util import ResizeAndConcatenate
@@ -49,7 +49,7 @@ ISLAND_MIN_SLICE_SPAN       = 2
 ISLAND_MIN_AREA_PER_SLICE   = 10
 ISLAND_CENTROID_DIST_THRESH = 40
 
-# Orientation / display (non-destructive)
+# Orientation / display 
 ORIENT_TARGET = None      # None (keep native), "LPS", or "RAS"
 DISPLAY_MATCH_DICOM = False
 DISPLAY_RULES = {
@@ -69,6 +69,125 @@ MID_A_MYO_MIN   = 30
 GIF_FPS = 2
 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
+
+
+# --- 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 
+
+    st.markdown(f"""
+    <style>
+      :root {{
+        --content-measure: {CONTENT_MEASURE_PX}px;
+        --left-offset:     {LEFT_OFFSET_PX}px;
+        --upload-width:    {UPLOAD_WIDTH_PX}px;
+      }}
+
+      /* Compact page padding */
+      .appview-container .main .block-container {{
+        padding-top: 0.75rem;
+        padding-bottom: 1rem;
+      }}
+
+      /* Outer wrapper */
+      .content-wrap {{
+        width: min(1300px, 100%);
+        margin: 0 auto;
+        padding: 0 18px;
+        box-sizing: border-box;
+      }}
+
+      /* Text column (hero + paragraphs): same width + same left offset as uploader */
+      .measure-wrap {{
+        max-width: var(--content-measure);
+        margin-left: var(--left-offset);
+        margin-right: auto;
+      }}
+
+      /* HERO: one H1 + inline spans; remove all extra margins */
+      .hero-title {{
+        text-align: left;
+        font-size: 32px;
+        line-height: 1.25;       /* exact line-height */
+        font-weight: 800;
+        margin: 0;                /* kill default h1 margins */
+      }}
+      .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 */
+      }}
+
+      /* Body text */
+      .text-wrap p {{
+        margin: 0 0 14px 0;
+        font-size: 17px;
+        line-height: 1.5;
+        text-align: justify;
+        color: #333;
+      }}
+      .text-wrap a {{
+        color: #0066cc !important;
+        text-decoration: underline !important;
+      }}
+
+      /* Uploader block: same left offset; narrower width so it doesn't drift right */
+      #upload-wrap {{
+        max-width: var(--upload-width);
+        margin-left: var(--left-offset);
+        margin-right: auto;
+      }}
+      #upload-wrap [data-testid="stFileUploader"] {{
+        width: 100% !important;
+        margin-left: 0 !important;
+        margin-right: 0 !important;
+      }}
+      #upload-wrap [data-testid="stFileUploaderDropzone"] {{
+        padding-left: 0 !important;
+        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 */
+      }}
+      #fixed-logo img {{
+        height: 120px;
+        display: block;
+      }}
+      .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; }}
+    </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
 # =========================
@@ -450,68 +569,71 @@ def process_nifti_case(nifti_path: str, model, rows_acc: List[Dict], per_frame_r
         'PixelSpacing_col_mm': spacing['col_mm'],
     })
 
-    # GIF: ED vs ES (slices animate) — non-fatal display
+    # GIF: ED vs ES (slices animate) 
     gif_path = gif_animation_for_patient_pred_only(imgs_4d, preds_4d, pid, ed_idx, es_idx, GIFS_DIR)
     try:
-        # Streamlit uses 'use_column_width'; keep it, but guard against TypeError on older builds
         st.image(gif_path, caption="Generated GIF", use_column_width=True)
     except TypeError:
         st.image(gif_path, caption="Generated GIF")
     log(f"GIF saved: {gif_path}")
 
+
 # =========================
 #           UI
 # =========================
-# def main():
-#     st.header("Data Upload")
-#     uploaded_zip = st.file_uploader("Upload ZIP of NIfTI files", type="zip")
-
 def main():
-    st.set_page_config(layout="wide")
+    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
+
+    # ---------- HERO (kept indentation; dedent removes it safely) ----------
+    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>
+        <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>
+        </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(
         """
-        <h1 style='text-align: left; font-size: 32px; line-height: 1.4;'>
-            This Hugging Face model is developed as part of the publication: <br>
-            <span style='margin-left: 40px; font-size: 28px; display: block;'>
-                Open-Source Pre-Clinical Image Segmentation:
-            </span>
-            <span style='margin-left: 40px; font-size: 28px; display: block;'>
-                Mouse cardiac MRI datasets with a deep learning segmentation framework
-            </span>
-            submitted to the Journal of Cardiovascular Magnetic Resonance
-        </h1>
+        <h2 style='margin-bottom:0.2rem;'>
+            Data Upload <span style='font-size:31px;'>📤</span>
+        </h2>
         """,
         unsafe_allow_html=True
     )
-    
-    st.markdown(
-        """
-        <div style="width:100%; text-align:justify;">
-        In this paper, we present the first publicly-available pre-clinical cardiac MRI dataset, along with an open-source DL segmentation model 
-        <br>(both available on GitHub:     https://github.com/mrphys/Open-Source_Pre-Clinical_Segmentation.git)<br>
-        and this web-based interface for easy deployment. 
-        <br><br>
-        The dataset comprises of complete cine short-axis cardiac MRI images from 130 mice with diverse phenotypes. 
-        <br>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. 
-            
-        <br>Using this resource, we developed an open-source DL segmentation model based on the UNet3+ architecture. 
-
-        This Streamlit application consits of the inference model to enable easy-to-use interface of our DL segmentation model, without the need for local installation.
-        <br>The applictaion requires the complete SAX cine image data to be uploaded in NIfTI format, as a zip file using the simple file browser, below. 
-            
-        Pre-processing and inference is then performed on all 2D images. 
-        <br>The resulting blood-pool and myocardial volumes are combined across all slices at each timeframe and output in a .csv file. 
-        <br>The blood-pool volumes are used to easily identify ED and ES, and these volumes are displayed as a GIF, with the segmentations overlaid.
-        """,
-        unsafe_allow_html=True,
+    uploaded_zip = st.file_uploader(
+        "Upload ZIP of NIfTI files 🐭",
+        type="zip",
+        label_visibility="visible"
     )
-    
-    st.header("Data Upload 🐭")
-
-    uploaded_zip = st.file_uploader("Upload ZIP of NIfTI files", type="zip")
-
+    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:
@@ -525,10 +647,8 @@ def main():
         st.stop()
 
     if st.button("Process Data"):
-        # Show the real filename in the spinner and use it for the temp file name
         zip_label = uploaded_zip.name or "ZIP"
         with st.spinner(f"Processing {zip_label}..."):
-            # Save & extract
             tmpdir = tempfile.mkdtemp()
             zpath = os.path.join(tmpdir, uploaded_zip.name)
             with open(zpath, "wb") as f:
@@ -551,7 +671,7 @@ def main():
             model = keras.models.load_model(
                 MODEL_PATH,
                 custom_objects={
-                    'focal_tversky_loss': None,           # loss/metrics not needed for inference
+                    'focal_tversky_loss': None,
                     'dice_coef_no_bkg': None,
                     'ResizeAndConcatenate': ResizeAndConcatenate,
                     'dice_myo': None,
@@ -575,14 +695,19 @@ def main():
             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:
-                st.download_button(
-                    label="Download CSV",
-                    data=f,
-                    file_name=csv_download_name,
-                    mime="text/csv"
-                )
-
- 
+                csv_bytes = f.read()
+            st.download_button(
+                label="Download CSV",
+                data=csv_bytes,                 # <-- bytes, best practice on HuggingFace/iframes
+                file_name=csv_download_name,
+                mime="text/csv",
+                key="dl_csv_results"            # stable key helps HF embed
+            )
+
+
 if __name__ == "__main__":
     main()
+