added files

.dockerignore

@@ -0,0 +1,54 @@
+# Dependencies
+node_modules/
+backend/venv/
+backend/__pycache__/
+backend/app/__pycache__/
+
+# Build outputs
+dist/
+build/
+*.egg-info/
+
+# IDE
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Git
+.git/
+.gitignore
+
+# Environment
+.env
+.env.local
+.env.*.local
+*.env
+
+# Logs
+*.log
+npm-debug.log*
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Test files
+coverage/
+.nyc_output/
+
+# Docker
+Dockerfile*
+docker-compose*.yml
+.dockerignore
+
+# Database (will be created in container)
+backend/models.db
+*.db
+
+# Documentation
+*.md
+LICENSE
+
+# Samples (mounted separately)
+# samples/

.gitignore

@@ -1,23 +1,18 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
+# Ignore Python virtual environments
+backend/venv/
+node_modules/
+dist/
 .DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+*.local
+*.log
+.env
+.env.*
+!.env.example
+coverage/
+.nyc_output/
+*.egg-info/
+__pycache__/
+*.pyc
+.pytest_cache/
+build/
+*.nn3d.bak

Dockerfile

@@ -0,0 +1,39 @@
+# Frontend Dockerfile - React/Vite NN3D Visualizer
+FROM node:20-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package.json package-lock.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY . .
+
+# Set environment variable for API URL (nginx proxy)
+ENV VITE_API_URL=/api
+
+# Build the application
+RUN npm run build
+
+# Production stage - serve with nginx
+FROM nginx:alpine
+
+# Copy custom nginx config
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Copy built assets from builder
+COPY --from=builder /app/dist /usr/share/nginx/html
+
+# Expose port
+EXPOSE 80
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD wget --no-verbose --tries=1 --spider http://localhost:80/ || exit 1
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 3D Deep Learning Model Visualizer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

backend/.dockerignore

@@ -0,0 +1,32 @@
+# Virtual environment
+venv/
+.venv/
+env/
+
+# Python cache
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+
+# Database (will be created fresh)
+models.db
+*.db
+
+# IDE
+.vscode/
+.idea/
+
+# Logs
+*.log
+
+# Environment files
+.env
+.env.*
+
+# Documentation
+*.md
+
+# Scripts (not needed in container)
+start.bat
+start.sh

backend/Dockerfile

@@ -0,0 +1,40 @@
+# Backend Dockerfile - FastAPI Model Analyzer
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies for PyTorch and ONNX
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    build-essential \
+    libgomp1 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements first for better caching
+COPY requirements.txt .
+
+# Install Python dependencies
+# Using CPU-only PyTorch for smaller image size
+RUN pip install --no-cache-dir --upgrade pip && \
+    pip install --no-cache-dir torch torchvision --index-url https://download.pytorch.org/whl/cpu && \
+    pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY app/ ./app/
+
+# Create directory for database
+RUN mkdir -p /app/data
+
+# Environment variables
+ENV PYTHONUNBUFFERED=1
+ENV PYTHONDONTWRITEBYTECODE=1
+
+# Expose port
+EXPOSE 8000
+
+# Health check
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
+    CMD python -c "import urllib.request; urllib.request.urlopen('http://localhost:8000/health')" || exit 1
+
+# Run the application
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]

backend/README.md

@@ -0,0 +1,185 @@
+# NN3D Visualizer Backend
+
+Python microservice for analyzing neural network model architectures.
+
+## Features
+
+- **PyTorch Model Analysis**: Extracts architecture information from `.pt`, `.pth`, `.ckpt`, `.bin` files
+- **ONNX Model Analysis**: Parses ONNX model graphs
+- **Shape Inference**: Traces model execution to capture input/output shapes
+- **Layer Type Detection**: Identifies layer types from weight names and shapes
+
+## Requirements
+
+- Python 3.9+
+- PyTorch 2.0+
+
+## Quick Start
+
+### Windows
+
+```batch
+cd backend
+start.bat
+```
+
+### Linux/Mac
+
+```bash
+cd backend
+chmod +x start.sh
+./start.sh
+```
+
+### Manual Setup
+
+```bash
+cd backend
+python -m venv venv
+source venv/bin/activate  # On Windows: venv\Scripts\activate
+pip install -r requirements.txt
+python -m uvicorn app.main:app --reload --host 0.0.0.0 --port 8000
+```
+
+## API Endpoints
+
+### Health Check
+
+```
+GET /health
+```
+
+Returns server status and PyTorch version.
+
+### Analyze PyTorch Model
+
+```
+POST /analyze
+Content-Type: multipart/form-data
+
+file: <model_file>
+input_shape: (optional) comma-separated integers, e.g., "1,3,224,224"
+```
+
+### Analyze ONNX Model
+
+```
+POST /analyze/onnx
+Content-Type: multipart/form-data
+
+file: <onnx_file>
+```
+
+## Response Format
+
+```json
+{
+  "success": true,
+  "model_type": "full_model|state_dict|torchscript|checkpoint",
+  "architecture": {
+    "name": "model_name",
+    "framework": "pytorch",
+    "totalParameters": 1000000,
+    "trainableParameters": 1000000,
+    "inputShape": [1, 3, 224, 224],
+    "outputShape": [1, 1000],
+    "layers": [
+      {
+        "id": "layer_0",
+        "name": "conv1",
+        "type": "Conv2d",
+        "category": "convolution",
+        "inputShape": [1, 3, 224, 224],
+        "outputShape": [1, 64, 112, 112],
+        "params": {
+          "in_channels": 3,
+          "out_channels": 64,
+          "kernel_size": [7, 7],
+          "stride": [2, 2],
+          "padding": [3, 3]
+        },
+        "numParameters": 9408,
+        "trainable": true
+      }
+    ],
+    "connections": [
+      {
+        "source": "layer_0",
+        "target": "layer_1",
+        "tensorShape": [1, 64, 112, 112]
+      }
+    ]
+  },
+  "message": "Successfully analyzed model"
+}
+```
+
+## Integration with Frontend
+
+The frontend automatically detects if the backend is available:
+
+1. Start the backend server (port 8000)
+2. Start the frontend dev server (port 3000)
+3. Drop a PyTorch model file - it will use the backend for analysis
+
+If the backend is unavailable, the frontend falls back to JavaScript-based parsing.
+
+## Supported Layer Types
+
+### Convolution
+
+- Conv1d, Conv2d, Conv3d
+- ConvTranspose1d, ConvTranspose2d, ConvTranspose3d
+
+### Pooling
+
+- MaxPool1d/2d/3d, AvgPool1d/2d/3d
+- AdaptiveAvgPool1d/2d/3d, AdaptiveMaxPool1d/2d/3d
+
+### Linear
+
+- Linear, LazyLinear, Bilinear
+
+### Normalization
+
+- BatchNorm1d/2d/3d
+- LayerNorm, GroupNorm, InstanceNorm
+
+### Activation
+
+- ReLU, LeakyReLU, PReLU, ELU, SELU
+- GELU, Sigmoid, Tanh, Softmax, SiLU, Mish
+
+### Recurrent
+
+- RNN, LSTM, GRU
+
+### Attention
+
+- MultiheadAttention, Transformer, TransformerEncoder/Decoder
+
+### Embedding
+
+- Embedding, EmbeddingBag
+
+### Regularization
+
+- Dropout, Dropout2d/3d, AlphaDropout
+
+## Architecture
+
+```
+backend/
+├── app/
+│   ├── __init__.py
+│   ├── main.py           # FastAPI application
+│   └── model_analyzer.py  # PyTorch model analysis
+├── requirements.txt
+├── start.bat             # Windows startup script
+├── start.sh              # Linux/Mac startup script
+└── README.md
+```
+
+## Development
+
+API documentation is available at `http://localhost:8000/docs` when the server is running.

backend/app/__init__.py

@@ -0,0 +1 @@
+# NN3D Visualizer Backend

backend/app/database.py

@@ -0,0 +1,163 @@
+"""
+Database module for storing processed model architectures.
+Uses SQLite for simple, file-based persistence.
+"""
+
+import json
+import os
+import sqlite3
+from datetime import datetime
+from pathlib import Path
+from typing import List, Optional
+from contextlib import contextmanager
+
+# Database file path - use environment variable for Docker, fallback to local
+DB_PATH = Path(os.environ.get("DATABASE_PATH", Path(__file__).parent.parent / "models.db"))
+
+
+def get_connection():
+    """Get a database connection."""
+    conn = sqlite3.connect(str(DB_PATH))
+    conn.row_factory = sqlite3.Row
+    return conn
+
+
+@contextmanager
+def get_db():
+    """Context manager for database connections."""
+    conn = get_connection()
+    try:
+        yield conn
+        conn.commit()
+    except Exception:
+        conn.rollback()
+        raise
+    finally:
+        conn.close()
+
+
+def init_db():
+    """Initialize the database tables."""
+    with get_db() as conn:
+        conn.execute("""
+            CREATE TABLE IF NOT EXISTS saved_models (
+                id INTEGER PRIMARY KEY AUTOINCREMENT,
+                name TEXT NOT NULL,
+                framework TEXT NOT NULL,
+                total_parameters INTEGER DEFAULT 0,
+                layer_count INTEGER DEFAULT 0,
+                architecture_json TEXT NOT NULL,
+                thumbnail TEXT,
+                created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+                file_hash TEXT UNIQUE
+            )
+        """)
+        conn.execute("""
+            CREATE INDEX IF NOT EXISTS idx_name ON saved_models(name)
+        """)
+        conn.execute("""
+            CREATE INDEX IF NOT EXISTS idx_created_at ON saved_models(created_at)
+        """)
+
+
+def save_model(
+    name: str,
+    framework: str,
+    total_parameters: int,
+    layer_count: int,
+    architecture: dict,
+    file_hash: Optional[str] = None,
+    thumbnail: Optional[str] = None
+) -> int:
+    """
+    Save a model architecture to the database.
+    Returns the saved model ID.
+    """
+    architecture_json = json.dumps(architecture)
+    
+    with get_db() as conn:
+        # Check if model with same hash already exists
+        if file_hash:
+            existing = conn.execute(
+                "SELECT id FROM saved_models WHERE file_hash = ?",
+                (file_hash,)
+            ).fetchone()
+            
+            if existing:
+                # Update existing entry
+                conn.execute("""
+                    UPDATE saved_models 
+                    SET name = ?, framework = ?, total_parameters = ?, 
+                        layer_count = ?, architecture_json = ?, 
+                        thumbnail = ?, created_at = CURRENT_TIMESTAMP
+                    WHERE file_hash = ?
+                """, (name, framework, total_parameters, layer_count, 
+                      architecture_json, thumbnail, file_hash))
+                return existing['id']
+        
+        # Insert new entry
+        cursor = conn.execute("""
+            INSERT INTO saved_models 
+            (name, framework, total_parameters, layer_count, architecture_json, file_hash, thumbnail)
+            VALUES (?, ?, ?, ?, ?, ?, ?)
+        """, (name, framework, total_parameters, layer_count, 
+              architecture_json, file_hash, thumbnail))
+        
+        return cursor.lastrowid
+
+
+def get_saved_models() -> List[dict]:
+    """Get all saved models (metadata only, not full architecture)."""
+    with get_db() as conn:
+        rows = conn.execute("""
+            SELECT id, name, framework, total_parameters, layer_count, 
+                   thumbnail, created_at
+            FROM saved_models
+            ORDER BY created_at DESC
+        """).fetchall()
+        
+        return [dict(row) for row in rows]
+
+
+def get_model_by_id(model_id: int) -> Optional[dict]:
+    """Get a specific model with full architecture."""
+    with get_db() as conn:
+        row = conn.execute("""
+            SELECT id, name, framework, total_parameters, layer_count,
+                   architecture_json, thumbnail, created_at
+            FROM saved_models
+            WHERE id = ?
+        """, (model_id,)).fetchone()
+        
+        if row:
+            result = dict(row)
+            result['architecture'] = json.loads(result['architecture_json'])
+            del result['architecture_json']
+            return result
+        
+        return None
+
+
+def delete_model(model_id: int) -> bool:
+    """Delete a model by ID. Returns True if deleted."""
+    with get_db() as conn:
+        cursor = conn.execute(
+            "DELETE FROM saved_models WHERE id = ?",
+            (model_id,)
+        )
+        return cursor.rowcount > 0
+
+
+def model_exists_by_hash(file_hash: str) -> Optional[int]:
+    """Check if a model with the given hash exists. Returns ID if exists."""
+    with get_db() as conn:
+        row = conn.execute(
+            "SELECT id FROM saved_models WHERE file_hash = ?",
+            (file_hash,)
+        ).fetchone()
+        
+        return row['id'] if row else None
+
+
+# Initialize database on module load
+init_db()

backend/app/main.py

