Spaces:
Paused
Paused
| import Typography from '@mui/material/Typography'; | |
| import { SectionCard, fmtInt } from './shared'; | |
| interface FlywheelCounts { | |
| verified: number; | |
| datasets: number; | |
| activeJobs: number; | |
| models: number; | |
| evaluated: number; | |
| } | |
| const NODES = [ | |
| { key: 'verified', label: 'Verified Data' }, | |
| { key: 'datasets', label: 'Training Dataset' }, | |
| { key: 'activeJobs', label: 'Train' }, | |
| { key: 'models', label: 'New Model' }, | |
| { key: 'evaluated', label: 'New Evaluations' }, | |
| ] as const; | |
| export default function TrainingFlywheel({ counts }: { counts: FlywheelCounts }) { | |
| const W = 520; | |
| const H = 380; | |
| const cx = W / 2; | |
| const cy = H / 2; | |
| const R = 135; | |
| const nodeR = 44; | |
| const positions = NODES.map((_, i) => { | |
| const angle = -Math.PI / 2 + (i * 2 * Math.PI) / NODES.length; | |
| return { x: cx + R * Math.cos(angle), y: cy + R * Math.sin(angle) }; | |
| }); | |
| return ( | |
| <SectionCard title="Training Flywheel — the data engine loop"> | |
| <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ maxWidth: 560 }}> | |
| <defs> | |
| <marker id="fly-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"> | |
| <path d="M 0 0 L 10 5 L 0 10 z" fill="#4fc3f7" /> | |
| </marker> | |
| </defs> | |
| {/* edges around the circle */} | |
| {positions.map((p, i) => { | |
| const next = positions[(i + 1) % positions.length]!; | |
| const dx = next.x - p.x; | |
| const dy = next.y - p.y; | |
| const dist = Math.hypot(dx, dy) || 1; | |
| const startX = p.x + (dx / dist) * (nodeR + 4); | |
| const startY = p.y + (dy / dist) * (nodeR + 4); | |
| const endX = next.x - (dx / dist) * (nodeR + 8); | |
| const endY = next.y - (dy / dist) * (nodeR + 8); | |
| // bow the edge outward for a circular feel | |
| const mx = (startX + endX) / 2 + ((startX + endX) / 2 - cx) * 0.22; | |
| const my = (startY + endY) / 2 + ((startY + endY) / 2 - cy) * 0.22; | |
| return ( | |
| <path | |
| key={i} | |
| d={`M ${startX} ${startY} Q ${mx} ${my} ${endX} ${endY}`} | |
| fill="none" | |
| stroke="#4fc3f7" | |
| strokeWidth={1.6} | |
| strokeOpacity={0.75} | |
| markerEnd="url(#fly-arrow)" | |
| /> | |
| ); | |
| })} | |
| {/* nodes */} | |
| {NODES.map((node, i) => { | |
| const p = positions[i]!; | |
| const value = counts[node.key]; | |
| return ( | |
| <g key={node.key}> | |
| <circle cx={p.x} cy={p.y} r={nodeR} fill="#12171d" stroke="#2c353e" strokeWidth={1.5} /> | |
| <text x={p.x} y={p.y - 6} textAnchor="middle" fill="#e6e9ec" fontSize={11} fontWeight={700}> | |
| {node.label.split(' ').map((word, j) => ( | |
| <tspan key={j} x={p.x} dy={j === 0 ? 0 : 12}> | |
| {word} | |
| </tspan> | |
| ))} | |
| </text> | |
| <text x={p.x} y={p.y + nodeR - 14} textAnchor="middle" fill="#4fc3f7" fontSize={13} fontWeight={800}> | |
| {fmtInt(value)} | |
| </text> | |
| </g> | |
| ); | |
| })} | |
| <text x={cx} y={cy - 4} textAnchor="middle" fill="#8a949e" fontSize={11}> | |
| verified labels feed | |
| </text> | |
| <text x={cx} y={cy + 10} textAnchor="middle" fill="#8a949e" fontSize={11}> | |
| better models feed better labels | |
| </text> | |
| </svg> | |
| <Typography variant="caption" sx={{ color: '#8a949e', display: 'block' }}> | |
| Only VERIFIED labels enter training datasets; every new model is evaluated (and regression-checked) before its | |
| outputs feed back into the loop. | |
| </Typography> | |
| </SectionCard> | |
| ); | |
| } | |