Spaces:

vLAR
/

PhysInOne-Leaderboard

Running

File size: 23,915 Bytes

custom_css = """

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --page-max: 1280px;
    --ink-1: #0f172a;
    --ink-2: #334155;
    --ink-3: #64748b;
    --line-1: #dbe3ef;
    --line-2: #e8edf5;
    --bg-panel: #ffffff;
    --bg-page: #ffffff;
    --bg-input: #ffffff;
    --bg-muted: #f8fafc;
    --bg-hover: #eef4ff;
    --bg-table-a: #ffffff;
    --bg-table-b: #f8fafc;
    --bg-header-b: #f1f5f9;
    --button-secondary-bg: #ffffff;
    --button-secondary-hover: #eef4ff;
    --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04);
    --brand: #2563eb;
    --brand-dark: #1d4ed8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --ink-1: #e5edf8;
        --ink-2: #cbd5e1;
        --ink-3: #94a3b8;
        --line-1: #334155;
        --line-2: #243244;
        --bg-panel: #101827;
        --bg-page: #07111f;
        --bg-input: #0b1322;
        --bg-muted: #111c2d;
        --bg-hover: #17243a;
        --bg-table-a: #101827;
        --bg-table-b: #0d1524;
        --bg-header-b: #162238;
        --button-secondary-bg: #111c2d;
        --button-secondary-hover: #17243a;
        --shadow-soft: none;
        --brand: #60a5fa;
        --brand-dark: #3b82f6;
        --body-background-fill: var(--bg-page);
        --background-fill-primary: var(--bg-page);
        --background-fill-secondary: var(--bg-panel);
        --block-background-fill: var(--bg-panel);
        --panel-background-fill: var(--bg-panel);
        --input-background-fill: var(--bg-input);
        --button-secondary-background-fill: var(--bg-panel);
        --border-color-primary: var(--line-2);
        --border-color-accent: var(--line-1);
        --body-text-color: var(--ink-1);
        --body-text-color-subdued: var(--ink-3);
        --block-title-text-color: var(--ink-1);
    }
}

html,
body {
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-gutter: stable both-edges;
    background: var(--bg-page) !important;
    color: var(--ink-1) !important;
}

* {
    box-sizing: border-box;
}

html, body, .gradio-container, .gradio-container * {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

code, pre, kbd, samp, textarea {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

.gradio-container {
    width: 100% !important;
    max-width: var(--page-max) !important;
    margin: 0 auto !important;
    padding: 10px 0 32px 0 !important;
    color: var(--ink-1);
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable both-edges;
}

.gradio-container > .main,
.gradio-container > div,
.gradio-container .tabs,
.gradio-container .tab-nav,
.gradio-container .tab-wrapper,
.gradio-container .tabitem,
.gradio-container [role="tablist"],
.gradio-container [role="tabpanel"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#main-tabs,
#main-tabs > div,
#main-tabs [role="tablist"],
#main-tabs [role="tabpanel"],
#tab-video_generation,
#tab-future_prediction,
#tab-property_estimation,
#tab-motion_transfer {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.task-page-shell {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    display: block !important;
    flex: 1 1 100% !important;
    align-self: stretch !important;
}

.task-page-shell,
.task-page-shell > div,
.task-page-shell .form,
.task-page-shell .block,
.task-page-shell .container {
    background: transparent !important;
}

.gradio-container,
.gradio-container .prose,
.gradio-container .prose * {
    background: transparent;
}

.gradio-container .prose p,
.gradio-container .prose ul,
.gradio-container .prose ol,
.gradio-container .prose li {
    color: var(--ink-2) !important;
}

.gradio-container .prose ul,
.gradio-container .prose ol,
.markdown-text ul,
.markdown-text ol {
    margin: 0.35rem 0 !important;
    padding-left: 1.25rem !important;
}

.markdown-text {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: var(--ink-2) !important;
}

.tab-buttons button {
    font-size: 17px !important;
    font-weight: 700 !important;
}

.tab-buttons button:hover,
.tab-buttons [role="tab"]:hover,
.property-material-tabs button:hover,
.property-material-tabs [role="tab"]:hover,
.data-table [role="columnheader"]:hover,
.data-table th:hover {
    background: var(--bg-hover) !important;
    color: var(--ink-1) !important;
}

.tab-buttons button:hover *,
.tab-buttons [role="tab"]:hover *,
.property-material-tabs button:hover *,
.property-material-tabs [role="tab"]:hover *,
.data-table [role="columnheader"]:hover *,
.data-table th:hover *,
.data-table [role="columnheader"]:hover button,
.data-table [role="columnheader"]:hover [role="button"],
.data-table [role="columnheader"]:hover [class*="sort"],
.data-table [role="columnheader"]:hover svg,
.data-table th:hover button,
.data-table th:hover [role="button"],
.data-table th:hover [class*="sort"],
.data-table th:hover svg {
    color: var(--ink-1) !important;
    fill: var(--ink-1) !important;
    stroke: var(--ink-1) !important;
    background: transparent !important;
}

.auth-row {
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 8px 0 12px 0 !important;
}

.login-button,
.login-button button {
    width: auto !important;
    min-width: 220px;
    border-radius: 12px !important;
}

.hero-block {
    padding: 8px 0 18px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--line-1);
}

.hero-eyebrow {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-title {
    margin: 0 0 8px 0;
    color: var(--ink-1);
    font-size: 34px;
    line-height: 1.15;
    font-weight: 800;
}

.hero-text {
    margin: 0;
    max-width: 1040px;
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
}

.hero-meta {
    margin-top: 10px;
    color: var(--ink-3);
    font-size: 14px;
    line-height: 1.65;
    font-weight: 500;
}

.section-header {
    margin: 14px 0 8px 0;
}

.section-header h3 {
    margin: 0;
    color: var(--ink-1);
    font-size: 24px;
    line-height: 1.25;
    font-weight: 750;
}

.section-helper {
    margin: 4px 0 0 0;
    color: var(--ink-3);
    font-size: 14px;
    line-height: 1.5;
}

.section-divider {
    height: 1px;
    margin: 16px 0 10px 0;
    background: linear-gradient(90deg, var(--line-1), rgba(219, 227, 239, 0));
}

.info-panels-row {
    margin: 10px 0 6px 0;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
}

.info-panels-row > div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.info-panel {
    border: 1px solid var(--line-2) !important;
    border-radius: 14px !important;
    background: var(--bg-panel) !important;
    overflow: hidden !important;
}

.info-panel summary {
    font-weight: 650 !important;
}

.info-panel > div,
.info-panel .label-wrap,
.info-panel .prose,
.info-panel .prose-wrap {
    background: transparent !important;
}

.form-row {
    margin: 10px 0 12px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    gap: 20px !important;
    align-items: flex-end !important;
}

.form-row > div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.form-row-single > div {
    flex: 1 1 100% !important;
}

.submit-action-row {
    margin: 12px 0 0 0 !important;
    align-items: center !important;
}

.submit-action-row > div {
    margin: 0 !important;
    padding: 0 !important;
}

.queue-head-row {
    margin-top: 4px;
    align-items: end;
}

.field-label {
    margin: 0 0 6px 0;
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.4;
}

.field-label-wide {
    margin-top: 0;
}

.clean-input,
.clean-input > div,
.clean-input .wrap,
.clean-input .wrap-inner,
.clean-input .form,
.clean-input .block,
.clean-input .container,
.clean-input label,
.clean-input .label-wrap,
.clean-input .single-select,
.clean-input .dropdown,
.clean-input .dropdown > div {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.clean-input::before,
.clean-input::after,
.clean-input *::before,
.clean-input *::after {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.clean-input,
.clean-input > div,
.clean-input .wrap,
.clean-input .form,
.clean-input .block,
.clean-input .container,
.clean-input label,
.clean-input .label-wrap,
.clean-input .dropdown,
.clean-input .dropdown > div {
    border-radius: 0 !important;
}

.clean-input .wrap-inner,
.clean-input .dropdown .wrap-inner {
    background: var(--bg-input) !important;
    border-radius: 12px !important;
    border: 1px solid var(--line-2) !important;
    box-shadow: none !important;
    outline: 0 !important;
    color: var(--ink-1) !important;
    overflow: hidden !important;
}

.clean-input .wrap-inner,
.clean-input .dropdown .wrap-inner {
    min-height: 48px !important;
    height: 48px !important;
    line-height: 48px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.clean-input input,
.clean-input textarea,
.clean-input .wrap-inner > input,
.clean-input .wrap-inner > textarea,
.clean-input .single-select,
.clean-input .secondary-wrap,
.clean-input [role="combobox"],
.clean-input button {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    min-height: 46px !important;
    height: 46px !important;
    line-height: 46px !important;
    color: var(--ink-1) !important;
}

.clean-input input,
.clean-input textarea,
.clean-input .wrap-inner > input,
.clean-input .wrap-inner > textarea {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.clean-input *:not(.wrap-inner) {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.clean-input {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 48px !important;
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
}

.submit-subtask button,
.submit-subtask span,
.submit-subtask label,
.submit-subtask .token,
.submit-subtask [data-testid],
.submit-subtask [class*="label"] {
    background: transparent !important;
}

.clean-input input:disabled,
.clean-input textarea:disabled,
.clean-input [disabled] {
    opacity: 1 !important;
    color: var(--ink-1) !important;
    -webkit-text-fill-color: var(--ink-1) !important;
}

.submit-placeholder-note {
    margin-top: 8px !important;
    color: var(--ink-3) !important;
    font-size: 14px !important;
}

.primary-action,
.primary-action button,
.submit-action-button,
.submit-action-button button {
    min-width: 220px;
    width: 220px !important;
    border-radius: 12px !important;
}

.secondary-action,
.secondary-action button,
.queue-refresh-button,
.queue-refresh-button button {
    width: auto !important;
    min-width: 120px;
    border-radius: 10px !important;
    background: var(--button-secondary-bg) !important;
    border-color: var(--line-2) !important;
    color: var(--ink-1) !important;
    box-shadow: var(--shadow-soft) !important;
}

.secondary-action:hover,
.secondary-action button:hover,
.queue-refresh-button:hover,
.queue-refresh-button button:hover {
    background: var(--button-secondary-hover) !important;
    border-color: var(--line-1) !important;
    color: var(--ink-1) !important;
}

button.primary,
.primary-action button,
.submit-action-button button {
    background: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #ffffff !important;
    box-shadow: var(--shadow-soft) !important;
}

button.primary:hover,
.primary-action button:hover,
.submit-action-button button:hover {
    background: var(--brand-dark) !important;
    border-color: var(--brand-dark) !important;
}

.submit-message {
    min-height: 24px;
    padding-top: 6px;
}

.queue-table,
.leaderboard-table,
.history-table {
    margin-top: 8px;
}

.data-table {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.data-table,
.data-table > div,
.data-table .form,
.data-table .block,
.data-table .container {
    max-width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
}

.data-table th,
.data-table [role="columnheader"] {
    font-size: 14px !important;
    line-height: 1.25 !important;
}

.data-table tbody tr td:nth-child(even),
.data-table [role="row"] [role="gridcell"]:nth-child(even) {
    background: var(--bg-table-b) !important;
}

.data-table th:nth-child(even),
.data-table [role="columnheader"]:nth-child(even) {
    background: var(--bg-header-b) !important;
}

.data-table tbody tr:hover td,
.data-table [role="row"]:hover [role="gridcell"] {
    background: var(--bg-hover) !important;
    color: var(--ink-1) !important;
}

.empty-task-note {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin: 10px 0 !important;
    padding: 14px 16px !important;
    border: 1px dashed var(--line-2) !important;
    border-radius: 12px !important;
    background: var(--bg-panel) !important;
}

.empty-task-note,
.empty-task-note > div,
.empty-task-note .form,
.empty-task-note .block {
    background: transparent !important;
    box-shadow: none !important;
}

.subtask-card {
    margin: 14px 0 !important;
    padding: 0 !important;
    border: 1px solid var(--line-2) !important;
    border-left: 4px solid var(--brand) !important;
    border-radius: 14px !important;
    background: var(--bg-panel) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

.subtask-card,
.subtask-card > div,
.subtask-card .form,
.subtask-card .block,
.subtask-card .container {
    background: transparent !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
}

.subtask-block {
    margin: 0;
    padding: 18px 18px 12px 18px;
    background: var(--bg-panel);
}

.subtask-title {
    color: var(--ink-1);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.subtask-desc {
    margin-top: 4px;
    color: var(--ink-3);
    font-size: 15px;
    line-height: 1.7;
}

.subtask-card .info-panel {
    margin: 0 14px 12px 14px;
}

.property-table-title {
    margin: 12px 0 8px 0 !important;
    color: var(--ink-1) !important;
}

.property-table-title h4,
.property-table-title p {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
}

.property-rendering-table,
.property-material-table {
    margin-top: 6px !important;
    border: 1px solid var(--line-2) !important;
    border-radius: 12px !important;
    background: var(--bg-panel) !important;
    overflow: hidden !important;
}

.property-rendering-table th,
.property-rendering-table [role="columnheader"],
.property-material-table th,
.property-material-table [role="columnheader"] {
    font-size: 12px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: var(--ink-2) !important;
    background: var(--bg-muted) !important;
}

.property-rendering-table td,
.property-rendering-table [role="gridcell"],
.property-material-table td,
.property-material-table [role="gridcell"] {
    font-size: 12px !important;
    line-height: 1.2 !important;
}

.property-material-tabs {
    margin-top: 2px !important;
}

.property-material-tabs [role="tablist"] {
    gap: 6px !important;
    border-bottom: 1px solid var(--line-2) !important;
}

.property-material-tabs button,
.property-material-tabs [role="tab"] {
    padding: 8px 12px !important;
    border-radius: 10px 10px 0 0 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
}

.property-material-tabs [role="tabpanel"] {
    padding-top: 8px !important;
}

@media (prefers-color-scheme: dark) {
    html,
    body,
    .gradio-container,
    .gradio-container > .main,
    .gradio-container > div,
    .gradio-container .tabs,
    .gradio-container .tabitem,
    .gradio-container [role="tabpanel"],
    #main-tabs,
    #main-tabs > div,
    #main-tabs [role="tabpanel"],
    #tab-video_generation,
    #tab-future_prediction,
    #tab-property_estimation,
    #tab-motion_transfer {
        background: var(--bg-page) !important;
        color: var(--ink-1) !important;
    }

    .gradio-container .prose,
    .gradio-container .prose *,
    .task-page-shell,
    .task-page-shell > div,
    .task-page-shell .form,
    .task-page-shell .block,
    .task-page-shell .container {
        background: transparent !important;
        color: var(--ink-2) !important;
    }

    #space-title,
    .hero-title,
    .section-header h3,
    .subtask-title,
    .property-table-title,
    .field-label {
        color: var(--ink-1) !important;
    }

    .markdown-text,
    .hero-text,
    .gradio-container .prose p,
    .gradio-container .prose ul,
    .gradio-container .prose ol,
    .gradio-container .prose li {
        color: var(--ink-2) !important;
    }

    .hero-meta,
    .section-helper,
    .subtask-desc,
    .submit-placeholder-note {
        color: var(--ink-3) !important;
    }

    .gradio-container .prose strong,
    .markdown-text strong {
        color: var(--ink-1) !important;
    }

    .gradio-container .prose a,
    .markdown-text a {
        color: var(--brand) !important;
    }

    .info-panel,
    .empty-task-note,
    .subtask-card,
    .property-rendering-table,
    .property-material-table {
        background: var(--bg-panel) !important;
        border-color: var(--line-2) !important;
        color: var(--ink-1) !important;
    }

    .data-table,
    .data-table > div,
    .data-table .form,
    .data-table .block,
    .data-table .container,
    .data-table table,
    .data-table thead,
    .data-table tbody,
    .data-table tr {
        background: var(--bg-panel) !important;
        color: var(--ink-1) !important;
    }

    .data-table th,
    .data-table td,
    .data-table [role="columnheader"],
    .data-table [role="gridcell"] {
        border-color: var(--line-2) !important;
        color: var(--ink-2) !important;
        background: var(--bg-table-a) !important;
    }

    .data-table th,
    .data-table [role="columnheader"] {
        background: var(--bg-muted) !important;
        color: var(--ink-1) !important;
    }

    .data-table tbody tr td:nth-child(even),
    .data-table [role="row"] [role="gridcell"]:nth-child(even) {
        background: var(--bg-table-b) !important;
    }

    .data-table th:nth-child(even),
    .data-table [role="columnheader"]:nth-child(even) {
        background: var(--bg-header-b) !important;
    }

    .data-table tbody tr:hover td,
    .data-table [role="row"]:hover [role="gridcell"] {
        background: var(--bg-hover) !important;
        color: var(--ink-1) !important;
    }

    .tab-buttons button:hover,
    .tab-buttons [role="tab"]:hover,
    .property-material-tabs button:hover,
    .property-material-tabs [role="tab"]:hover,
    .data-table [role="columnheader"]:hover,
    .data-table th:hover,
    .info-panel summary:hover {
        background: var(--bg-hover) !important;
        color: var(--ink-1) !important;
    }

    .tab-buttons button:hover *,
    .tab-buttons [role="tab"]:hover *,
    .property-material-tabs button:hover *,
    .property-material-tabs [role="tab"]:hover *,
    .data-table [role="columnheader"]:hover *,
    .data-table th:hover *,
    .data-table [role="columnheader"]:hover button,
    .data-table [role="columnheader"]:hover [role="button"],
    .data-table [role="columnheader"]:hover [class*="sort"],
    .data-table [role="columnheader"]:hover svg,
    .data-table th:hover button,
    .data-table th:hover [role="button"],
    .data-table th:hover [class*="sort"],
    .data-table th:hover svg,
    .info-panel summary:hover * {
        color: var(--ink-1) !important;
        fill: var(--ink-1) !important;
        stroke: var(--ink-1) !important;
        background: transparent !important;
    }

    .tab-buttons button[aria-selected="true"],
    .tab-buttons [role="tab"][aria-selected="true"],
    .property-material-tabs button[aria-selected="true"],
    .property-material-tabs [role="tab"][aria-selected="true"] {
        background: rgba(96, 165, 250, 0.14) !important;
        color: var(--brand) !important;
        border-color: rgba(96, 165, 250, 0.4) !important;
    }

    .primary-action button,
    .submit-action-button button {
        background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
        border-color: rgba(96, 165, 250, 0.55) !important;
        color: #ffffff !important;
    }

    .primary-action button:hover,
    .submit-action-button button:hover {
        background: linear-gradient(135deg, #1d4ed8, #0ea5e9) !important;
        border-color: rgba(125, 211, 252, 0.75) !important;
        color: #ffffff !important;
    }

    .secondary-action,
    .secondary-action button,
    .queue-refresh-button,
    .queue-refresh-button button {
        background: var(--button-secondary-bg) !important;
        border-color: var(--line-2) !important;
        color: var(--ink-1) !important;
    }

    .secondary-action:hover,
    .secondary-action button:hover,
    .queue-refresh-button:hover,
    .queue-refresh-button button:hover {
        background: var(--button-secondary-hover) !important;
        border-color: var(--line-1) !important;
        color: var(--brand) !important;
    }

    .clean-input .wrap-inner,
    .clean-input .dropdown .wrap-inner {
        background: var(--bg-input) !important;
        border-color: var(--line-2) !important;
        color: var(--ink-1) !important;
        -webkit-text-fill-color: var(--ink-1) !important;
    }

    .clean-input input,
    .clean-input textarea,
    .clean-input .wrap-inner > input,
    .clean-input .wrap-inner > textarea,
    .clean-input .single-select,
    .clean-input .secondary-wrap,
    .clean-input [role="combobox"],
    .clean-input button {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        outline: 0 !important;
        color: var(--ink-1) !important;
        -webkit-text-fill-color: var(--ink-1) !important;
    }

    .clean-input input::placeholder,
    .clean-input textarea::placeholder {
        color: var(--ink-3) !important;
        -webkit-text-fill-color: var(--ink-3) !important;
    }

    .property-material-tabs [role="tablist"] {
        border-color: var(--line-2) !important;
    }

    .property-material-tabs button,
    .property-material-tabs [role="tab"],
    .tab-buttons button {
        color: var(--ink-1) !important;
    }

    code,
    pre,
    kbd,
    samp {
        background: var(--bg-muted) !important;
        color: var(--ink-1) !important;
    }
}
"""

get_window_url_params = """
    function(url_params) {
        const params = new URLSearchParams(window.location.search);
        url_params = Object.fromEntries(params);
        return url_params;
    }
    """