- Redesign layout: left toolbar, center canvas, right sidebar
- Add vertical tool strip with keyboard shortcuts (V, R, E, F, W, B, G, Z, H)
- Collapsible sidebar panels: Tool Options, AI Edit, Quick Actions, Eyes, Layers, History
- Canvas now fills available space with checkerboard background
- Add zoom controls in status bar
- Add menu bar with New, Save, Reset
- Remove old multi-column layout
Frontend changes:
- Wire Smart Select and Color Select to canvas click handlers
- Add externalSelection prop to ImageCanvas for displaying AI-generated selections
- Add zoom controls (mouse wheel + buttons) to ImageCanvas
- Fix layer buttons (New Layer, Delete, Duplicate) with proper handlers
- Lift advancedToolMode state to App.jsx for coordination between components
- Add tool mode indicator overlay on canvas
Backend changes:
- Update smart-select endpoint to return JSON with polygon and bbox data
- Update color-select endpoint to return JSON with polygon and bbox data
- Add _mask_to_polygon helper function using OpenCV contour detection
- Add cv2 and base64 imports to tools.py
API changes:
- smartSelect and colorSelect now return { polygon, bbox, mask_base64 }
Backend:
- Add /tools router with background removal, smart select, color select
- Add rembg dependency for AI background removal
- Add layer management API (list, flatten)
- Fix transparency preservation in blend_patch (veil collapse fix)
- Preserve alpha channel when reverting/resetting images
Frontend:
- Add AdvancedTools panel with background removal, smart select, color select
- Add Layers panel with drag-to-reorder, visibility toggle, flatten
- Add toolsApi for new backend endpoints
- Make right panel scrollable for additional controls
This adds "Photoshop light" capabilities:
- Remove background and create layer
- Smart object selection (click to select)
- Color selection with tolerance
- Layer system with compositing
Fixes:
- Remove scale limit to allow image to fill canvas
- Fix Lasso tool by using Polygon instead of Polyline
- Remove duplicate Clear Selection button
- Fix Undo/Redo dependencies with useCallback
New Features:
- Eye Catalog UI for browsing and applying saved eyes
- Upload new eyes to catalog
- Apply eyes to selected areas with feathering
- Delete eyes from catalog
- Make canvas use full viewport height for larger image display
- Add download button to export edited images
- Implement Undo/Redo with Ctrl+Z / Ctrl+Y keyboard shortcuts
- Add transform controls for selections (move, resize, rotate)
- Add warn on reload to prevent data loss
- Make project naming optional, auto-generate from filename
- Fixed nginx.conf to proxy all API routes (/patches, /generate, /health, /docs)
- Changed frontend port to 3080 in docker-compose.yml
- Added Caddyfile for Caddy2 reverse proxy configuration
- Supports both FQDN and IP:port configurations
This commit implements a full-stack AI photo editing application that
allows users to regenerate only selected areas of images using AI.
Features implemented:
- Frontend (React + Fabric.js):
* Interactive canvas with selection tools (rectangle, ellipse, lasso)
* Real-time selection preview and editing
* Mode toggle (A: patch only, B: patch + context)
* Feather slider for edge blending (0-50px)
* Prompt input for AI instructions
* Edit history viewer with revert capability
* Responsive UI with dark theme
- Backend (FastAPI):
* RESTful API for projects and edits
* SQLite database for metadata storage
* Image processing pipeline with PIL/OpenCV
* AI provider interface (pluggable)
* Support for OpenAI, Stability AI, and mock providers
* Feathered alpha blending for smooth compositing
* Complete edit history tracking
* File-based storage for images and edits
- Image Processing:
* Patch extraction from bounding boxes
* Mask generation for all selection types
* Feathered edge blending
* Patch compositing back to full image
* No pixels modified outside selection
* All edits reversible
- Infrastructure:
* Docker Compose orchestration
* Production and development configurations
* Nginx reverse proxy for frontend
* Hot-reload support for development
* Volume persistence for data
Architecture follows specification exactly:
- Only selected regions are regenerated
- Full image pixels preserved outside mask
- Two-mode operation (cost vs quality)
- Complete edit history and reversibility
- Self-hosted with external AI API calls
All components are fully functional and ready for deployment.
Claude