Spaces:
Running
Running
| from typing import Dict, Optional | |
| import pandas as pd | |
| from .data_loader import DIMENSION_METRICS | |
| def dataframe_to_html( | |
| df: pd.DataFrame, | |
| column_label_map: Optional[Dict[str, str]] = None, | |
| ) -> str: | |
| if df.empty: | |
| return "<div class='no-data'>No data available</div>" | |
| column_label_map = column_label_map or {} | |
| headers = df.columns.tolist() | |
| html = """ | |
| <div class="academic-table-container"> | |
| <table class="academic-table"><thead><tr> | |
| """ | |
| for header in headers: | |
| display_header = column_label_map.get(header, header) | |
| if header == "Model": | |
| css_class = "model-header" | |
| elif header == "EWMScore": | |
| css_class = "primary-metric" | |
| elif header == "Rank": | |
| css_class = "rank-header" | |
| elif header in DIMENSION_METRICS: | |
| css_class = "dimension-metric-header" | |
| else: | |
| css_class = "" | |
| html += f'<th class="{css_class}">{display_header}</th>' | |
| html += "</tr></thead><tbody>" | |
| for row_index, (_, row) in enumerate(df.iterrows()): | |
| html += f'<tr class="{"even-row" if row_index % 2 == 0 else "odd-row"}">' | |
| for column in headers: | |
| value = str(row[column]) | |
| if column == "Model": | |
| css_class = "model-cell" | |
| elif column == "EWMScore": | |
| css_class = "primary-metric-cell" | |
| elif column == "Rank": | |
| css_class = "rank-cell" | |
| elif column in DIMENSION_METRICS: | |
| css_class = "dimension-metric-cell" | |
| else: | |
| css_class = "regular-cell" | |
| if "**" in value: | |
| value = value.replace("**", "") | |
| css_class += " best-score" | |
| value = f'{value}<span class="score-trophy">🏆</span>' | |
| elif "<u>" in value: | |
| value = value.replace("<u>", "").replace("</u>", "") | |
| css_class += " second-best" | |
| html += f'<td class="{css_class}">{value}</td>' | |
| html += "</tr>" | |
| return html + "</tbody></table></div>" | |
| def get_academic_css() -> str: | |
| return """ | |
| @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap'); | |
| :root { | |
| --wa-green: #B8D9A8; | |
| --wa-green-dark: #719663; | |
| --wa-green-light: #EEF7EA; | |
| --wa-purple: #B5A8E5; | |
| --wa-blue: #8EC5E8; | |
| --wa-text: #253238; | |
| --wa-muted: #5b6670; | |
| --wa-border: rgba(37, 50, 56, 0.12); | |
| --wa-card: rgba(255, 255, 255, 0.82); | |
| --wa-shadow: 0 18px 45px rgba(35, 54, 34, 0.12); | |
| } | |
| body, .gradio-container { | |
| font-family: "Rubik", sans-serif !important; | |
| color: var(--wa-text); | |
| background: radial-gradient(circle at top, #EEF7EA 0%, #DCEFD2 35%, #F7FAF5 100%) !important; | |
| min-height: 100vh; | |
| } | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .gradio-container { | |
| width: min(1440px, calc(100vw - 40px)) !important; | |
| max-width: 1440px !important; | |
| margin: 0 auto !important; | |
| padding: 28px !important; | |
| } | |
| .gradio-container > .main, | |
| .gradio-container .contain { | |
| width: 100% !important; | |
| max-width: none !important; | |
| margin-left: auto !important; | |
| margin-right: auto !important; | |
| } | |
| .wa-hero { | |
| text-align: center; | |
| padding: 54px 28px 38px; | |
| margin-bottom: 20px; | |
| border: 1px solid var(--wa-border); | |
| border-radius: 32px; | |
| background: rgba(255, 255, 255, 0.72); | |
| backdrop-filter: blur(16px); | |
| box-shadow: var(--wa-shadow); | |
| } | |
| .wa-kicker { | |
| color: var(--wa-green-dark); | |
| font-size: 0.78rem; | |
| font-weight: 800; | |
| letter-spacing: 0.18em; | |
| margin-bottom: 12px; | |
| } | |
| .wa-hero h1 { | |
| margin: 0; | |
| color: var(--wa-text); | |
| font-size: clamp(3rem, 8vw, 5.2rem); | |
| font-weight: 800; | |
| letter-spacing: -0.055em; | |
| line-height: 1; | |
| } | |
| .wa-hero p { | |
| max-width: 860px; | |
| margin: 20px auto 24px; | |
| color: var(--wa-muted); | |
| font-size: 1.2rem; | |
| line-height: 1.6; | |
| } | |
| .wa-axis { | |
| display: flex; | |
| justify-content: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .wa-axis span { | |
| padding: 8px 16px; | |
| border-radius: 999px; | |
| font-size: 0.78rem; | |
| font-weight: 800; | |
| letter-spacing: 0.07em; | |
| text-transform: uppercase; | |
| } | |
| .wa-purple { background: rgba(181,168,229,.25); color: #5e4c8d; } | |
| .wa-green { background: rgba(184,217,168,.32); color: #416234; } | |
| .wa-blue { background: rgba(142,197,232,.28); color: #2c6283; } | |
| .wa-intro { | |
| padding: 24px 28px; | |
| margin-bottom: 22px; | |
| border: 1px solid rgba(141,178,126,.22); | |
| border-radius: 28px; | |
| background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(238,247,234,.82)); | |
| color: #2e3f47; | |
| font-size: 1.02rem; | |
| line-height: 1.8; | |
| } | |
| .gradio-container .wa-intro strong { | |
| color: #a55f5f !important; | |
| font-weight: 750 !important; | |
| } | |
| .wa-announcement { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 28px; | |
| padding: 22px 24px; | |
| margin-bottom: 22px; | |
| border: 1px solid rgba(177, 128, 58, 0.28); | |
| border-left: 4px solid #b7803a; | |
| border-radius: 18px; | |
| background: rgba(255, 249, 236, 0.92); | |
| box-shadow: 0 10px 28px rgba(73, 55, 29, 0.07); | |
| } | |
| .wa-announcement-copy { | |
| min-width: 0; | |
| } | |
| .wa-announcement-label { | |
| margin-bottom: 5px; | |
| color: #8b5f24; | |
| font-size: 0.72rem; | |
| font-weight: 800; | |
| letter-spacing: 0.14em; | |
| } | |
| .wa-announcement h2 { | |
| margin: 0 0 6px; | |
| color: var(--wa-text); | |
| font-size: 1.08rem; | |
| font-weight: 750; | |
| line-height: 1.35; | |
| } | |
| .wa-announcement p { | |
| margin: 0; | |
| color: var(--wa-muted); | |
| font-size: 0.94rem; | |
| line-height: 1.65; | |
| } | |
| .gradio-container .wa-announcement p strong { | |
| color: #a55f5f !important; | |
| font-weight: 750 !important; | |
| } | |
| .wa-announcement-link { | |
| flex: 0 0 auto; | |
| padding: 11px 16px; | |
| border: 1px solid rgba(65, 98, 52, 0.2); | |
| border-radius: 10px; | |
| background: #719663; | |
| color: #fff !important; | |
| font-size: 0.88rem; | |
| font-weight: 700; | |
| text-decoration: none !important; | |
| white-space: nowrap; | |
| transition: background-color 0.16s ease, transform 0.16s ease; | |
| } | |
| .wa-announcement-link:hover { | |
| background: #5f8252; | |
| transform: translateY(-1px); | |
| } | |
| .tabs { | |
| border: 1px solid var(--wa-border) !important; | |
| border-radius: 28px !important; | |
| background: var(--wa-card) !important; | |
| box-shadow: var(--wa-shadow); | |
| padding: 14px !important; | |
| overflow: hidden; | |
| } | |
| .tab-nav { | |
| gap: 8px !important; | |
| border-bottom: 0 !important; | |
| } | |
| .gradio-container .tabs .tab-nav button { | |
| border-radius: 999px !important; | |
| padding: 10px 18px !important; | |
| color: #46535b !important; | |
| font-weight: 600 !important; | |
| } | |
| .gradio-container .tabs .tab-nav button span { | |
| color: #46535b !important; | |
| opacity: 1 !important; | |
| } | |
| .gradio-container .tabs .tab-nav button.selected { | |
| background: rgba(184,217,168,.35) !important; | |
| color: #284526 !important; | |
| border-color: rgba(113,150,99,.25) !important; | |
| } | |
| .gradio-container .tabs .tab-nav button.selected span { | |
| color: #284526 !important; | |
| } | |
| .gradio-container .wa-track-description, | |
| .gradio-container .wa-track-description p, | |
| .gradio-container .wa-status, | |
| .gradio-container .wa-status p { | |
| color: #46535b !important; | |
| } | |
| .gradio-container .wa-track-description strong { | |
| color: #a55f5f !important; | |
| font-weight: 750 !important; | |
| } | |
| .gradio-container .block .label-wrap, | |
| .gradio-container .block .label-wrap > span, | |
| .gradio-container .form .label-wrap, | |
| .gradio-container .form .label-wrap > span { | |
| color: #46535b !important; | |
| opacity: 1 !important; | |
| } | |
| .gradio-container .wa-control .block-info, | |
| .gradio-container .wa-control span[data-testid="block-info"], | |
| .gradio-container .wa-control > label > span:first-child, | |
| .gradio-container .wa-control > span:first-child { | |
| color: #46535b !important; | |
| opacity: 1 !important; | |
| font-weight: 600 !important; | |
| } | |
| .gradio-container .wa-control input::placeholder, | |
| .gradio-container .wa-control textarea::placeholder { | |
| color: #747f86 !important; | |
| opacity: 1 !important; | |
| } | |
| .gradio-container .wa-control input[type="number"], | |
| .gradio-container .wa-control .range-slider span { | |
| color: #46535b !important; | |
| opacity: 1 !important; | |
| } | |
| .block, .form { | |
| border-color: var(--wa-border) !important; | |
| border-radius: 20px !important; | |
| background: rgba(255,255,255,.7) !important; | |
| } | |
| button.primary { | |
| border: 0 !important; | |
| border-radius: 999px !important; | |
| background: var(--wa-green-dark) !important; | |
| color: white !important; | |
| font-weight: 700 !important; | |
| } | |
| button.secondary { | |
| border: 1px solid var(--wa-border) !important; | |
| border-radius: 999px !important; | |
| background: rgba(255,255,255,.9) !important; | |
| color: var(--wa-text) !important; | |
| } | |
| .academic-table-container { | |
| overflow-x: auto; | |
| margin: 20px 0; | |
| border: 1px solid var(--wa-border); | |
| border-radius: 22px; | |
| background: rgba(255,255,255,.7); | |
| box-shadow: 0 12px 30px rgba(35,54,34,.08); | |
| } | |
| .academic-table { | |
| width: 100%; | |
| min-width: 800px; | |
| border-collapse: collapse; | |
| font-family: "Rubik", sans-serif; | |
| font-size: 13px; | |
| } | |
| .academic-table th { | |
| position: sticky; | |
| top: 0; | |
| z-index: 2; | |
| padding: 14px 12px; | |
| border-bottom: 1px solid rgba(37,50,56,.16); | |
| background: rgba(184,217,168,.34); | |
| color: #294327; | |
| font-weight: 700; | |
| text-align: center; | |
| white-space: nowrap; | |
| } | |
| .academic-table th.dimension-metric-header { | |
| background: rgba(181,168,229,.22); | |
| color: #5e4c8d; | |
| } | |
| .academic-table th.primary-metric { | |
| background: rgba(142,197,232,.28); | |
| color: #285f7f; | |
| } | |
| .academic-table td { | |
| padding: 12px 10px; | |
| border-bottom: 1px solid rgba(37,50,56,.08); | |
| color: var(--wa-text); | |
| text-align: center; | |
| } | |
| .academic-table tr:nth-child(even) td { background: rgba(238,247,234,.42); } | |
| .academic-table tr:hover td { background: rgba(184,217,168,.2); } | |
| .academic-table .model-cell { text-align: left; font-weight: 650; } | |
| .academic-table .primary-metric-cell { color: #285f7f; font-weight: 700; } | |
| .academic-table .dimension-metric-cell { color: #5e4c8d; font-weight: 600; } | |
| .academic-table .rank-cell { color: var(--wa-muted); font-weight: 700; } | |
| .academic-table .best-score { | |
| color: #12b85a; | |
| background: #eaf8f1 !important; | |
| font-weight: 800; | |
| } | |
| .academic-table .score-trophy { | |
| display: inline-block; | |
| margin-left: 8px; | |
| font-size: 0.8em; | |
| vertical-align: 0.05em; | |
| } | |
| .academic-table .second-best { | |
| color: #f29a00; | |
| background: #fff9e9 !important; | |
| font-weight: 700; | |
| text-decoration: underline; | |
| text-decoration-thickness: 1.5px; | |
| text-underline-offset: 2px; | |
| } | |
| .placeholder, .no-data { | |
| padding: 34px; | |
| border: 1px dashed rgba(113,150,99,.4); | |
| border-radius: 20px; | |
| background: rgba(238,247,234,.55); | |
| color: var(--wa-muted); | |
| text-align: center; | |
| } | |
| @media (max-width: 768px) { | |
| .gradio-container { | |
| width: 100% !important; | |
| padding: 14px !important; | |
| } | |
| .wa-hero { padding: 40px 18px 30px; border-radius: 24px; } | |
| .wa-hero p { font-size: 1rem; } | |
| .wa-announcement { align-items: flex-start; flex-direction: column; gap: 16px; } | |
| .wa-announcement-link { width: 100%; text-align: center; } | |
| .tabs { border-radius: 22px !important; padding: 8px !important; } | |
| } | |
| """ | |