// Hero centerpiece variants for the F1 StratLab landing page const { useState, useEffect, useRef } = React; // ============================================================== // VARIANT A — System architecture diagram (static, informative) // A clean one-glance map of the whole pipeline: inputs → 6 agents // → orchestrator → strategy output. No animation, no car — just // the system laid out. // ============================================================== function AgentGraphViz() { const W = 1120, H = 520; // Three columns: inputs, agents, output const inputs = [ { id: 'telem', label: 'Telemetry', sub: '14 MB/s · 1.2M pts', y: 88 }, { id: 'tires', label: 'Tire model', sub: '8 compounds · wear', y: 158 }, { id: 'radio', label: 'Team radio', sub: 'Whisper · NLP', y: 228 }, { id: 'race', label: 'Race control', sub: 'Flags · pit · SC', y: 298 }, { id: 'weather', label: 'Weather', sub: 'Track · rain prob', y: 368 }, { id: 'rules', label: 'FIA rules', sub: 'RAG · regulations', y: 438 }, ]; const agents = [ { id: 'pace', label: 'Pace', out: 'Lap time prediction', color: '#a29bfe', y: 108 }, { id: 'tire', label: 'Tire degradation', out: 'Stint length limit', color: '#ff5a3f', y: 178 }, { id: 'race', label: 'Race strategy', out: 'Optimal pit window', color: '#ffbd33', y: 248 }, { id: 'pit', label: 'Pit call', out: 'Box / stay recommendation', color: '#3385ff', y: 318 }, { id: 'radio', label: 'Radio intent', out: 'Driver state · request', color: '#43d67a', y: 388 }, { id: 'rules', label: 'Rules lookup', out: 'Regulation check · RAG', color: '#b58cff', y: 458 }, ]; const inputX = 20; const inputW = 190; const agentX = 370; const agentW = 320; const orchX = 830; const orchW = 270; return (
{/* grid */} {/* column headers */} INPUTS SPECIALIST AGENTS · LANGGRAPH DECISION {/* hairline separators under headers */} {/* halo behind orchestrator */} {/* Input → Agent wires */} {inputs.map((inp, i) => { const a = agents[i]; const x1 = inputX + inputW; const y1 = inp.y + 24; const x2 = agentX; const y2 = a.y + 26; const mx = (x1 + x2) / 2; return ( ); })} {/* Agent → Orchestrator wires */} {agents.map((a) => { const x1 = agentX + agentW; const y1 = a.y + 26; const x2 = orchX + 12; const y2 = H/2 + 10; const mx = (x1 + x2) / 2; return ( ); })} {/* INPUT boxes */} {inputs.map((inp) => ( {inp.label} {inp.sub} ))} {/* AGENT boxes */} {agents.map((a) => ( {a.label} → {a.out} {/* structured output pill */} PYDANTIC conf 0.{80 + ((a.label.length * 3) % 18)} ))} {/* ORCHESTRATOR box — the big decision */} ORCHESTRATOR SUPERVISOR AGENT RECOMMENDATION PIT_NOW · MED Undercut window · laps 34–36 {/* confidence bar */} CONFIDENCE 0.87 p(win) +3.2% vs stay-out {/* Final output arrow — from orchestrator to "STRATEGY" label */} {/* Header chrome */}
system_architecture · f1 strategy manager
6 agents · 7 ML models · < 1 s end-to-end
); } // ============================================================== // VARIANT B — Live dashboard mockup (ticking lap chart + rec) // ============================================================== function DashboardViz() { const [lap, setLap] = useState(34); useEffect(() => { const i = setInterval(() => setLap(l => (l >= 48 ? 34 : l + 1)), 900); return () => clearInterval(i); }, []); // synthetic lap time data with a stint change at lap 22 and 38 const laps = Array.from({ length: lap }, (_, i) => { const n = i + 1; // base + tire age effect let t = 87.2; if (n <= 21) t += (n - 1) * 0.08; else if (n <= 37) t += 0.3 + (n - 22) * 0.07; else t += 0.2 + (n - 38) * 0.05; t += Math.sin(n * 0.7) * 0.15 + (i === lap - 1 ? 0 : 0); return { lap: n, time: t, compound: n <= 21 ? 'soft' : n <= 37 ? 'medium' : 'hard' }; }); const W = 1120, H = 520; // layout: 3 columns return (
{/* chrome */}
f1-strat · Spain GP 2023 · #16 Leclerc
live
{/* chart */}
Lap time evolution
{laps[laps.length - 1]?.time.toFixed(3)}s
Lap
{lap}/66
SOFT · stint 1 MEDIUM · stint 2 HARD · stint 3
{/* right rail: live recommendation */}
Orchestrator · next lap
PERFORM_UNDERCUT conf 0.87
Pit lap 35 · target +1 position vs SAI
Medium @ 14 laps. Gap 1.8s, predicted pit delta +19.3s. Clean air on out-lap.
Radio · last 3 laps
); } function LapChart({ laps }) { const W = 680, H = 220; const pad = { l: 36, r: 16, t: 10, b: 26 }; const min = 86.5, max = 90.5; const xs = (i) => pad.l + (i / 65) * (W - pad.l - pad.r); const ys = (t) => pad.t + (1 - (t - min) / (max - min)) * (H - pad.t - pad.b); const compoundColor = { soft: '#ff2d3a', medium: '#ffcf2d', hard: '#e6e6e6' }; // build segments by compound const segs = []; let cur = null; laps.forEach(l => { if (!cur || cur.compound !== l.compound) { cur = { compound: l.compound, points: [] }; segs.push(cur); } cur.points.push(l); }); return ( {/* gridlines */} {[0, 0.25, 0.5, 0.75, 1].map((p, i) => ( ))} {/* y labels */} {[86.5, 88, 89.5].map((v, i) => ( {v.toFixed(1)} ))} {/* x labels */} {[1, 20, 40, 60].map(l => ( {l} ))} {/* stint divider vertical lines */} {[21, 37].map(lap => laps.length >= lap && ( ))} {/* data lines per segment */} {segs.map((s, i) => { if (s.points.length < 2) return null; const d = s.points.map((p, j) => { const x = xs(p.lap - 1), y = ys(p.time); return `${j === 0 ? 'M' : 'L'}${x},${y}`; }).join(' '); return ( ); })} {/* latest dot */} {laps.length > 0 && ( )} ); } function MiniStat({ label, value, unit, trend }) { const arrow = trend === 'up' ? '▲' : trend === 'down' ? '▼' : '─'; const color = trend === 'up' ? '#ff5733' : trend === 'down' ? '#43ff64' : 'rgba(255,255,255,0.4)'; return (
{label} {value}{unit} {arrow}
); } function RadioMessage({ speaker, text, sentiment, lap }) { const color = sentiment === 'negative' ? '#ff5733' : sentiment === 'positive' ? '#43ff64' : '#a29bfe'; return (
L{lap} · {speaker}{sentiment}
"{text}"
); } // ============================================================== // VARIANT C — Cinematic (banner image + overlay) // ============================================================== function CinematicViz() { return (
F1 StratLab
● replay · 2023 · Spain
lap 34 / 66 · SC probability 0.18
); } function InlineStat({ k, label }) { return (
{k}
{label}
); } Object.assign(window, { AgentGraphViz, DashboardViz, CinematicViz });