Repository navigation
Getting Started Quick Start
Once TokenPrint is installed, you need to boot both the frontend and backend servers to start using the application. This guide walks you through starting the servers and verifying their health.
The frontend UI requires the backend API to fetch architecture metadata and to stream inference traces. If they aren't booted correctly, or are running on the wrong ports, the application will display connection errors.
TokenPrint defaults to local development ports:
-
Backend:
http://localhost:8000(uvicorn) -
Frontend:
http://localhost:3000(next dev)
The frontend makes CORS-restricted calls directly to the backend port.
You will need two separate terminal windows.
The backend will automatically download the default Qwen model (Qwen/Qwen2.5-0.5B-Instruct) from HuggingFace on its first run. This requires an internet connection and will download roughly 1GB of data.
cd backend
source .venv/bin/activate
# Start the FastAPI server
python -m uvicorn app.main:app --app-dir . --port 8000Wait until you see Application startup complete.
cd frontend
# Start the Next.js development server
npm run devOpen your web browser and navigate to: http://localhost:3000
You should see the TokenPrint UI. Look at the Top Bar; it should display the model status as "Ready" and indicate the active device (e.g., mps, cuda, or cpu).
Warning If the UI shows a "Disconnected" error, verify that the backend is running on exactly port
8000and that your browser is allowing local CORS requests.
sequenceDiagram
participant User
participant Browser
participant Backend
User->>Backend: Boot Uvicorn (Port 8000)
Backend-->>Backend: Load Model Weights (Takes ~5-10s)
User->>Browser: Boot Next.js (Port 3000)
Browser->>Backend: GET /health
Backend-->>Browser: {status: "ok", model_loaded: true}
Browser->>User: Renders UI
| Previous | Home | Next |
|---|---|---|
| Installation | Home | Running your first visualization |
TokenPrint Wiki | Home | Getting Started | User Guide | Concepts | Architecture | API | GitHub
TokenPrint is an interactive 3D visualization platform for exploring transformer architectures, tensors, and real-time LLM inference.
- User Guide
- Architecture Explorer
- Live Inference
- Tensor Inspector
- Camera Controls
- HUD
- Timeline
- Scene Navigation
- Transformer Concepts
- Tokenization
- Embeddings
- Positional Encoding
- RoPE
- Multi-Head Attention
- KV Cache
- LayerNorm
- Feed Forward Network
- Residual Connections
- Logits
- Softmax
- Sampling
- Autoregressive Generation
- Visualization System
- Scene Graph
- Geometry
- Materials
- Animation System
- Color Mapping
- Camera System
- Interaction Model
- Architecture
- Overall Architecture
- Frontend
- Backend
- WebSocket Protocol
- Data Pipeline
- Renderer
- Event System