Upload folder using huggingface_hub

.streamlit/config.toml

@@ -1,9 +1,13 @@
 [theme]
-primaryColor = "#6C5CE7"
-backgroundColor = "#0E1117"
-secondaryBackgroundColor = "#1A1A2E"
-textColor = "#FAFAFA"
+base = "dark"
+primaryColor = "#7C3AED"
+backgroundColor = "#050510"
+secondaryBackgroundColor = "#0F0F23"
+textColor = "#F1F5F9"
 font = "sans serif"
 
 [server]
 headless = true
+
+[browser]
+gatherUsageStats = false

Dockerfile

@@ -2,7 +2,9 @@ FROM python:3.10-slim
 
 WORKDIR /app
 
-RUN apt-get update && apt-get install -y --no-install-recommends     build-essential     && rm -rf /var/lib/apt/lists/*
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential xvfb libgl1-mesa-glx libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
 
 COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt

README.md

@@ -1,29 +1,28 @@
----
-title: CortexLab Dashboard
-emoji: 🧠
-colorFrom: purple
-colorTo: blue
-sdk: docker
-app_port: 7860
-license: cc-by-nc-4.0
-short_description: Interactive 3D brain viewer and fMRI analysis toolkit
-tags:
-  - neuroscience
-  - fmri
-  - brain-alignment
-  - streamlit
-  - 3d-visualization
-pinned: false
----
-
 # CortexLab Dashboard
 
-Interactive analysis dashboard for [CortexLab](https://github.com/siddhant-rajhans/cortexlab).
+Interactive analysis dashboard for [CortexLab](https://github.com/siddhant-rajhans/cortexlab) - multimodal fMRI brain encoding toolkit.
+
+## Pages
+
+- **Brain Alignment Benchmark** - Compare AI model representations against brain responses (RSA, CKA, Procrustes)
+- **Cognitive Load Scorer** - Visualize cognitive demand across visual, auditory, language, and executive dimensions
+- **Temporal Dynamics** - Peak latency, lag correlations, sustained vs transient response decomposition
+- **ROI Connectivity** - Correlation matrices, network clustering, degree centrality, graph visualization
+
+## Quick Start
+
+```bash
+pip install -r requirements.txt
+streamlit run Home.py
+```
+
+Runs on **synthetic data** by default - no GPU or real fMRI data required.
+
+## Links
+
+- [CortexLab Library](https://github.com/siddhant-rajhans/cortexlab)
+- [CortexLab on HuggingFace](https://huggingface.co/SID2000/cortexlab)
 
-- 3D Brain Viewer with rotatable fsaverage mesh and activation overlays
-- Brain Alignment Benchmark (RSA, CKA, Procrustes + statistical testing)
-- Cognitive Load Scorer (timeline, radar, comparison mode)
-- Temporal Dynamics (peak latency, lag correlation, sustained/transient)
-- ROI Connectivity (partial correlation, clustering, network graph)
+## License
 
-Runs on biologically realistic synthetic data. No GPU required.
+CC BY-NC 4.0

app.py

@@ -1,115 +1,165 @@
-"""CortexLab Dashboard - Home Page with Data Management."""
+"""CortexLab Dashboard - Futuristic Landing Page."""
 
 import streamlit as st
 import numpy as np
 
-from session import init_session, data_summary_widget, show_analysis_log, upload_npy_widget
+from theme import inject_theme, hero_header, glow_card, section_header, feature_card
+from session import init_session, show_analysis_log
 from utils import make_roi_indices
+from brain_mesh import load_fsaverage_mesh, generate_sample_activations, render_interactive_3d
 
-st.set_page_config(page_title="CortexLab Dashboard", page_icon="🧠", layout="wide", initial_sidebar_state="expanded")
+st.set_page_config(page_title="CortexLab", page_icon="🧠", layout="wide", initial_sidebar_state="collapsed")
 init_session()
-
-st.title("CortexLab Dashboard")
-st.markdown("**Research-grade analysis toolkit for multimodal fMRI brain encoding**")
-
-# --- Data Source ---
-st.divider()
-st.subheader("Data Configuration")
-
-col_src, col_params = st.columns([1, 2])
-
-with col_src:
-    source = st.radio("Data source", ["Synthetic (realistic)", "Upload your data"], index=0)
-    st.session_state["data_source"] = "synthetic" if "Synthetic" in source else "uploaded"
-
-with col_params:
-    if st.session_state["data_source"] == "synthetic":
-        c1, c2, c3, c4 = st.columns(4)
-        st.session_state["stimulus_type"] = c1.selectbox("Stimulus type", ["visual", "auditory", "language", "multimodal"])
-        st.session_state["n_timepoints"] = c2.slider("Duration (TRs)", 30, 200, 80)
-        st.session_state["tr_seconds"] = c3.slider("TR (seconds)", 0.5, 2.0, 1.0, 0.1)
-        st.session_state["seed"] = c4.number_input("Seed", value=42, min_value=0)
-
-        # Generate on config change
-        roi_indices, n_vertices = make_roi_indices()
-        st.session_state["roi_indices"] = roi_indices
-        st.session_state["n_vertices"] = n_vertices
-
-        from synthetic import generate_realistic_predictions
-        predictions = generate_realistic_predictions(
-            st.session_state["n_timepoints"], roi_indices,
-            st.session_state["stimulus_type"], st.session_state["tr_seconds"],
-            seed=st.session_state["seed"],
-        )
-        st.session_state["brain_predictions"] = predictions
-    else:
-        uploaded = upload_npy_widget("Upload brain predictions (.npy, shape: timepoints x vertices)", "upload_predictions")
-        if uploaded is not None:
-            st.session_state["brain_predictions"] = uploaded
-            roi_indices, _ = make_roi_indices()
-            st.session_state["roi_indices"] = roi_indices
-
-# --- Data Summary ---
-roi_indices = st.session_state.get("roi_indices")
-predictions = st.session_state.get("brain_predictions")
-if predictions is not None and roi_indices is not None:
-    data_summary_widget(predictions, roi_indices)
-
-    # Show HRF-convolved signal preview
-    with st.expander("Data Preview", expanded=False):
-        import plotly.graph_objects as go
-        from utils import ROI_GROUPS
-
-        fig = go.Figure()
-        t = np.arange(predictions.shape[0]) * st.session_state.get("tr_seconds", 1.0)
-        colors = {"Visual": "#00D2FF", "Auditory": "#FF6B6B", "Language": "#A29BFE", "Executive": "#FFEAA7"}
-        for group, rois in ROI_GROUPS.items():
-            vals = []
-            for roi in rois:
-                if roi in roi_indices:
-                    verts = roi_indices[roi]
-                    valid = verts[verts < predictions.shape[1]]
-                    if len(valid) > 0:
-                        vals.append(np.abs(predictions[:, valid]).mean(axis=1))
-            if vals:
-                mean_tc = np.mean(vals, axis=0)
-                fig.add_trace(go.Scatter(x=t, y=mean_tc, name=group, line=dict(color=colors.get(group, "#888"), width=2)))
-
+inject_theme()
+
+# --- Hero ---
+hero_header(
+    "CortexLab",
+    "Enhanced multimodal fMRI brain encoding toolkit built on Meta's TRIBE v2",
+)
+
+# --- 3D Brain Hero ---
+st.markdown("<div style='height: 0.5rem'></div>", unsafe_allow_html=True)
+
+with st.spinner("Rendering brain..."):
+    coords, faces = load_fsaverage_mesh("left", "fsaverage5")
+    n_verts = coords.shape[0]
+    roi_indices, _ = make_roi_indices()
+    mesh_roi = {name: np.clip((idx * n_verts // 580).astype(int), 0, n_verts - 1) for name, idx in roi_indices.items()}
+    activations = generate_sample_activations(n_verts, mesh_roi, "multimodal", seed=42)
+
+    fig = render_interactive_3d(
+        coords, faces, activations, cmap="Inferno", vmin=0, vmax=0.8,
+        bg_color="#050510", initial_view="Lateral Left",
+        roi_indices=mesh_roi, show_labels=False,
+    )
+    if fig is not None:
         fig.update_layout(
-            xaxis_title="Time (seconds)", yaxis_title="Mean |activation|",
-            height=300, template="plotly_dark",
-            legend=dict(orientation="h", yanchor="bottom", y=1.02),
+            height=500,
+            margin=dict(l=0, r=0, t=0, b=0),
         )
         st.plotly_chart(fig, use_container_width=True)
-        st.caption("Mean absolute activation per functional group. Note the hemodynamic response shape and modality-specific activation patterns.")
 
-# --- Navigation ---
-st.divider()
-col1, col2 = st.columns(2)
+# --- Stats Bar ---
+st.markdown("<div style='height: 0.5rem'></div>", unsafe_allow_html=True)
+c1, c2, c3, c4, c5 = st.columns(5)
+with c1: glow_card("Tests", "89", "All passing", "#10B981")
+with c2: glow_card("Analysis Modules", "10", "Brain encoding", "#7C3AED")
+with c3: glow_card("ROIs", "29", "HCP MMP1.0", "#3B82F6")
+with c4: glow_card("Contributors", "4", "Open source", "#EC4899")
+with c5: glow_card("License", "CC BY-NC", "Non-commercial", "#F59E0B")
 
-with col1:
-    st.subheader("Analysis Tools")
-    st.page_link("pages/1_Brain_Alignment.py", label="Brain Alignment Benchmark", icon="🎯")
-    st.caption("RSA, CKA, Procrustes with permutation tests, bootstrap CIs, FDR correction, noise ceiling, and RDM visualization")
+# --- Feature Grid ---
+st.markdown("<div style='height: 1.5rem'></div>", unsafe_allow_html=True)
+section_header("Analysis Tools", "Everything you need for computational neuroscience research")
 
-    st.page_link("pages/2_Cognitive_Load.py", label="Cognitive Load Scorer", icon="📊")
-    st.caption("Timeline with confidence bands, dimension correlation, per-ROI breakdown, comparison mode")
+col1, col2, col3 = st.columns(3)
+with col1:
+    st.markdown(feature_card(
+        "🎯", "Brain Alignment Benchmark",
+        "Score any AI model against brain responses. RSA, CKA, Procrustes with permutation tests, bootstrap CIs, and FDR correction.",
+        "#7C3AED"
+    ), unsafe_allow_html=True)
+    st.page_link("pages/1_Brain_Alignment.py", label="Open Brain Alignment")
 
 with col2:
-    st.subheader("Advanced Analysis")
-    st.page_link("pages/3_Temporal_Dynamics.py", label="Temporal Dynamics", icon="⏱️")
-    st.caption("Raw timecourses, peak latency hierarchy, optimal lag analysis, cross-ROI lag matrix")
-
-    st.page_link("pages/4_Connectivity.py", label="ROI Connectivity", icon="🔗")
-    st.caption("Partial correlation, modularity, betweenness centrality, dendrogram, network graph")
-
-st.divider()
-st.subheader("3D Visualization")
-st.page_link("pages/5_Brain_Viewer.py", label="Interactive 3D Brain Viewer", icon="🧠")
-st.caption("Rotatable brain surface with activation overlays, publication-quality multi-view panels, ROI highlighting, and modality-specific patterns")
-
-# --- Analysis Log ---
+    st.markdown(feature_card(
+        "📊", "Cognitive Load Scorer",
+        "Predict cognitive demand across visual, auditory, language, and executive dimensions with confidence bands.",
+        "#3B82F6"
+    ), unsafe_allow_html=True)
+    st.page_link("pages/2_Cognitive_Load.py", label="Open Cognitive Load")
+
+with col3:
+    st.markdown(feature_card(
+        "⏱️", "Temporal Dynamics",
+        "Peak response latency, lag correlations, sustained vs transient decomposition, cross-ROI lag matrix.",
+        "#06B6D4"
+    ), unsafe_allow_html=True)
+    st.page_link("pages/3_Temporal_Dynamics.py", label="Open Temporal Dynamics")
+
+col4, col5, col6 = st.columns(3)
+with col4:
+    st.markdown(feature_card(
+        "🔗", "ROI Connectivity",
+        "Functional connectivity, partial correlation, network clustering, modularity, degree and betweenness centrality.",
+        "#10B981"
+    ), unsafe_allow_html=True)
+    st.page_link("pages/4_Connectivity.py", label="Open Connectivity")
+
+with col5:
+    st.markdown(feature_card(
+        "🧠", "3D Brain Viewer",
+        "Interactive rotatable brain surface with activation overlays, publication-quality multi-view panels, ROI highlighting.",
+        "#EC4899"
+    ), unsafe_allow_html=True)
+    st.page_link("pages/5_Brain_Viewer.py", label="Open Brain Viewer")
+
+with col6:
+    st.markdown(feature_card(
+        "⚡", "Streaming Inference",
+        "Real-time sliding-window predictions for BCI pipelines. Cross-subject adaptation with minimal calibration data.",
+        "#F59E0B"
+    ), unsafe_allow_html=True)
+    st.markdown(f"""
+    <a href="https://github.com/siddhant-rajhans/cortexlab" target="_blank" style="
+        display: inline-block; padding: 0.4rem 1rem;
+        color: #F59E0B; font-size: 0.85rem;
+        text-decoration: none;
+    ">View on GitHub &rarr;</a>
+    """, unsafe_allow_html=True)
+
+# --- Data Config (collapsed) ---
+st.markdown("<div style='height: 1rem'></div>", unsafe_allow_html=True)
+with st.expander("Data Configuration", expanded=False):
+    from session import data_summary_widget, upload_npy_widget
+    col_src, col_params = st.columns([1, 2])
+
+    with col_src:
+        source = st.radio("Data source", ["Synthetic (realistic)", "Upload your data"], index=0)
+        st.session_state["data_source"] = "synthetic" if "Synthetic" in source else "uploaded"
+
+    with col_params:
+        if st.session_state["data_source"] == "synthetic":
+            c1, c2, c3, c4 = st.columns(4)
+            st.session_state["stimulus_type"] = c1.selectbox("Stimulus", ["visual", "auditory", "language", "multimodal"])
+            st.session_state["n_timepoints"] = c2.slider("TRs", 30, 200, 80)
+            st.session_state["tr_seconds"] = c3.slider("TR (s)", 0.5, 2.0, 1.0, 0.1)
+            st.session_state["seed"] = c4.number_input("Seed", value=42, min_value=0)
+
+            roi_indices_full, n_vertices = make_roi_indices()
+            st.session_state["roi_indices"] = roi_indices_full
+            st.session_state["n_vertices"] = n_vertices
+
+            from synthetic import generate_realistic_predictions
+            predictions = generate_realistic_predictions(
+                st.session_state["n_timepoints"], roi_indices_full,
+                st.session_state["stimulus_type"], st.session_state["tr_seconds"],
+                seed=st.session_state["seed"],
+            )
+            st.session_state["brain_predictions"] = predictions
+        else:
+            uploaded = upload_npy_widget("Upload predictions (.npy)", "upload_home")
+            if uploaded is not None:
+                st.session_state["brain_predictions"] = uploaded
+                roi_indices_full, _ = make_roi_indices()
+                st.session_state["roi_indices"] = roi_indices_full
+
+    preds = st.session_state.get("brain_predictions")
+    roi_idx = st.session_state.get("roi_indices")
+    if preds is not None and roi_idx is not None:
+        data_summary_widget(preds, roi_idx)
+
+# --- Footer ---
 show_analysis_log()
-
-st.divider()
-st.caption("[GitHub](https://github.com/siddhant-rajhans/cortexlab) | [HuggingFace](https://huggingface.co/SID2000/cortexlab) | [Dashboard Repo](https://github.com/siddhant-rajhans/cortexlab-dashboard)")
+st.markdown("""
+<div style="text-align: center; padding: 2rem 0 1rem 0; color: #475569; font-size: 0.75rem;">
+    Built on <a href="https://github.com/facebookresearch/tribev2" style="color: #7C3AED; text-decoration: none;">Meta's TRIBE v2</a>
+    &nbsp;&bull;&nbsp;
+    <a href="https://github.com/siddhant-rajhans/cortexlab" style="color: #3B82F6; text-decoration: none;">GitHub</a>
+    &nbsp;&bull;&nbsp;
+    <a href="https://huggingface.co/SID2000/cortexlab" style="color: #06B6D4; text-decoration: none;">HuggingFace</a>
+    &nbsp;&bull;&nbsp;
+    CC BY-NC 4.0
+</div>
+""", unsafe_allow_html=True)

assets/theme.css

@@ -0,0 +1,299 @@
+/* CortexLab Futuristic Theme - Glassmorphism + Neon */
+
+/* === GLOBAL === */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+:root {
+    --bg-primary: #050510;
+    --bg-secondary: rgba(15, 15, 35, 0.7);
+    --bg-glass: rgba(20, 20, 50, 0.4);
+    --border-glass: rgba(100, 100, 255, 0.15);
+    --accent-purple: #7C3AED;
+    --accent-blue: #3B82F6;
+    --accent-cyan: #06B6D4;
+    --accent-pink: #EC4899;
+    --accent-green: #10B981;
+    --text-primary: #F1F5F9;
+    --text-secondary: #94A3B8;
+    --glow-purple: 0 0 20px rgba(124, 58, 237, 0.3);
+    --glow-blue: 0 0 20px rgba(59, 130, 246, 0.3);
+    --glow-cyan: 0 0 15px rgba(6, 182, 212, 0.2);
+}
+
+/* === HIDE STREAMLIT BRANDING === */
+#MainMenu, footer, header {
+    visibility: hidden;
+}
+
+div[data-testid="stToolbar"] {
+    display: none;
+}
+
+div[data-testid="stDecoration"] {
+    display: none;
+}
+
+/* === BASE === */
+.stApp {
+    background: var(--bg-primary);
+    background-image:
+        radial-gradient(ellipse at 20% 50%, rgba(124, 58, 237, 0.08) 0%, transparent 50%),
+        radial-gradient(ellipse at 80% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
+        radial-gradient(ellipse at 50% 80%, rgba(6, 182, 212, 0.04) 0%, transparent 50%);
+    color: var(--text-primary);
+    font-family: 'Inter', sans-serif;
+}
+
+/* === SIDEBAR === */
+section[data-testid="stSidebar"] {
+    background: linear-gradient(180deg, rgba(10, 10, 30, 0.95) 0%, rgba(5, 5, 20, 0.98) 100%);
+    border-right: 1px solid var(--border-glass);
+}
+
+section[data-testid="stSidebar"] .stMarkdown h1,
+section[data-testid="stSidebar"] .stMarkdown h2,
+section[data-testid="stSidebar"] .stMarkdown h3 {
+    color: var(--accent-cyan);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+}
+
+/* === GLASSMORPHISM CONTAINERS === */
+div[data-testid="stVerticalBlock"] > div[data-testid="stVerticalBlockBorderWrapper"] {
+    background: var(--bg-glass);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid var(--border-glass);
+    border-radius: 16px;
+    padding: 1.5rem;
+    box-shadow: var(--glow-purple);
+}
+
+/* Expanders */
+div[data-testid="stExpander"] {
+    background: var(--bg-glass);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--border-glass);
+    border-radius: 12px;
+}
+
+div[data-testid="stExpander"] summary {
+    color: var(--text-primary);
+    font-weight: 500;
+}
+
+/* === METRICS === */
+div[data-testid="stMetric"] {
+    background: var(--bg-glass);
+    backdrop-filter: blur(10px);
+    border: 1px solid var(--border-glass);
+    border-radius: 12px;
+    padding: 1rem 1.2rem;
+    box-shadow: var(--glow-blue);
+    transition: all 0.3s ease;
+}
+
+div[data-testid="stMetric"]:hover {
+    border-color: var(--accent-cyan);
+    box-shadow: var(--glow-cyan), 0 4px 20px rgba(6, 182, 212, 0.1);
+    transform: translateY(-2px);
+}
+
+div[data-testid="stMetric"] label {
+    color: var(--text-secondary);
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+}
+
+div[data-testid="stMetric"] div[data-testid="stMetricValue"] {
+    color: var(--accent-cyan);
+    font-weight: 700;
+    font-size: 1.8rem;
+}
+
+div[data-testid="stMetric"] div[data-testid="stMetricDelta"] {
+    color: var(--accent-green);
+}
+
+/* === HEADINGS === */
+.stMarkdown h1 {
+    background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-weight: 700;
+    font-size: 2.5rem;
+    letter-spacing: -0.03em;
+}
+
+.stMarkdown h2 {
+    color: var(--text-primary);
+    font-weight: 600;
+    font-size: 1.4rem;
+    letter-spacing: -0.02em;
+    border-bottom: 1px solid var(--border-glass);
+    padding-bottom: 0.5rem;
+}
+
+.stMarkdown h3 {
+    color: var(--accent-blue);
+    font-weight: 600;
+}
+
+/* === BUTTONS === */
+.stButton > button {
+    background: linear-gradient(135deg, var(--accent-purple), var(--accent-blue));
+    color: white;
+    border: none;
+    border-radius: 10px;
+    padding: 0.6rem 1.5rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
+}
+
+.stButton > button:hover {
+    box-shadow: 0 6px 25px rgba(124, 58, 237, 0.5);
+    transform: translateY(-2px);
+}
+
+/* === PAGE LINKS === */
+a[data-testid="stPageLink-NavLink"] {
+    background: var(--bg-glass);
+    backdrop-filter: blur(8px);
+    border: 1px solid var(--border-glass);
+    border-radius: 12px;
+    padding: 0.8rem 1rem;
+    transition: all 0.3s ease;
+}
+
+a[data-testid="stPageLink-NavLink"]:hover {
+    border-color: var(--accent-purple);
+    box-shadow: var(--glow-purple);
+    transform: translateX(4px);
+}
+
+/* === DATAFRAMES === */
+div[data-testid="stDataFrame"] {
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid var(--border-glass);
+}
+
+div[data-testid="stDataFrame"] table {
+    background: var(--bg-secondary);
+}
+
+/* === SELECT / INPUT === */
+div[data-testid="stSelectbox"],
+div[data-testid="stMultiSelect"],
+div[data-testid="stNumberInput"],
+div[data-testid="stSlider"] {
+    color: var(--text-primary);
+}
+
+div[data-baseweb="select"] {
+    background: var(--bg-glass);
+    border-color: var(--border-glass);
+    border-radius: 8px;
+}
+
+/* === DIVIDER === */
+hr {
+    border-color: var(--border-glass);
+    opacity: 0.5;
+}
+
+/* === TABS === */
+div[data-baseweb="tab-list"] {
+    gap: 0.5rem;
+}
+
+button[data-baseweb="tab"] {
+    background: var(--bg-glass);
+    border: 1px solid var(--border-glass);
+    border-radius: 8px;
+    color: var(--text-secondary);
+    transition: all 0.3s ease;
+}
+
+button[data-baseweb="tab"]:hover,
+button[data-baseweb="tab"][aria-selected="true"] {
+    background: rgba(124, 58, 237, 0.2);
+    border-color: var(--accent-purple);
+    color: var(--text-primary);
+}
+
+/* === CAPTIONS === */
+.stCaption, .stMarkdown small, figcaption {
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+}
+
+/* === PLOTLY CHARTS === */
+div[data-testid="stPlotlyChart"] {
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid var(--border-glass);
+    box-shadow: var(--glow-blue);
+}
+
+/* === SCROLLBAR === */
+::-webkit-scrollbar {
+    width: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-primary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--accent-purple);
+    border-radius: 3px;
+}
+
+/* === ANIMATED GLOW BORDER FOR MAIN CONTENT === */
+@keyframes borderGlow {
+    0%, 100% { border-color: rgba(124, 58, 237, 0.2); }
+    50% { border-color: rgba(6, 182, 212, 0.3); }
+}
+
+div[data-testid="stVerticalBlock"] > div:first-child {
+    animation: borderGlow 4s ease infinite;
+}
+
+/* === WARNING/INFO/SUCCESS === */
+div[data-testid="stAlert"] {
+    background: var(--bg-glass);
+    backdrop-filter: blur(8px);
+    border-radius: 10px;
+}
+
+/* === SPINNER === */
+div[data-testid="stSpinner"] {
+    color: var(--accent-cyan);
+}
+
+/* === DOWNLOAD BUTTON === */
+.stDownloadButton > button {
+    background: transparent;
+    border: 1px solid var(--accent-cyan);
+    color: var(--accent-cyan);
+    border-radius: 8px;
+}
+
+.stDownloadButton > button:hover {
+    background: rgba(6, 182, 212, 0.1);
+    box-shadow: var(--glow-cyan);
+}
+
+/* === CODE BLOCKS === */
+code {
+    font-family: 'JetBrains Mono', monospace;
+    background: rgba(30, 30, 60, 0.6);
+    border: 1px solid var(--border-glass);
+    border-radius: 4px;
+    color: var(--accent-cyan);
+}

