File size: 2,713 Bytes
3bc016b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | import { motion } from "framer-motion";
import { useTheme } from "../ThemeContext";
import { MONO } from "../theme";
import { SlideShell } from "../components/SlideShell";
// Comments sit on their own column, so they are kept short enough never to wrap:
// a wrapped comment pushes its code line out of alignment with the rest.
const LINES: [string, string][] = [
["env = HarborEnv.from_hub(", ""],
[' "FineEnvs/smoldataenv-multi-harness-harbor",', "tasks and sandboxes"],
[" harness=random.choice(HARNESSES),", "picked per rollout"],
[")", ""],
["", ""],
["worker = HarnessRolloutWorker(", ""],
[" harness_session_factory=env.session_factory,", ""],
[" harness_adapter=None,", "the agent owns its loop"],
[" rollout_reward_fn=reward,", "correctness and tool calls"],
[")", ""],
["", ""],
["AsyncGRPOTrainer(model=..., rollout_worker=worker).train()", ""],
];
export function CodeSlide() {
const { T } = useTheme();
return (
<SlideShell kicker="How it works" title="In code" titleSize={42}>
<div style={{ position: "absolute", top: 172, left: 96, right: 96 }}>
<div
style={{
padding: "30px 28px",
borderRadius: 14,
background: T.bgRaised,
border: `1px solid ${T.border}`,
}}
>
{LINES.map(([code, note], i) => (
<motion.div
key={i}
initial={{ opacity: 0, x: -8 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.1 + i * 0.045 }}
style={{
display: "grid",
gridTemplateColumns: "1fr 250px",
gap: 18,
fontFamily: MONO,
fontSize: 18,
lineHeight: code === "" ? 1.0 : 1.9,
minHeight: code === "" ? 12 : undefined,
}}
>
<span
style={{
color: note ? T.white : T.textMuted,
whiteSpace: "pre",
}}
>
{code}
</span>
<span style={{ color: T.emerald, fontSize: 14, whiteSpace: "nowrap" }}>
{note && `# ${note}`}
</span>
</motion.div>
))}
</div>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.85 }}
style={{ fontSize: 24, color: T.text, marginTop: 34, textAlign: "center" }}
>
Swapping the harness is{" "}
<span style={{ color: T.emerald, fontWeight: 700 }}>one argument</span>.
</motion.div>
</div>
</SlideShell>
);
}
|