css = """
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap');

:root {
    --app-font-family: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
}

.gradio-container,
.gradio-container *:not(code):not(pre) {
    font-family: var(--app-font-family) !important;
}

.gradio-container {
    max-width: 95% !important;
    margin: 0 auto;
}
.tab-buttons button {
    font-size: 1.3em;
}
.gr-dataframe th {
    white-space: normal;
    word-break: break-word;
}
table {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}
.data-source-box {
    border: 1px solid var(--border-color-primary);
    border-radius: 8px;
    padding: 16px !important;
    background: var(--background-fill-primary);
}
.aligned-checkboxes label {
    min-width: 150px !important;
    margin-right: 10px;
}
.leaderboard-table {
    max-height: none !important;
    overflow: visible !important;
}
.leaderboard-table .html-container,
.leaderboard-table .prose {
    max-height: none !important;
    overflow: visible !important;
}
.frontier-table .table-wrap,
.frontier-table .wrap {
    overflow-x: hidden !important;
}
.frontier-table,
.frontier-table .html-container,
.frontier-table .prose,
.frontier-table-card,
.frontier-table-scroll {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
.frontier-table .prose {
    margin: 0 !important;
}
.frontier-table-card {
    width: 100%;
}
.frontier-table-title {
    color: var(--body-text-color);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 10px;
}
.frontier-table-scroll {
    max-height: 600px;
    overflow-y: auto;
    border: 0 !important;
    border-radius: 0;
    padding-right: 4px;
}
.frontier-table table,
.frontier-table-inner {
    border: 0 !important;
    border-collapse: separate;
    border-spacing: 0 6px;
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.frontier-table .params-col {
    width: 64px;
}
.frontier-table .model-col {
    width: 150px;
}
.frontier-table .ratio-col {
    width: 68px;
}
.frontier-table .delta-col {
    width: 72px;
}
.frontier-table th,
.frontier-table td {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    border: 0 !important;
    padding: 9px 8px;
    vertical-align: top;
    font-size: 14px;
    line-height: 1.32;
}
.frontier-table th {
    background: var(--background-fill-primary);
    color: var(--body-text-color-subdued);
    font-weight: 700;
    text-align: left;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    position: sticky;
    top: 0;
    z-index: 1;
}
.frontier-table tbody tr td {
    background: var(--row-bg, var(--background-fill-secondary));
    transition: background-color 0.15s ease;
}
.frontier-table tbody tr:hover td {
    background: var(--row-hover-bg, rgba(255, 107, 107, 0.12));
}
.frontier-table tbody tr td:first-child {
    border-radius: 7px 0 0 7px;
}
.frontier-table tbody tr td:last-child {
    border-radius: 0 7px 7px 0;
}
.frontier-table td.params,
.frontier-table td.ratio,
.frontier-table td.delta {
    font-variant-numeric: tabular-nums;
}
.frontier-table td.empty {
    color: var(--body-text-color-subdued);
    text-align: center;
}
.scaling-plot,
.scaling-plot > div,
.scaling-plot .plot-container {
    display: flex !important;
    justify-content: center !important;
}
.scaling-plot .js-plotly-plot,
.scaling-plot .plotly-graph-div {
    margin-left: auto !important;
    margin-right: auto !important;
}
"""
TITLE_HTML = '<h1 style="text-align:center"><span style="font-size:1.3em">🏆 LLM Compression Leaderboard (Base Model)</span></h1>'
SUBTITLE_HTML = "<h1 style='text-align:center'><span style='font-size:0.8em'>Welcome to Uncheatable Eval LLM Compression Leaderboard, where fancy fine-tuning and cheating won't work 🚫; only compute 💻, data 📊, and real innovation 🔥 can prevail!</span></h1>"
LINKS_HTML = """
<div style="display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; margin: 10px 0;">
    <a href="https://github.com/Jellyfish042/uncheatable_eval" target="_blank" style="text-decoration: none;">
        <img src="https://img.shields.io/badge/GitHub-Project-181717?logo=github" alt="GitHub Project">
    </a>
    <a href="https://huggingface.co/collections/Jellyfish042/uncheatableeval" target="_blank" style="text-decoration: none;">
        <img src="https://img.shields.io/badge/%F0%9F%A4%97%20HuggingFace-Dataset-FFD21E" alt="HuggingFace Dataset">
    </a>
    <a href="https://huggingface.co/spaces/Jellyfish042/Compression-Lens" target="_blank" style="text-decoration: none;">
        <img src="https://img.shields.io/badge/%F0%9F%94%AC%20Compression--Lens-Visualization-blue" alt="Compression Lens">
    </a>
</div>
"""