pages/1_Brain_Alignment.py

@@ -7,6 +7,7 @@ import plotly.graph_objects as go
 import plotly.express as px
 
 from session import init_session, log_analysis, carry_rois, download_csv_button, show_analysis_log
+from theme import inject_theme, section_header
 from utils import (
     ALIGNMENT_METHODS, ROI_GROUPS, make_roi_indices,
     permutation_test, bootstrap_ci, fdr_correction, noise_ceiling,
@@ -16,6 +17,7 @@ from synthetic import generate_realistic_predictions, generate_correlated_featur
 
 st.set_page_config(page_title="Brain Alignment", page_icon="🎯", layout="wide")
 init_session()
+inject_theme()
 show_analysis_log()
 
 st.title("🎯 Brain Alignment Benchmark")

pages/2_Cognitive_Load.py

@@ -7,11 +7,13 @@ import plotly.graph_objects as go
 import plotly.express as px
 
 from session import init_session, log_analysis, download_csv_button, show_analysis_log
+from theme import inject_theme, section_header
 from utils import make_roi_indices, score_cognitive_load, COGNITIVE_DIMENSIONS, ROI_GROUPS
 from synthetic import generate_realistic_predictions
 
 st.set_page_config(page_title="Cognitive Load", page_icon="📊", layout="wide")
 init_session()
+inject_theme()
 show_analysis_log()
 
 st.title("📊 Cognitive Load Scorer")

pages/3_Temporal_Dynamics.py

@@ -7,11 +7,13 @@ import plotly.graph_objects as go
 from plotly.subplots import make_subplots
 
 from session import init_session, log_analysis, get_carried_rois, download_csv_button, show_analysis_log
+from theme import inject_theme, section_header
 from utils import make_roi_indices, peak_latency, temporal_correlation, decompose_response, ROI_GROUPS, ALL_ROIS
 from synthetic import generate_realistic_predictions, generate_correlated_features
 
 st.set_page_config(page_title="Temporal Dynamics", page_icon="⏱️", layout="wide")
 init_session()
+inject_theme()
 show_analysis_log()
 
 st.title("⏱️ Temporal Dynamics")

pages/4_Connectivity.py

@@ -7,6 +7,7 @@ import plotly.graph_objects as go
 import plotly.express as px
 
 from session import init_session, log_analysis, get_carried_rois, download_csv_button, show_analysis_log
+from theme import inject_theme, section_header
 from utils import (
     make_roi_indices, compute_connectivity, cluster_rois, graph_metrics,
     partial_correlation, betweenness_centrality, modularity_score,
@@ -16,6 +17,7 @@ from synthetic import generate_realistic_predictions
 
 st.set_page_config(page_title="ROI Connectivity", page_icon="🔗", layout="wide")
 init_session()
+inject_theme()
 show_analysis_log()
 
 st.title("🔗 ROI Connectivity Analysis")

pages/5_Brain_Viewer.py

@@ -5,6 +5,7 @@ import numpy as np
 import plotly.graph_objects as go
 
 from session import init_session, show_analysis_log, upload_npy_widget
+from theme import inject_theme, section_header
 from brain_mesh import (
     load_fsaverage_mesh,
     load_sulcal_map,
@@ -21,6 +22,7 @@ from utils import ROI_GROUPS, make_roi_indices
 
 st.set_page_config(page_title="3D Brain Viewer", page_icon="🧠", layout="wide")
 init_session()
+inject_theme()
 show_analysis_log()
 
 st.title("🧠 Interactive 3D Brain Viewer")

requirements.txt

@@ -7,3 +7,5 @@ networkx>=3.2
 matplotlib>=3.8
 seaborn>=0.13
 nilearn>=0.11.0
+pyvista>=0.47.0
+stpyvista>=0.2.1

theme.py

@@ -0,0 +1,131 @@
+"""Futuristic theme injection for Streamlit."""
+
+import streamlit as st
+from pathlib import Path
+
+
+def inject_theme():
+    """Inject custom CSS and hide default Streamlit chrome."""
+    css_path = Path(__file__).parent / "assets" / "theme.css"
+    if css_path.exists():
+        css = css_path.read_text()
+    else:
+        css = ""
+
+    st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
+
+
+def hero_header(title, subtitle="", github_url="https://github.com/siddhant-rajhans/cortexlab"):
+    """Render a futuristic hero header with gradient title."""
+    st.markdown(f"""
+    <div style="text-align: center; padding: 1.5rem 0 0.5rem 0;">
+        <h1 style="
+            font-size: 3rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, #7C3AED 0%, #3B82F6 40%, #06B6D4 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 0.3rem;
+            letter-spacing: -0.04em;
+        ">{title}</h1>
+        <p style="color: #94A3B8; font-size: 1.1rem; margin-bottom: 0.8rem;">{subtitle}</p>
+        <div style="display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;">
+            <a href="{github_url}" target="_blank" style="
+                display: inline-flex; align-items: center; gap: 0.4rem;
+                padding: 0.5rem 1.2rem;
+                background: rgba(124, 58, 237, 0.15);
+                border: 1px solid rgba(124, 58, 237, 0.3);
+                border-radius: 8px;
+                color: #C4B5FD;
+                text-decoration: none;
+                font-size: 0.85rem;
+                font-weight: 500;
+                transition: all 0.3s ease;
+            ">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+                GitHub
+            </a>
+            <a href="https://huggingface.co/SID2000/cortexlab" target="_blank" style="
+                display: inline-flex; align-items: center; gap: 0.4rem;
+                padding: 0.5rem 1.2rem;
+                background: rgba(59, 130, 246, 0.15);
+                border: 1px solid rgba(59, 130, 246, 0.3);
+                border-radius: 8px;
+                color: #93C5FD;
+                text-decoration: none;
+                font-size: 0.85rem;
+                font-weight: 500;
+            ">HuggingFace</a>
+            <a href="https://huggingface.co/spaces/SID2000/cortexlab-dashboard" target="_blank" style="
+                display: inline-flex; align-items: center; gap: 0.4rem;
+                padding: 0.5rem 1.2rem;
+                background: rgba(6, 182, 212, 0.15);
+                border: 1px solid rgba(6, 182, 212, 0.3);
+                border-radius: 8px;
+                color: #67E8F9;
+                text-decoration: none;
+                font-size: 0.85rem;
+                font-weight: 500;
+            ">Live Demo</a>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+
+
+def glow_card(title, value, subtitle="", color="#06B6D4"):
+    """Render a glowing metric card."""
+    st.markdown(f"""
+    <div style="
+        background: rgba(15, 15, 40, 0.5);
+        backdrop-filter: blur(10px);
+        border: 1px solid {color}33;
+        border-radius: 14px;
+        padding: 1.2rem;
+        text-align: center;
+        box-shadow: 0 0 20px {color}15;
+        transition: all 0.3s ease;
+    ">
+        <div style="color: #94A3B8; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.3rem;">{title}</div>
+        <div style="color: {color}; font-size: 2rem; font-weight: 700; letter-spacing: -0.02em;">{value}</div>
+        <div style="color: #64748B; font-size: 0.75rem; margin-top: 0.2rem;">{subtitle}</div>
+    </div>
+    """, unsafe_allow_html=True)
+
+
+def section_header(title, description=""):
+    """Render a styled section header with optional description."""
+    st.markdown(f"""
+    <div style="margin: 1.5rem 0 0.8rem 0;">
+        <h2 style="
+            color: #F1F5F9;
+            font-size: 1.3rem;
+            font-weight: 600;
+            letter-spacing: -0.02em;
+            margin-bottom: 0.3rem;
+            padding-bottom: 0.4rem;
+            border-bottom: 1px solid rgba(100, 100, 255, 0.15);
+        ">{title}</h2>
+        {"<p style='color: #94A3B8; font-size: 0.85rem; margin-top: 0;'>" + description + "</p>" if description else ""}
+    </div>
+    """, unsafe_allow_html=True)
+
+
+def feature_card(icon, title, description, color="#7C3AED"):
+    """Render a feature card for the home page."""
+    return f"""
+    <div style="
+        background: rgba(15, 15, 40, 0.4);
+        backdrop-filter: blur(8px);
+        border: 1px solid {color}25;
+        border-radius: 14px;
+        padding: 1.3rem;
+        height: 100%;
+        transition: all 0.3s ease;
+        cursor: pointer;
+    ">
+        <div style="font-size: 1.5rem; margin-bottom: 0.5rem;">{icon}</div>
+        <div style="color: {color}; font-size: 1rem; font-weight: 600; margin-bottom: 0.4rem;">{title}</div>
+        <div style="color: #94A3B8; font-size: 0.8rem; line-height: 1.5;">{description}</div>
+    </div>
+    """