Spaces:
Running
Running
| def get_rank_badge(rank): | |
| """Generate HTML for rank badge with appropriate styling""" | |
| badge_styles = { | |
| 1: ("1st", "linear-gradient(145deg, #ffd700, #ffc400)", "#000"), | |
| 2: ("2nd", "linear-gradient(145deg, #9ca3af, #787C7E)", "#fff"), | |
| 3: ("3rd", "linear-gradient(145deg, #CD7F32, #b36a1d)", "#fff"), | |
| } | |
| if rank in badge_styles: | |
| label, gradient, text_color = badge_styles[rank] | |
| return f""" | |
| <div style=" | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 48px; | |
| padding: 4px 12px; | |
| background: {gradient}; | |
| color: {text_color}; | |
| border-radius: 6px; | |
| font-weight: 600; | |
| font-size: 0.9em; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | |
| "> | |
| {label} | |
| </div> | |
| """ | |
| return f""" | |
| <div style=" | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| min-width: 28px; | |
| color: #a1a1aa; | |
| font-weight: 500; | |
| "> | |
| {rank} | |
| </div> | |
| """ | |
| def get_score_bar(score): | |
| """Generate HTML for score bar with gradient styling""" | |
| width = score * 100 | |
| return f""" | |
| <div style="display: flex; align-items: center; gap: 12px; width: 100%;"> | |
| <div style=" | |
| flex-grow: 1; | |
| height: 8px; | |
| background: var(--score-bg, rgba(255, 255, 255, 0.1)); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| max-width: 400px; | |
| "> | |
| <div style=" | |
| width: {width}%; | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--accent-blue, #60A5FA), var(--accent-orange, #E05205)); | |
| border-radius: 4px; | |
| transition: width 0.3s ease; | |
| "></div> | |
| </div> | |
| <span style=" | |
| font-family: 'SF Mono', monospace; | |
| font-weight: 600; | |
| color: var(--text-primary, #ffffff); | |
| min-width: 60px; | |
| ">{width:.1f}</span> | |
| </div> | |
| """ | |
| def get_score_bar_secondary(score): | |
| """Generate HTML for score bar with gradient styling""" | |
| width = score * 100 | |
| return f""" | |
| <div style="display: flex; align-items: center; gap: 12px; width: 100%;"> | |
| <div style=" | |
| flex-grow: 1; | |
| height: 8px; | |
| background: var(--score-bg, rgba(255, 255, 255, 0.1)); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| max-width: 200px; | |
| "> | |
| <div style=" | |
| width: {width}%; | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--accent-gray, #1f2937), var(--accent-gray-light, #9ca3af)); | |
| border-radius: 4px; | |
| transition: width 0.3s ease; | |
| "></div> | |
| </div> | |
| <span style=" | |
| font-family: 'SF Mono', monospace; | |
| font-weight: 600; | |
| color: var(--text-primary, #ffffff); | |
| min-width: 60px; | |
| ">{width:.1f}</span> | |
| </div> | |
| """ | |
| def get_chart_colors(): | |
| # if is_dark_theme(): | |
| # return { | |
| # "Private": "#60A5FA", # accent-blue | |
| # "Open source": "#A78BFA", # accent-purple | |
| # "performance_bands": ["#DCFCE7", "#FEF9C3", "#FEE2E2"], | |
| # "text": "#FFFFFF", | |
| # "background": "#1a1b1e", | |
| # "grid": (1, 1, 1, 0.1), # RGBA tuple for grid | |
| # } | |
| return { | |
| "Private": "#3B82F6", # accent-blue light | |
| "Open source": "#60CC1C", # accent-purple light | |
| "performance_bands": ["#DCFCE7", "#FEF9C3", "#FEE2E2"], | |
| "text": "#111827", | |
| "background": "#FFFFFF", | |
| "grid": (0, 0, 0, 0.1), # RGBA tuple for grid | |
| } | |
| def get_type_badge(model_type): | |
| """Generate HTML for model type badge""" | |
| colors = get_chart_colors() | |
| colors = {"Closed source": colors["Private"], "Open source": colors["Open source"]} | |
| bg_color = colors.get(model_type, "#4F46E5") | |
| return f""" | |
| <div style=" | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 4px 8px; | |
| background: {bg_color}; | |
| color: white; | |
| border-radius: 4px; | |
| font-size: 0.85em; | |
| font-weight: 500; | |
| "> | |
| {model_type} | |
| </div> | |
| """ | |