@@ -0,0 +1,1082 @@
+"""
+NN3D Visualizer Backend API
+FastAPI server for analyzing neural network models.
+"""
+
+import os
+import hashlib
+import tempfile
+import traceback
+from typing import Optional, List
+from pathlib import Path
+
+from fastapi import FastAPI, File, UploadFile, HTTPException, Query
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse
+from pydantic import BaseModel
+
+from .model_analyzer import (
+    load_pytorch_model,
+    analyze_model_structure,
+    analyze_state_dict,
+    trace_model_shapes,
+    architecture_to_dict
+)
+
+from . import database as db
+
+import torch
+
+
+app = FastAPI(
+    title="NN3D Model Analyzer",
+    description="Backend service for analyzing neural network model architectures",
+    version="1.0.0"
+)
+
+# Enable CORS for frontend
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # In production, specify exact origins
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+class AnalysisRequest(BaseModel):
+    """Request model for analysis with sample input shape."""
+    input_shape: Optional[List[int]] = None
+
+
+class AnalysisResponse(BaseModel):
+    """Response model for analysis results."""
+    success: bool
+    model_type: str
+    architecture: dict
+    message: Optional[str] = None
+
+
+class HealthResponse(BaseModel):
+    """Health check response."""
+    status: str
+    pytorch_version: str
+    cuda_available: bool
+
+
+@app.get("/health", response_model=HealthResponse)
+async def health_check():
+    """Check server health and PyTorch availability."""
+    return HealthResponse(
+        status="healthy",
+        pytorch_version=torch.__version__,
+        cuda_available=torch.cuda.is_available()
+    )
+
+
+@app.post("/analyze", response_model=AnalysisResponse)
+async def analyze_model(
+    file: UploadFile = File(...),
+    input_shape: Optional[str] = Query(None, description="Input shape as comma-separated ints, e.g., '1,3,224,224'")
+):
+    """
+    Analyze a PyTorch model file and extract architecture information.
+    
+    Supports:
+    - Full model files (.pt, .pth)
+    - State dict checkpoints
+    - TorchScript models
+    - Training checkpoints with model_state_dict
+    """
+    # Validate file extension
+    allowed_extensions = {'.pt', '.pth', '.ckpt', '.bin', '.model'}
+    file_ext = Path(file.filename).suffix.lower()
+    
+    if file_ext not in allowed_extensions:
+        raise HTTPException(
+            status_code=400,
+            detail=f"Unsupported file format. Allowed: {', '.join(allowed_extensions)}"
+        )
+    
+    # Parse input shape if provided
+    sample_shape = None
+    if input_shape:
+        try:
+            sample_shape = [int(x.strip()) for x in input_shape.split(',')]
+        except ValueError:
+            raise HTTPException(
+                status_code=400,
+                detail="Invalid input_shape format. Use comma-separated integers, e.g., '1,3,224,224'"
+            )
+    
+    # Save uploaded file temporarily
+    temp_path = None
+    try:
+        with tempfile.NamedTemporaryFile(delete=False, suffix=file_ext) as temp_file:
+            content = await file.read()
+            temp_file.write(content)
+            temp_path = temp_file.name
+        
+        # Load and analyze model
+        model, state_dict, model_type = load_pytorch_model(temp_path)
+        
+        if model is not None:
+            # Full model available - analyze structure
+            model_name = Path(file.filename).stem
+            architecture = analyze_model_structure(model, model_name)
+            
+            # Try to trace shapes if input shape provided
+            if sample_shape and model_type != 'torchscript':
+                try:
+                    sample_input = torch.randn(*sample_shape)
+                    architecture = trace_model_shapes(model, sample_input, architecture)
+                except Exception as e:
+                    print(f"Shape tracing failed: {e}")
+            
+            return AnalysisResponse(
+                success=True,
+                model_type=model_type,
+                architecture=architecture_to_dict(architecture),
+                message=f"Successfully analyzed {model_type} model"
+            )
+        
+        elif state_dict is not None:
+            # Only state dict available - infer from weights
+            model_name = Path(file.filename).stem
+            architecture = analyze_state_dict(state_dict, model_name)
+            
+            return AnalysisResponse(
+                success=True,
+                model_type='state_dict',
+                architecture=architecture_to_dict(architecture),
+                message="Analyzed from state dict. Layer types inferred from weight names/shapes."
+            )
+        
+        else:
+            raise HTTPException(
+                status_code=400,
+                detail="Could not parse model file. Unknown format."
+            )
+    
+    except HTTPException:
+        raise
+    except Exception as e:
+        traceback.print_exc()
+        raise HTTPException(
+            status_code=500,
+            detail=f"Analysis failed: {str(e)}"
+        )
+    finally:
+        # Cleanup temp file
+        if temp_path and os.path.exists(temp_path):
+            try:
+                os.unlink(temp_path)
+            except Exception:
+                pass
+
+
+@app.post("/analyze/onnx")
+async def analyze_onnx_model(file: UploadFile = File(...)):
+    """
+    Analyze an ONNX model file.
+    """
+    if not file.filename.lower().endswith('.onnx'):
+        raise HTTPException(status_code=400, detail="File must be an ONNX model (.onnx)")
+    
+    temp_path = None
+    try:
+        import onnx
+        
+        with tempfile.NamedTemporaryFile(delete=False, suffix='.onnx') as temp_file:
+            content = await file.read()
+            temp_file.write(content)
+            temp_path = temp_file.name
+        
+        model = onnx.load(temp_path)
+        graph = model.graph
+        
+        layers = []
+        connections = []
+        layer_map = {}
+        
+        # Process nodes
+        for i, node in enumerate(graph.node):
+            layer_id = f"layer_{i}"
+            layer_map[node.name if node.name else f"node_{i}"] = layer_id
+            
+            # Map output names to layer ids
+            for output in node.output:
+                layer_map[output] = layer_id
+            
+            # Extract attributes
+            params = {}
+            for attr in node.attribute:
+                if attr.type == onnx.AttributeProto.INT:
+                    params[attr.name] = attr.i
+                elif attr.type == onnx.AttributeProto.INTS:
+                    params[attr.name] = list(attr.ints)
+                elif attr.type == onnx.AttributeProto.FLOAT:
+                    params[attr.name] = attr.f
+                elif attr.type == onnx.AttributeProto.STRING:
+                    params[attr.name] = attr.s.decode('utf-8')
+            
+            layers.append({
+                'id': layer_id,
+                'name': node.name if node.name else node.op_type,
+                'type': node.op_type,
+                'category': infer_onnx_category(node.op_type),
+                'inputShape': None,
+                'outputShape': None,
+                'params': params,
+                'numParameters': 0,
+                'trainable': True
+            })
+            
+            # Create connections from inputs
+            for input_name in node.input:
+                if input_name in layer_map:
+                    source_id = layer_map[input_name]
+                    if source_id != layer_id:  # Avoid self-loops
+                        connections.append({
+                            'source': source_id,
+                            'target': layer_id,
+                            'tensorShape': None
+                        })
+        
+        # Get input/output shapes from graph
+        input_shape = None
+        output_shape = None
+        
+        if graph.input:
+            for inp in graph.input:
+                shape = []
+                if inp.type.tensor_type.shape.dim:
+                    for dim in inp.type.tensor_type.shape.dim:
+                        shape.append(dim.dim_value if dim.dim_value else -1)
+                if shape:
+                    input_shape = shape
+                    break
+        
+        if graph.output:
+            for out in graph.output:
+                shape = []
+                if out.type.tensor_type.shape.dim:
+                    for dim in out.type.tensor_type.shape.dim:
+                        shape.append(dim.dim_value if dim.dim_value else -1)
+                if shape:
+                    output_shape = shape
+                    break
+        
+        architecture = {
+            'name': Path(file.filename).stem,
+            'framework': 'onnx',
+            'totalParameters': 0,
+            'trainableParameters': 0,
+            'inputShape': input_shape,
+            'outputShape': output_shape,
+            'layers': layers,
+            'connections': connections
+        }
+        
+        return AnalysisResponse(
+            success=True,
+            model_type='onnx',
+            architecture=architecture,
+            message="Successfully analyzed ONNX model"
+        )
+    
+    except Exception as e:
+        traceback.print_exc()
+        raise HTTPException(status_code=500, detail=f"ONNX analysis failed: {str(e)}")
+    finally:
+        if temp_path and os.path.exists(temp_path):
+            try:
+                os.unlink(temp_path)
+            except Exception:
+                pass
+
+
+def infer_onnx_category(op_type: str) -> str:
+    """Infer category from ONNX operator type."""
+    op_lower = op_type.lower()
+    
+    if 'conv' in op_lower:
+        return 'convolution'
+    if 'pool' in op_lower:
+        return 'pooling'
+    if 'norm' in op_lower or 'batch' in op_lower:
+        return 'normalization'
+    if 'relu' in op_lower or 'sigmoid' in op_lower or 'tanh' in op_lower or 'softmax' in op_lower:
+        return 'activation'
+    if 'gemm' in op_lower or 'matmul' in op_lower or 'linear' in op_lower:
+        return 'linear'
+    if 'lstm' in op_lower or 'gru' in op_lower or 'rnn' in op_lower:
+        return 'recurrent'
+    if 'attention' in op_lower:
+        return 'attention'
+    if 'dropout' in op_lower:
+        return 'regularization'
+    if 'reshape' in op_lower or 'flatten' in op_lower or 'squeeze' in op_lower:
+        return 'reshape'
+    if 'add' in op_lower or 'mul' in op_lower or 'sub' in op_lower:
+        return 'arithmetic'
+    if 'concat' in op_lower or 'split' in op_lower:
+        return 'merge'
+    
+    return 'other'
+
+
+# Mapping of file extensions to supported frameworks
+SUPPORTED_FORMATS = {
+    # PyTorch formats
+    '.pt': 'pytorch',
+    '.pth': 'pytorch',
+    '.ckpt': 'pytorch',
+    '.bin': 'pytorch',
+    '.model': 'pytorch',
+    # ONNX format
+    '.onnx': 'onnx',
+    # TensorFlow/Keras formats
+    '.h5': 'keras',
+    '.hdf5': 'keras',
+    '.keras': 'keras',
+    '.pb': 'tensorflow',
+    # SafeTensors format
+    '.safetensors': 'safetensors',
+}
+
+
+@app.post("/analyze/universal")
+async def analyze_universal(
+    file: UploadFile = File(...),
+    input_shape: Optional[str] = Query(None, description="Input shape as comma-separated ints, e.g., '1,3,224,224'")
+):
+    """
+    Universal model analyzer - accepts any supported model format.
+    
+    Supported formats:
+    - PyTorch: .pt, .pth, .ckpt, .bin, .model
+    - ONNX: .onnx
+    - Keras/TensorFlow: .h5, .hdf5, .keras, .pb
+    - SafeTensors: .safetensors
+    
+    Returns detailed architecture information including:
+    - Layer types and names
+    - Input/output shapes for each layer
+    - Parameter counts
+    - Layer connections
+    - Model metadata
+    """
+    filename = file.filename or "unknown"
+    file_ext = Path(filename).suffix.lower()
+    
+    # Check if format is supported
+    if file_ext not in SUPPORTED_FORMATS:
+        supported = ', '.join(sorted(SUPPORTED_FORMATS.keys()))
+        raise HTTPException(
+            status_code=400,
+            detail=f"Unsupported file format '{file_ext}'. Supported formats: {supported}"
+        )
+    
+    framework = SUPPORTED_FORMATS[file_ext]
+    
+    # Parse input shape if provided
+    sample_shape = None
+    if input_shape:
+        try:
+            sample_shape = [int(x.strip()) for x in input_shape.split(',')]
+        except ValueError:
+            raise HTTPException(
+                status_code=400,
+                detail="Invalid input_shape format. Use comma-separated integers, e.g., '1,3,224,224'"
+            )
+    
+    temp_path = None
+    try:
+        # Save uploaded file temporarily
+        with tempfile.NamedTemporaryFile(delete=False, suffix=file_ext) as temp_file:
+            content = await file.read()
+            temp_file.write(content)
+            temp_path = temp_file.name
+        
+        # Route to appropriate analyzer based on framework
+        if framework == 'pytorch':
+            return await _analyze_pytorch(temp_path, filename, sample_shape)
+        elif framework == 'onnx':
+            return await _analyze_onnx(temp_path, filename)
+        elif framework == 'keras':
+            return await _analyze_keras(temp_path, filename)
+        elif framework == 'tensorflow':
+            return await _analyze_tensorflow(temp_path, filename)
+        elif framework == 'safetensors':
+            return await _analyze_safetensors(temp_path, filename)
+        else:
+            raise HTTPException(status_code=400, detail=f"Framework '{framework}' not yet implemented")
+    
+    except HTTPException:
+        raise
+    except Exception as e:
+        traceback.print_exc()
+        raise HTTPException(
+            status_code=500,
+            detail=f"Analysis failed: {str(e)}"
+        )
+    finally:
+        if temp_path and os.path.exists(temp_path):
+            try:
+                os.unlink(temp_path)
+            except Exception:
+                pass
+
+
+async def _analyze_pytorch(file_path: str, filename: str, sample_shape: Optional[List[int]] = None) -> AnalysisResponse:
+    """Analyze PyTorch model."""
+    model, state_dict, model_type = load_pytorch_model(file_path)
+    model_name = Path(filename).stem
+    
+    if model is not None:
+        architecture = analyze_model_structure(model, model_name)
+        
+        # Try to trace shapes if input shape provided
+        if sample_shape and model_type != 'torchscript':
+            try:
+                sample_input = torch.randn(*sample_shape)
+                architecture = trace_model_shapes(model, sample_input, architecture)
+            except Exception as e:
+                print(f"Shape tracing failed: {e}")
+        
+        return AnalysisResponse(
+            success=True,
+            model_type=model_type,
+            architecture=architecture_to_dict(architecture),
+            message=f"Successfully analyzed PyTorch {model_type}"
+        )
+    
+    elif state_dict is not None:
+        architecture = analyze_state_dict(state_dict, model_name)
+        return AnalysisResponse(
+            success=True,
+            model_type='state_dict',
+            architecture=architecture_to_dict(architecture),
+            message="Analyzed from state dict. Layer types inferred from weight names/shapes."
+        )
+    
+    raise HTTPException(status_code=400, detail="Could not parse PyTorch model file")
+
+
+async def _analyze_onnx(file_path: str, filename: str) -> AnalysisResponse:
+    """Analyze ONNX model."""
+    try:
+        import onnx
+    except ImportError:
+        raise HTTPException(status_code=500, detail="ONNX library not installed. Install with: pip install onnx")
+    
+    model = onnx.load(file_path)
+    graph = model.graph
+    
+    layers = []
+    connections = []
+    layer_map = {}
+    total_params = 0
+    
+    # Process initializers (weights) for parameter counts
+    weight_shapes = {}
+    for init in graph.initializer:
+        dims = list(init.dims)
+        weight_shapes[init.name] = dims
+        total_params += int(torch.prod(torch.tensor(dims)).item()) if dims else 0
+    
+    # Process nodes
+    for i, node in enumerate(graph.node):
+        layer_id = f"layer_{i}"
+        layer_map[node.name if node.name else f"node_{i}"] = layer_id
+        
+        for output in node.output:
+            layer_map[output] = layer_id
+        
+        # Extract attributes
+        params = {}
+        for attr in node.attribute:
+            if attr.type == onnx.AttributeProto.INT:
+                params[attr.name] = attr.i
+            elif attr.type == onnx.AttributeProto.INTS:
+                params[attr.name] = list(attr.ints)
+            elif attr.type == onnx.AttributeProto.FLOAT:
+                params[attr.name] = round(attr.f, 6)
+            elif attr.type == onnx.AttributeProto.STRING:
+                params[attr.name] = attr.s.decode('utf-8')
+        
+        # Count parameters for this layer
+        layer_params = 0
+        input_shapes = []
+        for inp_name in node.input:
+            if inp_name in weight_shapes:
+                layer_params += int(torch.prod(torch.tensor(weight_shapes[inp_name])).item())
+                input_shapes.append(weight_shapes[inp_name])
+        
+        # Infer input/output shapes from value_info
+        input_shape = None
+        output_shape = None
+        
+        layers.append({
+            'id': layer_id,
+            'name': node.name if node.name else f"{node.op_type}_{i}",
+            'type': node.op_type,
+            'category': infer_onnx_category(node.op_type),
+            'inputShape': input_shape,
+            'outputShape': output_shape,
+            'params': params,
+            'numParameters': layer_params,
+            'trainable': layer_params > 0
+        })
+        
+        # Create connections
+        for input_name in node.input:
+            if input_name in layer_map:
+                source_id = layer_map[input_name]
+                if source_id != layer_id:
+                    connections.append({
+                        'source': source_id,
+                        'target': layer_id,
+                        'tensorShape': weight_shapes.get(input_name)
+                    })
+    
+    # Get model input/output shapes
+    input_shape = None
+    output_shape = None
+    
+    if graph.input:
+        for inp in graph.input:
+            if inp.name not in weight_shapes:  # Skip weight inputs
+                shape = []
+                if inp.type.tensor_type.shape.dim:
+                    for dim in inp.type.tensor_type.shape.dim:
+                        shape.append(dim.dim_value if dim.dim_value else -1)
+                if shape:
+                    input_shape = shape
+                    break
+    
+    if graph.output:
+        for out in graph.output:
+            shape = []
+            if out.type.tensor_type.shape.dim:
+                for dim in out.type.tensor_type.shape.dim:
+                    shape.append(dim.dim_value if dim.dim_value else -1)
+            if shape:
+                output_shape = shape
+                break
+    
+    architecture = {
+        'name': Path(filename).stem,
+        'framework': 'onnx',
+        'totalParameters': total_params,
+        'trainableParameters': total_params,
+        'inputShape': input_shape,
+        'outputShape': output_shape,
+        'layers': layers,
+        'connections': connections
+    }
+    
+    return AnalysisResponse(
+        success=True,
+        model_type='onnx',
+        architecture=architecture,
+        message=f"Successfully analyzed ONNX model with {len(layers)} layers"
+    )
+
+
+async def _analyze_keras(file_path: str, filename: str) -> AnalysisResponse:
+    """Analyze Keras/HDF5 model."""
+    try:
+        import h5py
+    except ImportError:
+        raise HTTPException(status_code=500, detail="h5py not installed. Install with: pip install h5py")
+    
+    layers = []
+    connections = []
+    total_params = 0
+    
+    with h5py.File(file_path, 'r') as f:
+        # Check for Keras model structure
+        if 'model_config' in f.attrs:
+            import json
+            config = json.loads(f.attrs['model_config'])
+            model_name = config.get('config', {}).get('name', Path(filename).stem)
+            
+            # Parse layers from config
+            layer_configs = config.get('config', {}).get('layers', [])
+            
+            for i, layer_cfg in enumerate(layer_configs):
+                layer_id = f"layer_{i}"
+                layer_class = layer_cfg.get('class_name', 'Unknown')
+                layer_config = layer_cfg.get('config', {})
+                
+                # Extract parameters
+                params = {}
+                param_keys = ['units', 'filters', 'kernel_size', 'strides', 'padding', 
+                             'activation', 'use_bias', 'dropout', 'rate', 'axis',
+                             'epsilon', 'momentum', 'input_dim', 'output_dim']
+                for key in param_keys:
+                    if key in layer_config:
+                        params[key] = layer_config[key]
+                
+                # Infer shapes from config
+                input_shape = None
+                output_shape = None
+                if 'batch_input_shape' in layer_config:
+                    input_shape = list(layer_config['batch_input_shape'])
+                
+                layers.append({
+                    'id': layer_id,
+                    'name': layer_config.get('name', f"{layer_class}_{i}"),
+                    'type': layer_class,
+                    'category': _infer_keras_category(layer_class),
+                    'inputShape': input_shape,
+                    'outputShape': output_shape,
+                    'params': params,
+                    'numParameters': 0,
+                    'trainable': layer_config.get('trainable', True)
+                })
+                
+                # Create sequential connections
+                if i > 0:
+                    connections.append({
+                        'source': f"layer_{i-1}",
+                        'target': layer_id,
+                        'tensorShape': None
+                    })
+        
+        # Count parameters from model_weights
+        if 'model_weights' in f:
+            def count_h5_params(group):
+                count = 0
+                for key in group.keys():
+                    item = group[key]
+                    if isinstance(item, h5py.Dataset):
+                        count += item.size
+                    elif isinstance(item, h5py.Group):
+                        count += count_h5_params(item)
+                return count
+            total_params = count_h5_params(f['model_weights'])
+    
+    architecture = {
+        'name': Path(filename).stem,
+        'framework': 'keras',
+        'totalParameters': total_params,
+        'trainableParameters': total_params,
+        'inputShape': layers[0].get('inputShape') if layers else None,
+        'outputShape': None,
+        'layers': layers,
+        'connections': connections
+    }
+    
+    return AnalysisResponse(
+        success=True,
+        model_type='keras',
+        architecture=architecture,
+        message=f"Successfully analyzed Keras model with {len(layers)} layers"
+    )
+
+
+async def _analyze_tensorflow(file_path: str, filename: str) -> AnalysisResponse:
+    """Analyze TensorFlow SavedModel or frozen graph."""
+    try:
+        import tensorflow as tf
+    except ImportError:
+        # Fallback: parse .pb file manually
+        return await _analyze_pb_file(file_path, filename)
+    
+    layers = []
+    connections = []
+    
+    # Try loading as SavedModel or GraphDef
+    try:
+        graph_def = tf.compat.v1.GraphDef()
+        with open(file_path, 'rb') as f:
+            graph_def.ParseFromString(f.read())
+        
+        node_map = {}
+        for i, node in enumerate(graph_def.node):
+            layer_id = f"layer_{i}"
+            node_map[node.name] = layer_id
+            
+            # Extract attributes
+            params = {}
+            for key, attr in node.attr.items():
+                if attr.HasField('i'):
+                    params[key] = attr.i
+                elif attr.HasField('f'):
+                    params[key] = round(attr.f, 6)
+                elif attr.HasField('s'):
+                    params[key] = attr.s.decode('utf-8')
+                elif attr.HasField('shape'):
+                    dims = [d.size for d in attr.shape.dim]
+                    params[key] = dims
+            
+            layers.append({
+                'id': layer_id,
+                'name': node.name,
+                'type': node.op,
+                'category': _infer_tf_category(node.op),
+                'inputShape': None,
+                'outputShape': None,
+                'params': params,
+                'numParameters': 0,
+                'trainable': True
+            })
+            
+            # Create connections from inputs
+            for inp in node.input:
+                inp_name = inp.lstrip('^').split(':')[0]
+                if inp_name in node_map:
+                    connections.append({
+                        'source': node_map[inp_name],
+                        'target': layer_id,
+                        'tensorShape': None
+                    })
+        
+        architecture = {
+            'name': Path(filename).stem,
+            'framework': 'tensorflow',
+            'totalParameters': 0,
+            'trainableParameters': 0,
+            'inputShape': None,
+            'outputShape': None,
+            'layers': layers,
+            'connections': connections
+        }
+        
+        return AnalysisResponse(
+            success=True,
+            model_type='tensorflow_pb',
+            architecture=architecture,
+            message=f"Successfully analyzed TensorFlow graph with {len(layers)} nodes"
+        )
+    except Exception as e:
+        raise HTTPException(status_code=400, detail=f"Failed to parse TensorFlow model: {str(e)}")
+
+
+async def _analyze_pb_file(file_path: str, filename: str) -> AnalysisResponse:
+    """Fallback .pb file analyzer without TensorFlow."""
+    raise HTTPException(
+        status_code=501,
+        detail="TensorFlow .pb analysis requires TensorFlow. Install with: pip install tensorflow"
+    )
+
+
+async def _analyze_safetensors(file_path: str, filename: str) -> AnalysisResponse:
+    """Analyze SafeTensors file."""
+    try:
+        from safetensors import safe_open
+    except ImportError:
+        raise HTTPException(
+            status_code=500,
+            detail="safetensors not installed. Install with: pip install safetensors"
+        )
+    
+    layers = []
+    connections = []
+    total_params = 0
+    layer_groups = {}
+    
+    with safe_open(file_path, framework="pt") as f:
+        tensor_names = list(f.keys())
+        
+        # Group tensors by layer
+        for name in tensor_names:
+            tensor = f.get_tensor(name)
+            shape = list(tensor.shape)
+            num_params = int(tensor.numel())
+            total_params += num_params
+            
+            # Extract layer name from tensor name (e.g., "encoder.layer.0.attention.weight")
+            parts = name.rsplit('.', 1)
+            layer_name = parts[0] if len(parts) > 1 else name
+            tensor_type = parts[1] if len(parts) > 1 else 'weight'
+            
+            if layer_name not in layer_groups:
+                layer_groups[layer_name] = {
+                    'tensors': {},
+                    'params': {},
+                    'total_params': 0
+                }
+            
+            layer_groups[layer_name]['tensors'][tensor_type] = shape
+            layer_groups[layer_name]['total_params'] += num_params
+            
+            # Infer params from shapes
+            if tensor_type == 'weight' and len(shape) >= 2:
+                layer_groups[layer_name]['params']['out_features'] = shape[0]
+                layer_groups[layer_name]['params']['in_features'] = shape[1]
+    
+    # Convert groups to layers
+    prev_layer_id = None
+    for i, (layer_name, group) in enumerate(layer_groups.items()):
+        layer_id = f"layer_{i}"
+        
+        # Infer layer type from name and shapes
+        layer_type = _infer_layer_type_from_name(layer_name, group['tensors'])
+        
+        # Infer shapes
+        input_shape = None
+        output_shape = None
+        if 'in_features' in group['params']:
+            input_shape = [-1, group['params']['in_features']]
+        if 'out_features' in group['params']:
+            output_shape = [-1, group['params']['out_features']]
+        
+        layers.append({
+            'id': layer_id,
+            'name': layer_name,
+            'type': layer_type,
+            'category': _infer_category_from_type(layer_type),
+            'inputShape': input_shape,
+            'outputShape': output_shape,
+            'params': group['params'],
+            'numParameters': group['total_params'],
+            'trainable': True
+        })
+        
+        # Create sequential connections
+        if prev_layer_id:
+            connections.append({
+                'source': prev_layer_id,
+                'target': layer_id,
+                'tensorShape': None
+            })
+        prev_layer_id = layer_id
+    
+    architecture = {
+        'name': Path(filename).stem,
+        'framework': 'safetensors',
+        'totalParameters': total_params,
+        'trainableParameters': total_params,
+        'inputShape': layers[0].get('inputShape') if layers else None,
+        'outputShape': layers[-1].get('outputShape') if layers else None,
+        'layers': layers,
+        'connections': connections
+    }
+    
+    return AnalysisResponse(
+        success=True,
+        model_type='safetensors',
+        architecture=architecture,
+        message=f"Successfully analyzed SafeTensors model with {len(layers)} layers, {total_params:,} parameters"
+    )
+
+
+def _infer_keras_category(class_name: str) -> str:
+    """Infer category from Keras layer class name."""
+    name = class_name.lower()
+    if 'conv' in name:
+        return 'convolution'
+    if 'pool' in name:
+        return 'pooling'
+    if 'dense' in name or 'linear' in name:
+        return 'linear'
+    if 'norm' in name or 'batch' in name:
+        return 'normalization'
+    if 'dropout' in name:
+        return 'regularization'
+    if 'lstm' in name or 'gru' in name or 'rnn' in name:
+        return 'recurrent'
+    if 'attention' in name:
+        return 'attention'
+    if 'activation' in name or 'relu' in name or 'sigmoid' in name:
+        return 'activation'
+    if 'embed' in name:
+        return 'embedding'
+    if 'flatten' in name or 'reshape' in name:
+        return 'reshape'
+    if 'input' in name:
+        return 'input'
+    return 'other'
+
+
+def _infer_tf_category(op_type: str) -> str:
+    """Infer category from TensorFlow op type."""
+    op = op_type.lower()
+    if 'conv' in op:
+        return 'convolution'
+    if 'pool' in op:
+        return 'pooling'
+    if 'matmul' in op or 'dense' in op:
+        return 'linear'
+    if 'norm' in op or 'batch' in op:
+        return 'normalization'
+    if 'relu' in op or 'sigmoid' in op or 'tanh' in op or 'softmax' in op:
+        return 'activation'
+    if 'placeholder' in op or 'input' in op:
+        return 'input'
+    if 'variable' in op or 'const' in op:
+        return 'parameter'
+    return 'other'
+
+
+def _infer_layer_type_from_name(name: str, tensors: dict) -> str:
+    """Infer layer type from name and tensor shapes."""
+    name_lower = name.lower()
+    
+    if 'attention' in name_lower or 'attn' in name_lower:
+        return 'MultiHeadAttention'
+    if 'linear' in name_lower or 'dense' in name_lower or 'fc' in name_lower:
+        return 'Linear'
+    if 'conv' in name_lower:
+        if 'weight' in tensors and len(tensors['weight']) == 4:
+            return 'Conv2d'
+        return 'Conv1d'
+    if 'norm' in name_lower:
+        if 'layer' in name_lower:
+            return 'LayerNorm'
+        return 'BatchNorm'
+    if 'embed' in name_lower:
+        return 'Embedding'
+    if 'lstm' in name_lower:
+        return 'LSTM'
+    if 'gru' in name_lower:
+        return 'GRU'
+    if 'query' in name_lower or 'key' in name_lower or 'value' in name_lower:
+        return 'Linear'
+    
+    # Infer from tensor shapes
+    if 'weight' in tensors:
+        shape = tensors['weight']
+        if len(shape) == 2:
+            return 'Linear'
+        if len(shape) == 4:
+            return 'Conv2d'
+        if len(shape) == 1:
+            return 'LayerNorm'
+    
+    return 'Unknown'
+
+
+def _infer_category_from_type(layer_type: str) -> str:
+    """Infer category from layer type."""
+    type_lower = layer_type.lower()
+    if 'conv' in type_lower:
+        return 'convolution'
+    if 'linear' in type_lower:
+        return 'linear'
+    if 'norm' in type_lower:
+        return 'normalization'
+    if 'attention' in type_lower:
+        return 'attention'
+    if 'embed' in type_lower:
+        return 'embedding'
+    if 'lstm' in type_lower or 'gru' in type_lower or 'rnn' in type_lower:
+        return 'recurrent'
+    return 'other'
+
+
+# =============================================================================
+# Saved Models API Endpoints
+# =============================================================================
+
+class SaveModelRequest(BaseModel):
+    """Request to save a model."""
+    name: str
+    framework: str
+    totalParameters: int
+    layerCount: int
+    architecture: dict
+    fileHash: Optional[str] = None
+
+
+class SavedModelSummary(BaseModel):
+    """Summary of a saved model."""
+    id: int
+    name: str
+    framework: str
+    total_parameters: int
+    layer_count: int
+    created_at: str
+
+
+@app.get("/models/saved")
+async def list_saved_models():
+    """
+    Get a list of all saved models.
+    Returns metadata only (not full architecture).
+    """
+    try:
+        models = db.get_saved_models()
+        return {
+            "success": True,
+            "models": models
+        }
+    except Exception as e:
+        traceback.print_exc()
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.get("/models/saved/{model_id}")
+async def get_saved_model(model_id: int):
+    """
+    Get a saved model by ID with full architecture.
+    """
+    try:
+        model = db.get_model_by_id(model_id)
+        if not model:
+            raise HTTPException(status_code=404, detail="Model not found")
+        
+        return {
+            "success": True,
+            "model": model
+        }
+    except HTTPException:
+        raise
+    except Exception as e:
+        traceback.print_exc()
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/models/save")
+async def save_model(request: SaveModelRequest):
+    """
+    Save a processed model to the database.
+    """
+    try:
+        model_id = db.save_model(
+            name=request.name,
+            framework=request.framework,
+            total_parameters=request.totalParameters,
+            layer_count=request.layerCount,
+            architecture=request.architecture,
+            file_hash=request.fileHash
+        )
+        
+        return {
+            "success": True,
+            "id": model_id,
+            "message": "Model saved successfully"
+        }
+    except Exception as e:
+        traceback.print_exc()
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.delete("/models/saved/{model_id}")
+async def delete_saved_model(model_id: int):
+    """
+    Delete a saved model by ID.
+    """
+    try:
+        deleted = db.delete_model(model_id)
+        if not deleted:
+            raise HTTPException(status_code=404, detail="Model not found")
+        
+        return {
+            "success": True,
+            "message": "Model deleted successfully"
+        }
+    except HTTPException:
+        raise
+    except Exception as e:
+        traceback.print_exc()
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

backend/app/model_analyzer.py

