NeuroScope — 3D Neural Network Configuration Workshop

An interactive 3D workspace for configuring deep learning model architectures. Visualize, select, and configure neural network components in an immersive Three.js environment.

Tech Stack

Layer	Technology
Framework	React 18
3D Engine	Three.js via @react-three/fiber + drei
State	Zustand
Styling	Tailwind CSS
Build	Vite
Icons	Lucide React

Getting Started

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:5173.

Build

npm run build

Output is generated in the dist/ directory.

Project Structure

src/
├── components/
│   ├── layout/     # Header, Sidebar
│   ├── ui/         # Panels, Modals, CodePreview, CommandPalette
│   └── workspace/  # 3D Scene, CoreEngine, Extensions, GroundGrid
├── data/           # Extension configs, Model definitions
├── pages/          # Route pages (Workspace, Models, Extensions, Docs...)
├── store/          # Zustand state management
├── App.jsx         # Root component with routing
├── main.jsx        # Entry point
└── index.css       # Global styles + Tailwind
public/
└── models/         # GLB 3D models (core engine, extensions, cables)

Features

• 3D Visualization — Interactive Three.js scene with orbit controls and grid
• Model Zoo — Browse and select from pre-trained deep learning architectures
• 8 Extension Types — Optimizer, Loss, Activation, Learning Rate, Batch Size, Epochs, Scheduler, Augmentation
• Code Preview — Generated PyTorch/TensorFlow code for your configuration
• Keyboard Shortcuts — Fast navigation with number keys
• Command Palette — Quick access to all actions via Cmd/Ctrl+K
• Real-time Config — Live sidebar panels for model and extension configuration

Keyboard Shortcuts

Key	Action
1	Workspace
2	Models
3	Extensions
4	Templates
5	History
6	Docs
7	Settings
Cmd/Ctrl+K	Command Palette

License

MIT