Eigenvue: A One-Stop Interactive Visualization Platform for Dissecting Deep Learning, Generative AI, and Quantum Algorithms

Eigenvue is an open-source interactive algorithm visualization platform designed to address the pain points of existing tools—being limited to a single domain and lacking a unified visual language. It covers 22 algorithms across four domains: classical algorithms, deep learning, generative AI, and quantum computing. Core features include a unified interaction paradigm, browser/Python cross-end support, and real code implementation. The platform helps users build spatial and temporal intuition about algorithm operation, lowers learning barriers, and is suitable for education, self-study, and research scenarios.

Understanding algorithms requires spatial and temporal intuition, which textbooks and static charts struggle to provide. Most visualization tools on the market are limited to a single domain (e.g., sorting, attention mechanisms, or quantum circuits) and lack a unified visual language to dissect algorithm operation processes across domains. The Eigenvue project was born to address this pain point.

Eigenvue is an open-source interactive algorithm dissection platform that integrates algorithms from four domains into a unified interaction model. Its core concepts are three key words:

• Unified: The four domains share the same interaction paradigm and visual language, covering 22 algorithms (from bubble sort to quantum teleportation);
• Cross-end: Provides a browser application (for instant online exploration) and Python/Node.js packages (supporting Jupyter Notebook and research scripts);
• Real code: Algorithms are defined as TypeScript and Python functions, which are testable, debuggable, and contributor-friendly.

The platform includes 22 algorithm visualizations distributed across four domains:

• Classical algorithms: Binary search, bubble sort, quick sort, merge sort, BFS, DFS, Dijkstra's algorithm (7 in total);
• Deep learning: Perceptron, feedforward network, backpropagation, 2D convolution, gradient descent (5 in total);
• Generative AI: Tokenization (BPE), word embedding, self-attention, multi-head attention, Transformer block (5 in total);
• Quantum computing: Qubit Bloch sphere, quantum gates, superposition and measurement, Grover's search, quantum teleportation (5 in total).

Interaction revolves around the core of "step-by-step playback":

• Step control: Play/pause/forward/backward, with synchronized visualization changes, code line highlighting, and natural language explanations;
• Code synchronization: Supports switching between pseudocode, Python, and JavaScript;
• Custom input: Users can provide arrays/graphs/parameters to observe how the algorithm adapts to different data;
• Educational modules: Key concepts, common pitfalls, quizzes, and external resources;
• Shareable URL: Encodes the visualization state for easy teaching and sharing.

Technical Architecture: Three-layer design

• Generator layer: TypeScript/Python functions generate step sequences;
• Step format: A universal JSON contract connects the generator and renderer;
• Rendering layer: Canvas 2D implements layout, animation, and playback control. Usage Methods:
• Online: Visit eigenvue.web.app for direct experience;
• Programming: Install via pip for Python, npm for Node.js, supporting Jupyter embedding and custom integration.

Educational Scenarios: Explaining classical algorithms in university classes, interpreting Transformers in online courses, and embedding shareable URLs into courseware; Self-learners/Researchers: Integrating Python into research workflows, debugging models by comparing standard algorithm behaviors; quantum computing visualization helps understand abstract concepts; Core value: Lowering learning barriers and building intuition about algorithm operation.

Eigenvue covers algorithm visualization across four domains with a unified platform, and its current 22 algorithms provide substantial coverage. Its clear architecture facilitates community contributions. It does not replace mathematical understanding but helps build key intuition. Project address: https://github.com/eigenvue/eigenvue.