@@ -0,0 +1,714 @@
+"""
+PyTorch Model Analyzer
+Extracts architecture information from PyTorch models for 3D visualization.
+"""
+
+import torch
+import torch.nn as nn
+from typing import Dict, List, Any, Optional, Tuple
+from dataclasses import dataclass, asdict
+from collections import OrderedDict
+import json
+
+
+@dataclass
+class LayerInfo:
+    """Information about a single layer in the model."""
+    id: str
+    name: str
+    type: str
+    category: str
+    input_shape: Optional[List[int]]
+    output_shape: Optional[List[int]]
+    params: Dict[str, Any]
+    num_parameters: int
+    trainable: bool
+
+
+@dataclass
+class ConnectionInfo:
+    """Information about connections between layers."""
+    source: str
+    target: str
+    tensor_shape: Optional[List[int]]
+
+
+@dataclass
+class ModelArchitecture:
+    """Complete model architecture information."""
+    name: str
+    framework: str
+    total_parameters: int
+    trainable_parameters: int
+    layers: List[LayerInfo]
+    connections: List[ConnectionInfo]
+    input_shape: Optional[List[int]]
+    output_shape: Optional[List[int]]
+
+
+# Layer category mapping
+LAYER_CATEGORIES = {
+    # Convolution layers
+    'Conv1d': 'convolution',
+    'Conv2d': 'convolution',
+    'Conv3d': 'convolution',
+    'ConvTranspose1d': 'convolution',
+    'ConvTranspose2d': 'convolution',
+    'ConvTranspose3d': 'convolution',
+    
+    # Pooling layers
+    'MaxPool1d': 'pooling',
+    'MaxPool2d': 'pooling',
+    'MaxPool3d': 'pooling',
+    'AvgPool1d': 'pooling',
+    'AvgPool2d': 'pooling',
+    'AvgPool3d': 'pooling',
+    'AdaptiveAvgPool1d': 'pooling',
+    'AdaptiveAvgPool2d': 'pooling',
+    'AdaptiveAvgPool3d': 'pooling',
+    'AdaptiveMaxPool1d': 'pooling',
+    'AdaptiveMaxPool2d': 'pooling',
+    'AdaptiveMaxPool3d': 'pooling',
+    'GlobalAveragePooling2D': 'pooling',
+    
+    # Linear/Dense layers
+    'Linear': 'linear',
+    'LazyLinear': 'linear',
+    'Bilinear': 'linear',
+    
+    # Normalization layers
+    'BatchNorm1d': 'normalization',
+    'BatchNorm2d': 'normalization',
+    'BatchNorm3d': 'normalization',
+    'LayerNorm': 'normalization',
+    'GroupNorm': 'normalization',
+    'InstanceNorm1d': 'normalization',
+    'InstanceNorm2d': 'normalization',
+    'InstanceNorm3d': 'normalization',
+    
+    # Activation layers
+    'ReLU': 'activation',
+    'ReLU6': 'activation',
+    'LeakyReLU': 'activation',
+    'PReLU': 'activation',
+    'ELU': 'activation',
+    'SELU': 'activation',
+    'GELU': 'activation',
+    'Sigmoid': 'activation',
+    'Tanh': 'activation',
+    'Softmax': 'activation',
+    'LogSoftmax': 'activation',
+    'Softplus': 'activation',
+    'Softsign': 'activation',
+    'Hardswish': 'activation',
+    'Hardsigmoid': 'activation',
+    'SiLU': 'activation',
+    'Mish': 'activation',
+    
+    # Dropout layers
+    'Dropout': 'regularization',
+    'Dropout2d': 'regularization',
+    'Dropout3d': 'regularization',
+    'AlphaDropout': 'regularization',
+    
+    # Recurrent layers
+    'RNN': 'recurrent',
+    'LSTM': 'recurrent',
+    'GRU': 'recurrent',
+    'RNNCell': 'recurrent',
+    'LSTMCell': 'recurrent',
+    'GRUCell': 'recurrent',
+    
+    # Transformer layers
+    'Transformer': 'attention',
+    'TransformerEncoder': 'attention',
+    'TransformerDecoder': 'attention',
+    'TransformerEncoderLayer': 'attention',
+    'TransformerDecoderLayer': 'attention',
+    'MultiheadAttention': 'attention',
+    
+    # Embedding layers
+    'Embedding': 'embedding',
+    'EmbeddingBag': 'embedding',
+    
+    # Reshape/View layers
+    'Flatten': 'reshape',
+    'Unflatten': 'reshape',
+    
+    # Container layers
+    'Sequential': 'container',
+    'ModuleList': 'container',
+    'ModuleDict': 'container',
+}
+
+
+def get_layer_category(layer_type: str) -> str:
+    """Get the category for a layer type."""
+    return LAYER_CATEGORIES.get(layer_type, 'other')
+
+
+def count_parameters(module: nn.Module) -> Tuple[int, int]:
+    """Count total and trainable parameters in a module."""
+    total = sum(p.numel() for p in module.parameters())
+    trainable = sum(p.numel() for p in module.parameters() if p.requires_grad)
+    return total, trainable
+
+
+def extract_layer_params(module: nn.Module, layer_type: str) -> Dict[str, Any]:
+    """Extract relevant parameters from a layer."""
+    params = {}
+    
+    try:
+        if hasattr(module, 'in_features'):
+            params['in_features'] = module.in_features
+        if hasattr(module, 'out_features'):
+            params['out_features'] = module.out_features
+        if hasattr(module, 'in_channels'):
+            params['in_channels'] = module.in_channels
+        if hasattr(module, 'out_channels'):
+            params['out_channels'] = module.out_channels
+        if hasattr(module, 'kernel_size'):
+            ks = module.kernel_size
+            params['kernel_size'] = list(ks) if isinstance(ks, tuple) else ks
+        if hasattr(module, 'stride'):
+            s = module.stride
+            params['stride'] = list(s) if isinstance(s, tuple) else s
+        if hasattr(module, 'padding'):
+            p = module.padding
+            params['padding'] = list(p) if isinstance(p, tuple) else p
+        if hasattr(module, 'dilation'):
+            d = module.dilation
+            params['dilation'] = list(d) if isinstance(d, tuple) else d
+        if hasattr(module, 'groups'):
+            params['groups'] = module.groups
+        if hasattr(module, 'bias') and module.bias is not None:
+            params['bias'] = True
+        if hasattr(module, 'num_features'):
+            params['num_features'] = module.num_features
+        if hasattr(module, 'eps'):
+            params['eps'] = module.eps
+        if hasattr(module, 'momentum') and module.momentum is not None:
+            params['momentum'] = module.momentum
+        if hasattr(module, 'normalized_shape'):
+            params['normalized_shape'] = list(module.normalized_shape)
+        if hasattr(module, 'hidden_size'):
+            params['hidden_size'] = module.hidden_size
+        if hasattr(module, 'num_layers'):
+            params['num_layers'] = module.num_layers
+        if hasattr(module, 'bidirectional'):
+            params['bidirectional'] = module.bidirectional
+        if hasattr(module, 'num_heads'):
+            params['num_heads'] = module.num_heads
+        if hasattr(module, 'embed_dim'):
+            params['embed_dim'] = module.embed_dim
+        if hasattr(module, 'num_embeddings'):
+            params['num_embeddings'] = module.num_embeddings
+        if hasattr(module, 'embedding_dim'):
+            params['embedding_dim'] = module.embedding_dim
+        if hasattr(module, 'p') and layer_type.startswith('Dropout'):
+            params['p'] = module.p
+        if hasattr(module, 'negative_slope'):
+            params['negative_slope'] = module.negative_slope
+        if hasattr(module, 'inplace'):
+            params['inplace'] = module.inplace
+        if hasattr(module, 'dim'):
+            params['dim'] = module.dim
+    except Exception:
+        pass
+    
+    return params
+
+
+def analyze_model_structure(model: nn.Module, model_name: str = "model") -> ModelArchitecture:
+    """
+    Analyze a PyTorch model and extract its architecture.
+    
+    Args:
+        model: The PyTorch model to analyze
+        model_name: Name identifier for the model
+        
+    Returns:
+        ModelArchitecture with complete layer and connection information
+    """
+    layers = []
+    connections = []
+    layer_index = 0
+    parent_stack = []
+    
+    def process_module(name: str, module: nn.Module, parent_id: Optional[str] = None):
+        nonlocal layer_index
+        
+        layer_type = module.__class__.__name__
+        
+        # Skip container modules but process their children
+        if layer_type in ('Sequential', 'ModuleList', 'ModuleDict'):
+            for child_name, child in module.named_children():
+                full_name = f"{name}.{child_name}" if name else child_name
+                process_module(full_name, child, parent_id)
+            return
+        
+        # Skip modules with no parameters and no meaningful operation
+        # But include activation, pooling, dropout, etc.
+        has_params = sum(1 for _ in module.parameters(recurse=False)) > 0
+        is_meaningful = layer_type in LAYER_CATEGORIES or has_params
+        
+        if not is_meaningful and len(list(module.children())) > 0:
+            # Process children of non-meaningful containers
+            for child_name, child in module.named_children():
+                full_name = f"{name}.{child_name}" if name else child_name
+                process_module(full_name, child, parent_id)
+            return
+        
+        layer_id = f"layer_{layer_index}"
+        layer_index += 1
+        
+        total_params, trainable_params = count_parameters(module)
+        params = extract_layer_params(module, layer_type)
+        
+        layer_info = LayerInfo(
+            id=layer_id,
+            name=name or layer_type,
+            type=layer_type,
+            category=get_layer_category(layer_type),
+            input_shape=None,  # Will be populated during forward pass
+            output_shape=None,
+            params=params,
+            num_parameters=total_params,
+            trainable=trainable_params > 0
+        )
+        
+        layers.append(layer_info)
+        
+        # Create connection from parent
+        if parent_id is not None:
+            connections.append(ConnectionInfo(
+                source=parent_id,
+                target=layer_id,
+                tensor_shape=None
+            ))
+        
+        # Process children
+        children = list(module.named_children())
+        if children:
+            for child_name, child in children:
+                full_name = f"{name}.{child_name}" if name else child_name
+                process_module(full_name, child, layer_id)
+        
+        return layer_id
+    
+    # Process the model
+    children = list(model.named_children())
+    if children:
+        prev_id = None
+        for name, child in children:
+            layer_id = process_module(name, child, prev_id)
+            if layer_id:
+                prev_id = layer_id
+    else:
+        # Single layer model
+        process_module("", model, None)
+    
+    # If layers are sequential and no connections exist, create linear connections
+    if len(layers) > 1 and len(connections) == 0:
+        for i in range(len(layers) - 1):
+            connections.append(ConnectionInfo(
+                source=layers[i].id,
+                target=layers[i + 1].id,
+                tensor_shape=None
+            ))
+    
+    total_params, trainable_params = count_parameters(model)
+    
+    return ModelArchitecture(
+        name=model_name,
+        framework="pytorch",
+        total_parameters=total_params,
+        trainable_parameters=trainable_params,
+        layers=layers,
+        connections=connections,
+        input_shape=None,
+        output_shape=None
+    )
+
+
+def trace_model_shapes(model: nn.Module, input_tensor: torch.Tensor, arch: ModelArchitecture) -> ModelArchitecture:
+    """
+    Trace model execution to capture input/output shapes for each layer.
+    
+    Args:
+        model: The PyTorch model
+        input_tensor: Sample input tensor
+        arch: Existing architecture info to update
+        
+    Returns:
+        Updated ModelArchitecture with shape information
+    """
+    shapes = {}
+    hooks = []
+    
+    def make_hook(name):
+        def hook(module, input, output):
+            input_shape = None
+            output_shape = None
+            
+            if isinstance(input, tuple) and len(input) > 0:
+                if isinstance(input[0], torch.Tensor):
+                    input_shape = list(input[0].shape)
+            elif isinstance(input, torch.Tensor):
+                input_shape = list(input.shape)
+            
+            if isinstance(output, torch.Tensor):
+                output_shape = list(output.shape)
+            elif isinstance(output, tuple) and len(output) > 0:
+                if isinstance(output[0], torch.Tensor):
+                    output_shape = list(output[0].shape)
+            
+            shapes[name] = {
+                'input': input_shape,
+                'output': output_shape
+            }
+        return hook
+    
+    # Register hooks
+    for name, module in model.named_modules():
+        if name:  # Skip root module
+            hooks.append(module.register_forward_hook(make_hook(name)))
+    
+    # Run forward pass
+    try:
+        model.eval()
+        with torch.no_grad():
+            output = model(input_tensor)
+        
+        # Update architecture with shapes
+        for layer in arch.layers:
+            if layer.name in shapes:
+                layer.input_shape = shapes[layer.name]['input']
+                layer.output_shape = shapes[layer.name]['output']
+        
+        # Set model input/output shapes
+        arch.input_shape = list(input_tensor.shape)
+        if isinstance(output, torch.Tensor):
+            arch.output_shape = list(output.shape)
+        
+    except Exception as e:
+        print(f"Warning: Could not trace shapes: {e}")
+    finally:
+        # Remove hooks
+        for hook in hooks:
+            hook.remove()
+    
+    return arch
+
+
+def load_pytorch_model(file_path: str) -> Tuple[Optional[nn.Module], Optional[Dict], str]:
+    """
+    Load a PyTorch model from file.
+    
+    Returns:
+        Tuple of (model, state_dict, model_type)
+        model_type can be: 'full_model', 'state_dict', 'torchscript', 'checkpoint'
+    """
+    try:
+        # Try loading as TorchScript first
+        try:
+            model = torch.jit.load(file_path, map_location='cpu')
+            return model, None, 'torchscript'
+        except Exception:
+            pass
+        
+        # Try loading as regular checkpoint
+        checkpoint = torch.load(file_path, map_location='cpu', weights_only=False)
+        
+        if isinstance(checkpoint, nn.Module):
+            return checkpoint, None, 'full_model'
+        
+        if isinstance(checkpoint, dict):
+            # Check for common checkpoint formats
+            if 'model' in checkpoint:
+                if isinstance(checkpoint['model'], nn.Module):
+                    return checkpoint['model'], None, 'checkpoint'
+                elif isinstance(checkpoint['model'], dict):
+                    return None, checkpoint['model'], 'state_dict'
+            
+            if 'state_dict' in checkpoint:
+                return None, checkpoint['state_dict'], 'state_dict'
+            
+            if 'model_state_dict' in checkpoint:
+                return None, checkpoint['model_state_dict'], 'state_dict'
+            
+            # Check if it's directly a state dict (contains tensor values)
+            has_tensors = any(isinstance(v, torch.Tensor) for v in checkpoint.values())
+            if has_tensors:
+                return None, checkpoint, 'state_dict'
+        
+        return None, None, 'unknown'
+        
+    except Exception as e:
+        raise ValueError(f"Failed to load model: {str(e)}")
+
+
+def analyze_state_dict(state_dict: Dict[str, torch.Tensor], model_name: str = "model") -> ModelArchitecture:
+    """
+    Analyze a state dict to infer model architecture.
+    
+    This extracts layer information from weight tensor names and shapes.
+    """
+    layers = []
+    layer_map = OrderedDict()
+    
+    # Group parameters by layer name
+    for key, tensor in state_dict.items():
+        if not isinstance(tensor, torch.Tensor):
+            continue
+        
+        # Extract layer name from parameter name
+        parts = key.rsplit('.', 1)
+        if len(parts) == 2:
+            layer_name, param_type = parts
+        else:
+            layer_name = key
+            param_type = 'weight'
+        
+        if layer_name not in layer_map:
+            layer_map[layer_name] = {
+                'params': {},
+                'shapes': {}
+            }
+        
+        layer_map[layer_name]['params'][param_type] = True
+        layer_map[layer_name]['shapes'][param_type] = list(tensor.shape)
+    
+    # Create layer info from grouped parameters
+    layer_index = 0
+    for layer_name, info in layer_map.items():
+        layer_type, category = infer_layer_type(layer_name, info['shapes'])
+        
+        layer_id = f"layer_{layer_index}"
+        layer_index += 1
+        
+        # Compute number of parameters
+        num_params = 0
+        for param_type, shape in info['shapes'].items():
+            param_size = 1
+            for dim in shape:
+                param_size *= dim
+            num_params += param_size
+        
+        # Extract layer parameters from shapes
+        params = extract_params_from_shapes(layer_type, info['shapes'])
+        
+        # Infer input/output shapes
+        input_shape, output_shape = infer_shapes(layer_type, info['shapes'], params)
+        
+        layers.append(LayerInfo(
+            id=layer_id,
+            name=layer_name,
+            type=layer_type,
+            category=category,
+            input_shape=input_shape,
+            output_shape=output_shape,
+            params=params,
+            num_parameters=num_params,
+            trainable=True
+        ))
+    
+    # Create sequential connections
+    connections = []
+    for i in range(len(layers) - 1):
+        connections.append(ConnectionInfo(
+            source=layers[i].id,
+            target=layers[i + 1].id,
+            tensor_shape=layers[i].output_shape
+        ))
+    
+    total_params = sum(layer.num_parameters for layer in layers)
+    
+    return ModelArchitecture(
+        name=model_name,
+        framework="pytorch",
+        total_parameters=total_params,
+        trainable_parameters=total_params,
+        layers=layers,
+        connections=connections,
+        input_shape=layers[0].input_shape if layers else None,
+        output_shape=layers[-1].output_shape if layers else None
+    )
+
+
+def infer_layer_type(layer_name: str, shapes: Dict[str, List[int]]) -> Tuple[str, str]:
+    """Infer layer type from name and weight shapes."""
+    name_lower = layer_name.lower()
+    
+    # Check for common layer type patterns in name
+    if 'conv' in name_lower:
+        weight_shape = shapes.get('weight', [])
+        if len(weight_shape) == 5:
+            return 'Conv3d', 'convolution'
+        elif len(weight_shape) == 4:
+            return 'Conv2d', 'convolution'
+        elif len(weight_shape) == 3:
+            return 'Conv1d', 'convolution'
+        return 'Conv2d', 'convolution'
+    
+    if 'bn' in name_lower or 'batch' in name_lower or 'norm' in name_lower:
+        weight_shape = shapes.get('weight', shapes.get('running_mean', []))
+        if 'layer' in name_lower:
+            return 'LayerNorm', 'normalization'
+        return 'BatchNorm2d', 'normalization'
+    
+    if 'fc' in name_lower or 'linear' in name_lower or 'dense' in name_lower or 'classifier' in name_lower:
+        return 'Linear', 'linear'
+    
+    if 'lstm' in name_lower:
+        return 'LSTM', 'recurrent'
+    
+    if 'gru' in name_lower:
+        return 'GRU', 'recurrent'
+    
+    if 'rnn' in name_lower:
+        return 'RNN', 'recurrent'
+    
+    if 'attention' in name_lower or 'attn' in name_lower:
+        return 'MultiheadAttention', 'attention'
+    
+    if 'embed' in name_lower:
+        return 'Embedding', 'embedding'
+    
+    if 'pool' in name_lower:
+        return 'AdaptiveAvgPool2d', 'pooling'
+    
+    # Infer from weight shape
+    weight_shape = shapes.get('weight', [])
+    if len(weight_shape) == 2:
+        return 'Linear', 'linear'
+    elif len(weight_shape) == 4:
+        return 'Conv2d', 'convolution'
+    elif len(weight_shape) == 3:
+        return 'Conv1d', 'convolution'
+    elif len(weight_shape) == 1:
+        return 'BatchNorm2d', 'normalization'
+    
+    return 'Unknown', 'other'
+
+
+def extract_params_from_shapes(layer_type: str, shapes: Dict[str, List[int]]) -> Dict[str, Any]:
+    """Extract layer parameters from weight shapes."""
+    params = {}
+    weight_shape = shapes.get('weight', [])
+    
+    if layer_type in ('Linear',):
+        if len(weight_shape) >= 2:
+            params['out_features'] = weight_shape[0]
+            params['in_features'] = weight_shape[1]
+            params['bias'] = 'bias' in shapes
+    
+    elif layer_type in ('Conv1d', 'Conv2d', 'Conv3d'):
+        if len(weight_shape) >= 2:
+            params['out_channels'] = weight_shape[0]
+            params['in_channels'] = weight_shape[1]
+            if len(weight_shape) > 2:
+                params['kernel_size'] = weight_shape[2:]
+            params['bias'] = 'bias' in shapes
+    
+    elif layer_type in ('BatchNorm1d', 'BatchNorm2d', 'BatchNorm3d'):
+        if len(weight_shape) >= 1:
+            params['num_features'] = weight_shape[0]
+    
+    elif layer_type == 'LayerNorm':
+        if len(weight_shape) >= 1:
+            params['normalized_shape'] = weight_shape
+    
+    elif layer_type == 'Embedding':
+        if len(weight_shape) >= 2:
+            params['num_embeddings'] = weight_shape[0]
+            params['embedding_dim'] = weight_shape[1]
+    
+    elif layer_type in ('LSTM', 'GRU', 'RNN'):
+        # weight_ih_l0 shape gives hidden_size x input_size
+        if 'weight_ih_l0' in shapes:
+            ih_shape = shapes['weight_ih_l0']
+            if len(ih_shape) >= 2:
+                multiplier = 4 if layer_type == 'LSTM' else (3 if layer_type == 'GRU' else 1)
+                params['hidden_size'] = ih_shape[0] // multiplier
+                params['input_size'] = ih_shape[1]
+    
+    return params
+
+
+def infer_shapes(layer_type: str, shapes: Dict[str, List[int]], params: Dict[str, Any]) -> Tuple[Optional[List[int]], Optional[List[int]]]:
+    """Infer input/output shapes from layer parameters."""
+    input_shape = None
+    output_shape = None
+    
+    if layer_type == 'Linear':
+        if 'in_features' in params:
+            input_shape = [-1, params['in_features']]
+        if 'out_features' in params:
+            output_shape = [-1, params['out_features']]
+    
+    elif layer_type in ('Conv2d',):
+        if 'in_channels' in params:
+            input_shape = [-1, params['in_channels'], -1, -1]
+        if 'out_channels' in params:
+            output_shape = [-1, params['out_channels'], -1, -1]
+    
+    elif layer_type in ('Conv1d',):
+        if 'in_channels' in params:
+            input_shape = [-1, params['in_channels'], -1]
+        if 'out_channels' in params:
+            output_shape = [-1, params['out_channels'], -1]
+    
+    elif layer_type in ('BatchNorm2d',):
+        if 'num_features' in params:
+            input_shape = [-1, params['num_features'], -1, -1]
+            output_shape = [-1, params['num_features'], -1, -1]
+    
+    elif layer_type == 'Embedding':
+        if 'embedding_dim' in params:
+            output_shape = [-1, -1, params['embedding_dim']]
+    
+    elif layer_type in ('GRU', 'LSTM', 'RNN'):
+        # For recurrent layers: input is (batch, seq_len, input_size)
+        # output is (batch, seq_len, hidden_size * num_directions)
+        if 'input_size' in params:
+            input_shape = [-1, -1, params['input_size']]
+        if 'hidden_size' in params:
+            num_directions = 2 if params.get('bidirectional', False) else 1
+            output_shape = [-1, -1, params['hidden_size'] * num_directions]
+    
+    return input_shape, output_shape
+
+
+def architecture_to_dict(arch: ModelArchitecture) -> Dict[str, Any]:
+    """Convert ModelArchitecture to JSON-serializable dict."""
+    return {
+        'name': arch.name,
+        'framework': arch.framework,
+        'totalParameters': arch.total_parameters,
+        'trainableParameters': arch.trainable_parameters,
+        'inputShape': arch.input_shape,
+        'outputShape': arch.output_shape,
+        'layers': [
+            {
+                'id': layer.id,
+                'name': layer.name,
+                'type': layer.type,
+                'category': layer.category,
+                'inputShape': layer.input_shape,
+                'outputShape': layer.output_shape,
+                'params': layer.params,
+                'numParameters': layer.num_parameters,
+                'trainable': layer.trainable
+            }
+            for layer in arch.layers
+        ],
+        'connections': [
+            {
+                'source': conn.source,
+                'target': conn.target,
+                'tensorShape': conn.tensor_shape
+            }
+            for conn in arch.connections
+        ]
+    }

