Next-Generation Interactive Algorithm & Modern AI Visualizer A synchronized lockstep trace debugger bringing algorithms and AI internals to life.
- Lockstep 3-Pane Debugger: Synchronized code execution highlighting, dynamic visual stage, and real-time execution diagnostics with variable mutation tracking.
-
Dual Visual Themes:
- 🎨 Sketch Hand-Drawn Mode: Organic hand-drawn shapes powered by Rough.js, graph-paper backgrounds, and Caveat typography.
- 💎 Clean Pro Studio Mode: High-contrast dark blueprint layout (
#090d16), glowing SVG elements, neon pointer pills, and JetBrains Mono code rendering.
-
Modern AI & Machine Learning Modules:
- Classical Machine Learning: Linear Regression & Gradient Descent, Logistic Regression & Sigmoid Decision Boundary, Confusion Matrix & Classification Metrics (TP, FP, FN, TN, Accuracy Paradox, Precision-Recall trade-off across thresholds).
- Deep Learning & Neural Networks: Artificial Neuron (Perceptron vs. Modern Sigmoid/ReLU), Multi-Layer Perceptron (MLP) forward pass, CNN 2D Feature Map Convolution, Interactive MNIST 99.4% CNN digit recognition.
- Transformers & Modern LLMs: Transformer Self-Attention Head (Query/Key causal context window, soft-attention matrix, and Softmax Next-Token Probability distribution).
- Mobile "Story Mode": Resolves traditional desktop canvas scaling flaws by offering a dedicated vertical swipe/step card view for smartphones.
- Socratic AI Step-Explainer: Context-aware breakdowns answering why state mutated and providing counterfactual algorithmic analysis.
-
Full Playback Controls: Play/Pause, single-step navigation, scrubber progress bar, speed toggling (
$0.5\times$ to$2\times$ ), and full keyboard shortcuts (Space,←,→,Home,End,R). - Bilingual Support (Tiếng Việt & English): Complete localization across all lessons, mathematical theory, step execution logs, and interface controls.
- Bun (or Node.js 18+ / pnpm)
# Clone the repository
git clone https://github.com/khangbuinoAI/tracecraft.git
cd tracecraft
# Install dependencies
bun install
# Start local development server
bun run devOpen http://localhost:5173 in your browser.
bun run build
bun run preview- Framework: React 19 + TypeScript + Vite
- Styling: Tailwind CSS + PostCSS
- Visualization: Rough.js + Dynamic SVG & Canvas
- Icons: Lucide React
- Deployment: GitHub Pages & GitHub Actions CI/CD
MIT