| from dash import html, dcc | |
| import dash_mantine_components as dmc | |
| from dash_iconify import DashIconify | |
| from config import BUTTON_STYLE, DARK_BACKGROUND, PRIMARY_COLOR | |
| def build_header(last_updated: str) -> html.Div: | |
| """Top header with live badge and partner logos.""" | |
| return html.Div( | |
| [ | |
| html.Div( | |
| [ | |
| html.Span( | |
| [ | |
| html.Span(className="live-dot"), | |
| html.Span("LIVE", className="live-label"), | |
| ], | |
| className="live-row", | |
| ), | |
| html.Span( | |
| f"Last updated: {last_updated}", className="last-updated" | |
| ), | |
| ], | |
| className="header-status-row", | |
| ), | |
| html.Div( | |
| [ | |
| html.A( | |
| children=[ | |
| html.Img( | |
| src="assets/images/dpi.svg", | |
| className="header-logo-img", | |
| ), | |
| "Data Provenance Initiative", | |
| ], | |
| href="https://www.dataprovenance.org/", | |
| target="_blank", | |
| className="no-bg-link header-link", | |
| ), | |
| html.A( | |
| children=[ | |
| html.Img( | |
| src="assets/images/hf.svg", | |
| className="header-logo-img", | |
| ), | |
| html.Span("Hugging Face", className="hf-brand-text"), | |
| ], | |
| href="https://huggingface.co/", | |
| target="_blank", | |
| className="no-bg-link header-link", | |
| ), | |
| html.A( | |
| children=[html.Span("Read the paper", className="paper-text")], | |
| href="https://arxiv.org/abs/2512.03073", | |
| target="_blank", | |
| className="no-bg-link header-link paper-link", | |
| ), | |
| ], | |
| className="header-links-row", | |
| ), | |
| ], | |
| style={ | |
| "display": "flex", | |
| "justifyContent": "space-between", | |
| "alignItems": "center", | |
| "padding": "18px 24px", | |
| "gap": "24px", | |
| "backgroundColor": DARK_BACKGROUND, | |
| }, | |
| className="responsive-header", | |
| ) | |
| def build_range_slider(start_ts: int, end_ts: int, value, marks, thumb_children=None): | |
| """Create the range slider used for time deltas.""" | |
| return dmc.RangeSlider( | |
| id="time-slider", | |
| min=start_ts, | |
| max=end_ts, | |
| value=value, | |
| step=24 * 60 * 60, | |
| color=PRIMARY_COLOR, | |
| size="md", | |
| radius="xl", | |
| marks=marks, | |
| style={"width": "95%", "paddingLeft": "60px"}, | |
| label=None, | |
| showLabelOnHover=False, | |
| labelTransitionProps={"transition": "fade", "duration": 150}, | |
| thumbChildren=thumb_children, | |
| ) | |
| def build_single_slider(start_ts: int, end_ts: int, value, marks, thumb_children=None): | |
| """Create the single-value slider used for all-time selection.""" | |
| return dmc.Slider( | |
| id="time-slider-alltime", | |
| min=start_ts, | |
| max=end_ts, | |
| value=value, | |
| step=24 * 60 * 60, | |
| color=PRIMARY_COLOR, | |
| size="md", | |
| radius="xl", | |
| marks=marks, | |
| style={"width": "95%", "paddingLeft": "60px"}, | |
| label=None, | |
| showLabelOnHover=False, | |
| labelTransitionProps={"transition": "fade", "duration": 150}, | |
| thumbChildren=thumb_children, | |
| ) | |
| def build_alert_and_title() -> html.Div: | |
| """Intro alert and title block.""" | |
| return html.Div( | |
| children=[ | |
| dmc.Alert( | |
| icon=DashIconify( | |
| icon="mdi:information-outline", | |
| width=18, | |
| height=18, | |
| style={"color": "#1A5F8D"}, | |
| ), | |
| children=[ | |
| "Note: This dashboard uses ", | |
| html.A( | |
| "public Hugging Face", | |
| href="https://huggingface.co/datasets/hfmlsoc/hub_weekly_snapshots", | |
| target="_blank", | |
| style={ | |
| "color": "#1A5F8D", | |
| "fontWeight": "bold", | |
| "textDecoration": "underline", | |
| }, | |
| ), | |
| " download data. Our paper uses deduplicated usage data, which is available upon request.", | |
| ], | |
| color="blue", | |
| radius="md", | |
| variant="light", | |
| withCloseButton=True, | |
| style={ | |
| "marginTop": "16px", | |
| "marginBottom": "8px", | |
| "fontSize": "15px", | |
| "fontWeight": "500", | |
| "marginLeft": "auto", | |
| "marginRight": "auto", | |
| }, | |
| ), | |
| html.Span( | |
| "The Open Model Leaderboard", | |
| style={ | |
| "fontSize": 40, | |
| "fontWeight": "700", | |
| "textAlign": "center", | |
| "marginTop": "20px", | |
| "marginBottom": "20px", | |
| }, | |
| ), | |
| ], | |
| style={ | |
| "display": "flex", | |
| "flexDirection": "column", | |
| "alignItems": "center", | |
| "justifyContent": "center", | |
| "gap": "12px", | |
| "marginTop": "20px", | |
| "marginBottom": "20px", | |
| }, | |
| className="responsive-title-row", | |
| ) | |
| def build_intro_paragraph() -> html.Div: | |
| """Body intro paragraph under the title.""" | |
| return html.Div( | |
| children=[ | |
| "This leaderboard assesses concentrations of power in the open model ecosystem through ranking user downloads across three groups: countries, developers, and models. Explore how user downloads of models are distributed among these groups and identify key players shaping the open model ecosystem on Hugging Face. This dashboard accompanies the paper titled ", | |
| html.A( | |
| "Economies of Open Intelligence: Tracing Power & Participation in the Model Ecosystem.", | |
| href="https://arxiv.org/abs/2512.03073", | |
| target="_blank", | |
| style={ | |
| "color": PRIMARY_COLOR, | |
| "fontWeight": "700", | |
| "textDecoration": "underline", | |
| }, | |
| ), | |
| ], | |
| style={ | |
| "fontSize": 14, | |
| "marginTop": 18, | |
| "marginBottom": 12, | |
| "marginLeft": 100, | |
| "marginRight": 100, | |
| "textAlign": "center", | |
| }, | |
| className="responsive-intro", | |
| ) | |
| def build_filter_controls(time_slider_component) -> html.Div: | |
| """Filter controls block with segmented controls and sliders.""" | |
| return html.Div( | |
| children=[ | |
| html.Div( | |
| [ | |
| html.Div( | |
| html.Span( | |
| [ | |
| "Download View", | |
| dmc.HoverCard( | |
| width=260, | |
| shadow="md", | |
| position="top", | |
| children=[ | |
| dmc.HoverCardTarget( | |
| html.Span( | |
| DashIconify( | |
| icon="mdi:information-outline", | |
| width=16, | |
| height=16, | |
| style={ | |
| "marginLeft": "6px", | |
| "color": PRIMARY_COLOR, | |
| "verticalAlign": "middle", | |
| }, | |
| ), | |
| style={"cursor": "pointer"}, | |
| ) | |
| ), | |
| dmc.HoverCardDropdown( | |
| dmc.Text( | |
| "We believe this filter isolates more authentic usage, mitigating the impact of automatic software downloads for older models.", | |
| size="sm", | |
| style={"maxWidth": "240px"}, | |
| ) | |
| ), | |
| ], | |
| ), | |
| ], | |
| className="filter-label-row", | |
| ), | |
| className="filter-label-container", | |
| ), | |
| html.Div( | |
| [ | |
| dmc.SegmentedControl( | |
| id="segmented", | |
| value="all-downloads", | |
| color=PRIMARY_COLOR, | |
| transitionDuration=200, | |
| data=[ | |
| { | |
| "value": "all-downloads", | |
| "label": "All Downloads", | |
| }, | |
| { | |
| "value": "filtered-downloads", | |
| "label": html.Span(["Filtered Downloads"]), | |
| }, | |
| ], | |
| mb=10, | |
| ), | |
| ], | |
| className="filter-segmented-row", | |
| ), | |
| html.Div( | |
| "Choose whether to count all downloads, or only downloads up to one year from model creation.", | |
| className="filter-description", | |
| ), | |
| html.Div( | |
| [ | |
| html.Div("Model Attribution", className="filter-label"), | |
| dmc.SegmentedControl( | |
| id="model-attribution-segmented", | |
| value="uploader", | |
| color=PRIMARY_COLOR, | |
| transitionDuration=200, | |
| data=[ | |
| {"value": "uploader", "label": "Model Uploader"}, | |
| { | |
| "value": "original_creator", | |
| "label": "Original Model Creator", | |
| }, | |
| ], | |
| mb=10, | |
| ), | |
| html.Div( | |
| "Toggle between having downloads attributed to the account that uploaded the model, or the account that uploaded the model that this was originally derived from.", | |
| className="filter-description", | |
| ), | |
| ], | |
| style={"marginTop": "10px"}, | |
| ), | |
| html.Span( | |
| id="global-toggle-status", className="global-toggle-status" | |
| ), | |
| ], | |
| className="main-content-left", | |
| ), | |
| html.Div( | |
| [ | |
| html.Div( | |
| [ | |
| html.Span("Download Date Range", className="filter-label"), | |
| dmc.HoverCard( | |
| width=260, | |
| shadow="md", | |
| position="top", | |
| children=[ | |
| dmc.HoverCardTarget( | |
| html.Span( | |
| DashIconify( | |
| icon="mdi:information-outline", | |
| width=16, | |
| height=16, | |
| style={ | |
| "marginLeft": "6px", | |
| "color": PRIMARY_COLOR, | |
| "verticalAlign": "middle", | |
| }, | |
| ), | |
| style={"cursor": "pointer"}, | |
| ) | |
| ), | |
| dmc.HoverCardDropdown( | |
| dmc.Text( | |
| "Toggle between viewing downloads between a date range or all-time downloads at a single date.", | |
| size="sm", | |
| style={"maxWidth": "240px"}, | |
| ) | |
| ), | |
| ], | |
| ), | |
| ], | |
| className="filter-label-row", | |
| ), | |
| dmc.Switch( | |
| id="time-range-toggle", | |
| label="All-time", | |
| checked=False, | |
| color=PRIMARY_COLOR, | |
| style={"marginBottom": "12px"}, | |
| ), | |
| dcc.Loading( | |
| id="loading-slider", | |
| type="circle", | |
| color=PRIMARY_COLOR, | |
| children=html.Div( | |
| id="slider-container", children=[time_slider_component] | |
| ), | |
| ), | |
| html.Div( | |
| id="slider-description", | |
| children="Adjust the time range to filter leaderboard results by when models were downloaded by users.", | |
| className="filter-description filter-description-margin", | |
| ), | |
| html.Div( | |
| [ | |
| html.Div( | |
| [ | |
| DashIconify( | |
| icon="mdi:lightbulb-on-outline", | |
| width=20, | |
| height=20, | |
| style={ | |
| "marginRight": "8px", | |
| "color": DARK_BACKGROUND, | |
| }, | |
| ), | |
| html.Span("Tip"), | |
| ], | |
| className="tip-title", | |
| ), | |
| html.Div( | |
| [ | |
| "Try switching between ", | |
| html.Span( | |
| "All Downloads", className="tip-highlight" | |
| ), | |
| " and ", | |
| html.Span( | |
| "Filtered Downloads", className="tip-highlight" | |
| ), | |
| " to compare net popularity (but many duplicate, unused downloads) versus more immediate interest as models are released. ", | |
| "You can also toggle between ", | |
| html.Span( | |
| "Model Uploader", className="tip-highlight" | |
| ), | |
| " and ", | |
| html.Span( | |
| "Original Model Creator", | |
| className="tip-highlight", | |
| ), | |
| " to see how attribution affects perceived popularity.", | |
| ], | |
| className="tip-description", | |
| ), | |
| ], | |
| className="tip-section", | |
| ), | |
| ], | |
| className="main-content-right", | |
| ), | |
| ], | |
| style={ | |
| "display": "flex", | |
| "gap": "24px", | |
| "padding": "32px", | |
| "alignItems": "flex-start", | |
| "marginLeft": "100px", | |
| "marginRight": "100px", | |
| "backgroundColor": "#FFFBF9", | |
| "borderRadius": "18px", | |
| }, | |
| className="responsive-main-content", | |
| ) | |
| def build_leaderboard_tabs() -> html.Div: | |
| """Tabbed leaderboard section.""" | |
| return html.Div( | |
| [ | |
| dcc.Tabs( | |
| id="leaderboard-tabs", | |
| value="Countries", | |
| children=[ | |
| dcc.Tab( | |
| label="Countries", | |
| value="Countries", | |
| style={ | |
| "backgroundColor": "transparent", | |
| "border": "none", | |
| "padding": "10px 18px", | |
| "color": "#6B7280", | |
| "fontWeight": "500", | |
| }, | |
| selected_style={ | |
| "backgroundColor": "transparent", | |
| "border": "none", | |
| "padding": "10px 18px", | |
| "fontWeight": "700", | |
| "borderBottom": "3px solid #082030", | |
| }, | |
| children=[ | |
| html.Div( | |
| children=[ | |
| "The country leaderboard shows how downloads are distributed across different nations, highlighting which countries are leading in model usage and adoption. The metadata includes the ", | |
| html.Span("country", className="meta-var"), | |
| " and number of ", | |
| html.Span("user downloads", className="meta-var"), | |
| ".", | |
| ], | |
| className="tab-description", | |
| ), | |
| html.Div( | |
| dcc.Loading( | |
| id="loading-countries", | |
| type="circle", | |
| color=PRIMARY_COLOR, | |
| children=html.Div(id="top_countries-table"), | |
| ), | |
| className="responsive-table-wrapper", | |
| ), | |
| html.Button( | |
| id="top_countries-toggle", | |
| children="▼ Show Top 50", | |
| n_clicks=0, | |
| style={**BUTTON_STYLE, "border": "none"}, | |
| ), | |
| ], | |
| ), | |
| dcc.Tab( | |
| label="Developers", | |
| value="Developers", | |
| style={ | |
| "backgroundColor": "transparent", | |
| "border": "none", | |
| "padding": "10px 18px", | |
| "color": "#6B7280", | |
| "fontWeight": "500", | |
| }, | |
| selected_style={ | |
| "backgroundColor": "transparent", | |
| "border": "none", | |
| "padding": "10px 18px", | |
| "fontWeight": "700", | |
| "borderBottom": "3px solid #082030", | |
| }, | |
| children=[ | |
| html.Div( | |
| children=[ | |
| "The developer leaderboard highlights the most influential model creators on Hugging Face, showcasing which developers have garnered the highest download counts for their models. The metadata includes the ", | |
| html.Span("developer", className="meta-var"), | |
| ", number of ", | |
| html.Span("user downloads", className="meta-var"), | |
| ", and ", | |
| html.Span("country", className="meta-var"), | |
| ".", | |
| ], | |
| className="tab-description", | |
| ), | |
| html.Div( | |
| dcc.Loading( | |
| id="loading-developers", | |
| type="circle", | |
| color=PRIMARY_COLOR, | |
| children=html.Div(id="top_developers-table"), | |
| ), | |
| className="responsive-table-wrapper", | |
| ), | |
| html.Button( | |
| id="top_developers-toggle", | |
| children="▼ Show Top 50", | |
| n_clicks=0, | |
| style={**BUTTON_STYLE, "border": "none"}, | |
| ), | |
| ], | |
| ), | |
| dcc.Tab( | |
| label="Models", | |
| value="Models", | |
| style={ | |
| "backgroundColor": "transparent", | |
| "border": "none", | |
| "padding": "10px 18px", | |
| "color": "#6B7280", | |
| "fontWeight": "500", | |
| }, | |
| selected_style={ | |
| "backgroundColor": "transparent", | |
| "border": "none", | |
| "padding": "10px 18px", | |
| "fontWeight": "700", | |
| "borderBottom": "3px solid #082030", | |
| }, | |
| children=[ | |
| html.Div( | |
| children=[ | |
| "The model leaderboard ranks individual models based on their download counts, revealing which models are most popular among users on Hugging Face. The metadata includes the ", | |
| html.Span("model name", className="meta-var"), | |
| ", number of ", | |
| html.Span("user downloads", className="meta-var"), | |
| ", ", | |
| html.Span("developer", className="meta-var"), | |
| ", and ", | |
| html.Span("modality", className="meta-var"), | |
| " (the input and output types of the model).", | |
| ], | |
| className="tab-description", | |
| ), | |
| html.Div( | |
| dcc.Loading( | |
| id="loading-models", | |
| type="circle", | |
| color=PRIMARY_COLOR, | |
| children=html.Div(id="top_models-table"), | |
| ), | |
| className="responsive-table-wrapper", | |
| ), | |
| html.Button( | |
| id="top_models-toggle", | |
| children="▼ Show Top 50", | |
| n_clicks=0, | |
| style={**BUTTON_STYLE, "border": "none"}, | |
| ), | |
| ], | |
| ), | |
| ], | |
| ), | |
| ], | |
| style={ | |
| "borderRadius": "18px", | |
| "padding": "32px", | |
| "marginTop": "12px", | |
| "marginBottom": "12px", | |
| "marginLeft": "50px", | |
| "marginRight": "50px", | |
| }, | |
| className="responsive-tabs", | |
| ) | |
| def build_main_layout(last_updated: str, time_slider_component) -> html.Div: | |
| """Full page layout assembled from smaller sections.""" | |
| return html.Div( | |
| [ | |
| build_header(last_updated), | |
| build_alert_and_title(), | |
| build_intro_paragraph(), | |
| build_filter_controls(time_slider_component), | |
| build_leaderboard_tabs(), | |
| ], | |
| style={ | |
| "fontFamily": "Inter", | |
| "backgroundColor": "#ffffff", | |
| "minHeight": "100vh", | |
| }, | |
| ) | |