backend/requirements.txt

@@ -0,0 +1,10 @@
+fastapi==0.109.0
+uvicorn[standard]==0.27.0
+python-multipart==0.0.6
+torch>=2.0.0
+torchvision>=0.15.0
+onnx>=1.14.0
+numpy>=1.24.0
+pydantic>=2.0.0
+h5py>=3.10.0
+safetensors>=0.4.0

backend/start.bat

@@ -0,0 +1,23 @@
+@echo off
+echo Starting NN3D Visualizer Backend...
+echo.
+
+REM Check if virtual environment exists
+if not exist "venv" (
+    echo Creating virtual environment...
+    python -m venv venv
+)
+
+REM Activate virtual environment
+call venv\Scripts\activate.bat
+
+REM Install dependencies
+echo Installing dependencies...
+pip install -r requirements.txt --quiet
+
+REM Start the server
+echo.
+echo Starting FastAPI server on http://localhost:8000
+echo API docs available at http://localhost:8000/docs
+echo.
+python -m uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

backend/start.sh

@@ -0,0 +1,23 @@
+#!/bin/bash
+echo "Starting NN3D Visualizer Backend..."
+echo
+
+# Check if virtual environment exists
+if [ ! -d "venv" ]; then
+    echo "Creating virtual environment..."
+    python3 -m venv venv
+fi
+
+# Activate virtual environment
+source venv/bin/activate
+
+# Install dependencies
+echo "Installing dependencies..."
+pip install -r requirements.txt --quiet
+
+# Start the server
+echo
+echo "Starting FastAPI server on http://localhost:8000"
+echo "API docs available at http://localhost:8000/docs"
+echo
+python -m uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

docker-compose.yml

