diff --git a/src/components/Header.css b/src/components/Header.css index 01b315b..3c2be1a 100644 --- a/src/components/Header.css +++ b/src/components/Header.css @@ -115,7 +115,7 @@ background: rgba(255, 255, 255, 0.1); } -@media (max-width: 768px) { +@media (max-width: 950px) { .nav-desktop { display: none; } diff --git a/src/pages/HomePage.css b/src/pages/HomePage.css index a0dd9c7..81c9295 100644 --- a/src/pages/HomePage.css +++ b/src/pages/HomePage.css @@ -28,8 +28,10 @@ font-weight: 700; line-height: 1.2; margin-bottom: 1rem; - padding-right: 4rem; - margin-left: 2rem; + padding-right: 0rem; + margin-left: 0; + width: 100%; + } .hero-subtitle-short { @@ -39,7 +41,7 @@ margin-bottom: 1.5rem; color: rgba(255, 255, 255, 0.9); padding-right: 4rem; - margin-left: 2rem; + /* margin-left: 2rem; */ max-width: 400rem; } @@ -67,6 +69,7 @@ padding: 0; text-align: left; max-width: 500px; + width: 100%; } .cta-heading { @@ -75,6 +78,8 @@ color: rgba(255, 255, 255, 0.9); margin: 0 0 0.5rem 0; letter-spacing: -0.01em; + width: auto; + text-wrap: wrap; } .cta-description { @@ -86,19 +91,20 @@ } .cta-card .btn { - background: linear-gradient(135deg, #fa961c 0%, #ffaa00 100%); + /* background: linear-gradient(135deg, #fa961c 0%, #ffaa00 100%); */ + background: rgb(108, 112, 119); color: white; font-weight: 500; padding: 0.5rem 1.25rem; font-size: 1.1rem; - border: none; + border: 2px solid #4d4d4dd6; border-radius: 6px; transition: all 0.2s ease; letter-spacing: 0.01em; } .cta-card .btn:hover { - background: linear-gradient(135deg, #ff9012 0%, #ff8809 100%); + background: #555555d6; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25); } @@ -122,7 +128,7 @@ } .btn-primary { - background: #2563eb; + background: #fa961c; color: white; font-weight: 600; font-size: 1.3rem; @@ -130,7 +136,7 @@ } .btn-primary:hover { - background: #1d4ed8; + background: #dd7e09; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); } @@ -178,8 +184,8 @@ gap: 1.5rem; align-items: left; justify-content: left; - margin-left: 2rem; - margin-right: -2rem; + /* margin-left: 2rem; + margin-right: -2rem; */ } .hero-card { diff --git a/src/pages/LeaderboardPage.css b/src/pages/LeaderboardPage.css index 5d90387..8c7f758 100644 --- a/src/pages/LeaderboardPage.css +++ b/src/pages/LeaderboardPage.css @@ -172,17 +172,46 @@ display: flex; flex-direction: column; gap: 0.35rem; - min-width: 200px; + min-width: 300px; } -.beta-label { - display: flex; - justify-content: space-between; - font-size: 0.9rem; +.beta-label-link { + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-size: 1rem; font-weight: 600; - color: #1f2937; + color: #363a42; + background: transparent; + border: none; + padding: 0; + cursor: pointer; + position: relative; } +.beta-label-text { + position: relative; + display: inline-block; +} + +.beta-label-text::after { + content: ''; + position: absolute; + bottom: -2px; + left: 0; + width: 100%; + height: 1px; + background: rgba(37, 99, 235, 0.3); + transform: scaleX(0); + transition: transform 0.2s ease; + transform-origin: left; +} + +.beta-label-link:hover .beta-label-text::after { + transform: scaleX(1); +} + + .beta-value { font-variant-numeric: tabular-nums; color: #2563eb; @@ -196,8 +225,39 @@ .beta-hints { display: flex; justify-content: space-between; - font-size: 0.75rem; - color: #6b7280; + font-size: 0.9rem; + color: #363636; +} + +.beta-weights { + display: flex; + gap: 1rem; + align-items: center; + flex-wrap: wrap; + font-size: 0.9rem; + color: #1f2937; +} + +.beta-weight { + display: flex; + flex-direction: column; + background: #eef2ff; + border-radius: 8px; + padding: 0.5rem 0.75rem; +} + +.beta-weight strong { + font-size: 1rem; + font-weight: 700; +} + +.beta-weight-pill { + background: #dbeafe; + border-radius: 999px; + padding: 0.5rem 1rem; + font-weight: 600; + color: #1d4ed8; + } .filter-group { diff --git a/src/pages/LeaderboardPage.tsx b/src/pages/LeaderboardPage.tsx index 03be339..3cbb076 100644 --- a/src/pages/LeaderboardPage.tsx +++ b/src/pages/LeaderboardPage.tsx @@ -31,6 +31,9 @@ const computeArenaScore = (router: Router, beta: number): number => { return (((1 + beta) * accuracy * normalizedCost) / denominator) * 100; }; +const DEFAULT_BETA = 0.1; +const defaultCostWeight = DEFAULT_BETA / (1 + DEFAULT_BETA); + const LeaderboardPage: React.FC = () => { const [searchTerm, setSearchTerm] = useState(''); const [filterType, setFilterType] = useState<'all' | 'open-source' | 'closed-source'>('all'); @@ -38,7 +41,10 @@ const LeaderboardPage: React.FC = () => { 'arena' | 'accuracy' | 'cost' | 'optimalSelection' | 'optimalCost' | 'optimalAcc' | 'latency' | 'robustness' >('arena'); const [activeTab, setActiveTab] = useState<'spider' | 'deferral'>('spider'); - const [beta, setBeta] = useState(0.1); + const [costWeight, setCostWeight] = useState(defaultCostWeight); + + const beta = costWeight / (1 - costWeight); + const accuracyWeight = 1 - costWeight; // Deferral curve data const openSourcePoints = { @@ -239,23 +245,38 @@ const LeaderboardPage: React.FC = () => {
-
- Arena β - {beta.toFixed(2)} -
+ setBeta(parseFloat(event.target.value))} + min={0.05} + max={0.95} + step={0.01} + value={costWeight} + onChange={event => { + const value = parseFloat(event.target.value); + const clamped = Math.min(0.95, Math.max(0.05, value)); + setCostWeight(clamped); + }} className="beta-slider" />
- Accuracy-first - Cost-first + {(costWeight * 100).toFixed(0)}% Cost Weight + Accuracy Weight {(accuracyWeight * 100).toFixed(0)}% +
+
+ +
+ β = cost weight : accuracy weight = {beta.toFixed(2)} +
@@ -447,11 +468,11 @@ const LeaderboardPage: React.FC = () => { {/* Metrics Explanation */} -
+

Evaluation Metrics

{/* 1️⃣ Arena Score */} -
+

Arena Score

Weighted harmonic mean capturing the trade-off between accuracy and cost.