// Original SVG diagrams for Vraify. All hand-coded geometric primitives.
// HERO: Animated data-flow loop. Expert → Annotation → Model → Eval, with verification feedback.
function HeroFlow() {
const [tick, setTick] = React.useState(0);
React.useEffect(() => {
const id = setInterval(() => setTick(t => t + 1), 60);
return () => clearInterval(id);
}, []);
// Layout: 4 nodes around a verification core
const nodes = [
{ id: "expert", x: 90, y: 220, label: "EXPERT", sub: "PhD · MD · JD" },
{ id: "annot", x: 360, y: 90, label: "ANNOTATION", sub: "spec → label" },
{ id: "model", x: 630, y: 220, label: "MODEL", sub: "SFT · RLHF · DPO" },
{ id: "eval", x: 360, y: 380, label: "EVALUATION", sub: "verifier · judge" },
];
const core = { x: 360, y: 235 };
// packets traveling along the perimeter loop
const perim = [
{ from: nodes[0], to: nodes[1] },
{ from: nodes[1], to: nodes[2] },
{ from: nodes[2], to: nodes[3] },
{ from: nodes[3], to: nodes[0] },
];
function pointOn(seg, t) {
return { x: seg.from.x + (seg.to.x - seg.from.x) * t, y: seg.from.y + (seg.to.y - seg.from.y) * t };
}
const packets = perim.flatMap((seg, i) => {
return [0, 0.33, 0.66].map((off, j) => {
const t = ((tick / 80) + off + i * 0.07) % 1;
const p = pointOn(seg, t);
return { ...p, key: `${i}-${j}`, t };
});
});
// pulsing verification "spokes" from each node to core
const spokeOpacity = (i) => 0.18 + 0.18 * Math.sin((tick / 16) + i);
return (
);
}
// VETTING FUNNEL: progressive narrowing
function VettingFunnel() {
const stages = [
{ label: "Applicants", w: 100 },
{ label: "Profile screen", w: 78 },
{ label: "AI interview", w: 56 },
{ label: "Calibration task", w: 38 },
{ label: "Active network", w: 24 },
];
return (
);
}
// QA pipeline diagram
function QAPipeline() {
const stages = ["INGEST", "TASK", "EXPERT", "REVIEW", "JUDGE", "GOLD", "DELIVER"];
return (
);
}
// RL environment diagram: a Docker-wrapped app with reward ports
function RLEnvDiagram() {
return (
);
}
Object.assign(window, { HeroFlow, VettingFunnel, QAPipeline, RLEnvDiagram });