PyTorch Neural Network Simulation

An interactive web-based platform for learning neural network fundamentals through real-time simulations with auto-generated PyTorch code.

---

📸 Preview

Feature	Description
🧠 Neural Network Visualizer	Interactive SVG network with real-time training, neuron inspection, and weight visualization
📊 Training Charts	Live loss curves and accuracy metrics with PyTorch code annotations
🎯 XOR Playground	Decision boundary heatmap showing non-linear classification in action
📚 PyTorch Concepts	Interactive guide to Tensors, Layers, Activations, Backprop, Optimizers, and Loss Functions
🔧 Training Pipeline	Step-by-step walkthrough of the complete PyTorch training workflow

---

✨ Features

🧠 Live Neural Network Simulation

• Configurable architecture — 2 to 6 layers, 1 to 8 neurons per hidden layer
• Real-time training with live weight updates and neuron activation visualization
• Forward pass animation — watch data flow layer by layer
• Click any neuron to inspect pre-activation (z), activation (a), bias (b), and formula
• Weight visualization — color (blue/red) and thickness encode weight values

⚙️ Hyperparameter Controls

• Learning rate slider (0.001 – 1.0)
• Activation functions — ReLU, Sigmoid, Tanh (switch in real-time)
• Architecture modification — add/remove layers and neurons dynamically

🔥 Auto-Generated PyTorch Code

Every change to the network architecture automatically generates valid PyTorch code:

class XORNet(nn.Module):
    def __init__(self):
        super(XORNet, self).__init__()
        self.fc1 = nn.Linear(2, 4)
        self.fc2 = nn.Linear(4, 4)
        self.fc3 = nn.Linear(4, 1)
        self.relu = nn.ReLU()

    def forward(self, x):
        x = self.relu(self.fc1(x))
        x = self.relu(self.fc2(x))
        return torch.sigmoid(self.fc3(x))

📊 Real-Time Training Metrics

• Loss curve (MSE) with area chart visualization
• Accuracy tracking with percentage display
• PyTorch code annotations on every chart

🎯 XOR Decision Boundary

• 2D heatmap that updates during training
• Watch the network learn non-linear classification
• Truth table comparison (target vs. predicted)

📄 ArXiv-Style Research Papers

• Neural Network Paper — Full paper on the simulation platform with equations, figures, and references
• Knight Chess AI Paper — Analysis of chess AI with minimax, alpha-beta pruning, and complexity analysis

---

🛠️ Tech Stack

Technology	Purpose
	React framework with SSR and routing
	Type-safe development
	Utility-first styling
	Smooth animations and transitions
	Training metrics visualization
	Edge deployment and hosting

---

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/romizone/pytorch.git

# Navigate to the project
cd pytorch

# Install dependencies
npm install

# Start the development server
npm run dev

Open http://localhost:3000 in your browser.

Build for Production

npm run build
npm start

---

📁 Project Structure

pytorch/
├── src/
│   ├── app/
│   │   ├── page.tsx                    # Main simulation page
│   │   ├── layout.tsx                  # Root layout
│   │   ├── globals.css                 # Global styles
│   │   └── paper/
│   │       ├── page.tsx                # Neural Network paper (ArXiv style)
│   │       └── knight-chess/
│   │           └── page.tsx            # Knight Chess AI paper (ArXiv style)
│   └── components/
│       ├── NeuralNetworkVisualizer.tsx  # Core network simulation
│       ├── TrainingChart.tsx            # Loss & accuracy charts
│       ├── PyTorchConcepts.tsx          # Interactive concept explorer
│       ├── XORPlayground.tsx            # XOR decision boundary
│       └── TrainingPipeline.tsx         # Training workflow guide
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.ts

---

📄 Research Papers

📑 Neural Network Simulation Paper

arXiv:2602.09847v1 [cs.LG] — 14 Feb 2026

Full academic paper analyzing the simulation platform:

• System architecture and component design
• Neural network engine (forward prop, backprop, gradient descent)
• 10 numbered equations, 3 figures, 3 tables
• 10 academic references

🔗 Read Paper →

♞ Knight Chess AI Paper

arXiv:2602.10234v1 [cs.AI] — 14 Feb 2026

Analysis of the Knight Chess game AI:

• Game design: 8×9 board, 5 knights, 3,136 starting positions
• AI engine: Minimax + Alpha-Beta pruning (3 difficulty levels)
• Complexity analysis: branching factor ~42, game tree ~10¹³⁰
• 10 equations, 3 figures, 7 tables, 12 references

🔗 Read Paper →

---

🧮 Core Algorithms

Forward Propagation

z_j^(l) = Σ w_ij · a_i^(l-1) + b_j^(l)
a_j^(l) = σ(z_j^(l))

Backpropagation

δ_out = (ŷ - y) · σ'(z)
w ← w - η · δ · a_prev

Supported Activation Functions

Function	Formula	Best For
ReLU	max(0, x)	Hidden layers (fastest convergence)
Sigmoid	1/(1+e⁻ˣ)	Output layer (binary classification)
Tanh	(eˣ-e⁻ˣ)/(eˣ+e⁻ˣ)	Hidden layers (centered output)

---

🤝 Contributing

Contributions are welcome! Here's how:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📜 License

This project is open source and available under the MIT License.

---

👤 Author

Romin Urismanto

---

⭐ Star this repo if you found it helpful!