sergiopaniego HF Staff
Publish the deck source under source/ so the next deck can start from it
3bc016b verified | 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> | |
| ); | |
| } | |