1 line
4.2 KiB
JSON
1 line
4.2 KiB
JSON
{"repo": "abhisheksharma55/llm-illustration", "files": {"README.md": {"ee0e4f043d42f2ee76c5eadc1dc89b19230e8df9": {"t": 1785674337.1682358, "n": 3885, "h": "c12fc217df35381f", "c": "# LLM Neural Visualizer\n\nA real-time 3D visualization of neural network activity as an LLM generates tokens. Watch lightning-like pulses chain through a sphere of interconnected neurons while chatting with an AI.\n\nBuilt with Next.js, Three.js, and any OpenAI-compatible API.\n\n\n\n## Features\n\n- **3D Neural Sphere** — 250 nodes arranged in a sphere with dense interconnections, labeled with real ML/transformer terminology (`attn_0`, `FFN`, `softmax`, `W_q`, `KV_cache`, etc.)\n- **Lightning Chain Animation** — when the LLM streams tokens, lightning bolts chain through connected nodes end-to-end, starting white-hot and fading to red\n- **Split Layout** — chat interface on the left, live neural visualization on the right\n- **Any LLM Provider** — works with any OpenAI-compatible API (OpenRouter, Groq, OpenAI, Ollama, etc.)\n- **Streaming** — real-time token-by-token streaming with Server-Sent Events\n\n## Getting Started\n\n### Prerequisites\n\n- Node.js 18+\n- An API key from any OpenAI-compatible provider\n\n### Setup\n\n1. Clone the repository:\n\n```bash\ngit clone https://github.com/AbhishekSharma55/llm-illustration.git\ncd llm-illustration\n```\n\n2. Install dependencies:\n\n```bash\nnpm install\n```\n\n3. Create your environment file:\n\n```bash\ncp .env.example .env.local\n```\n\n4. Edit `.env.local` with your API credentials:\n\n```env\n# Any OpenAI-compatible API provider works (OpenRouter, Groq, OpenAI, etc.)\nLLM_API_KEY=your-api-key-here\nLLM_BASE_URL=https://openrouter.ai/api/v1\nLLM_MODEL=google/gemini-2.0-flash-001\n```\n\n5. Start the dev server:\n\n```bash\nnpm run dev\n```\n\n6. Open [http://localhost:3000](http://localhost:3000) and send a message!\n\n### Example Configurations\n\n**OpenRouter:**\n```env\nLLM_API_KEY=sk-or-v1-...\nLLM_BASE_URL=https://openrouter.ai/api/v1\nLLM_MODEL=google/gemini-2.0-flash-001\n```\n\n**Groq:**\n```env\nLLM_API_KEY=gsk_...\nLLM_BASE_URL=https://api.groq.com/openai/v1\nLLM_MODEL=llama-3.3-70b-versatile\n```\n\n**OpenAI:**\n```env\nLLM_API_KEY=sk-...\nLLM_BASE_URL=https://api.openai.com/v1\nLLM_MODEL=gpt-4o-mini\n```\n\n**Ollama (local):**\n```env\nLLM_API_KEY=ollama\nLLM_BASE_URL=http://localhost:11434/v1\nLLM_MODEL=llama3.2\n```\n\n## Tech Stack\n\n- **Framework:** [Next.js](https://nextjs.org/) 16 (App Router)\n- **3D Rendering:** [Three.js](https://threejs.org/)\n- **Styling:** [Tailwind CSS](https://tailwindcss.com/) 4\n- **Language:** TypeScript\n- **API:** Any OpenAI-compatible chat completions endpoint with streaming\n\n## How It Works\n\n1. **Sphere Generation** — 250 nodes are distributed on a sphere using fibonacci spiral with subtle randomness (90% surface, 5% interior, 5% outlier) for an organic look\n2. **Connection Graph** — nodes within a distance threshold are connected, forming a dense neural network mesh\n3. **Token Streaming** — chat messages are sent to the LLM via a streaming API route, tokens are forwarded as Server-Sent Events\n4. **Lightning Animation** — each token triggers 1-2 chain paths that hop through 4-7 connected nodes sequentially. Each connection starts white-hot and fades to red, creating a lightning bolt effect that snakes through the network\n\n## Project Structure\n\n```\napp/\n├── api/chat/route.ts # Streaming LLM proxy endpoint\n├── components/\n│ ├── Chat.tsx # Chat interface component\n│ └── NeuralSphere.tsx # Three.js 3D visualization\n├── globals.css # Global styles\n├── layout.tsx # Root layout\n└── page.tsx # Main page (split layout)\n```\n\n## Deploy\n\n[](https://vercel.com/new/clone?repository-url=https://github.com/AbhishekSharma55/llm-illustration&env=LLM_API_KEY,LLM_BASE_URL,LLM_MODEL)\n\nSet the three environment variables (`LLM_API_KEY`, `LLM_BASE_URL`, `LLM_MODEL`) in your Vercel project settings.\n\n## License\n\n[MIT](LICENSE)\n"}}}} |