# ozpyn/ai-image-editor architecture

> Architecture diagram of the GitHub repository ozpyn/ai-image-editor, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/ozpyn/ai-image-editor
- Repository: https://github.com/ozpyn/ai-image-editor

## Overview

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: [`frontend/src/App.jsx`](https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/App.jsx) (App State), [`frontend/src/features/canvas/useCanvas.jsx`](https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/features/canvas/useCanvas.jsx) (Canvas Runtime), [`frontend/src/features/aiFeatures/useAiFeatures.jsx`](https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/features/aiFeatures/useAiFeatures.jsx) (AI Feature Client), [`frontend/src/components/layout/canvasArea.jsx`](https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/components/layout/canvasArea.jsx) (Canvas Area)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Editor Interface"]
  node_app["App State<br/>[App.jsx]"]
  node_menu["Menu Bar<br/>[menuBar.jsx]"]
  node_tools["Toolbox<br/>[toolBox.jsx]"]
  node_properties["Properties Panel"]
  node_canvas_view["Canvas Area<br/>[canvasArea.jsx]"]
  node_footer["Footer<br/>[footer.jsx]"]
end

subgraph group_canvas["Canvas Editing"]
  node_canvas_runtime["Canvas Runtime<br/>[useCanvas.jsx]"]
  node_canvas_utils["Canvas Operations<br/>[canvasUtils.js]"]
  node_image_loader["Image Loading<br/>[loadImage.js]"]
end

subgraph group_ai["AI Operations"]
  node_ai_client["AI Feature Client<br/>[useAiFeatures.jsx]"]
end

subgraph group_service["Image Service"]
  node_api["Flask API<br/>[app.py]"]
  node_ai_models["AI Image Operations<br/>[ai.py]"]
end

node_user(("Editor User"))

node_user -->|"uses"| node_app
node_app -->|"renders"| node_menu
node_app -->|"renders"| node_tools
node_app -->|"renders"| node_canvas_view
node_app -->|"renders"| node_properties
node_app -->|"renders"| node_footer
node_app -->|"creates"| node_ai_client
node_canvas_view -->|"uses"| node_canvas_runtime
node_canvas_runtime -->|"calls"| node_canvas_utils
node_canvas_runtime -->|"loads images"| node_image_loader
node_canvas_utils -->|"uses"| node_image_loader
node_ai_client -->|"exports and applies"| node_canvas_runtime
node_ai_client -.->|"sends requests"| node_api
node_api -->|"invokes operations"| node_ai_models

click node_app "https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/App.jsx"
click node_menu "https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/components/layout/menuBar.jsx"
click node_tools "https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/components/layout/toolBox.jsx"
click node_properties "https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/components/layout/propertiesPanel.jsx"
click node_canvas_view "https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/components/layout/canvasArea.jsx"
click node_footer "https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/components/layout/footer.jsx"
click node_canvas_runtime "https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/features/canvas/useCanvas.jsx"
click node_canvas_utils "https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/features/canvas/canvasUtils.js"
click node_image_loader "https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/features/canvas/loadImage.js"
click node_ai_client "https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/features/aiFeatures/useAiFeatures.jsx"
click node_api "https://github.com/ozpyn/ai-image-editor/blob/main/srv/app.py"
click node_ai_models "https://github.com/ozpyn/ai-image-editor/blob/main/srv/ai.py"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_menu,node_tools,node_properties,node_canvas_view,node_footer,node_user toneBlue
class node_canvas_runtime,node_canvas_utils,node_image_loader toneAmber
class node_ai_client toneMint
class node_api,node_ai_models toneRose
```

## Components

### Editor Interface

- [App State](https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/App.jsx): `frontend/src/App.jsx`
- [Menu Bar](https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/components/layout/menuBar.jsx): `frontend/src/components/layout/menuBar.jsx`
- [Toolbox](https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/components/layout/toolBox.jsx): `frontend/src/components/layout/toolBox.jsx`
- [Properties Panel](https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/components/layout/propertiesPanel.jsx): `frontend/src/components/layout/propertiesPanel.jsx`
- [Canvas Area](https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/components/layout/canvasArea.jsx): `frontend/src/components/layout/canvasArea.jsx`
- [Footer](https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/components/layout/footer.jsx): `frontend/src/components/layout/footer.jsx`

### Canvas Editing

- [Canvas Runtime](https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/features/canvas/useCanvas.jsx): `frontend/src/features/canvas/useCanvas.jsx`
- [Canvas Operations](https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/features/canvas/canvasUtils.js): `frontend/src/features/canvas/canvasUtils.js`
- [Image Loading](https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/features/canvas/loadImage.js): `frontend/src/features/canvas/loadImage.js`

### AI Operations

- [AI Feature Client](https://github.com/ozpyn/ai-image-editor/blob/main/frontend/src/features/aiFeatures/useAiFeatures.jsx): `frontend/src/features/aiFeatures/useAiFeatures.jsx`

### Image Service

- [Flask API](https://github.com/ozpyn/ai-image-editor/blob/main/srv/app.py): `srv/app.py`
- [AI Image Operations](https://github.com/ozpyn/ai-image-editor/blob/main/srv/ai.py): `srv/ai.py`

### Other components

- **Editor User**

## Connections

- Editor User → App State: uses
- App State → Menu Bar: renders (evidence: `frontend/src/App.jsx`)
- App State → Toolbox: renders (evidence: `frontend/src/App.jsx`)
- App State → Canvas Area: renders (evidence: `frontend/src/App.jsx`)
- App State → Properties Panel: renders (evidence: `frontend/src/App.jsx`)
- App State → Footer: renders (evidence: `frontend/src/App.jsx`)
- App State → AI Feature Client: creates (evidence: `frontend/src/App.jsx`)
- Canvas Area → Canvas Runtime: uses (evidence: `frontend/src/components/layout/canvasArea.jsx`)
- Canvas Runtime → Canvas Operations: calls (evidence: `frontend/src/features/canvas/useCanvas.jsx`)
- Canvas Runtime → Image Loading: loads images (evidence: `frontend/src/features/canvas/useCanvas.jsx`)
- Canvas Operations → Image Loading: uses (evidence: `frontend/src/features/canvas/canvasUtils.js`)
- AI Feature Client → Canvas Runtime: exports and applies (evidence: `frontend/src/features/aiFeatures/useAiFeatures.jsx`)
- AI Feature Client → Flask API: sends requests
- Flask API → AI Image Operations: invokes operations (evidence: `srv/app.py`)