AI Beacon: A Zero-Backend, Browser-Only Transformer Visualization Teaching Tool

AI Beacon is an open-source educational platform designed to address the pain point of difficulty in understanding the Transformer architecture. Through browser-native interactive visualization, it allows users to intuitively grasp the working principles of Transformers without the need for a GPU, API key, or installation—running entirely locally. Its core philosophy is "Understanding comes from practice": users can input text, configure parameters, and watch the complete process from tokenization to sampling in real time.

Large language models have transformed our lives, but the internal mechanisms of Transformers remain a "black box" for most people. Traditional learning methods (papers, videos) are passive and make it hard to build an intuitive understanding, as internal operations are invisible matrix computations. AI Beacon (codenamed DEPTH) was created precisely to address this educational pain point.

AI Beacon includes four core modules:

1. Transformer Simulator: Displays the complete forward propagation process (tokenization → embedding → attention → layer normalization, etc.) with heatmaps and vector diagrams, supporting pause/step-by-step execution;
2. Training Process Simulator: 10-step interactive demonstration of LLM training (data collection → deployment);
3. Model Timeline and Benchmarks: LLM development timeline (filterable by release/family), performance comparison (metrics like MMLU);
4. Automation Clock: Timeline of AI's impact on industries (view penetration and employment predictions by field). It also offers dual-mode learning: Simple Mode (visual metaphors) for beginners, and Advanced Mode (mathematical formulas/matrices) for advanced users.

AI Beacon adopts a pure frontend architecture with a tech stack including Vite6+React19, TypeScript5+, Zustand5, Framer Motion11, Tailwind4, etc., and is deployed on Cloudflare Pages. The core is a custom TypeScript tensor computation engine, which implements operators like matrix multiplication and attention calculation from scratch. Although it limits model dimensions (d_model ≤64, tokens ≤12), it retains core mechanisms for easy teaching.

AI Beacon is suitable for multiple scenarios:

• Classroom teaching: Teachers can demonstrate in real time, and students can explore after class;
• Self-study for beginners: Those without background can build intuition through interaction;
• Interview preparation: Review Transformer details;
• Research assistance: Verify ideas or explain models to non-technical colleagues.

Since it runs in the browser, AI Beacon uses a "toy dimension" model and cannot display complex behaviors like the emergent capabilities of real large models. Future plans include: supporting more architectures (Mamba, RWKV), adding interactive tutorials, importing custom models, and community extension modules.

AI Beacon is an open-source project, and community contributions are welcome. Contributions must follow:

• Code patterns (named exports, design tokens, no 'any' type);
• Use functional components;
• Ensure accessibility (keyboard navigation, ARIA attributes);
• Run lint and tests before submission. The project provides PRD and technical specification documents to help new contributors get started quickly. Project address: https://github.com/Akashkunwar/AI-Beacon, Online demo: https://ai-beacon.pages.dev.