Skip to content

Commit c74bd8d

Browse files
nolancacheuxnolancacheux
committed
Revert "docs: add author section with portfolio link"
This reverts commit 309e246.
1 parent 309e246 commit c74bd8d

File tree

1 file changed

+354
-5
lines changed

1 file changed

+354
-5
lines changed

‎README.md‎

Lines changed: 354 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,357 @@
11
# AI Visualizer - Neural Network Architecture
22

3-
## Author
3+
<div align="center">
44

5-
**Nolan Cacheux** — AI & ML Engineer
6-
- Portfolio: [nolancacheux.com](https://nolancacheux.com)
7-
- GitHub: [@nolancacheux](https://github.com/nolancacheux)
8-
- LinkedIn: [nolancacheux](https://linkedin.com/in/nolancacheux)
5+
![Next.js](https://img.shields.io/badge/Next.js-14-black?style=for-the-badge&logo=next.js)
6+
![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue?style=for-the-badge&logo=typescript)
7+
![Three.js](https://img.shields.io/badge/Three.js-R164-black?style=for-the-badge&logo=three.js)
8+
![TailwindCSS](https://img.shields.io/badge/Tailwind-3.4-38B2AC?style=for-the-badge&logo=tailwind-css)
9+
![React](https://img.shields.io/badge/React-18-61DAFB?style=for-the-badge&logo=react)
10+
![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)
11+
12+
<h3>Interactive 3D Educational Platform for Understanding Deep Learning Architectures</h3>
13+
14+
<p>
15+
<strong>From Perceptrons to Transformers - Visualize, Learn, and Master Neural Networks</strong>
16+
</p>
17+
18+
[Live Demo](https://nolancacheux.github.io/AI-Visualizer-Neural-Network-Architecture/) | [Features](#features) | [Getting Started](#getting-started) | [Documentation](#documentation)
19+
20+
<br />
21+
22+
**Developed by [Nolan Cacheux](https://github.com/nolancacheux)**
23+
24+
<br />
25+
26+
<img src="./images/desktop-full.png" alt="AI Visualizer Preview - MLP Architecture" width="800" />
27+
28+
</div>
29+
30+
---
31+
32+
## Screenshots
33+
34+
<div align="center">
35+
36+
### Feature Panels
37+
38+
<p>
39+
<img src="./images/add-layer.png" alt="Add Layer Panel" width="280" />
40+
<img src="./images/control-panel.png" alt="Control Panel" width="280" />
41+
</p>
42+
43+
*Layer Builder (left) and Control Panel with Parameters/Code/Theory tabs (right)*
44+
45+
### Architecture Guide
46+
47+
<img src="./images/cnn-guide.png" alt="CNN Architecture Guide" width="800" />
48+
49+
*Interactive Architecture Guide with layer explanations and live examples*
50+
51+
</div>
52+
53+
---
54+
55+
## About The Project
56+
57+
**AI Visualizer** is a comprehensive, production-ready web application that demystifies neural network architectures through immersive 3D visualization and interactive learning experiences. Whether you're a student learning deep learning fundamentals or an engineer exploring architecture designs, this platform provides:
58+
59+
- **Visual Learning**: See how data flows through neural networks in real-time 3D
60+
- **Interactive Laboratory**: Build and experiment with different architectures
61+
- **Code Generation**: Watch TensorFlow/Keras code update as you modify networks
62+
- **Mathematical Depth**: Explore formulas with LaTeX rendering and step-by-step explanations
63+
64+
### Why This Project?
65+
66+
Traditional deep learning education relies heavily on static diagrams and abstract mathematics. AI Visualizer bridges this gap by providing:
67+
68+
1. **Spatial Understanding**: 3D visualization helps grasp network topology and data flow
69+
2. **Instant Feedback**: Changes reflect immediately in visualization and code
70+
3. **Complete Theory**: Comprehensive explanations with mathematical foundations
71+
4. **Real Examples**: Live demonstrations of AND/OR/XOR gates, MNIST, attention mechanisms
72+
73+
---
74+
75+
## Features
76+
77+
### 3D Neural Network Visualization
78+
79+
<table>
80+
<tr>
81+
<td width="50%">
82+
83+
**Real-Time Rendering**
84+
- Fully interactive 3D scene with orbit controls
85+
- Animated data flow through neurons
86+
- Gradient visualization for backpropagation
87+
- Dynamic layer scaling and positioning
88+
89+
</td>
90+
<td width="50%">
91+
92+
**Visual Feedback**
93+
- Color-coded layer types
94+
- Pulsing neurons showing activity
95+
- Connection lines with animated particles
96+
- Selection highlighting
97+
98+
</td>
99+
</tr>
100+
</table>
101+
102+
### Supported Architectures
103+
104+
| Architecture | Description | Use Cases |
105+
|-------------|-------------|-----------|
106+
| **Perceptron** | Single-layer linear classifier | AND/OR gates, linear separation |
107+
| **MLP** | Multi-layer feedforward network | XOR problem, classification |
108+
| **CNN** | Convolutional neural network | Image recognition, MNIST |
109+
| **RNN/LSTM** | Recurrent architectures | Sequence processing, NLP |
110+
| **Transformer** | Attention-based architecture | Translation, GPT-style models |
111+
| **GAN** | Generative adversarial network | Image generation |
112+
| **Autoencoder** | Encoder-decoder network | Compression, denoising |
113+
114+
### Architecture Builder
115+
116+
```
117+
Add layers dynamically:
118+
- Dense (Fully Connected)
119+
- Conv2D (Convolutional)
120+
- MaxPool2D (Pooling)
121+
- Flatten
122+
- Dropout (Regularization)
123+
- BatchNorm (Normalization)
124+
- LSTM (Recurrent)
125+
- Attention (Transformer)
126+
```
127+
128+
- **Drag-and-drop reordering** of layers
129+
- **Real-time parameter adjustment** (units, filters, activation)
130+
- **Layer info panels** with detailed explanations
131+
132+
### Live Code Generation
133+
134+
The right panel displays TensorFlow/Keras code that updates in real-time:
135+
136+
```python
137+
import tensorflow as tf
138+
from tensorflow.keras import layers, models
139+
140+
model = models.Sequential([
141+
layers.Input(shape=(2,)),
142+
layers.Dense(3, activation='relu'),
143+
layers.Dense(1, activation='sigmoid')
144+
])
145+
146+
model.compile(
147+
optimizer='adam',
148+
loss='binary_crossentropy',
149+
metrics=['accuracy']
150+
)
151+
```
152+
153+
### Mathematical Foundations
154+
155+
Every concept includes LaTeX-rendered formulas:
156+
157+
- **Activation Functions**: ReLU, Sigmoid, Softmax, Tanh, ELU
158+
- **Loss Functions**: Cross-Entropy, MSE, Binary Cross-Entropy
159+
- **Optimizers**: Adam, SGD, SGD with Momentum
160+
- **Backpropagation**: Complete gradient derivations
161+
162+
### Live Architecture Guide
163+
164+
Interactive overlay panel featuring:
165+
166+
- **Layer-by-layer explanations** with Input/Role/Output/Formula
167+
- **Visual demonstrations**: AND/OR/XOR decision boundaries with curved lines
168+
- **Step-by-step animations** showing forward pass
169+
- **Training process explanations**: Forward pass, Backpropagation, Training loop
170+
171+
---
172+
173+
## Tech Stack
174+
175+
| Technology | Version | Purpose |
176+
|------------|---------|---------|
177+
| **Next.js** | 14 | React framework with App Router |
178+
| **TypeScript** | 5.0 | Type-safe development |
179+
| **React Three Fiber** | 8.x | Declarative 3D graphics |
180+
| **Three.js + Drei** | R164 | 3D rendering engine and helpers |
181+
| **Zustand** | 4.x | Lightweight state management |
182+
| **Framer Motion** | 11.x | Smooth animations |
183+
| **KaTeX** | 0.16 | Mathematical typesetting |
184+
| **Tailwind CSS** | 3.4 | Utility-first CSS |
185+
186+
---
187+
188+
## Getting Started
189+
190+
### Prerequisites
191+
192+
- **Node.js** 18.0 or higher
193+
- **npm** or **yarn** package manager
194+
195+
### Installation
196+
197+
```bash
198+
# Clone the repository
199+
git clone https://github.com/nolancacheux/AI-Visualizer-Neural-Network-Architecture.git
200+
201+
# Navigate to project directory
202+
cd AI-Visualizer-Neural-Network-Architecture
203+
204+
# Install dependencies
205+
npm install
206+
207+
# Start development server
208+
npm run dev
209+
```
210+
211+
Open [http://localhost:3000](http://localhost:3000) in your browser.
212+
213+
### Production Build
214+
215+
```bash
216+
# Create optimized build
217+
npm run build
218+
219+
# Start production server
220+
npm start
221+
```
222+
223+
### Deploy to Vercel
224+
225+
```bash
226+
# Install Vercel CLI
227+
npm i -g vercel
228+
229+
# Deploy
230+
vercel --prod
231+
```
232+
233+
---
234+
235+
## Project Structure
236+
237+
```
238+
AI-Visualizer-Neural-Network-Architecture/
239+
├── src/
240+
│ ├── app/ # Next.js App Router
241+
│ │ ├── layout.tsx # Root layout with fonts
242+
│ │ ├── page.tsx # Main entry point
243+
│ │ └── globals.css # Global styles & CSS variables
244+
│ │
245+
│ ├── components/
246+
│ │ ├── 3d/ # Three.js components
247+
│ │ │ ├── NeuronNode.tsx # Neuron sphere visualization
248+
│ │ │ ├── NetworkConnection.tsx # Animated connections
249+
│ │ │ └── NetworkVisualization.tsx # Main 3D canvas
250+
│ │ │
251+
│ │ ├── ui/ # Interface components
252+
│ │ │ ├── LeftSidebar.tsx # Architecture & layer selector
253+
│ │ │ ├── RightPanel.tsx # Parameters, code, theory tabs
254+
│ │ │ ├── LiveExampleBar.tsx # Interactive architecture guide
255+
│ │ │ ├── CodeBlock.tsx # Syntax-highlighted code
256+
│ │ │ └── MathBlock.tsx # KaTeX math rendering
257+
│ │ │
258+
│ │ └── NeuralNetworkVisualizer.tsx # Main orchestrator
259+
│ │
260+
│ ├── data/
261+
│ │ └── curriculum.ts # Complete educational content
262+
│ │
263+
│ ├── engine/
264+
│ │ └── tensorflowSimulator.ts # TF calculation simulation
265+
│ │
266+
│ └── store/
267+
│ └── networkStore.ts # Zustand global state
268+
│
269+
├── public/ # Static assets
270+
├── package.json # Dependencies
271+
├── tailwind.config.js # Tailwind configuration
272+
├── tsconfig.json # TypeScript configuration
273+
└── next.config.js # Next.js configuration
274+
```
275+
276+
---
277+
278+
## Documentation
279+
280+
### Adding New Architectures
281+
282+
1. Define template in `src/data/curriculum.ts`:
283+
284+
```typescript
285+
export const architectureTemplates: ArchitectureTemplate[] = [
286+
{
287+
id: 'new-architecture',
288+
name: 'New Architecture',
289+
description: 'Description of the architecture',
290+
difficulty: 'intermediate',
291+
useCase: 'Use case description',
292+
layers: [
293+
{ type: 'input', params: { shape: [784] } },
294+
{ type: 'dense', params: { units: 128, activation: 'relu' } },
295+
{ type: 'dense', params: { units: 10, activation: 'softmax' } }
296+
]
297+
}
298+
];
299+
```
300+
301+
2. Add visualization logic in `NetworkVisualization.tsx`
302+
3. Add live example in `LiveExampleBar.tsx`
303+
304+
### Adding Educational Content
305+
306+
All curriculum content is centralized for easy maintenance:
307+
308+
```typescript
309+
// src/data/curriculum.ts
310+
export const conceptDefinitions = {
311+
activation: {
312+
relu: {
313+
name: 'ReLU',
314+
formula: 'f(x) = max(0, x)',
315+
description: 'Most common activation for hidden layers...',
316+
advantages: ['Solves vanishing gradient', 'Computationally efficient'],
317+
disadvantages: ['Dead neurons possible']
318+
}
319+
}
320+
};
321+
```
322+
323+
---
324+
325+
## License
326+
327+
Distributed under the MIT License. See `LICENSE` for more information.
328+
329+
---
330+
331+
## Acknowledgments
332+
333+
- Inspired by [TensorFlow Playground](https://playground.tensorflow.org/)
334+
- 3D visualization powered by [Three.js](https://threejs.org/) ecosystem
335+
- UI components styled with [Tailwind CSS](https://tailwindcss.com/)
336+
- Mathematical rendering by [KaTeX](https://katex.org/)
337+
338+
---
339+
340+
<div align="center">
341+
342+
### Built with passion by [Nolan Cacheux](https://github.com/nolancacheux)
343+
344+
**ML Engineer Portfolio Project**
345+
346+
*Demonstrating Full-Stack Development + Deep Learning Expertise*
347+
348+
<br />
349+
350+
[![GitHub](https://img.shields.io/badge/GitHub-nolancacheux-181717?style=for-the-badge&logo=github)](https://github.com/nolancacheux)
351+
[![LinkedIn](https://img.shields.io/badge/LinkedIn-Connect-0A66C2?style=for-the-badge&logo=linkedin)](https://linkedin.com/in/nolancacheux)
352+
353+
<br />
354+
355+
If you found this project helpful, please consider giving it a star!
356+
357+
</div>

0 commit comments

Comments
 (0)