@@ -0,0 +1,60 @@
+# Docker Compose for NN3D Visualizer
+# Run: docker-compose up --build
+
+version: '3.8'
+
+services:
+  # FastAPI Backend - Model Analysis
+  backend:
+    build:
+      context: ./backend
+      dockerfile: Dockerfile
+    container_name: nn3d-backend
+    restart: unless-stopped
+    volumes:
+      # Persist database
+      - nn3d-data:/app/data
+      # Mount models directory for local model files (optional)
+      - ./samples:/app/samples:ro
+    environment:
+      - DATABASE_PATH=/app/data/models.db
+      - PYTHONUNBUFFERED=1
+    ports:
+      - "8000:8000"
+    networks:
+      - nn3d-network
+    healthcheck:
+      test: ["CMD", "python", "-c", "import urllib.request; urllib.request.urlopen('http://localhost:8000/health')"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 10s
+
+  # React Frontend - 3D Visualization
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: nn3d-frontend
+    restart: unless-stopped
+    ports:
+      - "3000:80"
+    depends_on:
+      backend:
+        condition: service_healthy
+    networks:
+      - nn3d-network
+    healthcheck:
+      test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:80/"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 5s
+
+networks:
+  nn3d-network:
+    driver: bridge
+
+volumes:
+  nn3d-data:
+    driver: local

docker-start.bat

@@ -0,0 +1,43 @@
+@echo off
+REM NN3D Visualizer - Docker Startup Script (Windows)
+
+echo.
+echo ========================================
+echo  NN3D VISUALIZER - DOCKER SETUP
+echo ========================================
+echo.
+
+REM Check if Docker is running
+docker info >nul 2>&1
+if errorlevel 1 (
+    echo [ERROR] Docker is not running. Please start Docker Desktop.
+    pause
+    exit /b 1
+)
+
+echo [*] Building and starting containers...
+echo.
+
+docker-compose up --build -d
+
+if errorlevel 1 (
+    echo [ERROR] Failed to start containers.
+    pause
+    exit /b 1
+)
+
+echo.
+echo ========================================
+echo  CONTAINERS STARTED SUCCESSFULLY
+echo ========================================
+echo.
+echo  Frontend: http://localhost:3000
+echo  Backend:  http://localhost:8000
+echo  API Docs: http://localhost:8000/docs
+echo.
+echo  Run 'docker-compose logs -f' to view logs
+echo  Run 'docker-compose down' to stop
+echo ========================================
+echo.
+
+pause

docker-start.sh

@@ -0,0 +1,38 @@
+#!/bin/bash
+# NN3D Visualizer - Docker Startup Script (Linux/Mac)
+
+echo ""
+echo "========================================"
+echo " NN3D VISUALIZER - DOCKER SETUP"
+echo "========================================"
+echo ""
+
+# Check if Docker is running
+if ! docker info > /dev/null 2>&1; then
+    echo "[ERROR] Docker is not running. Please start Docker."
+    exit 1
+fi
+
+echo "[*] Building and starting containers..."
+echo ""
+
+docker-compose up --build -d
+
+if [ $? -ne 0 ]; then
+    echo "[ERROR] Failed to start containers."
+    exit 1
+fi
+
+echo ""
+echo "========================================"
+echo " CONTAINERS STARTED SUCCESSFULLY"
+echo "========================================"
+echo ""
+echo " Frontend: http://localhost:3000"
+echo " Backend:  http://localhost:8000"
+echo " API Docs: http://localhost:8000/docs"
+echo ""
+echo " Run 'docker-compose logs -f' to view logs"
+echo " Run 'docker-compose down' to stop"
+echo "========================================"
+echo ""

exporters/python/README.md

@@ -0,0 +1,138 @@
+# NN3D Exporter
+
+Python library to export neural network models to `.nn3d` format for 3D visualization.
+
+## Installation
+
+```bash
+# Basic installation
+pip install nn3d-exporter
+
+# With PyTorch support
+pip install nn3d-exporter[pytorch]
+
+# With ONNX support
+pip install nn3d-exporter[onnx]
+
+# With all frameworks
+pip install nn3d-exporter[all]
+```
+
+## Quick Start
+
+### Export PyTorch Model
+
+```python
+import torch.nn as nn
+from nn3d_exporter import export_pytorch_model
+
+# Define your model
+class SimpleCNN(nn.Module):
+    def __init__(self):
+        super().__init__()
+        self.conv1 = nn.Conv2d(3, 64, 3, padding=1)
+        self.bn1 = nn.BatchNorm2d(64)
+        self.relu = nn.ReLU()
+        self.pool = nn.MaxPool2d(2)
+        self.conv2 = nn.Conv2d(64, 128, 3, padding=1)
+        self.bn2 = nn.BatchNorm2d(128)
+        self.fc = nn.Linear(128 * 56 * 56, 10)
+
+    def forward(self, x):
+        x = self.pool(self.relu(self.bn1(self.conv1(x))))
+        x = self.pool(self.relu(self.bn2(self.conv2(x))))
+        x = x.view(x.size(0), -1)
+        return self.fc(x)
+
+model = SimpleCNN()
+
+# Export to .nn3d format
+export_pytorch_model(
+    model,
+    output_path="simple_cnn.nn3d",
+    input_shape=(1, 3, 224, 224),
+    model_name="Simple CNN"
+)
+```
+
+### Export ONNX Model
+
+```python
+from nn3d_exporter import export_onnx_model
+
+# Export an existing ONNX model
+export_onnx_model(
+    model_path="resnet50.onnx",
+    output_path="resnet50.nn3d",
+    model_name="ResNet-50"
+)
+```
+
+### Using the Exporter Classes
+
+For more control, use the exporter classes directly:
+
+```python
+from nn3d_exporter import PyTorchExporter
+
+exporter = PyTorchExporter(
+    model=model,
+    input_shape=(1, 3, 224, 224),
+    model_name="My Model"
+)
+
+# Export to NN3DModel object
+nn3d_model = exporter.export()
+
+# Customize before saving
+nn3d_model.visualization.theme = "blueprint"
+nn3d_model.visualization.layout = "force"
+
+# Save to file
+nn3d_model.save("my_model.nn3d")
+
+# Or get JSON string
+json_str = nn3d_model.to_json()
+```
+
+## Supported Frameworks
+
+### PyTorch
+
+- All standard `torch.nn` layers
+- Custom modules (exported as "custom" type)
+- Automatic shape inference via forward pass
+- Parameter counting
+
+### ONNX
+
+- Standard ONNX operators
+- Shape extraction from model metadata
+- Operator attributes preserved
+
+## API Reference
+
+### `export_pytorch_model(model, output_path, input_shape=None, model_name=None)`
+
+Export a PyTorch model to .nn3d file.
+
+| Parameter     | Type        | Description                   |
+| ------------- | ----------- | ----------------------------- |
+| `model`       | `nn.Module` | PyTorch model to export       |
+| `output_path` | `str`       | Path for output .nn3d file    |
+| `input_shape` | `tuple`     | Input tensor shape (optional) |
+| `model_name`  | `str`       | Model name (optional)         |
+
+### `export_onnx_model(model_path, output_path, model_name=None)`
+
+Export an ONNX model to .nn3d file.
+
+| Parameter     | Type  | Description                |
+| ------------- | ----- | -------------------------- |
+| `model_path`  | `str` | Path to ONNX model file    |
+| `output_path` | `str` | Path for output .nn3d file |
+| `model_name`  | `str` | Model name (optional)      |
+
+## License
+
+MIT License

exporters/python/nn3d_exporter/__init__.py

@@ -0,0 +1,28 @@
+"""
+NN3D Exporter - Export neural network models to .nn3d format
+
+This package provides utilities to export models from various
+deep learning frameworks to the .nn3d visualization format.
+
+Supported frameworks:
+- PyTorch
+- ONNX
+- TensorFlow/Keras (planned)
+"""
+
+from .pytorch_exporter import PyTorchExporter, export_pytorch_model
+from .onnx_exporter import ONNXExporter, export_onnx_model
+from .schema import NN3DModel, NN3DNode, NN3DEdge, NN3DGraph, NN3DMetadata
+
+__version__ = "1.0.0"
+__all__ = [
+    "PyTorchExporter",
+    "export_pytorch_model",
+    "ONNXExporter", 
+    "export_onnx_model",
+    "NN3DModel",
+    "NN3DNode",
+    "NN3DEdge",
+    "NN3DGraph",
+    "NN3DMetadata",
+]

exporters/python/nn3d_exporter/onnx_exporter.py

@@ -0,0 +1,371 @@
+"""
+ONNX Model Exporter
+
+Export ONNX models to .nn3d format for visualization.
+"""
+
+from typing import Dict, List, Optional, Tuple, Any, Union
+from datetime import datetime
+import json
+
+try:
+    import onnx
+    from onnx import numpy_helper
+    ONNX_AVAILABLE = True
+except ImportError:
+    ONNX_AVAILABLE = False
+
+from .schema import (
+    NN3DModel, NN3DGraph, NN3DNode, NN3DEdge, NN3DMetadata,
+    NN3DSubgraph, LayerParams, LayerType, VisualizationConfig
+)
+
+
+# Mapping from ONNX op types to NN3D layer types
+ONNX_TO_NN3D_TYPE: Dict[str, str] = {
+    # Convolution
+    'Conv': LayerType.CONV2D.value,
+    'ConvTranspose': LayerType.CONV_TRANSPOSE_2D.value,
+    
+    # Linear
+    'Gemm': LayerType.LINEAR.value,
+    'MatMul': LayerType.LINEAR.value,
+    
+    # Normalization
+    'BatchNormalization': LayerType.BATCH_NORM_2D.value,
+    'LayerNormalization': LayerType.LAYER_NORM.value,
+    'InstanceNormalization': LayerType.INSTANCE_NORM.value,
+    'GroupNormalization': LayerType.GROUP_NORM.value,
+    'Dropout': LayerType.DROPOUT.value,
+    
+    # Activations
+    'Relu': LayerType.RELU.value,
+    'LeakyRelu': LayerType.LEAKY_RELU.value,
+    'Sigmoid': LayerType.SIGMOID.value,
+    'Tanh': LayerType.TANH.value,
+    'Softmax': LayerType.SOFTMAX.value,
+    'Gelu': LayerType.GELU.value,
+    
+    # Pooling
+    'MaxPool': LayerType.MAX_POOL_2D.value,
+    'AveragePool': LayerType.AVG_POOL_2D.value,
+    'GlobalAveragePool': LayerType.GLOBAL_AVG_POOL.value,
+    'GlobalMaxPool': LayerType.MAX_POOL_2D.value,
+    
+    # Shape operations
+    'Flatten': LayerType.FLATTEN.value,
+    'Reshape': LayerType.RESHAPE.value,
+    'Transpose': LayerType.RESHAPE.value,
+    'Squeeze': LayerType.RESHAPE.value,
+    'Unsqueeze': LayerType.RESHAPE.value,
+    
+    # Merge operations
+    'Concat': LayerType.CONCAT.value,
+    'Add': LayerType.ADD.value,
+    'Mul': LayerType.MULTIPLY.value,
+    'Split': LayerType.SPLIT.value,
+    
+    # Attention
+    'Attention': LayerType.ATTENTION.value,
+    'MultiHeadAttention': LayerType.MULTI_HEAD_ATTENTION.value,
+    
+    # Recurrent
+    'LSTM': LayerType.LSTM.value,
+    'GRU': LayerType.GRU.value,
+    'RNN': LayerType.RNN.value,
+    
+    # Resize/Upsample
+    'Resize': LayerType.UPSAMPLE.value,
+    'Upsample': LayerType.UPSAMPLE.value,
+    
+    # Padding
+    'Pad': LayerType.PAD.value,
+}
+
+
+class ONNXExporter:
+    """
+    Export ONNX models to NN3D format.
+    
+    Usage:
+        exporter = ONNXExporter("model.onnx")
+        nn3d_model = exporter.export()
+        nn3d_model.save("model.nn3d")
+    """
+    
+    def __init__(
+        self,
+        model_path: str,
+        model_name: Optional[str] = None,
+    ):
+        """
+        Initialize the exporter.
+        
+        Args:
+            model_path: Path to ONNX model file
+            model_name: Name for the model (defaults to filename)
+        """
+        if not ONNX_AVAILABLE:
+            raise ImportError("ONNX is required. Install with: pip install onnx")
+        
+        self.model_path = model_path
+        self.model = onnx.load(model_path)
+        self.model_name = model_name or model_path.split('/')[-1].replace('.onnx', '')
+        
+        # Initialize graph
+        onnx.checker.check_model(self.model)
+        self.graph = self.model.graph
+        
+        self.nodes: List[NN3DNode] = []
+        self.edges: List[NN3DEdge] = []
+        
+        self._tensor_shapes: Dict[str, List[int]] = {}
+        self._value_info: Dict[str, Any] = {}
+        self._node_id_map: Dict[str, str] = {}
+        self._output_to_node: Dict[str, str] = {}
+    
+    def _extract_shapes(self) -> None:
+        """Extract tensor shapes from the model"""
+        # Input shapes
+        for input_info in self.graph.input:
+            shape = []
+            if input_info.type.tensor_type.HasField('shape'):
+                for dim in input_info.type.tensor_type.shape.dim:
+                    if dim.HasField('dim_value'):
+                        shape.append(dim.dim_value)
+                    elif dim.HasField('dim_param'):
+                        shape.append(dim.dim_param)
+                    else:
+                        shape.append(-1)
+            self._tensor_shapes[input_info.name] = shape
+            self._value_info[input_info.name] = input_info
+        
+        # Output shapes
+        for output_info in self.graph.output:
+            shape = []
+            if output_info.type.tensor_type.HasField('shape'):
+                for dim in output_info.type.tensor_type.shape.dim:
+                    if dim.HasField('dim_value'):
+                        shape.append(dim.dim_value)
+                    elif dim.HasField('dim_param'):
+                        shape.append(dim.dim_param)
+                    else:
+                        shape.append(-1)
+            self._tensor_shapes[output_info.name] = shape
+            self._value_info[output_info.name] = output_info
+        
+        # Value info (intermediate tensors)
+        for value_info in self.graph.value_info:
+            shape = []
+            if value_info.type.tensor_type.HasField('shape'):
+                for dim in value_info.type.tensor_type.shape.dim:
+                    if dim.HasField('dim_value'):
+                        shape.append(dim.dim_value)
+                    elif dim.HasField('dim_param'):
+                        shape.append(dim.dim_param)
+                    else:
+                        shape.append(-1)
+            self._tensor_shapes[value_info.name] = shape
+            self._value_info[value_info.name] = value_info
+    
+    def _get_layer_type(self, op_type: str) -> str:
+        """Map ONNX op type to NN3D layer type"""
+        return ONNX_TO_NN3D_TYPE.get(op_type, LayerType.CUSTOM.value)
+    
+    def _extract_attributes(self, node) -> Dict[str, Any]:
+        """Extract node attributes"""
+        attrs = {}
+        for attr in node.attribute:
+            if attr.type == onnx.AttributeProto.INT:
+                attrs[attr.name] = attr.i
+            elif attr.type == onnx.AttributeProto.INTS:
+                attrs[attr.name] = list(attr.ints)
+            elif attr.type == onnx.AttributeProto.FLOAT:
+                attrs[attr.name] = attr.f
+            elif attr.type == onnx.AttributeProto.FLOATS:
+                attrs[attr.name] = list(attr.floats)
+            elif attr.type == onnx.AttributeProto.STRING:
+                attrs[attr.name] = attr.s.decode('utf-8')
+            elif attr.type == onnx.AttributeProto.STRINGS:
+                attrs[attr.name] = [s.decode('utf-8') for s in attr.strings]
+        return attrs
+    
+    def _extract_params(self, node, attrs: Dict[str, Any]) -> LayerParams:
+        """Extract layer parameters from ONNX node"""
+        params = LayerParams()
+        
+        # Convolution parameters
+        if 'kernel_shape' in attrs:
+            params.kernel_size = attrs['kernel_shape']
+        if 'strides' in attrs:
+            params.stride = attrs['strides']
+        if 'pads' in attrs:
+            params.padding = attrs['pads']
+        if 'dilations' in attrs:
+            params.dilation = attrs['dilations']
+        if 'group' in attrs:
+            params.groups = attrs['group']
+        
+        # Normalization parameters
+        if 'epsilon' in attrs:
+            params.eps = attrs['epsilon']
+        if 'momentum' in attrs:
+            params.momentum = attrs['momentum']
+        
+        # Dropout
+        if 'ratio' in attrs:
+            params.dropout_rate = attrs['ratio']
+        
+        return params
+    
+    def export(self) -> NN3DModel:
+        """Export the ONNX model to NN3D format"""
+        
+        # Extract tensor shapes
+        self._extract_shapes()
+        
+        # Add input nodes
+        for idx, input_info in enumerate(self.graph.input):
+            # Skip initializers (weights)
+            if input_info.name in [init.name for init in self.graph.initializer]:
+                continue
+            
+            node_id = f"input_{idx}"
+            shape = self._tensor_shapes.get(input_info.name, [])
+            
+            input_node = NN3DNode(
+                id=node_id,
+                type=LayerType.INPUT.value,
+                name=input_info.name,
+                output_shape=shape if shape else None,
+                depth=0
+            )
+            self.nodes.append(input_node)
+            self._output_to_node[input_info.name] = node_id
+        
+        # Process all operator nodes
+        for idx, node in enumerate(self.graph.node):
+            node_id = f"node_{idx}"
+            layer_type = self._get_layer_type(node.op_type)
+            attrs = self._extract_attributes(node)
+            params = self._extract_params(node, attrs)
+            
+            # Get input/output shapes
+            input_shapes = [self._tensor_shapes.get(inp, []) for inp in node.input 
+                          if inp not in [init.name for init in self.graph.initializer]]
+            output_shapes = [self._tensor_shapes.get(out, []) for out in node.output]
+            
+            input_shape = input_shapes[0] if input_shapes else None
+            output_shape = output_shapes[0] if output_shapes else None
+            
+            # Create node
+            nn3d_node = NN3DNode(
+                id=node_id,
+                type=layer_type,
+                name=node.name or f"{node.op_type}_{idx}",
+                params=params if any(v is not None for v in [
+                    params.kernel_size, params.stride, params.padding,
+                    params.eps, params.dropout_rate
+                ]) else None,
+                input_shape=input_shape if input_shape else None,
+                output_shape=output_shape if output_shape else None,
+                depth=idx + 1,
+                attributes={'op_type': node.op_type, **attrs} if attrs else {'op_type': node.op_type}
+            )
+            self.nodes.append(nn3d_node)
+            
+            # Map outputs to this node
+            for output in node.output:
+                self._output_to_node[output] = node_id
+            
+            # Create edges from inputs
+            for inp in node.input:
+                # Skip initializers (weights)
+                if inp in [init.name for init in self.graph.initializer]:
+                    continue
+                
+                source_id = self._output_to_node.get(inp)
+                if source_id:
+                    edge = NN3DEdge(
+                        source=source_id,
+                        target=node_id,
+                        tensor_shape=self._tensor_shapes.get(inp, None),
+                        label=inp
+                    )
+                    self.edges.append(edge)
+        
+        # Add output nodes
+        for idx, output_info in enumerate(self.graph.output):
+            node_id = f"output_{idx}"
+            shape = self._tensor_shapes.get(output_info.name, [])
+            
+            output_node = NN3DNode(
+                id=node_id,
+                type=LayerType.OUTPUT.value,
+                name=output_info.name,
+                input_shape=shape if shape else None,
+                depth=len(self.graph.node) + 1
+            )
+            self.nodes.append(output_node)
+            
+            # Create edge from last node producing this output
+            source_id = self._output_to_node.get(output_info.name)
+            if source_id:
+                edge = NN3DEdge(
+                    source=source_id,
+                    target=node_id,
+                    tensor_shape=shape if shape else None
+                )
+                self.edges.append(edge)
+        
+        # Get input/output shapes for metadata
+        input_shapes = [self._tensor_shapes.get(inp.name) for inp in self.graph.input 
+                       if inp.name not in [init.name for init in self.graph.initializer]]
+        output_shapes = [self._tensor_shapes.get(out.name) for out in self.graph.output]
+        
+        # Create metadata
+        metadata = NN3DMetadata(
+            name=self.model_name,
+            framework="onnx",
+            created=datetime.now().isoformat(),
+            input_shape=input_shapes[0] if input_shapes else None,
+            output_shape=output_shapes[0] if output_shapes else None,
+            description=f"Converted from ONNX model: {self.model_path}"
+        )
+        
+        # Create graph
+        graph = NN3DGraph(
+            nodes=self.nodes,
+            edges=self.edges,
+        )
+        
+        # Create visualization config
+        viz_config = VisualizationConfig()
+        
+        return NN3DModel(
+            metadata=metadata,
+            graph=graph,
+            visualization=viz_config
+        )
+
+
+def export_onnx_model(
+    model_path: str,
+    output_path: str,
+    model_name: Optional[str] = None,
+) -> NN3DModel:
+    """
+    Convenience function to export an ONNX model to .nn3d file.
+    
+    Args:
+        model_path: Path to ONNX model file
+        output_path: Path to save the .nn3d file
+        model_name: Name for the model
+        
+    Returns:
+        The exported NN3DModel
+    """
+    exporter = ONNXExporter(model_path, model_name)
+    nn3d_model = exporter.export()
+    nn3d_model.save(output_path)
+    return nn3d_model

exporters/python/nn3d_exporter/pytorch_exporter.py

@@ -0,0 +1,434 @@
+"""
+PyTorch Model Exporter
+
+Export PyTorch models to .nn3d format for visualization.
+"""
+
+import torch
+import torch.nn as nn
+from typing import Dict, List, Optional, Tuple, Any, Union
+from datetime import datetime
+from collections import OrderedDict
+
+from .schema import (
+    NN3DModel, NN3DGraph, NN3DNode, NN3DEdge, NN3DMetadata,
+    NN3DSubgraph, LayerParams, LayerType, VisualizationConfig
+)
+
+
+# Mapping from PyTorch module types to NN3D layer types
+PYTORCH_TO_NN3D_TYPE: Dict[type, str] = {
+    # Convolution layers
+    nn.Conv1d: LayerType.CONV1D.value,
+    nn.Conv2d: LayerType.CONV2D.value,
+    nn.Conv3d: LayerType.CONV3D.value,
+    nn.ConvTranspose2d: LayerType.CONV_TRANSPOSE_2D.value,
+    
+    # Linear layers
+    nn.Linear: LayerType.LINEAR.value,
+    nn.Embedding: LayerType.EMBEDDING.value,
+    
+    # Normalization layers
+    nn.BatchNorm1d: LayerType.BATCH_NORM_1D.value,
+    nn.BatchNorm2d: LayerType.BATCH_NORM_2D.value,
+    nn.LayerNorm: LayerType.LAYER_NORM.value,
+    nn.GroupNorm: LayerType.GROUP_NORM.value,
+    nn.InstanceNorm2d: LayerType.INSTANCE_NORM.value,
+    nn.Dropout: LayerType.DROPOUT.value,
+    nn.Dropout2d: LayerType.DROPOUT.value,
+    
+    # Activation layers
+    nn.ReLU: LayerType.RELU.value,
+    nn.LeakyReLU: LayerType.LEAKY_RELU.value,
+    nn.GELU: LayerType.GELU.value,
+    nn.SiLU: LayerType.SILU.value,
+    nn.Sigmoid: LayerType.SIGMOID.value,
+    nn.Tanh: LayerType.TANH.value,
+    nn.Softmax: LayerType.SOFTMAX.value,
+    
+    # Pooling layers
+    nn.MaxPool1d: LayerType.MAX_POOL_1D.value,
+    nn.MaxPool2d: LayerType.MAX_POOL_2D.value,
+    nn.AvgPool2d: LayerType.AVG_POOL_2D.value,
+    nn.AdaptiveAvgPool2d: LayerType.ADAPTIVE_AVG_POOL.value,
+    nn.AdaptiveAvgPool1d: LayerType.ADAPTIVE_AVG_POOL.value,
+    
+    # Recurrent layers
+    nn.LSTM: LayerType.LSTM.value,
+    nn.GRU: LayerType.GRU.value,
+    nn.RNN: LayerType.RNN.value,
+    
+    # Attention layers
+    nn.MultiheadAttention: LayerType.MULTI_HEAD_ATTENTION.value,
+    
+    # Transform layers
+    nn.Flatten: LayerType.FLATTEN.value,
+    nn.Upsample: LayerType.UPSAMPLE.value,
+}
+
+
+class PyTorchExporter:
+    """
+    Export PyTorch models to NN3D format.
+    
+    Usage:
+        exporter = PyTorchExporter(model, input_shape=(1, 3, 224, 224))
+        nn3d_model = exporter.export()
+        nn3d_model.save("model.nn3d")
+    """
+    
+    def __init__(
+        self,
+        model: nn.Module,
+        input_shape: Optional[Tuple[int, ...]] = None,
+        model_name: Optional[str] = None,
+        include_activations: bool = False,
+    ):
+        """
+        Initialize the exporter.
+        
+        Args:
+            model: PyTorch model to export
+            input_shape: Input tensor shape (batch, channels, height, width)
+            model_name: Name for the model (defaults to class name)
+            include_activations: Whether to trace activations (requires input_shape)
+        """
+        self.model = model
+        self.input_shape = input_shape
+        self.model_name = model_name or model.__class__.__name__
+        self.include_activations = include_activations
+        
+        self.nodes: List[NN3DNode] = []
+        self.edges: List[NN3DEdge] = []
+        self.subgraphs: List[NN3DSubgraph] = []
+        
+        self._node_id_counter = 0
+        self._module_to_id: Dict[nn.Module, str] = {}
+        self._shapes: Dict[str, Tuple[List[int], List[int]]] = {}
+    
+    def _get_node_id(self) -> str:
+        """Generate unique node ID"""
+        node_id = f"node_{self._node_id_counter}"
+        self._node_id_counter += 1
+        return node_id
+    
+    def _get_layer_type(self, module: nn.Module) -> str:
+        """Map PyTorch module to NN3D layer type"""
+        module_type = type(module)
+        
+        if module_type in PYTORCH_TO_NN3D_TYPE:
+            return PYTORCH_TO_NN3D_TYPE[module_type]
+        
+        # Check for common container patterns
+        class_name = module_type.__name__.lower()
+        
+        if 'attention' in class_name:
+            return LayerType.ATTENTION.value
+        elif 'transformer' in class_name:
+            return LayerType.TRANSFORMER.value
+        elif 'encoder' in class_name:
+            return LayerType.ENCODER_BLOCK.value
+        elif 'decoder' in class_name:
+            return LayerType.DECODER_BLOCK.value
+        elif 'residual' in class_name or 'resblock' in class_name:
+            return LayerType.RESIDUAL_BLOCK.value
+        
+        return LayerType.CUSTOM.value
+    
+    def _extract_params(self, module: nn.Module) -> LayerParams:
+        """Extract layer parameters from PyTorch module"""
+        params = LayerParams()
+        
+        # Convolution parameters
+        if hasattr(module, 'in_channels'):
+            params.in_channels = module.in_channels
+        if hasattr(module, 'out_channels'):
+            params.out_channels = module.out_channels
+        if hasattr(module, 'kernel_size'):
+            ks = module.kernel_size
+            params.kernel_size = list(ks) if isinstance(ks, tuple) else ks
+        if hasattr(module, 'stride'):
+            stride = module.stride
+            params.stride = list(stride) if isinstance(stride, tuple) else stride
+        if hasattr(module, 'padding'):
+            pad = module.padding
+            params.padding = list(pad) if isinstance(pad, tuple) else pad
+        if hasattr(module, 'dilation'):
+            dil = module.dilation
+            params.dilation = list(dil) if isinstance(dil, tuple) else dil
+        if hasattr(module, 'groups'):
+            params.groups = module.groups
+        
+        # Linear parameters
+        if hasattr(module, 'in_features'):
+            params.in_features = module.in_features
+        if hasattr(module, 'out_features'):
+            params.out_features = module.out_features
+        
+        # Attention parameters
+        if hasattr(module, 'num_heads'):
+            params.num_heads = module.num_heads
+        if hasattr(module, 'embed_dim'):
+            params.hidden_size = module.embed_dim
+        
+        # Normalization parameters
+        if hasattr(module, 'eps'):
+            params.eps = module.eps
+        if hasattr(module, 'momentum') and module.momentum is not None:
+            params.momentum = module.momentum
+        if hasattr(module, 'affine'):
+            params.affine = module.affine
+        
+        # Dropout parameters
+        if hasattr(module, 'p'):
+            params.dropout_rate = module.p
+        
+        # Embedding parameters
+        if hasattr(module, 'num_embeddings'):
+            params.num_embeddings = module.num_embeddings
+        if hasattr(module, 'embedding_dim'):
+            params.embedding_dim = module.embedding_dim
+        
+        # Bias
+        if hasattr(module, 'bias') and module.bias is not None:
+            params.bias = True
+        elif hasattr(module, 'bias'):
+            params.bias = False
+        
+        return params
+    
+    def _trace_shapes(self) -> None:
+        """Trace tensor shapes through the model"""
+        if self.input_shape is None:
+            return
+        
+        hooks = []
+        
+        def hook_fn(name: str):
+            def hook(module, input, output):
+                input_shape = None
+                output_shape = None
+                
+                if isinstance(input, tuple) and len(input) > 0:
+                    if isinstance(input[0], torch.Tensor):
+                        input_shape = list(input[0].shape)
+                elif isinstance(input, torch.Tensor):
+                    input_shape = list(input.shape)
+                
+                if isinstance(output, torch.Tensor):
+                    output_shape = list(output.shape)
+                elif isinstance(output, tuple) and len(output) > 0:
+                    if isinstance(output[0], torch.Tensor):
+                        output_shape = list(output[0].shape)
+                
+                self._shapes[name] = (input_shape, output_shape)
+            return hook
+        
+        # Register hooks
+        for name, module in self.model.named_modules():
+            if len(list(module.children())) == 0:  # Leaf modules only
+                hooks.append(module.register_forward_hook(hook_fn(name)))
+        
+        # Run forward pass
+        try:
+            self.model.eval()
+            with torch.no_grad():
+                dummy_input = torch.zeros(self.input_shape)
+                self.model(dummy_input)
+        except Exception as e:
+            print(f"Warning: Could not trace shapes: {e}")
+        finally:
+            # Remove hooks
+            for hook in hooks:
+                hook.remove()
+    
+    def _process_module(
+        self,
+        module: nn.Module,
+        name: str,
+        parent_id: Optional[str] = None,
+        depth: int = 0
+    ) -> Optional[str]:
+        """Process a single module and its children"""
+        
+        # Skip container modules without parameters
+        children = list(module.named_children())
+        is_leaf = len(children) == 0
+        
+        # Create node for leaf modules or significant containers
+        layer_type = self._get_layer_type(module)
+        
+        if is_leaf or layer_type != LayerType.CUSTOM.value:
+            node_id = self._get_node_id()
+            self._module_to_id[module] = node_id
+            
+            # Get shapes if traced
+            input_shape, output_shape = self._shapes.get(name, (None, None))
+            
+            # Extract parameters
+            params = self._extract_params(module)
+            
+            # Count parameters
+            num_params = sum(p.numel() for p in module.parameters(recurse=False))
+            
+            node = NN3DNode(
+                id=node_id,
+                type=layer_type,
+                name=name or module.__class__.__name__,
+                params=params if any(v is not None for v in [
+                    params.in_channels, params.out_channels, 
+                    params.in_features, params.out_features,
+                    params.kernel_size, params.num_heads
+                ]) else None,
+                input_shape=input_shape,
+                output_shape=output_shape,
+                depth=depth,
+                attributes={'num_params': num_params} if num_params > 0 else None
+            )
+            
+            self.nodes.append(node)
+            
+            # Create edge from parent
+            if parent_id:
+                edge = NN3DEdge(
+                    source=parent_id,
+                    target=node_id,
+                    tensor_shape=input_shape,
+                )
+                self.edges.append(edge)
+            
+            # Process children
+            if children:
+                subgraph_nodes = [node_id]
+                prev_id = node_id
+                
+                for child_name, child in children:
+                    full_name = f"{name}.{child_name}" if name else child_name
+                    child_id = self._process_module(child, full_name, prev_id, depth + 1)
+                    if child_id:
+                        subgraph_nodes.append(child_id)
+                        prev_id = child_id
+                
+                # Create subgraph for container
+                if len(subgraph_nodes) > 1:
+                    self.subgraphs.append(NN3DSubgraph(
+                        id=f"subgraph_{node_id}",
+                        name=name or module.__class__.__name__,
+                        nodes=subgraph_nodes,
+                        type='sequential'
+                    ))
+                
+                return prev_id
+            
+            return node_id
+        
+        # Process children of container
+        prev_id = parent_id
+        for child_name, child in children:
+            full_name = f"{name}.{child_name}" if name else child_name
+            child_id = self._process_module(child, full_name, prev_id, depth)
+            if child_id:
+                prev_id = child_id
+        
+        return prev_id
+    
+    def export(self) -> NN3DModel:
+        """Export the model to NN3D format"""
+        
+        # Trace shapes first
+        self._trace_shapes()
+        
+        # Add input node
+        input_id = self._get_node_id()
+        input_node = NN3DNode(
+            id=input_id,
+            type=LayerType.INPUT.value,
+            name="input",
+            output_shape=list(self.input_shape) if self.input_shape else None,
+            depth=0
+        )
+        self.nodes.append(input_node)
+        
+        # Process all modules
+        last_id = self._process_module(self.model, "", input_id, 1)
+        
+        # Add output node
+        output_id = self._get_node_id()
+        output_shape = None
+        if last_id and self.nodes:
+            # Get output shape from last processed node
+            for node in reversed(self.nodes):
+                if node.output_shape:
+                    output_shape = node.output_shape
+                    break
+        
+        output_node = NN3DNode(
+            id=output_id,
+            type=LayerType.OUTPUT.value,
+            name="output",
+            input_shape=output_shape,
+            depth=len(self.nodes)
+        )
+        self.nodes.append(output_node)
+        
+        if last_id:
+            self.edges.append(NN3DEdge(
+                source=last_id,
+                target=output_id,
+                tensor_shape=output_shape
+            ))
+        
+        # Count parameters
+        total_params = sum(p.numel() for p in self.model.parameters())
+        trainable_params = sum(p.numel() for p in self.model.parameters() if p.requires_grad)
+        
+        # Create metadata
+        metadata = NN3DMetadata(
+            name=self.model_name,
+            framework="pytorch",
+            created=datetime.now().isoformat(),
+            input_shape=list(self.input_shape) if self.input_shape else None,
+            output_shape=output_shape,
+            total_params=total_params,
+            trainable_params=trainable_params,
+        )
+        
+        # Create graph
+        graph = NN3DGraph(
+            nodes=self.nodes,
+            edges=self.edges,
+            subgraphs=self.subgraphs if self.subgraphs else None
+        )
+        
+        # Create visualization config
+        viz_config = VisualizationConfig()
+        
+        return NN3DModel(
+            metadata=metadata,
+            graph=graph,
+            visualization=viz_config
+        )
+
+
+def export_pytorch_model(
+    model: nn.Module,
+    output_path: str,
+    input_shape: Optional[Tuple[int, ...]] = None,
+    model_name: Optional[str] = None,
+) -> NN3DModel:
+    """
+    Convenience function to export a PyTorch model to .nn3d file.
+    
+    Args:
+        model: PyTorch model to export
+        output_path: Path to save the .nn3d file
+        input_shape: Input tensor shape (batch, channels, height, width)
+        model_name: Name for the model
+        
+    Returns:
+        The exported NN3DModel
+    """
+    exporter = PyTorchExporter(model, input_shape, model_name)
+    nn3d_model = exporter.export()
+    nn3d_model.save(output_path)
+    return nn3d_model

exporters/python/nn3d_exporter/schema.py

@@ -0,0 +1,316 @@
+"""
+NN3D Schema definitions using Python dataclasses
+
+These classes mirror the JSON schema and can be serialized to .nn3d format.
+"""
+
+from dataclasses import dataclass, field, asdict
+from typing import List, Optional, Dict, Any, Union
+from enum import Enum
+import json
+from datetime import datetime
+
+
+class LayerType(str, Enum):
+    """Supported layer types"""
+    INPUT = "input"
+    OUTPUT = "output"
+    CONV1D = "conv1d"
+    CONV2D = "conv2d"
+    CONV3D = "conv3d"
+    CONV_TRANSPOSE_2D = "convTranspose2d"
+    DEPTHWISE_CONV2D = "depthwiseConv2d"
+    SEPARABLE_CONV2D = "separableConv2d"
+    LINEAR = "linear"
+    DENSE = "dense"
+    EMBEDDING = "embedding"
+    BATCH_NORM_1D = "batchNorm1d"
+    BATCH_NORM_2D = "batchNorm2d"
+    LAYER_NORM = "layerNorm"
+    GROUP_NORM = "groupNorm"
+    INSTANCE_NORM = "instanceNorm"
+    DROPOUT = "dropout"
+    RELU = "relu"
+    LEAKY_RELU = "leakyRelu"
+    GELU = "gelu"
+    SILU = "silu"
+    SIGMOID = "sigmoid"
+    TANH = "tanh"
+    SOFTMAX = "softmax"
+    MAX_POOL_1D = "maxPool1d"
+    MAX_POOL_2D = "maxPool2d"
+    AVG_POOL_2D = "avgPool2d"
+    GLOBAL_AVG_POOL = "globalAvgPool"
+    ADAPTIVE_AVG_POOL = "adaptiveAvgPool"
+    FLATTEN = "flatten"
+    RESHAPE = "reshape"
+    CONCAT = "concat"
+    ADD = "add"
+    MULTIPLY = "multiply"
+    SPLIT = "split"
+    ATTENTION = "attention"
+    MULTI_HEAD_ATTENTION = "multiHeadAttention"
+    SELF_ATTENTION = "selfAttention"
+    CROSS_ATTENTION = "crossAttention"
+    LSTM = "lstm"
+    GRU = "gru"
+    RNN = "rnn"
+    TRANSFORMER = "transformer"
+    ENCODER_BLOCK = "encoderBlock"
+    DECODER_BLOCK = "decoderBlock"
+    RESIDUAL_BLOCK = "residualBlock"
+    UPSAMPLE = "upsample"
+    INTERPOLATE = "interpolate"
+    PAD = "pad"
+    CUSTOM = "custom"
+
+
+@dataclass
+class Position3D:
+    """3D position"""
+    x: float = 0.0
+    y: float = 0.0
+    z: float = 0.0
+
+
+@dataclass
+class LayerParams:
+    """Layer parameters"""
+    in_channels: Optional[int] = None
+    out_channels: Optional[int] = None
+    in_features: Optional[int] = None
+    out_features: Optional[int] = None
+    kernel_size: Optional[Union[int, List[int]]] = None
+    stride: Optional[Union[int, List[int]]] = None
+    padding: Optional[Union[int, str, List[int]]] = None
+    dilation: Optional[Union[int, List[int]]] = None
+    groups: Optional[int] = None
+    bias: Optional[bool] = None
+    num_heads: Optional[int] = None
+    hidden_size: Optional[int] = None
+    dropout_rate: Optional[float] = None
+    eps: Optional[float] = None
+    momentum: Optional[float] = None
+    affine: Optional[bool] = None
+    num_embeddings: Optional[int] = None
+    embedding_dim: Optional[int] = None
+    
+    def to_dict(self) -> Dict[str, Any]:
+        """Convert to dict with camelCase keys, excluding None values"""
+        key_mapping = {
+            'in_channels': 'inChannels',
+            'out_channels': 'outChannels',
+            'in_features': 'inFeatures',
+            'out_features': 'outFeatures',
+            'kernel_size': 'kernelSize',
+            'num_heads': 'numHeads',
+            'hidden_size': 'hiddenSize',
+            'dropout_rate': 'dropoutRate',
+            'num_embeddings': 'numEmbeddings',
+            'embedding_dim': 'embeddingDim',
+        }
+        result = {}
+        for key, value in asdict(self).items():
+            if value is not None:
+                camel_key = key_mapping.get(key, key)
+                result[camel_key] = value
+        return result
+
+
+@dataclass
+class NN3DNode:
+    """Graph node representing a layer"""
+    id: str
+    type: str  # LayerType value
+    name: str
+    params: Optional[LayerParams] = None
+    input_shape: Optional[List[Union[int, str]]] = None
+    output_shape: Optional[List[Union[int, str]]] = None
+    position: Optional[Position3D] = None
+    attributes: Optional[Dict[str, Any]] = None
+    group: Optional[str] = None
+    depth: Optional[int] = None
+    
+    def to_dict(self) -> Dict[str, Any]:
+        result = {
+            'id': self.id,
+            'type': self.type,
+            'name': self.name,
+        }
+        if self.params:
+            result['params'] = self.params.to_dict()
+        if self.input_shape:
+            result['inputShape'] = self.input_shape
+        if self.output_shape:
+            result['outputShape'] = self.output_shape
+        if self.position:
+            result['position'] = asdict(self.position)
+        if self.attributes:
+            result['attributes'] = self.attributes
+        if self.group:
+            result['group'] = self.group
+        if self.depth is not None:
+            result['depth'] = self.depth
+        return result
+
+
+@dataclass
+class NN3DEdge:
+    """Graph edge representing a connection"""
+    source: str
+    target: str
+    id: Optional[str] = None
+    source_port: Optional[int] = None
+    target_port: Optional[int] = None
+    tensor_shape: Optional[List[Union[int, str]]] = None
+    dtype: Optional[str] = None
+    label: Optional[str] = None
+    
+    def to_dict(self) -> Dict[str, Any]:
+        result = {
+            'source': self.source,
+            'target': self.target,
+        }
+        if self.id:
+            result['id'] = self.id
+        if self.source_port is not None:
+            result['sourcePort'] = self.source_port
+        if self.target_port is not None:
+            result['targetPort'] = self.target_port
+        if self.tensor_shape:
+            result['tensorShape'] = self.tensor_shape
+        if self.dtype:
+            result['dtype'] = self.dtype
+        if self.label:
+            result['label'] = self.label
+        return result
+
+
+@dataclass
+class NN3DSubgraph:
+    """Subgraph for grouping layers"""
+    id: str
+    name: str
+    nodes: List[str] = field(default_factory=list)
+    type: Optional[str] = None
+    color: Optional[str] = None
+    collapsed: bool = False
+    
+    def to_dict(self) -> Dict[str, Any]:
+        result = {
+            'id': self.id,
+            'name': self.name,
+            'nodes': self.nodes,
+        }
+        if self.type:
+            result['type'] = self.type
+        if self.color:
+            result['color'] = self.color
+        if self.collapsed:
+            result['collapsed'] = self.collapsed
+        return result
+
+
+@dataclass
+class NN3DGraph:
+    """Graph containing nodes and edges"""
+    nodes: List[NN3DNode] = field(default_factory=list)
+    edges: List[NN3DEdge] = field(default_factory=list)
+    subgraphs: Optional[List[NN3DSubgraph]] = None
+    
+    def to_dict(self) -> Dict[str, Any]:
+        result = {
+            'nodes': [n.to_dict() for n in self.nodes],
+            'edges': [e.to_dict() for e in self.edges],
+        }
+        if self.subgraphs:
+            result['subgraphs'] = [s.to_dict() for s in self.subgraphs]
+        return result
+
+
+@dataclass
+class NN3DMetadata:
+    """Model metadata"""
+    name: str
+    description: Optional[str] = None
+    framework: Optional[str] = None
+    author: Optional[str] = None
+    created: Optional[str] = None
+    tags: Optional[List[str]] = None
+    input_shape: Optional[List[Union[int, str]]] = None
+    output_shape: Optional[List[Union[int, str]]] = None
+    total_params: Optional[int] = None
+    trainable_params: Optional[int] = None
+    
+    def to_dict(self) -> Dict[str, Any]:
+        result = {'name': self.name}
+        if self.description:
+            result['description'] = self.description
+        if self.framework:
+            result['framework'] = self.framework
+        if self.author:
+            result['author'] = self.author
+        if self.created:
+            result['created'] = self.created
+        if self.tags:
+            result['tags'] = self.tags
+        if self.input_shape:
+            result['inputShape'] = self.input_shape
+        if self.output_shape:
+            result['outputShape'] = self.output_shape
+        if self.total_params is not None:
+            result['totalParams'] = self.total_params
+        if self.trainable_params is not None:
+            result['trainableParams'] = self.trainable_params
+        return result
+
+
+@dataclass
+class VisualizationConfig:
+    """Visualization configuration"""
+    layout: str = "layered"
+    theme: str = "dark"
+    layer_spacing: float = 3.0
+    node_scale: float = 1.0
+    show_labels: bool = True
+    show_edges: bool = True
+    edge_style: str = "tube"
+    
+    def to_dict(self) -> Dict[str, Any]:
+        return {
+            'layout': self.layout,
+            'theme': self.theme,
+            'layerSpacing': self.layer_spacing,
+            'nodeScale': self.node_scale,
+            'showLabels': self.show_labels,
+            'showEdges': self.show_edges,
+            'edgeStyle': self.edge_style,
+        }
+
+
+@dataclass
+class NN3DModel:
+    """Complete NN3D model"""
+    metadata: NN3DMetadata
+    graph: NN3DGraph
+    version: str = "1.0.0"
+    visualization: Optional[VisualizationConfig] = None
+    
+    def to_dict(self) -> Dict[str, Any]:
+        result = {
+            'version': self.version,
+            'metadata': self.metadata.to_dict(),
+            'graph': self.graph.to_dict(),
+        }
+        if self.visualization:
+            result['visualization'] = self.visualization.to_dict()
+        return result
+    
+    def to_json(self, indent: int = 2) -> str:
+        """Serialize to JSON string"""
+        return json.dumps(self.to_dict(), indent=indent)
+    
+    def save(self, filepath: str) -> None:
+        """Save to .nn3d file"""
+        with open(filepath, 'w') as f:
+            f.write(self.to_json())

exporters/python/pyproject.toml

@@ -0,0 +1,61 @@
+[build-system]
+requires = ["setuptools>=61.0", "wheel"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "nn3d-exporter"
+version = "1.0.0"
+description = "Export neural network models to NN3D format for 3D visualization"
+readme = "README.md"
+requires-python = ">=3.8"
+license = {text = "MIT"}
+authors = [
+    {name = "NN3D Team"}
+]
+keywords = ["neural-network", "visualization", "deep-learning", "pytorch", "onnx", "3d"]
+classifiers = [
+    "Development Status :: 4 - Beta",
+    "Intended Audience :: Developers",
+    "Intended Audience :: Science/Research",
+    "License :: OSI Approved :: MIT License",
+    "Programming Language :: Python :: 3",
+    "Programming Language :: Python :: 3.8",
+    "Programming Language :: Python :: 3.9",
+    "Programming Language :: Python :: 3.10",
+    "Programming Language :: Python :: 3.11",
+    "Topic :: Scientific/Engineering :: Artificial Intelligence",
+    "Topic :: Scientific/Engineering :: Visualization",
+]
+
+dependencies = []
+
+[project.optional-dependencies]
+pytorch = ["torch>=1.9.0"]
+onnx = ["onnx>=1.10.0"]
+all = ["torch>=1.9.0", "onnx>=1.10.0"]
+dev = ["pytest>=7.0.0", "black", "isort", "mypy"]
+
+[project.urls]
+Homepage = "https://github.com/nn3d/visualizer"
+Documentation = "https://nn3d.dev/docs"
+Repository = "https://github.com/nn3d/visualizer"
+
+[project.scripts]
+nn3d-export = "nn3d_exporter.cli:main"
+
+[tool.setuptools.packages.find]
+where = ["."]
+
+[tool.black]
+line-length = 100
+target-version = ["py38", "py39", "py310", "py311"]
+
+[tool.isort]
+profile = "black"
+line_length = 100
+
+[tool.mypy]
+python_version = "3.8"
+warn_return_any = true
+warn_unused_configs = true
+ignore_missing_imports = true

index.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NN3D Visualizer - 3D Deep Learning Model Viewer</title>
+    <meta
+      name="description"
+      content="Interactive 3D visualization of neural network architectures"
+    />
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      html,
+      body,
+      #root {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          Oxygen, Ubuntu, sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

nginx.conf

@@ -0,0 +1,47 @@
+server {
+    listen 80;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml application/javascript application/json;
+
+    # Frontend routes - SPA support
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Proxy API requests to backend
+    location /api/ {
+        proxy_pass http://backend:8000/;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_cache_bypass $http_upgrade;
+        proxy_read_timeout 300s;
+        proxy_connect_timeout 75s;
+        
+        # Handle large file uploads
+        client_max_body_size 500M;
+    }
+
+    # Cache static assets
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+}

package.json

@@ -1,39 +1,53 @@
 {
-  "name": "react-template",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
+  "name": "nn3d-visualizer",
+  "version": "1.0.0",
+  "description": "3D Deep Learning Model Visualizer - Interactive WebGL visualization of neural network architectures",
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint src --ext .ts,.tsx",
+    "test": "vitest",
+    "validate-schema": "ajv validate -s src/schema/nn3d.schema.json -d"
+  },
+  "dependencies": {
+    "@react-three/drei": "^9.92.7",
+    "@react-three/fiber": "^8.15.12",
+    "ajv": "^8.12.0",
+    "d3-force-3d": "^3.0.5",
+    "h5wasm": "^0.7.5",
+    "leva": "^0.9.35",
+    "onnxruntime-web": "^1.16.3",
+    "pako": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "three": "^0.160.0",
+    "zustand": "^4.4.7"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "devDependencies": {
+    "@types/node": "^25.0.3",
+    "@types/pako": "^2.0.4",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@types/three": "^0.160.0",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vitest": "^1.1.0"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+  "keywords": [
+    "neural-network",
+    "deep-learning",
+    "visualization",
+    "3d",
+    "threejs",
+    "webgl",
+    "machine-learning"
+  ],
+  "author": "",
+  "license": "MIT"
 }

public/index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

public/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

samples/cnn_resnet.nn3d

@@ -0,0 +1,327 @@
+{
+  "version": "1.0.0",
+  "metadata": {
+    "name": "CNN Image Classifier",
+    "description": "Convolutional Neural Network for image classification",
+    "framework": "pytorch",
+    "created": "2024-12-17T10:00:00Z",
+    "tags": ["cnn", "classification", "imagenet"],
+    "inputShape": [1, 3, 224, 224],
+    "outputShape": [1, 1000],
+    "totalParams": 11689512,
+    "trainableParams": 11689512
+  },
+  "graph": {
+    "nodes": [
+      {
+        "id": "input",
+        "type": "input",
+        "name": "Input Image",
+        "outputShape": [1, 3, 224, 224],
+        "depth": 0
+      },
+      {
+        "id": "conv1",
+        "type": "conv2d",
+        "name": "conv1",
+        "params": {
+          "inChannels": 3,
+          "outChannels": 64,
+          "kernelSize": [7, 7],
+          "stride": [2, 2],
+          "padding": [3, 3],
+          "bias": false
+        },
+        "inputShape": [1, 3, 224, 224],
+        "outputShape": [1, 64, 112, 112],
+        "depth": 1,
+        "group": "stem"
+      },
+      {
+        "id": "bn1",
+        "type": "batchNorm2d",
+        "name": "bn1",
+        "params": {
+          "eps": 1e-5,
+          "momentum": 0.1
+        },
+        "inputShape": [1, 64, 112, 112],
+        "outputShape": [1, 64, 112, 112],
+        "depth": 2,
+        "group": "stem"
+      },
+      {
+        "id": "relu1",
+        "type": "relu",
+        "name": "ReLU",
+        "inputShape": [1, 64, 112, 112],
+        "outputShape": [1, 64, 112, 112],
+        "depth": 3,
+        "group": "stem"
+      },
+      {
+        "id": "maxpool",
+        "type": "maxPool2d",
+        "name": "MaxPool",
+        "params": {
+          "kernelSize": [3, 3],
+          "stride": [2, 2],
+          "padding": [1, 1]
+        },
+        "inputShape": [1, 64, 112, 112],
+        "outputShape": [1, 64, 56, 56],
+        "depth": 4,
+        "group": "stem"
+      },
+      {
+        "id": "layer1_conv1",
+        "type": "conv2d",
+        "name": "layer1.0.conv1",
+        "params": {
+          "inChannels": 64,
+          "outChannels": 64,
+          "kernelSize": [3, 3],
+          "stride": [1, 1],
+          "padding": [1, 1],
+          "bias": false
+        },
+        "inputShape": [1, 64, 56, 56],
+        "outputShape": [1, 64, 56, 56],
+        "depth": 5,
+        "group": "layer1"
+      },
+      {
+        "id": "layer1_bn1",
+        "type": "batchNorm2d",
+        "name": "layer1.0.bn1",
+        "inputShape": [1, 64, 56, 56],
+        "outputShape": [1, 64, 56, 56],
+        "depth": 6,
+        "group": "layer1"
+      },
+      {
+        "id": "layer1_relu1",
+        "type": "relu",
+        "name": "ReLU",
+        "inputShape": [1, 64, 56, 56],
+        "outputShape": [1, 64, 56, 56],
+        "depth": 7,
+        "group": "layer1"
+      },
+      {
+        "id": "layer1_conv2",
+        "type": "conv2d",
+        "name": "layer1.0.conv2",
+        "params": {
+          "inChannels": 64,
+          "outChannels": 64,
+          "kernelSize": [3, 3],
+          "stride": [1, 1],
+          "padding": [1, 1],
+          "bias": false
+        },
+        "inputShape": [1, 64, 56, 56],
+        "outputShape": [1, 64, 56, 56],
+        "depth": 8,
+        "group": "layer1"
+      },
+      {
+        "id": "layer1_bn2",
+        "type": "batchNorm2d",
+        "name": "layer1.0.bn2",
+        "inputShape": [1, 64, 56, 56],
+        "outputShape": [1, 64, 56, 56],
+        "depth": 9,
+        "group": "layer1"
+      },
+      {
+        "id": "layer1_add",
+        "type": "add",
+        "name": "Residual Add",
+        "inputShape": [1, 64, 56, 56],
+        "outputShape": [1, 64, 56, 56],
+        "depth": 10,
+        "group": "layer1"
+      },
+      {
+        "id": "layer2_conv1",
+        "type": "conv2d",
+        "name": "layer2.0.conv1",
+        "params": {
+          "inChannels": 64,
+          "outChannels": 128,
+          "kernelSize": [3, 3],
+          "stride": [2, 2],
+          "padding": [1, 1],
+          "bias": false
+        },
+        "inputShape": [1, 64, 56, 56],
+        "outputShape": [1, 128, 28, 28],
+        "depth": 11,
+        "group": "layer2"
+      },
+      {
+        "id": "layer2_bn1",
+        "type": "batchNorm2d",
+        "name": "layer2.0.bn1",
+        "inputShape": [1, 128, 28, 28],
+        "outputShape": [1, 128, 28, 28],
+        "depth": 12,
+        "group": "layer2"
+      },
+      {
+        "id": "layer2_relu1",
+        "type": "relu",
+        "name": "ReLU",
+        "inputShape": [1, 128, 28, 28],
+        "outputShape": [1, 128, 28, 28],
+        "depth": 13,
+        "group": "layer2"
+      },
+      {
+        "id": "layer2_conv2",
+        "type": "conv2d",
+        "name": "layer2.0.conv2",
+        "params": {
+          "inChannels": 128,
+          "outChannels": 128,
+          "kernelSize": [3, 3],
+          "stride": [1, 1],
+          "padding": [1, 1],
+          "bias": false
+        },
+        "inputShape": [1, 128, 28, 28],
+        "outputShape": [1, 128, 28, 28],
+        "depth": 14,
+        "group": "layer2"
+      },
+      {
+        "id": "layer2_bn2",
+        "type": "batchNorm2d",
+        "name": "layer2.0.bn2",
+        "inputShape": [1, 128, 28, 28],
+        "outputShape": [1, 128, 28, 28],
+        "depth": 15,
+        "group": "layer2"
+      },
+      {
+        "id": "layer2_downsample",
+        "type": "conv2d",
+        "name": "layer2.0.downsample",
+        "params": {
+          "inChannels": 64,
+          "outChannels": 128,
+          "kernelSize": [1, 1],
+          "stride": [2, 2],
+          "bias": false
+        },
+        "inputShape": [1, 64, 56, 56],
+        "outputShape": [1, 128, 28, 28],
+        "depth": 16,
+        "group": "layer2"
+      },
+      {
+        "id": "layer2_add",
+        "type": "add",
+        "name": "Residual Add",
+        "inputShape": [1, 128, 28, 28],
+        "outputShape": [1, 128, 28, 28],
+        "depth": 17,
+        "group": "layer2"
+      },
+      {
+        "id": "avgpool",
+        "type": "globalAvgPool",
+        "name": "Global Average Pool",
+        "inputShape": [1, 128, 28, 28],
+        "outputShape": [1, 128, 1, 1],
+        "depth": 18
+      },
+      {
+        "id": "flatten",
+        "type": "flatten",
+        "name": "Flatten",
+        "inputShape": [1, 128, 1, 1],
+        "outputShape": [1, 128],
+        "depth": 19
+      },
+      {
+        "id": "fc",
+        "type": "linear",
+        "name": "fc",
+        "params": {
+          "inFeatures": 128,
+          "outFeatures": 1000,
+          "bias": true
+        },
+        "inputShape": [1, 128],
+        "outputShape": [1, 1000],
+        "depth": 20
+      },
+      {
+        "id": "output",
+        "type": "output",
+        "name": "Output",
+        "inputShape": [1, 1000],
+        "depth": 21
+      }
+    ],
+    "edges": [
+      { "source": "input", "target": "conv1" },
+      { "source": "conv1", "target": "bn1" },
+      { "source": "bn1", "target": "relu1" },
+      { "source": "relu1", "target": "maxpool" },
+      { "source": "maxpool", "target": "layer1_conv1" },
+      { "source": "layer1_conv1", "target": "layer1_bn1" },
+      { "source": "layer1_bn1", "target": "layer1_relu1" },
+      { "source": "layer1_relu1", "target": "layer1_conv2" },
+      { "source": "layer1_conv2", "target": "layer1_bn2" },
+      { "source": "layer1_bn2", "target": "layer1_add" },
+      { "source": "maxpool", "target": "layer1_add" },
+      { "source": "layer1_add", "target": "layer2_conv1" },
+      { "source": "layer2_conv1", "target": "layer2_bn1" },
+      { "source": "layer2_bn1", "target": "layer2_relu1" },
+      { "source": "layer2_relu1", "target": "layer2_conv2" },
+      { "source": "layer2_conv2", "target": "layer2_bn2" },
+      { "source": "layer1_add", "target": "layer2_downsample" },
+      { "source": "layer2_bn2", "target": "layer2_add" },
+      { "source": "layer2_downsample", "target": "layer2_add" },
+      { "source": "layer2_add", "target": "avgpool" },
+      { "source": "avgpool", "target": "flatten" },
+      { "source": "flatten", "target": "fc" },
+      { "source": "fc", "target": "output" }
+    ],
+    "subgraphs": [
+      {
+        "id": "stem_group",
+        "name": "Stem",
+        "type": "sequential",
+        "nodes": ["conv1", "bn1", "relu1", "maxpool"],
+        "color": "#4CAF50"
+      },
+      {
+        "id": "layer1_group",
+        "name": "Layer 1 (ResBlock)",
+        "type": "residual",
+        "nodes": ["layer1_conv1", "layer1_bn1", "layer1_relu1", "layer1_conv2", "layer1_bn2", "layer1_add"],
+        "color": "#2196F3"
+      },
+      {
+        "id": "layer2_group",
+        "name": "Layer 2 (ResBlock)",
+        "type": "residual",
+        "nodes": ["layer2_conv1", "layer2_bn1", "layer2_relu1", "layer2_conv2", "layer2_bn2", "layer2_downsample", "layer2_add"],
+        "color": "#9C27B0"
+      }
+    ]
+  },
+  "visualization": {
+    "layout": "layered",
+    "theme": "dark",
+    "layerSpacing": 2.5,
+    "nodeScale": 1.0,
+    "showLabels": true,
+    "showEdges": true,
+    "edgeStyle": "tube"
+  }
+}

samples/simple_mlp.nn3d

@@ -0,0 +1,137 @@
+{
+  "version": "1.0.0",
+  "metadata": {
+    "name": "Simple MLP",
+    "description": "A simple Multi-Layer Perceptron for MNIST classification",
+    "framework": "pytorch",
+    "created": "2024-12-17T10:00:00Z",
+    "tags": ["mlp", "classification", "mnist"],
+    "inputShape": [1, 784],
+    "outputShape": [1, 10],
+    "totalParams": 669706,
+    "trainableParams": 669706
+  },
+  "graph": {
+    "nodes": [
+      {
+        "id": "input",
+        "type": "input",
+        "name": "Input",
+        "outputShape": [1, 784],
+        "depth": 0
+      },
+      {
+        "id": "fc1",
+        "type": "linear",
+        "name": "fc1",
+        "params": {
+          "inFeatures": 784,
+          "outFeatures": 512,
+          "bias": true
+        },
+        "inputShape": [1, 784],
+        "outputShape": [1, 512],
+        "depth": 1
+      },
+      {
+        "id": "relu1",
+        "type": "relu",
+        "name": "ReLU",
+        "inputShape": [1, 512],
+        "outputShape": [1, 512],
+        "depth": 2
+      },
+      {
+        "id": "dropout1",
+        "type": "dropout",
+        "name": "Dropout",
+        "params": {
+          "dropoutRate": 0.2
+        },
+        "inputShape": [1, 512],
+        "outputShape": [1, 512],
+        "depth": 3
+      },
+      {
+        "id": "fc2",
+        "type": "linear",
+        "name": "fc2",
+        "params": {
+          "inFeatures": 512,
+          "outFeatures": 256,
+          "bias": true
+        },
+        "inputShape": [1, 512],
+        "outputShape": [1, 256],
+        "depth": 4
+      },
+      {
+        "id": "relu2",
+        "type": "relu",
+        "name": "ReLU",
+        "inputShape": [1, 256],
+        "outputShape": [1, 256],
+        "depth": 5
+      },
+      {
+        "id": "dropout2",
+        "type": "dropout",
+        "name": "Dropout",
+        "params": {
+          "dropoutRate": 0.2
+        },
+        "inputShape": [1, 256],
+        "outputShape": [1, 256],
+        "depth": 6
+      },
+      {
+        "id": "fc3",
+        "type": "linear",
+        "name": "fc3",
+        "params": {
+          "inFeatures": 256,
+          "outFeatures": 10,
+          "bias": true
+        },
+        "inputShape": [1, 256],
+        "outputShape": [1, 10],
+        "depth": 7
+      },
+      {
+        "id": "softmax",
+        "type": "softmax",
+        "name": "Softmax",
+        "inputShape": [1, 10],
+        "outputShape": [1, 10],
+        "depth": 8
+      },
+      {
+        "id": "output",
+        "type": "output",
+        "name": "Output",
+        "inputShape": [1, 10],
+        "depth": 9
+      }
+    ],
+    "edges": [
+      { "source": "input", "target": "fc1", "tensorShape": [1, 784] },
+      { "source": "fc1", "target": "relu1", "tensorShape": [1, 512] },
+      { "source": "relu1", "target": "dropout1", "tensorShape": [1, 512] },
+      { "source": "dropout1", "target": "fc2", "tensorShape": [1, 512] },
+      { "source": "fc2", "target": "relu2", "tensorShape": [1, 256] },
+      { "source": "relu2", "target": "dropout2", "tensorShape": [1, 256] },
+      { "source": "dropout2", "target": "fc3", "tensorShape": [1, 256] },
+      { "source": "fc3", "target": "softmax", "tensorShape": [1, 10] },
+      { "source": "softmax", "target": "output", "tensorShape": [1, 10] }
+    ]
+  },
+  "visualization": {
+    "layout": "layered",
+    "theme": "dark",
+    "layerSpacing": 3.0,
+    "nodeScale": 1.0,
+    "showLabels": true,
+    "showEdges": true,
+    "edgeStyle": "tube"
+  }
+}

samples/transformer_encoder.nn3d

@@ -0,0 +1,220 @@
+{
+  "version": "1.0.0",
+  "metadata": {
+    "name": "Transformer Encoder",
+    "description": "A Transformer encoder block for sequence modeling",
+    "framework": "pytorch",
+    "created": "2024-12-17T10:00:00Z",
+    "tags": ["transformer", "attention", "nlp", "encoder"],
+    "inputShape": [1, 512, 768],
+    "outputShape": [1, 512, 768],
+    "totalParams": 7087872,
+    "trainableParams": 7087872
+  },
+  "graph": {
+    "nodes": [
+      {
+        "id": "input",
+        "type": "input",
+        "name": "Input Embeddings",
+        "outputShape": [1, 512, 768],
+        "depth": 0
+      },
+      {
+        "id": "pos_embed",
+        "type": "embedding",
+        "name": "Positional Embedding",
+        "params": {
+          "numEmbeddings": 512,
+          "embeddingDim": 768
+        },
+        "inputShape": [1, 512],
+        "outputShape": [1, 512, 768],
+        "depth": 1
+      },
+      {
+        "id": "embed_add",
+        "type": "add",
+        "name": "Add Position",
+        "inputShape": [1, 512, 768],
+        "outputShape": [1, 512, 768],
+        "depth": 2
+      },
+      {
+        "id": "layer1_ln1",
+        "type": "layerNorm",
+        "name": "LayerNorm 1",
+        "params": {
+          "eps": 1e-6
+        },
+        "inputShape": [1, 512, 768],
+        "outputShape": [1, 512, 768],
+        "depth": 3,
+        "group": "encoder_layer_1"
+      },
+      {
+        "id": "layer1_mha",
+        "type": "multiHeadAttention",
+        "name": "Multi-Head Attention",
+        "params": {
+          "numHeads": 12,
+          "hiddenSize": 768,
+          "dropoutRate": 0.1
+        },
+        "inputShape": [1, 512, 768],
+        "outputShape": [1, 512, 768],
+        "depth": 4,
+        "group": "encoder_layer_1"
+      },
+      {
+        "id": "layer1_dropout1",
+        "type": "dropout",
+        "name": "Dropout",
+        "params": {
+          "dropoutRate": 0.1
+        },
+        "inputShape": [1, 512, 768],
+        "outputShape": [1, 512, 768],
+        "depth": 5,
+        "group": "encoder_layer_1"
+      },
+      {
+        "id": "layer1_add1",
+        "type": "add",
+        "name": "Residual Add 1",
+        "inputShape": [1, 512, 768],
+        "outputShape": [1, 512, 768],
+        "depth": 6,
+        "group": "encoder_layer_1"
+      },
+      {
+        "id": "layer1_ln2",
+        "type": "layerNorm",
+        "name": "LayerNorm 2",
+        "params": {
+          "eps": 1e-6
+        },
+        "inputShape": [1, 512, 768],
+        "outputShape": [1, 512, 768],
+        "depth": 7,
+        "group": "encoder_layer_1"
+      },
+      {
+        "id": "layer1_ff1",
+        "type": "linear",
+        "name": "Feed Forward 1",
+        "params": {
+          "inFeatures": 768,
+          "outFeatures": 3072,
+          "bias": true
+        },
+        "inputShape": [1, 512, 768],
+        "outputShape": [1, 512, 3072],
+        "depth": 8,
+        "group": "encoder_layer_1"
+      },
+      {
+        "id": "layer1_gelu",
+        "type": "gelu",
+        "name": "GELU",
+        "inputShape": [1, 512, 3072],
+        "outputShape": [1, 512, 3072],
+        "depth": 9,
+        "group": "encoder_layer_1"
+      },
+      {
+        "id": "layer1_ff2",
+        "type": "linear",
+        "name": "Feed Forward 2",
+        "params": {
+          "inFeatures": 3072,
+          "outFeatures": 768,
+          "bias": true
+        },
+        "inputShape": [1, 512, 3072],
+        "outputShape": [1, 512, 768],
+        "depth": 10,
+        "group": "encoder_layer_1"
+      },
+      {
+        "id": "layer1_dropout2",
+        "type": "dropout",
+        "name": "Dropout",
+        "params": {
+          "dropoutRate": 0.1
+        },
+        "inputShape": [1, 512, 768],
+        "outputShape": [1, 512, 768],
+        "depth": 11,
+        "group": "encoder_layer_1"
+      },
+      {
+        "id": "layer1_add2",
+        "type": "add",
+        "name": "Residual Add 2",
+        "inputShape": [1, 512, 768],
+        "outputShape": [1, 512, 768],
+        "depth": 12,
+        "group": "encoder_layer_1"
+      },
+      {
+        "id": "final_ln",
+        "type": "layerNorm",
+        "name": "Final LayerNorm",
+        "params": {
+          "eps": 1e-6
+        },
+        "inputShape": [1, 512, 768],
+        "outputShape": [1, 512, 768],
+        "depth": 13
+      },
+      {
+        "id": "output",
+        "type": "output",
+        "name": "Output",
+        "inputShape": [1, 512, 768],
+        "depth": 14
+      }
+    ],
+    "edges": [
+      { "source": "input", "target": "embed_add" },
+      { "source": "pos_embed", "target": "embed_add" },
+      { "source": "embed_add", "target": "layer1_ln1" },
+      { "source": "layer1_ln1", "target": "layer1_mha" },
+      { "source": "layer1_mha", "target": "layer1_dropout1" },
+      { "source": "layer1_dropout1", "target": "layer1_add1" },
+      { "source": "embed_add", "target": "layer1_add1" },
+      { "source": "layer1_add1", "target": "layer1_ln2" },
+      { "source": "layer1_ln2", "target": "layer1_ff1" },
+      { "source": "layer1_ff1", "target": "layer1_gelu" },
+      { "source": "layer1_gelu", "target": "layer1_ff2" },
+      { "source": "layer1_ff2", "target": "layer1_dropout2" },
+      { "source": "layer1_dropout2", "target": "layer1_add2" },
+      { "source": "layer1_add1", "target": "layer1_add2" },
+      { "source": "layer1_add2", "target": "final_ln" },
+      { "source": "final_ln", "target": "output" }
+    ],
+    "subgraphs": [
+      {
+        "id": "encoder_layer_1_group",
+        "name": "Encoder Layer 1",
+        "type": "attention",
+        "nodes": [
+          "layer1_ln1", "layer1_mha", "layer1_dropout1", "layer1_add1",
+          "layer1_ln2", "layer1_ff1", "layer1_gelu", "layer1_ff2", 
+          "layer1_dropout2", "layer1_add2"
+        ],
+        "color": "#E91E63"
+      }
+    ]
+  },
+  "visualization": {
+    "layout": "layered",
+    "theme": "dark",
+    "layerSpacing": 2.0,
+    "nodeScale": 1.0,
+    "showLabels": true,
+    "showEdges": true,
+    "edgeStyle": "bezier"
+  }
+}

src/App.css

@@ -1,38 +1,195 @@
-.App {
-  text-align: center;
+/* 
+ * Oldskool Wireframe Design System
+ * Inspired by ctxdc.com and awwwards-winning dark interfaces
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');
+
+:root {
+  /* Core Colors */
+  --bg-primary: #0a0a0a;
+  --bg-secondary: #0f0f0f;
+  --bg-tertiary: #141414;
+  --bg-card: rgba(15, 15, 15, 0.8);
+  
+  /* Accent Colors */
+  --accent-primary: #b4ff39;
+  --accent-secondary: #7fff00;
+  --accent-dim: rgba(180, 255, 57, 0.15);
+  --accent-glow: rgba(180, 255, 57, 0.3);
+  
+  /* Text Colors */
+  --text-primary: #ffffff;
+  --text-secondary: #a0a0a0;
+  --text-tertiary: #606060;
+  --text-muted: #404040;
+  
+  /* Border Colors */
+  --border-primary: rgba(180, 255, 57, 0.3);
+  --border-secondary: rgba(255, 255, 255, 0.1);
+  --border-dim: rgba(255, 255, 255, 0.05);
+  
+  /* Status Colors */
+  --success: #b4ff39;
+  --error: #ff4444;
+  --warning: #ffaa00;
+  
+  /* Typography */
+  --font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
+  
+  /* Spacing */
+  --space-xs: 4px;
+  --space-sm: 8px;
+  --space-md: 16px;
+  --space-lg: 24px;
+  --space-xl: 32px;
+  
+  /* Border Radius */
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 8px;
 }
 
-.App-logo {
-  height: 40vmin;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #root {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.app {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: var(--bg-primary);
+}
+
+/* Grid Background Pattern */
+.app::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: 
+    linear-gradient(rgba(180, 255, 57, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(180, 255, 57, 0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
   pointer-events: none;
+  z-index: 0;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-primary);
+  border-radius: var(--radius-sm);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--accent-primary);
+}
+
+/* Selection styling */
+::selection {
+  background: var(--accent-dim);
+  color: var(--accent-primary);
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+/* Focus styling */
+:focus-visible {
+  outline: 1px solid var(--accent-primary);
+  outline-offset: 2px;
 }
 
-.App-link {
-  color: #61dafb;
+/* Custom checkbox */
+input[type="checkbox"] {
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-sm);
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.15s ease;
 }
 
-@keyframes App-logo-spin {
+input[type="checkbox"]:checked {
+  background: var(--accent-primary);
+  border-color: var(--accent-primary);
+}
+
+input[type="checkbox"]:checked::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 4px;
+  width: 4px;
+  height: 7px;
+  border: solid var(--bg-primary);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+input[type="checkbox"]:hover {
+  border-color: var(--accent-primary);
+}
+
+/* Terminal cursor blink */
+@keyframes blink {
+  0%, 50% { opacity: 1; }
+  51%, 100% { opacity: 0; }
+}
+
+/* Scan line effect */
+@keyframes scanline {
+  0% { transform: translateY(-100%); }
+  100% { transform: translateY(100vh); }
+}
+
+/* Pulse glow */
+@keyframes pulse-glow {
+  0%, 100% { 
+    box-shadow: 0 0 5px var(--accent-dim);
+  }
+  50% { 
+    box-shadow: 0 0 20px var(--accent-glow), 0 0 30px var(--accent-dim);
+  }
+}
+
+/* Tooltip animations */
+@keyframes fadeIn {
   from {
-    transform: rotate(0deg);
+    opacity: 0;
+    transform: translateY(5px);
   }
   to {
-    transform: rotate(360deg);
+    opacity: 1;
+    transform: translateY(0);
   }
 }
+
+.tooltip-enter {
+  animation: fadeIn 0.2s ease-out;
+}

src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.tsx

@@ -0,0 +1,124 @@
+import { useCallback } from 'react';
+import { DropZone, NeuralVisualizer } from './components';
+import { useVisualizerStore } from './core/store';
+import { LAYER_CATEGORIES, type LayerType } from '@/schema/types';
+import type { NN3DModel } from '@/schema/types';
+import './App.css';
+
+/**
+ * Main Application Component
+ * 
+ * Integrates the new 3D Neural Network Visualization System
+ */
+function App() {
+  const model = useVisualizerStore(state => state.model);
+  const isLoading = useVisualizerStore(state => state.isLoading);
+  const error = useVisualizerStore(state => state.error);
+  const selectNode = useVisualizerStore(state => state.selectNode);
+  const clearModel = useVisualizerStore(state => state.clearModel);
+  const loadModel = useVisualizerStore(state => state.loadModel);
+
+  // Build architecture data from store model for the visualizer
+  const architecture = model ? {
+    name: model.metadata?.name || 'Model',
+    framework: model.metadata?.framework || 'Unknown',
+    totalParameters: model.metadata?.totalParams || 0,
+    trainableParameters: model.metadata?.trainableParams,
+    inputShape: model.metadata?.inputShape as number[] | null || null,
+    outputShape: model.metadata?.outputShape as number[] | null || null,
+    layers: model.graph.nodes.map(node => {
+      // Get category from attributes (set by backend) or infer from layer type
+      const backendCategory = node.attributes?.category as string | undefined;
+      const layerType = node.type as LayerType;
+      const category = backendCategory || LAYER_CATEGORIES[layerType] || 'other';
+      
+      // Extract num parameters from attributes or params
+      const numParameters = 
+        (node.attributes?.parameters as number) || 
+        (node.params?.totalParams ? parseInt(String(node.params.totalParams).replace(/,/g, '')) : 0) ||
+        0;
+      
+      return {
+        id: node.id,
+        name: node.name,
+        type: node.type,
+        category,
+        inputShape: (node.inputShape as number[] | null) || null,
+        outputShape: (node.outputShape as number[] | null) || null,
+        params: node.params || {},
+        numParameters,
+        trainable: true,
+      };
+    }),
+    connections: model.graph.edges.map(edge => ({
+      source: edge.source,
+      target: edge.target,
+      tensorShape: (edge.tensorShape as number[] | null) || null,
+    })),
+  } : null;
+
+  // Handle layer selection
+  const handleLayerSelect = useCallback((layerId: string | null) => {
+    selectNode(layerId);
+  }, [selectNode]);
+
+  // Handle uploading a new model (clear current)
+  const handleUploadNew = useCallback(() => {
+    clearModel();
+  }, [clearModel]);
+
+  // Handle loading a saved model from database
+  const handleLoadSavedModel = useCallback((arch: any) => {
+    // Convert architecture back to NN3DModel format
+    const savedModel: NN3DModel = {
+      version: '1.0',
+      metadata: {
+        name: arch.name,
+        framework: arch.framework,
+        totalParams: arch.totalParameters,
+        trainableParams: arch.trainableParameters,
+        inputShape: arch.inputShape,
+        outputShape: arch.outputShape,
+      },
+      graph: {
+        nodes: arch.layers.map((layer: any) => ({
+          id: layer.id,
+          name: layer.name,
+          type: layer.type,
+          inputShape: layer.inputShape,
+          outputShape: layer.outputShape,
+          params: layer.params,
+          attributes: {
+            category: layer.category,
+            parameters: layer.numParameters,
+          },
+        })),
+        edges: arch.connections.map((conn: any, idx: number) => ({
+          id: `edge-${idx}`,
+          source: conn.source,
+          target: conn.target,
+          tensorShape: conn.tensorShape,
+        })),
+      },
+    };
+    
+    loadModel(savedModel);
+  }, [loadModel]);
+
+  return (
+    <div className="app">
+      <DropZone>
+        <NeuralVisualizer
+          architecture={architecture}
+          isLoading={isLoading}
+          error={error}
+          onLayerSelect={handleLayerSelect}
+          onUploadNew={handleUploadNew}
+          onLoadSavedModel={handleLoadSavedModel}
+        />
+      </DropZone>
+    </div>
+  );
+}
+
+export default App;

src/components/Scene.tsx

@@ -0,0 +1,145 @@
+import { Suspense } from 'react';
+import { Canvas } from '@react-three/fiber';
+import { Stars, GizmoHelper, GizmoViewport } from '@react-three/drei';
+import { LayerNodes } from './layers';
+import { EdgeConnections } from './edges';
+import { CameraControls, useKeyboardShortcuts } from './controls';
+import { useVisualizerStore } from '@/core/store';
+
+/**
+ * Loading fallback component
+ */
+function LoadingFallback() {
+  return (
+    <mesh>
+      <sphereGeometry args={[0.5, 32, 32]} />
+      <meshStandardMaterial color="#4fc3f7" wireframe />
+    </mesh>
+  );
+}
+
+/**
+ * Scene lighting setup
+ */
+function SceneLighting() {
+  const config = useVisualizerStore(state => state.config);
+  const isDark = config.theme !== 'light';
+  
+  return (
+    <>
+      <ambientLight intensity={isDark ? 0.4 : 0.6} />
+      <directionalLight
+        position={[10, 20, 10]}
+        intensity={isDark ? 0.8 : 1}
+        castShadow
+        shadow-mapSize={[2048, 2048]}
+      />
+      <directionalLight position={[-10, 10, -10]} intensity={0.3} />
+      <pointLight position={[0, 10, 0]} intensity={0.5} color="#4fc3f7" />
+    </>
+  );
+}
+
+/**
+ * Scene background
+ */
+function SceneBackground() {
+  const config = useVisualizerStore(state => state.config);
+  
+  if (config.theme === 'light') {
+    return <color attach="background" args={['#f0f0f0']} />;
+  }
+  
+  if (config.theme === 'blueprint') {
+    return (
+      <>
+        <color attach="background" args={['#0a1929']} />
+        <gridHelper args={[100, 100, '#1e3a5f', '#0d2137']} position={[0, -10, 0]} />
+      </>
+    );
+  }
+  
+  // Dark theme (default)
+  return (
+    <>
+      <color attach="background" args={['#0f0f1a']} />
+      <Stars radius={100} depth={50} count={2000} factor={4} fade speed={0.5} />
+    </>
+  );
+}
+
+/**
+ * Keyboard shortcuts handler component
+ */
+function KeyboardHandler() {
+  useKeyboardShortcuts();
+  return null;
+}
+
+/**
+ * Grid and helper elements
+ */
+function SceneHelpers() {
+  const model = useVisualizerStore(state => state.model);
+  
+  if (!model) return null;
+  
+  return (
+    <>
+      <gridHelper
+        args={[50, 50, '#333', '#222']}
+        position={[0, -15, 0]}
+        rotation={[0, 0, 0]}
+      />
+      <GizmoHelper alignment="bottom-left" margin={[80, 80]}>
+        <GizmoViewport axisColors={['#f44336', '#4caf50', '#2196f3']} labelColor="white" />
+      </GizmoHelper>
+    </>
+  );
+}
+
+/**
+ * Main 3D network scene
+ */
+function NetworkScene() {
+  return (
+    <>
+      <SceneLighting />
+      <SceneBackground />
+      <SceneHelpers />
+      
+      <Suspense fallback={<LoadingFallback />}>
+        <EdgeConnections />
+        <LayerNodes />
+      </Suspense>
+    </>
+  );
+}
+
+/**
+ * Main 3D Canvas component
+ */
+export function Scene() {
+  return (
+    <Canvas
+      camera={{
+        position: [0, 5, 20],
+        fov: 60,
+        near: 0.1,
+        far: 1000,
+      }}
+      dpr={[1, 2]}
+      gl={{
+        antialias: true,
+        alpha: false,
+        powerPreference: 'high-performance',
+      }}
+    >
+      <CameraControls />
+      <KeyboardHandler />
+      <NetworkScene />
+    </Canvas>
+  );
+}
+
+export default Scene;

src/components/controls/CameraControls.tsx

@@ -0,0 +1,117 @@
+import { useRef, useEffect } from 'react';
+import { useThree, useFrame } from '@react-three/fiber';
+import { OrbitControls as DreiOrbitControls } from '@react-three/drei';
+import * as THREE from 'three';
+import { useVisualizerStore } from '@/core/store';
+
+/**
+ * Camera controls component with orbit, zoom, and pan
+ */
+export function CameraControls() {
+  const controlsRef = useRef<any>(null);
+  const model = useVisualizerStore(state => state.model);
+  const setCameraPosition = useVisualizerStore(state => state.setCameraPosition);
+  const setCameraTarget = useVisualizerStore(state => state.setCameraTarget);
+  
+  const { camera: threeCamera } = useThree();
+  
+  // Update store when camera moves
+  useFrame(() => {
+    if (controlsRef.current) {
+      const pos = threeCamera.position;
+      const target = controlsRef.current.target;
+      
+      // Debounce updates
+      setCameraPosition({ x: pos.x, y: pos.y, z: pos.z });
+      setCameraTarget({ x: target.x, y: target.y, z: target.z });
+    }
+  });
+  
+  // Reset camera when model changes
+  useEffect(() => {
+    if (model && controlsRef.current) {
+      // Compute camera position to frame the model
+      const nodeCount = model.graph.nodes.length;
+      const distance = Math.max(nodeCount * 1.5, 15);
+      
+      threeCamera.position.set(0, distance * 0.3, distance);
+      controlsRef.current.target.set(0, -nodeCount * 0.5, 0);
+      controlsRef.current.update();
+    }
+  }, [model, threeCamera]);
+  
+  return (
+    <DreiOrbitControls
+      ref={controlsRef}
+      enablePan={true}
+      enableZoom={true}
+      enableRotate={true}
+      minDistance={2}
+      maxDistance={100}
+      minPolarAngle={0}
+      maxPolarAngle={Math.PI}
+      dampingFactor={0.1}
+      rotateSpeed={0.5}
+      panSpeed={0.5}
+      zoomSpeed={0.8}
+    />
+  );
+}
+
+/**
+ * Camera animation for transitions
+ */
+export function useCameraAnimation() {
+  const { camera } = useThree();
+  const targetRef = useRef<THREE.Vector3 | null>(null);
+  const lookAtRef = useRef<THREE.Vector3 | null>(null);
+  const progressRef = useRef(0);
+  
+  useFrame((_, delta) => {
+    if (targetRef.current && progressRef.current < 1) {
+      progressRef.current += delta * 2;
+      const t = Math.min(progressRef.current, 1);
+      const eased = 1 - Math.pow(1 - t, 3); // Ease out cubic
+      
+      camera.position.lerp(targetRef.current, eased);
+      
+      if (lookAtRef.current) {
+        camera.lookAt(lookAtRef.current);
+      }
+      
+      if (t >= 1) {
+        targetRef.current = null;
+        lookAtRef.current = null;
+      }
+    }
+  });
+  
+  const animateTo = (position: THREE.Vector3, lookAt?: THREE.Vector3) => {
+    targetRef.current = position;
+    lookAtRef.current = lookAt || null;
+    progressRef.current = 0;
+  };
+  
+  return { animateTo };
+}
+
+/**
+ * Focus camera on a specific node
+ */
+export function useFocusNode() {
+  const computedNodes = useVisualizerStore(state => state.computedNodes);
+  const { animateTo } = useCameraAnimation();
+  
+  const focusNode = (nodeId: string) => {
+    const node = computedNodes.get(nodeId);
+    if (!node) return;
+    
+    const { x, y, z } = node.computedPosition;
+    const targetPos = new THREE.Vector3(x, y + 5, z + 10);
+    const lookAtPos = new THREE.Vector3(x, y, z);
+    
+    animateTo(targetPos, lookAtPos);
+  };
+  
+  return { focusNode };
+}

src/components/controls/Interaction.tsx

@@ -0,0 +1,138 @@
+import { useCallback, useEffect } from 'react';
+import { useThree } from '@react-three/fiber';
+import * as THREE from 'three';
+import { useVisualizerStore } from '@/core/store';
+
+/**
+ * Hook for raycasting and object picking
+ */
+export function useRaycast() {
+  const { camera, scene, gl } = useThree();
+  const raycaster = new THREE.Raycaster();
+  const pointer = new THREE.Vector2();
+  
+  const getIntersections = useCallback((event: MouseEvent | PointerEvent) => {
+    const rect = gl.domElement.getBoundingClientRect();
+    pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+    pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+    
+    raycaster.setFromCamera(pointer, camera);
+    return raycaster.intersectObjects(scene.children, true);
+  }, [camera, scene, gl]);
+  
+  return { getIntersections };
+}
+
+/**
+ * Keyboard shortcuts handler
+ */
+export function useKeyboardShortcuts() {
+  const resetCamera = useVisualizerStore(state => state.resetCamera);
+  const selectNode = useVisualizerStore(state => state.selectNode);
+  const selection = useVisualizerStore(state => state.selection);
+  const computedNodes = useVisualizerStore(state => state.computedNodes);
+  const updateConfig = useVisualizerStore(state => state.updateConfig);
+  const config = useVisualizerStore(state => state.config);
+  
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      switch (event.key) {
+        case 'Escape':
+          // Deselect current selection
+          selectNode(null);
+          break;
+        
+        case 'r':
+        case 'R':
+          // Reset camera
+          if (!event.ctrlKey && !event.metaKey) {
+            resetCamera();
+          }
+          break;
+        
+        case 'l':
+        case 'L':
+          // Toggle labels
+          updateConfig({ showLabels: !config.showLabels });
+          break;
+        
+        case 'e':
+        case 'E':
+          // Toggle edges
+          updateConfig({ showEdges: !config.showEdges });
+          break;
+        
+        case 'ArrowUp':
+        case 'ArrowDown': {
+          // Navigate between nodes
+          if (selection.selectedNodeId) {
+            const nodeIds = Array.from(computedNodes.keys());
+            const currentIndex = nodeIds.indexOf(selection.selectedNodeId);
+            const nextIndex = event.key === 'ArrowDown'
+              ? Math.min(currentIndex + 1, nodeIds.length - 1)
+              : Math.max(currentIndex - 1, 0);
+            selectNode(nodeIds[nextIndex]);
+          }
+          break;
+        }
+        
+        default:
+          break;
+      }
+    };
+    
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [resetCamera, selectNode, selection, computedNodes, updateConfig, config]);
+}
+
+/**
+ * Touch gesture handler for mobile
+ */
+export function useTouchGestures() {
+  // Placeholder for touch gesture handling
+  // Can be expanded for pinch-to-zoom, two-finger rotate, etc.
+}
+
+/**
+ * LOD (Level of Detail) manager based on camera distance
+ */
+export function useLODManager() {
+  const { camera } = useThree();
+  const computedNodes = useVisualizerStore(state => state.computedNodes);
+  const updateNodeLOD = useVisualizerStore(state => state.updateNodeLOD);
+  
+  // LOD thresholds
+  const LOD_DISTANCES = {
+    HIGH: 20,    // LOD 0 (full detail) when closer than this
+    MEDIUM: 40,  // LOD 1 (medium detail)
+    LOW: 80,     // LOD 2 (low detail)
+  };
+  
+  const updateLOD = useCallback(() => {
+    const lodMap = new Map<string, number>();
+    const cameraPos = camera.position;
+    
+    computedNodes.forEach((node, id) => {
+      const nodePos = new THREE.Vector3(
+        node.computedPosition.x,
+        node.computedPosition.y,
+        node.computedPosition.z
+      );
+      const distance = cameraPos.distanceTo(nodePos);
+      
+      let lod = 0;
+      if (distance > LOD_DISTANCES.LOW) {
+        lod = 2;
+      } else if (distance > LOD_DISTANCES.MEDIUM) {
+        lod = 1;
+      }
+      
+      lodMap.set(id, lod);
+    });
+    
+    updateNodeLOD(lodMap);
+  }, [camera, computedNodes, updateNodeLOD]);
+  
+  return { updateLOD };
+}

src/components/controls/index.ts

@@ -0,0 +1,2 @@
+export * from './CameraControls';
+export * from './Interaction';

src/components/edges/EdgeConnections.tsx

@@ -0,0 +1,89 @@
+import { useMemo } from 'react';
+import { useVisualizerStore } from '@/core/store';
+import { getEdgeComponent, EdgeStyle } from './EdgeGeometry';
+import { SmartConnection } from './NeuralConnection';
+
+/**
+ * Renders all edges/connections in the network
+ */
+export function EdgeConnections() {
+  const computedEdges = useVisualizerStore(state => state.computedEdges);
+  const computedNodes = useVisualizerStore(state => state.computedNodes);
+  const config = useVisualizerStore(state => state.config);
+  
+  // Check if we should use enhanced neural visualization
+  const useEnhancedEdges = useMemo(() => {
+    // Check if any node has enhanced attributes (from backend analysis)
+    for (const node of computedNodes.values()) {
+      if (node.params && (
+        node.params.out_features !== undefined ||
+        node.params.outFeatures !== undefined ||
+        node.params.out_channels !== undefined ||
+        node.params.outChannels !== undefined
+      )) {
+        return true;
+      }
+    }
+    return false;
+  }, [computedNodes]);
+  
+  const EdgeComponent = useMemo(
+    () => getEdgeComponent(config.edgeStyle as EdgeStyle || 'tube'),
+    [config.edgeStyle]
+  );
+  
+  if (!config.showEdges) return null;
+  
+  // Enhanced neural connections
+  if (useEnhancedEdges) {
+    return (
+      <group name="edge-connections">
+        {computedEdges.map((edge, index) => {
+          // Get source and target node info for neuron counts
+          const sourceNode = computedNodes.get(edge.source);
+          const targetNode = computedNodes.get(edge.target);
+          
+          const sourceNeurons = sourceNode?.params?.out_features || 
+                               sourceNode?.params?.outFeatures ||
+                               sourceNode?.params?.out_channels ||
+                               sourceNode?.params?.outChannels || 16;
+          
+          const targetNeurons = targetNode?.params?.in_features ||
+                               targetNode?.params?.inFeatures ||
+                               targetNode?.params?.in_channels ||
+                               targetNode?.params?.inChannels || 16;
+          
+          return (
+            <SmartConnection
+              key={edge.id || `edge-${index}`}
+              sourcePosition={edge.sourcePosition}
+              targetPosition={edge.targetPosition}
+              sourceNeurons={typeof sourceNeurons === 'number' ? sourceNeurons : 16}
+              targetNeurons={typeof targetNeurons === 'number' ? targetNeurons : 16}
+              color={edge.color}
+              highlighted={edge.highlighted}
+              animated={true}
+              style="bundle"
+            />
+          );
+        })}
+      </group>
+    );
+  }
+  
+  // Original edge rendering
+  return (
+    <group name="edge-connections">
+      {computedEdges.map((edge, index) => (
+        <EdgeComponent
+          key={edge.id || `edge-${index}`}
+          edge={edge}
+          style={config.edgeStyle as EdgeStyle}
+          animated={false}
+        />
+      ))}
+    </group>
+  );
+}
+
+export { EdgeConnections as Edges };

src/components/edges/EdgeGeometry.tsx

@@ -0,0 +1,206 @@
+import { useMemo, useRef } from 'react';
+import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
+import { Line, QuadraticBezierLine } from '@react-three/drei';
+import type { ComputedEdge } from '@/core/store';
+import type { Position3D } from '@/schema/types';
+
+/**
+ * Edge style type
+ */
+export type EdgeStyle = 'line' | 'tube' | 'arrow' | 'bezier';
+
+/**
+ * Props for edge components
+ */
+export interface EdgeProps {
+  edge: ComputedEdge;
+  style?: EdgeStyle;
+  animated?: boolean;
+  flowSpeed?: number;
+}
+
+/**
+ * Calculate control points for bezier curves
+ */
+function getBezierControlPoints(
+  start: Position3D,
+  end: Position3D
+): { mid1: Position3D; mid2: Position3D } {
+  const midY = (start.y + end.y) / 2;
+  const offsetZ = Math.abs(end.y - start.y) * 0.3;
+  
+  return {
+    mid1: { x: start.x, y: midY, z: start.z + offsetZ },
+    mid2: { x: end.x, y: midY, z: end.z + offsetZ },
+  };
+}
+
+/**
+ * Simple line edge
+ */
+export function LineEdge({ edge }: EdgeProps) {
+  const points = useMemo(() => [
+    new THREE.Vector3(edge.sourcePosition.x, edge.sourcePosition.y, edge.sourcePosition.z),
+    new THREE.Vector3(edge.targetPosition.x, edge.targetPosition.y, edge.targetPosition.z),
+  ], [edge.sourcePosition, edge.targetPosition]);
+  
+  const color = edge.highlighted ? '#ffffff' : edge.color;
+  const lineWidth = edge.highlighted ? 3 : 1.5;
+  
+  return (
+    <Line
+      points={points}
+      color={color}
+      lineWidth={lineWidth}
+      opacity={edge.visible ? 1 : 0.2}
+      transparent
+    />
+  );
+}
+
+/**
+ * Bezier curve edge for smoother connections
+ */
+export function BezierEdge({ edge }: EdgeProps) {
+  const start = useMemo(() => 
+    new THREE.Vector3(edge.sourcePosition.x, edge.sourcePosition.y, edge.sourcePosition.z),
+    [edge.sourcePosition]
+  );
+  
+  const end = useMemo(() =>
+    new THREE.Vector3(edge.targetPosition.x, edge.targetPosition.y, edge.targetPosition.z),
+    [edge.targetPosition]
+  );
+  
+  const control = useMemo(() => {
+    const { mid1 } = getBezierControlPoints(edge.sourcePosition, edge.targetPosition);
+    return new THREE.Vector3(mid1.x, mid1.y, mid1.z);
+  }, [edge.sourcePosition, edge.targetPosition]);
+  
+  const color = edge.highlighted ? '#ffffff' : edge.color;
+  const lineWidth = edge.highlighted ? 3 : 1.5;
+  
+  return (
+    <QuadraticBezierLine
+      start={start}
+      end={end}
+      mid={control}
+      color={color}
+      lineWidth={lineWidth}
+      opacity={edge.visible ? 1 : 0.2}
+      transparent
+    />
+  );
+}
+
+/**
+ * Tube edge for 3D pipe-like connections
+ */
+export function TubeEdge({ edge, animated = false, flowSpeed = 1 }: EdgeProps) {
+  const tubeRef = useRef<THREE.Mesh>(null);
+  
+  // Create curve for tube
+  const curve = useMemo(() => {
+    const start = new THREE.Vector3(
+      edge.sourcePosition.x,
+      edge.sourcePosition.y,
+      edge.sourcePosition.z
+    );
+    const end = new THREE.Vector3(
+      edge.targetPosition.x,
+      edge.targetPosition.y,
+      edge.targetPosition.z
+    );
+    
+    const { mid1, mid2 } = getBezierControlPoints(edge.sourcePosition, edge.targetPosition);
+    const control1 = new THREE.Vector3(mid1.x, mid1.y, mid1.z);
+    const control2 = new THREE.Vector3(mid2.x, mid2.y, mid2.z);
+    
+    return new THREE.CubicBezierCurve3(start, control1, control2, end);
+  }, [edge.sourcePosition, edge.targetPosition]);
+  
+  // Tube geometry
+  const geometry = useMemo(() => {
+    const radius = edge.highlighted ? 0.06 : 0.03;
+    return new THREE.TubeGeometry(curve, 32, radius, 8, false);
+  }, [curve, edge.highlighted]);
+  
+  // Animate flow effect
+  useFrame(({ clock }) => {
+    if (animated && tubeRef.current) {
+      const material = tubeRef.current.material as THREE.MeshStandardMaterial;
+      if (material.map) {
+        material.map.offset.y = clock.getElapsedTime() * flowSpeed;
+      }
+    }
+  });
+  
+  const color = edge.highlighted ? '#ffffff' : edge.color;
+  
+  return (
+    <mesh ref={tubeRef} geometry={geometry}>
+      <meshStandardMaterial
+        color={color}
+        opacity={edge.visible ? 0.8 : 0.2}
+        transparent
+        metalness={0.3}
+        roughness={0.6}
+      />
+    </mesh>
+  );
+}
+
+/**
+ * Arrow edge with direction indicator
+ */
+export function ArrowEdge({ edge }: EdgeProps) {
+  const start = new THREE.Vector3(
+    edge.sourcePosition.x,
+    edge.sourcePosition.y,
+    edge.sourcePosition.z
+  );
+  const end = new THREE.Vector3(
+    edge.targetPosition.x,
+    edge.targetPosition.y,
+    edge.targetPosition.z
+  );
+  
+  const direction = end.clone().sub(start).normalize();
+  const arrowPosition = end.clone().sub(direction.clone().multiplyScalar(0.3));
+  
+  const color = edge.highlighted ? '#ffffff' : edge.color;
+  
+  // Calculate arrow rotation
+  const quaternion = new THREE.Quaternion();
+  quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), direction);
+  
+  return (
+    <group>
+      <LineEdge edge={edge} />
+      {/* Arrow head */}
+      <mesh position={arrowPosition} quaternion={quaternion}>
+        <coneGeometry args={[0.1, 0.2, 8]} />
+        <meshStandardMaterial color={color} />
+      </mesh>
+    </group>
+  );
+}
+
+/**
+ * Factory function to get edge component by style
+ */
+export function getEdgeComponent(style: EdgeStyle): React.ComponentType<EdgeProps> {
+  switch (style) {
+    case 'line':
+      return LineEdge;
+    case 'bezier':
+      return BezierEdge;
+    case 'tube':
+      return TubeEdge;
+    case 'arrow':
+      return ArrowEdge;
+    default:
+      return TubeEdge;
+  }
+}

src/components/edges/NeuralConnection.tsx

@@ -0,0 +1,359 @@
+/**
+ * Neural Network Connection Visualization
+ * Shows dense connections between layers like actual neural networks
+ */
+
+import { useMemo, useRef } from 'react';
+import * as THREE from 'three';
+import { useFrame } from '@react-three/fiber';
+import type { Position3D } from '@/schema/types';
+
+export interface NeuralConnectionProps {
+  sourcePosition: Position3D;
+  targetPosition: Position3D;
+  sourceNeurons?: number;
+  targetNeurons?: number;
+  color?: string;
+  highlighted?: boolean;
+  animated?: boolean;
+  connectionDensity?: number; // 0-1, how many connections to show
+  style?: 'single' | 'dense' | 'bundle';
+}
+
+/**
+ * Single connection line between layers
+ */
+export function SingleConnection({
+  sourcePosition,
+  targetPosition,
+  color = '#ffffff',
+  highlighted = false,
+}: NeuralConnectionProps) {
+  const geometry = useMemo(() => {
+    const points = [
+      new THREE.Vector3(sourcePosition.x, sourcePosition.y, sourcePosition.z),
+      new THREE.Vector3(targetPosition.x, targetPosition.y, targetPosition.z),
+    ];
+    return new THREE.BufferGeometry().setFromPoints(points);
+  }, [sourcePosition, targetPosition]);
+  
+  return (
+    <primitive object={new THREE.Line(geometry, new THREE.LineBasicMaterial({
+      color: highlighted ? '#ffffff' : color,
+      transparent: true,
+      opacity: highlighted ? 1 : 0.5,
+    }))} />
+  );
+}
+
+/**
+ * Dense connection bundle showing multiple lines
+ */
+export function DenseConnection({
+  sourcePosition,
+  targetPosition,
+  sourceNeurons = 16,
+  targetNeurons = 16,
+  color = '#4488ff',
+  highlighted = false,
+  animated = true,
+  connectionDensity = 0.3,
+}: NeuralConnectionProps) {
+  const groupRef = useRef<THREE.Group>(null);
+  const materialRef = useRef<THREE.LineBasicMaterial>(null);
+  
+  // Limit connections for performance
+  const maxConnections = 100;
+  const numConnections = Math.min(
+    Math.floor(sourceNeurons * targetNeurons * connectionDensity),
+    maxConnections
+  );
+  
+  // Generate connection lines
+  const lines = useMemo(() => {
+    const connections: { start: THREE.Vector3; end: THREE.Vector3 }[] = [];
+    
+    // Calculate source and target layer bounds
+    const sourceSpread = Math.min(Math.sqrt(sourceNeurons) * 0.1, 0.4);
+    const targetSpread = Math.min(Math.sqrt(targetNeurons) * 0.1, 0.4);
+    
+    for (let i = 0; i < numConnections; i++) {
+      // Random positions within layer bounds
+      const srcOffset = {
+        y: (Math.random() - 0.5) * sourceSpread,
+        z: (Math.random() - 0.5) * sourceSpread * 0.5,
+      };
+      const tgtOffset = {
+        y: (Math.random() - 0.5) * targetSpread,
+        z: (Math.random() - 0.5) * targetSpread * 0.5,
+      };
+      
+      connections.push({
+        start: new THREE.Vector3(
+          sourcePosition.x + 0.3, // Offset from layer center
+          sourcePosition.y + srcOffset.y,
+          sourcePosition.z + srcOffset.z
+        ),
+        end: new THREE.Vector3(
+          targetPosition.x - 0.3, // Offset from layer center
+          targetPosition.y + tgtOffset.y,
+          targetPosition.z + tgtOffset.z
+        ),
+      });
+    }
+    
+    return connections;
+  }, [sourcePosition, targetPosition, sourceNeurons, targetNeurons, numConnections]);
+  
+  // Animate opacity
+  useFrame((state) => {
+    if (animated && materialRef.current) {
+      const pulse = Math.sin(state.clock.elapsedTime * 2) * 0.1 + 0.3;
+      materialRef.current.opacity = highlighted ? 0.8 : pulse;
+    }
+  });
+  
+  // Create buffer geometry for all lines
+  const geometry = useMemo(() => {
+    const positions: number[] = [];
+    
+    lines.forEach(line => {
+      positions.push(line.start.x, line.start.y, line.start.z);
+      positions.push(line.end.x, line.end.y, line.end.z);
+    });
+    
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+    return geo;
+  }, [lines]);
+  
+  return (
+    <group ref={groupRef}>
+      <lineSegments geometry={geometry}>
+        <lineBasicMaterial
+          ref={materialRef}
+          color={highlighted ? '#ffffff' : color}
+          transparent
+          opacity={0.3}
+          depthWrite={false}
+        />
+      </lineSegments>
+    </group>
+  );
+}
+
+/**
+ * Bundled connection - shows as a tube/pipe
+ */
+export function BundledConnection({
+  sourcePosition,
+  targetPosition,
+  sourceNeurons = 16,
+  targetNeurons = 16,
+  color = '#4488ff',
+  highlighted = false,
+  animated = true,
+}: NeuralConnectionProps) {
+  const meshRef = useRef<THREE.Mesh>(null);
+  
+  // Calculate bundle thickness based on connection count
+  const connectionStrength = Math.log2(Math.min(sourceNeurons, targetNeurons) + 1) * 0.02;
+  const thickness = Math.max(0.02, Math.min(connectionStrength, 0.1));
+  
+  // Create tube path
+  const curve = useMemo(() => {
+    const start = new THREE.Vector3(sourcePosition.x, sourcePosition.y, sourcePosition.z);
+    const end = new THREE.Vector3(targetPosition.x, targetPosition.y, targetPosition.z);
+    
+    // Bezier control points for smooth curve
+    const midX = (start.x + end.x) / 2;
+    const control1 = new THREE.Vector3(midX, start.y, start.z);
+    const control2 = new THREE.Vector3(midX, end.y, end.z);
+    
+    return new THREE.CubicBezierCurve3(start, control1, control2, end);
+  }, [sourcePosition, targetPosition]);
+  
+  const geometry = useMemo(() => {
+    return new THREE.TubeGeometry(curve, 20, thickness, 8, false);
+  }, [curve, thickness]);
+  
+  // Animate flow effect
+  useFrame((state) => {
+    if (animated && meshRef.current) {
+      const material = meshRef.current.material as THREE.MeshStandardMaterial;
+      if (material.emissiveIntensity !== undefined) {
+        material.emissiveIntensity = Math.sin(state.clock.elapsedTime * 3) * 0.2 + 0.3;
+      }
+    }
+  });
+  
+  const baseColor = new THREE.Color(color);
+  
+  return (
+    <mesh ref={meshRef} geometry={geometry}>
+      <meshStandardMaterial
+        color={highlighted ? '#ffffff' : baseColor}
+        emissive={baseColor}
+        emissiveIntensity={0.3}
+        transparent
+        opacity={highlighted ? 0.9 : 0.6}
+        metalness={0.3}
+        roughness={0.7}
+      />
+    </mesh>
+  );
+}
+
+/**
+ * Flow particles along connection
+ */
+export function FlowParticles({
+  sourcePosition,
+  targetPosition,
+  color = '#ffffff',
+  particleCount = 5,
+  speed = 1,
+}: {
+  sourcePosition: Position3D;
+  targetPosition: Position3D;
+  color?: string;
+  particleCount?: number;
+  speed?: number;
+}) {
+  const particlesRef = useRef<THREE.Points>(null);
+  
+  // Create particle positions
+  const { positions, offsets } = useMemo(() => {
+    const pos = new Float32Array(particleCount * 3);
+    const off = new Float32Array(particleCount);
+    
+    for (let i = 0; i < particleCount; i++) {
+      off[i] = i / particleCount; // Spread particles along path
+      
+      // Initial positions will be updated in useFrame
+      pos[i * 3] = sourcePosition.x;
+      pos[i * 3 + 1] = sourcePosition.y;
+      pos[i * 3 + 2] = sourcePosition.z;
+    }
+    
+    return { positions: pos, offsets: off };
+  }, [sourcePosition, particleCount]);
+  
+  const geometry = useMemo(() => {
+    const geo = new THREE.BufferGeometry();
+    geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+    return geo;
+  }, [positions]);
+  
+  // Animate particles
+  useFrame((state) => {
+    if (particlesRef.current) {
+      const posAttr = particlesRef.current.geometry.getAttribute('position') as THREE.BufferAttribute;
+      
+      for (let i = 0; i < particleCount; i++) {
+        // Calculate t along path (0 to 1)
+        const t = ((state.clock.elapsedTime * speed + offsets[i]) % 1);
+        
+        // Lerp position
+        posAttr.setXYZ(
+          i,
+          sourcePosition.x + (targetPosition.x - sourcePosition.x) * t,
+          sourcePosition.y + (targetPosition.y - sourcePosition.y) * t,
+          sourcePosition.z + (targetPosition.z - sourcePosition.z) * t
+        );
+      }
+      
+      posAttr.needsUpdate = true;
+    }
+  });
+  
+  return (
+    <points ref={particlesRef} geometry={geometry}>
+      <pointsMaterial
+        color={color}
+        size={0.05}
+        transparent
+        opacity={0.8}
+        sizeAttenuation
+      />
+    </points>
+  );
+}
+
+/**
+ * Smart connection that chooses visualization based on layer sizes
+ */
+export function SmartConnection({
+  sourcePosition,
+  targetPosition,
+  sourceNeurons = 16,
+  targetNeurons = 16,
+  color = '#4488ff',
+  highlighted = false,
+  animated = true,
+  style = 'bundle',
+}: NeuralConnectionProps) {
+  const totalConnections = sourceNeurons * targetNeurons;
+  
+  // Choose visualization based on connection count
+  if (style === 'single' || totalConnections < 50) {
+    return (
+      <SingleConnection
+        sourcePosition={sourcePosition}
+        targetPosition={targetPosition}
+        color={color}
+        highlighted={highlighted}
+      />
+    );
+  }
+  
+  if (style === 'dense' || totalConnections < 500) {
+    return (
+      <>
+        <DenseConnection
+          sourcePosition={sourcePosition}
+          targetPosition={targetPosition}
+          sourceNeurons={sourceNeurons}
+          targetNeurons={targetNeurons}
+          color={color}
+          highlighted={highlighted}
+          animated={animated}
+          connectionDensity={0.2}
+        />
+        {animated && (
+          <FlowParticles
+            sourcePosition={sourcePosition}
+            targetPosition={targetPosition}
+            color={color}
+            particleCount={3}
+            speed={0.5}
+          />
+        )}
+      </>
+    );
+  }
+  
+  // For very dense connections, use bundled representation
+  return (
+    <>
+      <BundledConnection
+        sourcePosition={sourcePosition}
+        targetPosition={targetPosition}
+        sourceNeurons={sourceNeurons}
+        targetNeurons={targetNeurons}
+        color={color}
+        highlighted={highlighted}
+        animated={animated}
+      />
+      {animated && (
+        <FlowParticles
+          sourcePosition={sourcePosition}
+          targetPosition={targetPosition}
+          color="#ffffff"
+          particleCount={5}
+          speed={0.8}
+        />
+      )}
+    </>
+  );
+}

src/components/edges/index.ts

@@ -0,0 +1,2 @@
+export * from './EdgeGeometry';
+export * from './EdgeConnections';