import { useState, useRef, useEffect } from "react"; import { createModel, type ModelState } from "./engine/model"; import TokenizerPage from "./pages/TokenizerPage"; import EmbeddingsPage from "./pages/EmbeddingsPage"; import ForwardPassPage from "./pages/ForwardPassPage"; import TrainingPage from "./pages/TrainingPage"; import InferencePage from "./pages/InferencePage"; const PAGES = [ { id: "tokenizer", num: 1, label: "Tokenizer" }, { id: "embeddings", num: 2, label: "Embeddings (wte/wpe)" }, { id: "forward", num: 3, label: "Forward Pass" }, { id: "training", num: 4, label: "Training" }, { id: "inference", num: 5, label: "Inference" }, ]; function useTheme() { const [theme, setTheme] = useState<"dark" | "light">(() => { const saved = localStorage.getItem("microgpt-theme"); return saved === "light" ? "light" : "dark"; }); useEffect(() => { document.documentElement.setAttribute("data-theme", theme); localStorage.setItem("microgpt-theme", theme); }, [theme]); const toggle = () => setTheme((t) => (t === "dark" ? "light" : "dark")); return { theme, toggle }; } export default function App() { const [page, setPage] = useState("tokenizer"); const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const modelRef = useRef(createModel()); const [, forceUpdate] = useState(0); const { theme, toggle: toggleTheme } = useTheme(); const rerender = () => forceUpdate((n) => n + 1); const resetModel = () => { modelRef.current = createModel(); rerender(); }; const handlePageChange = (pageId: string) => { setPage(pageId); setMobileMenuOpen(false); // Close menu on mobile after selecting a page }; return (

{/* Mobile menu button */}

MicroGPT

Visual Explorer — @karpathy

📖 Read Official Guide

Built with AI. May contain inaccuracies or bugs. Based on{" "} Karpathy's microgpt.py .

{/* Mobile overlay - closes menu when tapped */} {mobileMenuOpen && (

setMobileMenuOpen(false)} /> )}

{page === "tokenizer" && } {page === "embeddings" && } {page === "forward" && } {page === "training" && ( )} {page === "inference" && }

); }

Files

Loading code snippet…