// Act 7: Speedup stack — cumulative throughput as four vertical bars.
function Act7_Speedup() {
const { localTime: lt } = useSprite();
const bars = [
{ name: 'Python', sub: 'single-thread', visits: 48, mult: 1.0 },
{ name: 'C++', sub: '+ python callback for inference', visits: 124, mult: 2.6 },
{ name: 'game-parallel', sub: 'batched inference across 8x games', visits: 303, mult: 6.3 },
{ name: 'leaf-parallel', sub: 'batched inference across 8x games, x8 leaves per game tree', visits: 933, mult: 19.4 },
];
const TOTAL_MULT = bars[bars.length - 1].mult;
const AXIS_MAX = 20;
// Plot geometry — pushed down so the y-axis labels don't collide with
// the (now multi-line) subtitle text.
const PLOT_LEFT = 240;
const PLOT_RIGHT = 1200;
const PLOT_TOP = 290;
const PLOT_BOTTOM = 510;
const PLOT_H = PLOT_BOTTOM - PLOT_TOP;
const BAR_W = 110;
const N = bars.length;
const slot = (PLOT_RIGHT - PLOT_LEFT) / N;
const xCenter = (i) => PLOT_LEFT + slot * (i + 0.5);
const xBar = (i) => xCenter(i) - BAR_W / 2;
const yForMult = (m) => PLOT_BOTTOM - (Math.max(0, m) / AXIS_MAX) * PLOT_H;
// Reveal timing
const BAR_START = [1.0, 1.9, 2.8, 3.9];
const BAR_LEN = 0.9;
const titleOp = clamp(lt / 0.5, 0, 1);
const subOp = clamp((lt - 0.4) / 0.6, 0, 1);
const axisOp = clamp((lt - 0.7) / 0.6, 0, 1);
const gridMarks = [0, 5, 10, 15, 20];
return (
<>
In RL, learning speed is often a function of how many steps/second you can collect environment interactions. Go is already an easy game to simulate to begin with, but we can further speed things up by implementing MCTS in C++ (avoids GIL bottlenecks when multi-threading), batching NN inference between parallel games, and multi-threading multiple MCTS simulations in parallel.
{/* SVG: gridlines, bars, multiplier above each bar */}
{/* Gridlines + y-axis labels */}
{gridMarks.map(g => {
const y = yForMult(g);
const isBase = g === 0;
return (
{g}×
);
})}
{/* Bars + multiplier label */}
{bars.map((b, i) => {
const start = BAR_START[i];
const p = clamp((lt - start) / BAR_LEN, 0, 1);
const grow = Easing.easeOutCubic(p);
const fullH = (b.mult / AXIS_MAX) * PLOT_H;
const h = Math.max(p > 0 ? 3 : 0, fullH * grow);
const x = xBar(i);
const yTop = PLOT_BOTTOM - h;
const cx = x + BAR_W / 2;
const fill = i === 3 ? 'var(--accent-mcts)'
: i === 2 ? 'var(--accent-mcts)'
: i === 1 ? 'var(--ink)'
: 'var(--ink-soft)';
const fillOp = i === 0 ? 0.6 : i === 2 ? 0.6 : 1;
const labelOp = clamp((lt - start - 0.05) / 0.4, 0, 1);
return (
{p > 0 && (
{b.mult.toFixed(1)}×
);
})}
{/* Bar captions — HTML overlay so the long sub-strings can wrap. */}
{bars.map((b, i) => {
const start = BAR_START[i];
const labelOp = clamp((lt - start - 0.05) / 0.4, 0, 1);
const labelW = slot - 16; // slot minus a small gutter on each side
const cx = xCenter(i);
return (
{b.name}
{b.sub}
{b.visits.toLocaleString()} visits/s
);
})}
);
}
Object.assign(window, { Act7_Speedup });