Spaces:
Running on CPU Upgrade
Running on CPU Upgrade
| """Streamlit theme helpers for the GRM leaderboard.""" | |
| CUSTOM_CSS = """ | |
| <style> | |
| :root { | |
| --bg-top: #202327; | |
| --bg-bottom: #0f1012; | |
| --surface: #15181b; | |
| --surface-strong: #24282d; | |
| --surface-alt: #1d2126; | |
| --surface-alt-2: #262a2f; | |
| --text-main: #f5f7f8; | |
| --text-muted: #c1c6cb; | |
| --text-soft: #a2a8ae; | |
| --accent: #76b900; | |
| --rule: rgba(255, 255, 255, 0.08); | |
| --rule-soft: rgba(255, 255, 255, 0.05); | |
| } | |
| html[data-grm-theme="light"] { | |
| --bg-top: #f7f8fa; | |
| --bg-bottom: #ffffff; | |
| --surface: #ffffff; | |
| --surface-strong: #eef1f4; | |
| --surface-alt: #f3f5f7; | |
| --surface-alt-2: #e8ecef; | |
| --text-main: #15181b; | |
| --text-muted: #3f474f; | |
| --text-soft: #66717c; | |
| --rule: rgba(15, 16, 18, 0.12); | |
| --rule-soft: rgba(15, 16, 18, 0.07); | |
| } | |
| html[data-grm-theme="dark"] { | |
| --bg-top: #202327; | |
| --bg-bottom: #0f1012; | |
| --surface: #15181b; | |
| --surface-strong: #24282d; | |
| --surface-alt: #1d2126; | |
| --surface-alt-2: #262a2f; | |
| --text-main: #f5f7f8; | |
| --text-muted: #c1c6cb; | |
| --text-soft: #a2a8ae; | |
| --rule: rgba(255, 255, 255, 0.08); | |
| --rule-soft: rgba(255, 255, 255, 0.05); | |
| } | |
| .stApp { | |
| background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%); | |
| color: var(--text-main); | |
| user-select: text; | |
| } | |
| .stApp ::selection { | |
| background: rgba(118, 185, 0, 0.28); | |
| color: var(--text-main); | |
| } | |
| .stApp * { | |
| user-select: text; | |
| } | |
| .block-container { | |
| max-width: 1260px; | |
| padding: 24px 24px 48px; | |
| } | |
| .page-header { | |
| text-align: center; | |
| margin: 4px auto 24px; | |
| } | |
| .page-eyebrow { | |
| color: var(--text-soft); | |
| font-size: 0.76rem; | |
| font-weight: 650; | |
| letter-spacing: 0.16em; | |
| margin-bottom: 12px; | |
| text-transform: uppercase; | |
| } | |
| .page-header h1 { | |
| color: var(--text-main); | |
| font-size: 2.35rem; | |
| font-weight: 650; | |
| letter-spacing: 0; | |
| line-height: 1.1; | |
| margin: 0; | |
| } | |
| .page-header p { | |
| color: var(--text-muted); | |
| font-size: 1rem; | |
| line-height: 1.65; | |
| margin: 12px auto 0; | |
| max-width: 860px; | |
| } | |
| [data-testid="stMetric"] { | |
| background: var(--surface); | |
| border: 1px solid var(--rule); | |
| border-radius: 8px; | |
| padding: 12px 14px; | |
| } | |
| [data-testid="stMetricLabel"] p { | |
| color: var(--text-soft); | |
| font-size: 0.78rem; | |
| font-weight: 650; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| } | |
| [data-testid="stMetricValue"] { | |
| color: var(--text-main); | |
| font-size: 1.05rem; | |
| } | |
| .stTabs [data-baseweb="tab-list"] { | |
| border-bottom: 1px solid var(--rule); | |
| gap: 18px; | |
| } | |
| .stTabs [data-baseweb="tab"] { | |
| color: var(--text-soft); | |
| font-size: 0.82rem; | |
| font-weight: 650; | |
| letter-spacing: 0.08em; | |
| padding-left: 0; | |
| padding-right: 0; | |
| text-transform: uppercase; | |
| } | |
| .stTabs [aria-selected="true"] { | |
| color: var(--text-main); | |
| } | |
| .stTabs [data-baseweb="tab-highlight"] { | |
| background-color: var(--accent) !important; | |
| } | |
| .stApp [data-baseweb="checkbox"] div[aria-checked="true"] { | |
| background-color: var(--accent) !important; | |
| border-color: var(--accent) !important; | |
| } | |
| .stApp [data-testid="stRadio"] input:checked + div, | |
| .stApp [data-testid="stRadio"] input[aria-checked="true"] + div, | |
| .stApp [data-testid="stRadio"] div[aria-checked="true"], | |
| .stApp label[data-baseweb="radio"] input:checked ~ div:first-of-type, | |
| .stApp [data-baseweb="radio"] [aria-checked="true"] div:first-of-type { | |
| border-color: var(--accent) !important; | |
| } | |
| .stApp [data-testid="stRadio"] input:checked + div::before, | |
| .stApp [data-testid="stRadio"] input:checked + div::after, | |
| .stApp [data-testid="stRadio"] div[aria-checked="true"]::before, | |
| .stApp [data-testid="stRadio"] div[aria-checked="true"]::after, | |
| .stApp label[data-baseweb="radio"] input:checked ~ div:first-of-type div, | |
| .stApp [data-baseweb="radio"] [aria-checked="true"] div:first-of-type div { | |
| background-color: var(--accent) !important; | |
| } | |
| .stApp [data-testid="stRadio"] label, | |
| .stApp [data-testid="stRadio"] label > div, | |
| .stApp [data-testid="stRadio"] label:hover, | |
| .stApp [data-testid="stRadio"] label:focus-within { | |
| background: transparent !important; | |
| box-shadow: none !important; | |
| } | |
| .stApp [data-testid="stRadio"] label p { | |
| color: var(--text-muted) !important; | |
| } | |
| .stApp [data-baseweb="checkbox"] svg { | |
| color: var(--text-main) !important; | |
| fill: var(--text-main) !important; | |
| } | |
| .stApp [data-baseweb="input"], | |
| .stApp [data-baseweb="select"], | |
| .stApp [data-baseweb="popover"], | |
| .stApp [data-baseweb="menu"], | |
| .stApp [data-baseweb="slider"] > div, | |
| .stApp [data-testid="stMultiSelect"] [data-baseweb="select"], | |
| .stApp [data-testid="stSelectbox"] [data-baseweb="select"] { | |
| background-color: var(--surface) !important; | |
| color: var(--text-main) !important; | |
| } | |
| .stApp [data-baseweb="input"] input, | |
| .stApp [data-baseweb="select"] input, | |
| .stApp [data-baseweb="select"] span, | |
| .stApp [data-baseweb="tag"], | |
| .stApp [data-baseweb="menu"] li, | |
| .stApp [data-testid="stTextInput"] input { | |
| color: var(--text-main) !important; | |
| } | |
| .stApp [data-baseweb="input"], | |
| .stApp [data-baseweb="select"], | |
| .stApp [data-baseweb="tag"], | |
| .stApp [data-testid="stTextInput"] input { | |
| border-color: var(--rule) !important; | |
| } | |
| .stApp [data-baseweb="tag"] { | |
| background-color: var(--surface-alt-2) !important; | |
| } | |
| .stApp [data-baseweb="menu"] li:hover, | |
| .stApp [role="option"]:hover { | |
| background-color: var(--surface-alt) !important; | |
| } | |
| .stMarkdown h2, | |
| .stMarkdown h3 { | |
| color: var(--text-main); | |
| letter-spacing: 0; | |
| } | |
| .stMarkdown p, | |
| .stMarkdown li, | |
| .stCaption, | |
| label, | |
| [data-testid="stExpander"] p { | |
| color: var(--text-muted); | |
| } | |
| .stDataFrame { | |
| background: var(--surface); | |
| border: 1px solid var(--rule); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| } | |
| .stDataFrame button, | |
| .stDataFrame [role="button"] { | |
| color: var(--text-main) !important; | |
| } | |
| [data-testid="stExpander"] { | |
| background: color-mix(in srgb, var(--surface) 78%, transparent); | |
| border: 1px solid var(--rule-soft); | |
| border-radius: 8px; | |
| } | |
| a { | |
| color: var(--accent) !important; | |
| text-decoration: none; | |
| } | |
| .section-note { | |
| color: var(--text-soft); | |
| font-size: 0.88rem; | |
| margin: 0 0 10px; | |
| } | |
| .detail-panel { | |
| background: var(--surface); | |
| border: 1px solid var(--rule); | |
| border-radius: 8px; | |
| padding: 14px 16px; | |
| margin: 10px 0 14px; | |
| } | |
| .detail-kicker { | |
| color: var(--text-soft); | |
| font-size: 0.76rem; | |
| font-weight: 650; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| } | |
| .detail-panel h3 { | |
| color: var(--text-main); | |
| font-size: 1.14rem; | |
| margin: 4px 0 8px; | |
| } | |
| .detail-panel p { | |
| color: var(--text-muted); | |
| line-height: 1.62; | |
| } | |
| .formula-line { | |
| color: var(--text-main); | |
| font-weight: 650; | |
| } | |
| .theme-toggle-row { | |
| align-items: center; | |
| display: flex; | |
| justify-content: flex-end; | |
| margin-bottom: 8px; | |
| } | |
| .sample-code { | |
| background: var(--bg-bottom); | |
| border: 1px solid var(--rule-soft); | |
| border-radius: 8px; | |
| color: var(--text-main); | |
| overflow-x: auto; | |
| padding: 16px 18px; | |
| } | |
| .sample-code pre { | |
| background: transparent; | |
| border: 0; | |
| color: inherit; | |
| font-family: Consolas, "SFMono-Regular", monospace; | |
| font-size: 0.88rem; | |
| line-height: 1.7; | |
| margin: 0; | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .sample-code pre code { | |
| background: transparent; | |
| color: inherit; | |
| font: inherit; | |
| white-space: inherit; | |
| } | |
| [data-testid="stCode"] pre, | |
| [data-testid="stCode"] code { | |
| font-family: Consolas, "SFMono-Regular", monospace !important; | |
| font-size: 0.88rem !important; | |
| line-height: 1.7 !important; | |
| } | |
| @media (max-width: 720px) { | |
| .block-container { | |
| padding: 20px 14px 40px; | |
| } | |
| .page-header h1 { | |
| font-size: 2rem; | |
| } | |
| } | |
| </style> | |
| """ | |
| LIGHT_THEME_CSS = """ | |
| <style> | |
| :root { | |
| --bg-top: #f7f8fa; | |
| --bg-bottom: #ffffff; | |
| --surface: #ffffff; | |
| --surface-strong: #eef1f4; | |
| --surface-alt: #f3f5f7; | |
| --surface-alt-2: #e8ecef; | |
| --text-main: #15181b; | |
| --text-muted: #3f474f; | |
| --text-soft: #66717c; | |
| --rule: rgba(15, 16, 18, 0.12); | |
| --rule-soft: rgba(15, 16, 18, 0.07); | |
| } | |
| header[data-testid="stHeader"], | |
| [data-testid="stToolbar"], | |
| [data-testid="stDecoration"], | |
| [data-testid="stStatusWidget"] { | |
| background-color: var(--bg-top) !important; | |
| color: var(--text-main) !important; | |
| } | |
| .stApp [data-testid="stWidgetLabel"] p, | |
| .stApp [data-testid="stRadio"] p, | |
| .stApp [data-testid="stCheckbox"] p, | |
| .stApp [data-testid="stSelectbox"] p, | |
| .stApp [data-testid="stTextInput"] p, | |
| .stApp [data-testid="stMultiSelect"] p, | |
| .stApp label p { | |
| color: var(--text-muted) !important; | |
| } | |
| .stTabs [aria-selected="true"] p, | |
| .stTabs [aria-selected="true"], | |
| .stApp [data-testid="stMetricValue"] { | |
| color: var(--text-main) !important; | |
| } | |
| .stApp [data-baseweb="select"] > div, | |
| .stApp [data-baseweb="select"] > div *, | |
| .stApp [data-baseweb="input"] [data-baseweb="base-input"], | |
| .stApp [data-baseweb="input"] [data-baseweb="base-input"] *, | |
| .stApp [data-testid="stTextInputRootElement"] [data-baseweb="base-input"], | |
| .stApp [data-testid="stTextInputRootElement"] input { | |
| background-color: var(--surface) !important; | |
| color: var(--text-main) !important; | |
| } | |
| .stApp [data-baseweb="select"] svg, | |
| .stApp [data-baseweb="input"] svg { | |
| color: var(--text-main) !important; | |
| fill: var(--text-main) !important; | |
| } | |
| .stApp [data-testid="stElementToolbarButtonContainer"] { | |
| background-color: var(--surface) !important; | |
| color: var(--text-main) !important; | |
| } | |
| .stDataFrameGlideDataEditor { | |
| --gdg-bg-cell: #ffffff !important; | |
| --gdg-bg-cell-medium: #f7f8fa !important; | |
| --gdg-bg-header: #eef1f4 !important; | |
| --gdg-bg-header-hovered: #e8ecef !important; | |
| --gdg-bg-header-has-focus: #e8ecef !important; | |
| --gdg-bg-group-header: #eef1f4 !important; | |
| --gdg-bg-group-header-hovered: #e8ecef !important; | |
| --gdg-bg-bubble: #eef1f4 !important; | |
| --gdg-bg-bubble-selected: #dfe5ea !important; | |
| --gdg-text-dark: #15181b !important; | |
| --gdg-text-medium: #3f474f !important; | |
| --gdg-text-light: #66717c !important; | |
| --gdg-text-header: #3f474f !important; | |
| --gdg-text-header-selected: #15181b !important; | |
| --gdg-text-group-header: #3f474f !important; | |
| --gdg-text-bubble: #3f474f !important; | |
| --gdg-border-color: rgba(15, 16, 18, 0.12) !important; | |
| --gdg-horizontal-border-color: rgba(15, 16, 18, 0.08) !important; | |
| --gdg-bg-icon-header: rgba(15, 16, 18, 0.42) !important; | |
| --gdg-fg-icon-header: #15181b !important; | |
| } | |
| </style> | |
| """ | |
| DARK_THEME_CSS = """ | |
| <style> | |
| :root { | |
| --bg-top: #202327; | |
| --bg-bottom: #0f1012; | |
| --surface: #15181b; | |
| --surface-strong: #24282d; | |
| --surface-alt: #1d2126; | |
| --surface-alt-2: #262a2f; | |
| --text-main: #f5f7f8; | |
| --text-muted: #c1c6cb; | |
| --text-soft: #a2a8ae; | |
| --rule: rgba(255, 255, 255, 0.08); | |
| --rule-soft: rgba(255, 255, 255, 0.05); | |
| } | |
| .stApp [data-baseweb="select"] > div, | |
| .stApp [data-baseweb="select"] > div *, | |
| .stApp [data-baseweb="input"] [data-baseweb="base-input"], | |
| .stApp [data-baseweb="input"] [data-baseweb="base-input"] *, | |
| .stApp [data-testid="stTextInputRootElement"] [data-baseweb="base-input"], | |
| .stApp [data-testid="stTextInputRootElement"] input { | |
| background-color: var(--surface) !important; | |
| color: var(--text-main) !important; | |
| } | |
| .stDataFrameGlideDataEditor { | |
| --gdg-bg-cell: #15181b !important; | |
| --gdg-bg-cell-medium: #1d2126 !important; | |
| --gdg-bg-header: #24282d !important; | |
| --gdg-bg-header-hovered: #2c3137 !important; | |
| --gdg-bg-header-has-focus: #2c3137 !important; | |
| --gdg-bg-group-header: #1d2126 !important; | |
| --gdg-bg-group-header-hovered: #24282d !important; | |
| --gdg-bg-bubble: #24282d !important; | |
| --gdg-bg-bubble-selected: #2c3137 !important; | |
| --gdg-text-dark: #f5f7f8 !important; | |
| --gdg-text-medium: #c1c6cb !important; | |
| --gdg-text-light: #a2a8ae !important; | |
| --gdg-text-header: #c1c6cb !important; | |
| --gdg-text-header-selected: #f5f7f8 !important; | |
| --gdg-text-group-header: #c1c6cb !important; | |
| --gdg-text-bubble: #c1c6cb !important; | |
| --gdg-border-color: rgba(255, 255, 255, 0.08) !important; | |
| --gdg-horizontal-border-color: rgba(255, 255, 255, 0.05) !important; | |
| --gdg-bg-icon-header: rgba(255, 255, 255, 0.3) !important; | |
| --gdg-fg-icon-header: #f5f7f8 !important; | |
| } | |
| </style> | |
| """ | |
| def palette_css(light_mode: bool) -> str: | |
| return LIGHT_THEME_CSS if light_mode else DARK_THEME_CSS | |
| HEADER_HTML = """ | |
| <section class="page-header"> | |
| <div class="page-eyebrow">NVIDIA Game Ready Evaluation</div> | |
| <h1>Game Ready Leaderboard</h1> | |
| <p> | |
| An open game model evaluation surface for comparing LLMs across roleplay, | |
| gameplay actions, and practical in-game reasoning. | |
| </p> | |
| </section> | |
| """ | |
| OVERVIEW_BLOCKS = [ | |
| "Nvidia Game Ready Model Score (GRM) is an aggregated quality metric designed to assess LLM capabilities in gaming use cases.", | |
| "General state-of-the-art language models are optimized for broad benchmarks such as math, code, and general knowledge. That does not reliably translate to in-game performance, and it does not reliably predict NPC quality, gameplay actions, or immersion.", | |
| "With game model evaluation, game developers can accelerate AI integration pipelines by reducing time spent on model evaluation and narrowing model choice earlier. The overall score is the average of Roleplay, Actions, and General, while benchmarks inside each category are combined with weighted averaging using the PRD weights.", | |
| ] | |
| FORMULAS = [ | |
| "GRM Score = (Roleplay + Actions + General) / 3", | |
| "Category Score = sum(score x weight) / sum(weight)", | |
| ] | |