[WIP] Add browser based UI for constructing networks

README.md

@@ -11,6 +11,7 @@ A lightweight and modular library for rapidly developing and constructing PyTorc
 ## Features
 
 - 🧱 **Modular Architecture**: Build networks using composable node-based components
+- 🎨 **Visual Network Builder**: Browser-based UI for graphically constructing networks
 - 🔧 **Pre-built Networks**: Ready-to-use implementations of U-Net, ScaleNet, and AttentiveScaleNet
 - 📐 **Automatic Shape Propagation**: Smart shape calculation and management throughout the network
 - 🎯 **Specialized for Segmentation**: Optimized for image segmentation tasks
@@ -43,6 +44,24 @@ pip install -e ".[dev]"
 
 ## Quick Start
 
+### Visual Network Builder (New!)
+
+Build networks graphically using the browser-based UI:
+
+```bash
+# Launch the visual network builder
+leibnetz-ui
+```
+
+This opens a browser-based interface where you can:
+- Drag and drop nodes onto a canvas
+- Connect nodes visually
+- Edit node properties in real-time
+- Generate Python code automatically
+- Export/import network configurations as JSON
+
+See [UI documentation](src/leibnetz/ui/README.md) for more details.
+
 ### Building a Simple U-Net
 
 ```python

pyproject.toml

@@ -70,6 +70,9 @@ Repository = "https://github.com/janelia-cellmap/LeibNetz"
 Documentation = "https://github.com/janelia-cellmap/LeibNetz"
 Issues = "https://github.com/janelia-cellmap/LeibNetz/issues"
 
+[project.scripts]
+leibnetz-ui = "leibnetz.ui:main"
+
 # Versioning configuration using hatch-vcs for date-based versioning
 [tool.hatch.version]
 source = "vcs"

src/leibnetz/__init__.py

@@ -9,3 +9,4 @@
 )
 from .model_wrapper import ModelWrapper
 from .nets import build_attentive_scale_net, build_scalenet, build_unet
+from .ui import serve_ui

src/leibnetz/ui/README.md

@@ -0,0 +1,126 @@
+# LeibNetz Network Builder UI
+
+A browser-based visual interface for constructing LeibNetz neural networks using drag-and-drop.
+
+## Features
+
+- **Visual Node Palette**: Drag and drop nodes onto the canvas
+- **Interactive Canvas**: Pan, zoom, and connect nodes visually
+- **Node Properties Editor**: Edit node parameters in real-time
+- **Connection Management**: Visual connections between node outputs and inputs
+- **Code Generation**: Generate ready-to-use Python code from your visual network
+- **Import/Export**: Save and load network configurations as JSON
+- **No External Dependencies**: Pure HTML/CSS/JavaScript implementation
+
+## Available Nodes
+
+- **ConvPassNode**: Convolutional layers with activation functions
+- **ResampleNode**: Upsampling/downsampling operations
+- **ConvResampleNode**: Combined convolution and resampling
+- **AdditiveAttentionGateNode**: Attention mechanisms for feature gating
+- **WrapperNode**: Wrap existing PyTorch modules as nodes
+
+## Usage
+
+### Starting the UI Server
+
+From command line:
+
+```bash
+# Start with default settings (port 8080)
+leibnetz-ui
+
+# Specify a custom port
+leibnetz-ui --port 9000
+
+# Don't open browser automatically
+leibnetz-ui --no-browser
+```
+
+From Python:
+
+```python
+from leibnetz import serve_ui
+
+# Start with default settings
+serve_ui()
+
+# Customize port and browser behavior
+serve_ui(port=9000, open_browser=False)
+```
+
+### Building Networks
+
+1. **Add Nodes**: Drag node types from the left palette onto the canvas
+2. **Connect Nodes**: Click on an output port (green) and drag to an input port (red)
+3. **Edit Properties**: Click on a node to view and edit its properties in the right panel
+4. **Generate Code**: Click the "Generate Code" button to create Python code
+5. **Export/Import**: Save your network as JSON for later use
+
+### Keyboard Shortcuts
+
+- **Delete**: Remove selected node
+- **Escape**: Deselect node or cancel connection
+
+## Example Workflow
+
+1. Start the UI server:
+   ```bash
+   leibnetz-ui
+   ```
+
+2. Build your network visually by dragging nodes and connecting them
+
+3. Generate Python code and copy it to your project:
+   ```python
+   # Generated LeibNetz Network
+   from leibnetz import LeibNet
+   from leibnetz.nodes import ConvPassNode, ResampleNode
+
+   # Define nodes
+   node1 = ConvPassNode(
+       input_keys=["input"],
+       output_keys=["output"],
+       input_nc=1,
+       output_nc=32,
+       kernel_sizes=[3, 3],
+       activation="ReLU",
+   )
+
+   # ... more nodes ...
+
+   # Create model
+   model = LeibNet(nodes, outputs)
+   ```
+
+## Architecture
+
+The UI consists of three main components:
+
+- **network_builder.html**: Main UI structure and styling
+- **network_builder.js**: Interactive canvas and network logic
+- **server.py**: Simple HTTP server to serve the UI files
+
+## Development
+
+The UI is built with vanilla JavaScript and requires no build step. To modify:
+
+1. Edit the HTML/JavaScript files in `src/leibnetz/ui/`
+2. Refresh your browser to see changes
+3. No compilation or bundling required
+
+## Limitations
+
+- Network validation is basic (doesn't check shape compatibility)
+- Connections are simplified (all connections go through input/output keys)
+- Generated code requires manual adjustment of the outputs dictionary
+- No undo/redo functionality (yet)
+
+## Future Enhancements
+
+- Real-time shape propagation and validation
+- More sophisticated layout algorithms
+- Zoom and pan controls
+- Node grouping and subgraphs
+- Pre-built network templates
+- Undo/redo support

src/leibnetz/ui/__init__.py

@@ -0,0 +1,10 @@
+"""
+Browser-based UI for constructing LeibNetz networks visually.
+
+This module provides a web-based interface for visually designing and
+constructing neural network architectures using LeibNetz nodes.
+"""
+
+from .server import main, serve_ui
+
+__all__ = ["serve_ui", "main"]

src/leibnetz/ui/__main__.py

@@ -0,0 +1,11 @@
+"""
+Entry point for running the UI server as a module.
+
+This allows the server to be started with:
+    python -m leibnetz.ui
+"""
+
+from .server import main
+
+if __name__ == "__main__":
+    main()