{tokens.length === 0 ?
(no readout at this step) :
tokens.map((tk, i) => {
const isChanged = tk.changed;
// Stagger by changed-token rank, not raw position. Stable
// words do not consume time, but changed words still reveal
// in their left-to-right order in the current text.
const delay = `${Math.max(0, tk.changeRank) * flashTiming.staggerMs}ms`;
const cls = isChanged ? "tok-real changed" : "tok-real stable";
const key = isChanged
? `${revisionKey}-changed-${i}-${tk.word}`
: `stable-${i}-${tk.word}`;
return (
{tk.word}
{tk.sep && {tk.sep}}
);
})
}
);
}
// Visual ribbon showing all 32 step slots with current highlighted
function StepRibbon({ stepTotal, current, accent, schedule, oneShot }) {
// For MeanFlow (oneShot): the ribbon is a single solver step,
// so we render ONE wide bar that transitions from empty → filled
// when `current` reaches 1. No 32 slots, no progressive shading.
if (oneShot) {
const active = current >= 1;
return (
);
}
// =============================================================
// Main RealSamples component
// =============================================================
function RealSamples() {
const ctx = useTrajectoryCtx();
const data = ctx?.data;
const sampleIdx = ctx?.sampleIdx ?? 0;
const stepIdx = ctx?.stepIdx ?? 0;
const setSampleIdx = ctx?.setSampleIdx;
const setStepIdx = ctx?.setStepIdx;
const [playing, setPlaying] = useState(true);
const [stepDurationMs] = useState(200); // fixed export pace; shared by both panels
// Which decoded state to show on the Flow side:
// "x0" — x̂₀: the model's current clean-latent estimate
// "zt" — z_t: the noisy solver state at that step
// MF side is unaffected (only the final sample exists).
const [view] = useState("zt");
// AR-decoding flash animation knobs — exposed as live sliders so we can
// dial in the right visual rhythm before locking the defaults.
const [flashDurMs] = useState(260);
const [flashStaggerMs] = useState(4);
const rafRef = useRef(null);
const startRef = useRef(0);
// Autoplay step animation — ticks at exactly stepDurationMs per
// solver step, so wall-clock time is shared between Flow and MF.
useEffect(() => {
if (!playing || !data) return;
let loopTimer = null;
function step(now) {
if (!startRef.current) startRef.current = now;
const elapsed = now - startRef.current;
const total = data.metadata.jit_num_steps;
const s = Math.min(total, Math.floor(elapsed / stepDurationMs));
setStepIdx(s);
if (s < total) {
rafRef.current = requestAnimationFrame(step);
} else {
setPlaying(false);
loopTimer = setTimeout(() => {
startRef.current = 0;
setStepIdx(0);
setPlaying(true);
}, 1200);
}
}
rafRef.current = requestAnimationFrame(step);
return () => {
cancelAnimationFrame(rafRef.current);
if (loopTimer) clearTimeout(loopTimer);
startRef.current = 0;
};
}, [playing, stepDurationMs, data]);
if (!ctx || !data) return
Loading real samples…
;
const total = data.metadata.jit_num_steps;
const schedule = data.metadata.schedule; // length total+1
const sample = data.samples[sampleIdx];
// Flow side: respect the view toggle. At step 32 only z_t is
// available (x0_pred is null/empty); we transparently fall back
// so the panel never goes blank at the endpoint.
const tCurrent = stepIdx >= 1 ? schedule?.[stepIdx] ?? 0 : 1;
const trCurr = stepIdx >= 1 ? sample.trajectory[stepIdx - 1] : null;
const trPrev = stepIdx > 1 ? sample.trajectory[stepIdx - 2] : null;
function pick(tr) {
if (!tr) return "";
if (view === "x0") return tr.x0_pred || tr.z_t || "";
return tr.z_t || tr.x0_pred || "";
}
const flowText = pick(trCurr);
const prevFlowText = pick(trPrev);
// MeanFlow side: real one-shot sample. Reveals the moment Flow
// crosses step 1 — same wall-clock instant — so the speed gap is
// immediately visible. Stays committed for the rest of the run.
const meanText = stepIdx >= 1 ? sample.mf_1step || "" : "";
const meanCommitted = stepIdx >= 1 ? 1 : 0;
return (
Decoded text trajectory
Left: a 32-step flow trajectory decoded from the intermediate z_t states. Right: the
corresponding one-step MeanFlow sample. The left-to-right flash marks words that changed
from the previous latent state.