AnimatedLLM

Understand the mechanics of LLMs.

🎓 What is this?

An educational web application designed to teach the how large language models (LLMs) work.

👉 Try it yourself at animatedllm.github.io

Instead of static diagrams or abstract equations, it provides a dynamic, step-by-step visualizations of the Transformer architecture in action.

The application runs entirely in your browser using pre-computed data.

⌨️ Controls

Navigate the animation using your keyboard:

Key	Action
Space	Play / Pause animation
→ / ←	Step forward / backward
N	Skip to next token
G	Skip to end of generation
R	Reset animation
T	Toggle theme (Light/Dark)
L	Switch language
H	Show shortcuts help

🚀 Running locally

For running the app on your own device, you will need Node.js (version 20.9.0 or higher) and npm installed.

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details on our code of conduct, and the process for submitting pull requests to us.

📚 Cite Us

If you use AnimatedLLM in your research or teaching, please cite our paper: link TBA.