"""TRIBE v2 demo-styled UI components. Mirrors the visual structure of `aidemos.atmeta.com/tribev2`: * A branded top header with the project name on the left, parent attribution centered, and navigation links on the right. * A two-column hero with the architecture explanation (numbered steps + flow diagram) on the left and the interactive demo (3D brain + controls + tabs + video) on the right. * Segmented toggle controls (True / Compare / Predicted, etc.) styled as pill groups. * Tab strip with thin underline indicator. All components are pure HTML+CSS injected via ``st.markdown``; no third-party Streamlit components needed. The CSS classes are prefixed ``tr-`` so they don't collide with the existing theme. """ from __future__ import annotations import streamlit as st def _consume_theme_query_param() -> None: """Apply ``?theme=black|white`` from the URL, then strip it. The HTML toggle renders an anchor with ``href=?theme=``; clicking it triggers a navigation that Streamlit converts into a rerun with ``st.query_params["theme"]`` set. We honor it here and clear the param so the URL stays clean for sharing. """ from theme import get_theme_mode, set_theme_mode # local: avoid cycle qp = st.query_params requested = qp.get("theme") if requested in ("black", "white") and requested != get_theme_mode(): set_theme_mode(requested) try: del qp["theme"] except KeyError: pass st.rerun() def top_header( title: str = "CortexLab", subtitle: str = "AI research toolkit", parent: str = "Stevens · Meta TRIBE v2", links: list[tuple[str, str]] | None = None, theme_toggle: bool = True, ) -> None: """Render the TRIBE-style top header bar. Layout: title block on the far left, parent attribution centered, a sliding sun/moon toggle and a row of text links on the far right. The toggle is rendered as an inline anchor with a CSS-only sliding pill; clicking it navigates to ``?theme=``, which Streamlit serves as a rerun. :func:`_consume_theme_query_param` (called at the top of the script) then applies the new mode and strips the query param. """ from theme import get_theme_mode # local: keep theme import deferred if theme_toggle: _consume_theme_query_param() if links is None: links = [ ("Code", "https://github.com/siddhant-rajhans/cortexlab"), ("Demo", "https://huggingface.co/spaces/SID2000/cortexlab-dashboard"), ("Paper", "https://github.com/siddhant-rajhans/cortexlab"), ("Hub", "https://huggingface.co/SID2000/cortexlab"), ] link_html = " ".join( f'{label} ↗' for label, href in links ) toggle_html = "" if theme_toggle: cur_mode = get_theme_mode() next_mode = "white" if cur_mode == "black" else "black" is_on = cur_mode == "white" sun = ( '' ) moon = ( '' ) toggle_html = ( f'' f'' f' {moon}' f' {sun}' f' ' f'' '' ) st.markdown( f"""

{title}

{subtitle}

{parent}

{toggle_html}{link_html}

""", unsafe_allow_html=True, ) def architecture_steps( title: str = "CortexLab: a multimodal encoding pipeline", intro: str = "CortexLab predicts brain activity through a three-stage pipeline:", steps: list[tuple[str, str]] | None = None, ) -> None: """Numbered architecture description card. ``steps`` is a list of (heading, body_html) tuples. The body may include inline markup (e.g. underlined modality names). """ if steps is None: steps = [ ( "Multimodal feature extraction", "Pretrained CLIP, V-JEPA 2, and CLIP-text encoders extract vision, motion, " "and language embeddings from short video clips and machine-generated captions.", ), ( "Voxelwise ridge encoding", "A fused Triton kernel solves 327,684 independent voxelwise ridge regressions in seconds, " "mapping each modality's features to per-voxel BOLD responses on the fsaverage cortical surface.", ), ( "Causal modality lesion", "Each modality is ablated at test time and per-voxel ΔR² is permutation-tested across " "1,000 shuffles, BH-FDR corrected, and rendered onto the inflated cortex.", ), ] items_html = "".join( f"""

{i}

{title_}

{body}

""" for i, (title_, body) in enumerate(steps, start=1) ) st.markdown( f"""

{title}

{intro}

{items_html}

""", unsafe_allow_html=True, ) def pipeline_diagram() -> None: """Flow diagram: stimulus rows → per-modality encoders → fusion → brain. Mirrors TRIBE's "Video → V-JEPA2", "Audio → wav2vec 2.0", "Text → Llama 3.2" diagram visually but with our model lineup. """ st.markdown( """

▶ Video frame

→

CLIP ViT-L/14

▤ Motion

→

V-JEPA 2

T Caption

→

CLIP text

→

⚙

Voxelwise
ridge

→

𓆑

Subject
block

""", unsafe_allow_html=True, ) def segmented( label: str, options: list[str], *, default_index: int = 0, key: str | None = None, ) -> str: """Pill-style segmented control. Returns the selected value. Built on top of ``st.radio`` with custom CSS that hides the radio dots and styles each option as a pill. The active option gets a subtle background and white text; inactive options stay muted. """ return st.radio( label, options, index=default_index, horizontal=True, key=key, label_visibility="collapsed", ) def demo_card_open(title: str = "Live encoder · sample stimulus") -> None: """Open the rounded card that wraps the demo column. Pair with :func:`demo_card_close`.""" st.markdown( f"""

{title} Low High

Activity

""", unsafe_allow_html=True, ) def demo_card_close() -> None: st.markdown("

", unsafe_allow_html=True) def tr_footer( title: str = "CortexLab", tagline: str = "Multimodal fMRI brain encoding · open source", ) -> None: """Render a polished four-column footer. Mirrors Meta-style research-page footers: a brand block on the left, three columns of grouped links, and a thin bottom rule with legal / build credits. All color-mode aware via the theme variables. """ columns = [ ( "Product", [ ("Live demo", "https://huggingface.co/spaces/SID2000/cortexlab-dashboard"), ("Toolkit", "https://github.com/siddhant-rajhans/cortexlab"), ("Dashboard", "https://github.com/siddhant-rajhans/cortexlab-dashboard"), ("Releases", "https://github.com/siddhant-rajhans/cortexlab/releases"), ], ), ( "Research", [ ("Paper", "https://github.com/siddhant-rajhans/cortexlab"), ("BOLD Moments", "https://www.nature.com/articles/s41467-024-50310-3"), ("HCP-MMP 1.0", "https://www.nature.com/articles/nature18933"), ("CLIP", "https://arxiv.org/abs/2103.00020"), ], ), ( "Resources", [ ("HuggingFace", "https://huggingface.co/SID2000/cortexlab"), ("API docs", "https://github.com/siddhant-rajhans/cortexlab#readme"), ("Changelog", "https://github.com/siddhant-rajhans/cortexlab/commits/master"), ("Issues", "https://github.com/siddhant-rajhans/cortexlab/issues"), ], ), ] cols_html = "" for label, links in columns: items = "".join( f'

{name}

' for name, href in links ) cols_html += f"""

{label}

{items}

""" st.markdown( f"""

{title}

{tagline}

Built on Meta's TRIBE v2

{cols_html}

""", unsafe_allow_html=True, ) __all__ = [ "top_header", "architecture_steps", "pipeline_diagram", "segmented", "demo_card_open", "demo_card_close", "tr_footer", ]