How ozpyn/ai-image-editor works
This is a browser-based AI image editor: users import an image, edit it on a canvas, invoke AI operations, and apply or export results. The frontend separates layout, canvas behavior, and AI requests; a Flask service dispatches image operations to model-backed routines. The excerpts show canvas helpers and several backend calls, but do not expose every UI handler or route, so those links are omitted or marked unverified.
Main entry points: App.jsx App State · useCanvas.jsx Canvas Runtime · useAiFeatures.jsx AI Feature Client · canvasArea.jsx Canvas Area
Components 13
Editor Interface
- App State
frontend/src/App.jsx - Menu Bar
frontend/src/components/layout/menuBar.jsx - Toolbox
frontend/src/components/layout/toolBox.jsx - Properties Panel
frontend/src/components/layout/propertiesPanel.jsx - Canvas Area
frontend/src/components/layout/canvasArea.jsx - Footer
frontend/src/components/layout/footer.jsx
Canvas Editing
- Canvas Runtime
frontend/src/features/canvas/useCanvas.jsx - Canvas Operations
frontend/src/features/canvas/canvasUtils.js - Image Loading
frontend/src/features/canvas/loadImage.js
AI Operations
- AI Feature Client
frontend/src/features/aiFeatures/useAiFeatures.jsx
Image Service
- Flask API
srv/app.py - AI Image Operations
srv/ai.py
Other components
- Editor User
Connections 14
- Editor User → App State: uses
- App State → Menu Bar: renders
frontend/src/App.jsx - App State → Toolbox: renders
frontend/src/App.jsx - App State → Canvas Area: renders
frontend/src/App.jsx - App State → Properties Panel: renders
frontend/src/App.jsx - App State → Footer: renders
frontend/src/App.jsx - App State → AI Feature Client: creates
frontend/src/App.jsx - Canvas Area → Canvas Runtime: uses
frontend/src/components/layout/canvasArea.jsx - Canvas Runtime → Canvas Operations: calls
frontend/src/features/canvas/useCanvas.jsx - Canvas Runtime → Image Loading: loads images
frontend/src/features/canvas/useCanvas.jsx - Canvas Operations → Image Loading: uses
frontend/src/features/canvas/canvasUtils.js - AI Feature Client → Canvas Runtime: exports and applies
frontend/src/features/aiFeatures/useAiFeatures.jsx - AI Feature Client → Flask API: sends requests
- Flask API → AI Image Operations: invokes operations
srv/app.py