# aashiqmahato/studiotools architecture

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

- Interactive diagram: https://gitdiagram.com/aashiqmahato/studiotools
- Repository: https://github.com/aashiqmahato/studiotools

## Overview

Studio Tools is a browser-based image utility platform: a user selects a tool, uploads or edits an image, previews the result, then exports it. The React app routes each tool to its feature UI and typed API client; the Express API dispatches requests to processing services and local engines. Major workflows include background removal, upscaling, retouching, watermark detection/removal, compression, photo generation, format conversion, and in-browser crop/edit. The README documents background removal and upscaling as working; other tools are represented by routes and source modules. Unsampled wiring is omitted.

Main entry points: [`frontend/src/routes/AppRoutes.tsx`](https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/routes/AppRoutes.tsx) (Tool routes), [`backend/src/routes/index.ts`](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/routes/index.ts) (API routes), [`frontend/src/lib/api/apiClient.ts`](https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/lib/api/apiClient.ts) (Typed API clients), [`frontend/src/pages/RemoveBackground/RemoveBackgroundPage.tsx`](https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/RemoveBackground/RemoveBackgroundPage.tsx) (Background editor)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Browser application"]
  node_routes["Tool routes<br/>[AppRoutes.tsx]"]
  node_remove_ui["Background editor"]
  node_upscale_ui["Upscale workspace<br/>[UpscalerPage.tsx]"]
  node_retouch_ui["Retouch workspace<br/>[RetouchPage.tsx]"]
  node_watermark_ui["Watermark workspace"]
  node_compress_ui["Compression workspace<br/>[CompressorPage.tsx]"]
  node_photo_ui["Photo generator"]
  node_editor_ui["Crop and editor<br/>[EditorPage.tsx]"]
  node_api_client["Typed API clients<br/>[apiClient.ts]"]
  node_browser_editor["Canvas editing<br/>[PhotoEditor.tsx]"]
  node_mask_engine["Mask engine<br/>[useMaskEngine.ts]"]
end

subgraph group_api["API dispatch"]
  node_api_app["Express API<br/>[app.ts]"]
  node_api_routes["API routes<br/>[index.ts]"]
  node_remove_controller["Removal controller"]
  node_upscale_controller["Upscale controller"]
  node_retouch_controller["Retouch controller"]
  node_watermark_controller["Watermark controller"]
  node_compress_controller["Compression controller"]
  node_photo_controller["Photo controller"]
end

subgraph group_processing["Image processing"]
  node_remove_service["Background removal"]
  node_upscale_service["Upscaling service<br/>[upscaleService.ts]"]
  node_retouch_service["Retouch service<br/>[retouchService.ts]"]
  node_watermark_service["Watermark removal<br/>[removalService.ts]"]
  node_compression_service["Compression service"]
  node_photo_service["Photo workflow"]
  node_image_processing["Image validation"]
end

subgraph group_engines["Local engines"]
  node_rembg_engine["rembg service<br/>[app.py]"]
  node_upscayl_engine["Upscayl provider<br/>[upscaylProvider.ts]"]
end

node_user(("Image user"))

node_user -->|"selects tool"| node_routes
node_routes -->|"opens"| node_remove_ui
node_routes -->|"opens"| node_upscale_ui
node_routes -->|"opens"| node_retouch_ui
node_routes -->|"opens"| node_watermark_ui
node_routes -->|"opens"| node_compress_ui
node_routes -->|"opens"| node_photo_ui
node_routes -->|"opens"| node_editor_ui
node_remove_ui -->|"requests"| node_api_client
node_upscale_ui -->|"requests"| node_api_client
node_retouch_ui -->|"requests"| node_api_client
node_watermark_ui -->|"requests"| node_api_client
node_compress_ui -->|"requests"| node_api_client
node_photo_ui -->|"requests"| node_api_client
node_api_client -->|"HTTP calls"| node_api_app
node_api_app -->|"mounts /api"| node_api_routes
node_api_routes -->|"dispatches"| node_remove_controller
node_api_routes -->|"dispatches"| node_upscale_controller
node_api_routes -->|"dispatches"| node_retouch_controller
node_api_routes -->|"dispatches"| node_watermark_controller
node_api_routes -->|"dispatches"| node_compress_controller
node_api_routes -->|"dispatches"| node_photo_controller
node_remove_controller -->|"processes image"| node_remove_service
node_upscale_controller -->|"processes image"| node_upscale_service
node_retouch_controller -->|"processes image"| node_retouch_service
node_watermark_controller -->|"processes image"| node_watermark_service
node_compress_controller -->|"validates upload"| node_image_processing
node_compress_controller -->|"compresses"| node_compression_service
node_photo_controller -->|"generates photo"| node_photo_service
node_remove_service -->|"calls local engine"| node_rembg_engine
node_upscale_service -->|"uses provider"| node_upscayl_engine
node_editor_ui -->|"edits locally"| node_browser_editor
node_remove_ui -->|"refines mask"| node_mask_engine

click node_routes "https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/routes/AppRoutes.tsx"
click node_remove_ui "https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/RemoveBackground/RemoveBackgroundPage.tsx"
click node_upscale_ui "https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/Upscaler/UpscalerPage.tsx"
click node_retouch_ui "https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/Retouch/RetouchPage.tsx"
click node_watermark_ui "https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/WatermarkRemover/WatermarkRemoverPage.tsx"
click node_compress_ui "https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/Compressor/CompressorPage.tsx"
click node_photo_ui "https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/PhotoGenerator/PhotoGeneratorPage.tsx"
click node_editor_ui "https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/Editor/EditorPage.tsx"
click node_api_client "https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/lib/api/apiClient.ts"
click node_api_app "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/app.ts"
click node_api_routes "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/routes/index.ts"
click node_remove_controller "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/controllers/backgroundRemovalController.ts"
click node_upscale_controller "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/controllers/upscaleController.ts"
click node_retouch_controller "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/controllers/retouchController.ts"
click node_watermark_controller "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/controllers/watermarkController.ts"
click node_compress_controller "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/controllers/compressionController.ts"
click node_photo_controller "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/controllers/photoGeneratorController.ts"
click node_remove_service "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/background-removal/backgroundRemovalService.ts"
click node_upscale_service "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/upscaling/upscaleService.ts"
click node_retouch_service "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/retouch/retouchService.ts"
click node_watermark_service "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/watermark/removalService.ts"
click node_compression_service "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/compression/compressionService.ts"
click node_photo_service "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/photo-generator/photoGeneratorService.ts"
click node_image_processing "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/image-processing/imageValidation.service.ts"
click node_rembg_engine "https://github.com/aashiqmahato/studiotools/blob/main/backend/python/rembg_service/app.py"
click node_upscayl_engine "https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/upscaling/upscaylProvider.ts"
click node_browser_editor "https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/features/editor/PhotoEditor.tsx"
click node_mask_engine "https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/features/background-removal/editor/useMaskEngine.ts"

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_routes,node_remove_ui,node_upscale_ui,node_retouch_ui,node_watermark_ui,node_compress_ui,node_photo_ui,node_editor_ui,node_api_client,node_browser_editor,node_mask_engine,node_user toneBlue
class node_api_app,node_api_routes,node_remove_controller,node_upscale_controller,node_retouch_controller,node_watermark_controller,node_compress_controller,node_photo_controller toneAmber
class node_remove_service,node_upscale_service,node_retouch_service,node_watermark_service,node_compression_service,node_photo_service,node_image_processing toneMint
class node_rembg_engine,node_upscayl_engine toneRose
```

## Components

### Browser application

- [Tool routes](https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/routes/AppRoutes.tsx): `frontend/src/routes/AppRoutes.tsx`
- [Background editor](https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/RemoveBackground/RemoveBackgroundPage.tsx): `frontend/src/pages/RemoveBackground/RemoveBackgroundPage.tsx`
- [Upscale workspace](https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/Upscaler/UpscalerPage.tsx): `frontend/src/pages/Upscaler/UpscalerPage.tsx`
- [Retouch workspace](https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/Retouch/RetouchPage.tsx): `frontend/src/pages/Retouch/RetouchPage.tsx`
- [Watermark workspace](https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/WatermarkRemover/WatermarkRemoverPage.tsx): `frontend/src/pages/WatermarkRemover/WatermarkRemoverPage.tsx`
- [Compression workspace](https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/Compressor/CompressorPage.tsx): `frontend/src/pages/Compressor/CompressorPage.tsx`
- [Photo generator](https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/PhotoGenerator/PhotoGeneratorPage.tsx): `frontend/src/pages/PhotoGenerator/PhotoGeneratorPage.tsx`
- [Crop and editor](https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/pages/Editor/EditorPage.tsx): `frontend/src/pages/Editor/EditorPage.tsx`
- [Typed API clients](https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/lib/api/apiClient.ts): `frontend/src/lib/api/apiClient.ts`
- [Canvas editing](https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/features/editor/PhotoEditor.tsx): `frontend/src/features/editor/PhotoEditor.tsx`
- [Mask engine](https://github.com/aashiqmahato/studiotools/blob/main/frontend/src/features/background-removal/editor/useMaskEngine.ts): `frontend/src/features/background-removal/editor/useMaskEngine.ts`

### API dispatch

- [Express API](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/app.ts): `backend/src/app.ts`
- [API routes](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/routes/index.ts): `backend/src/routes/index.ts`
- [Removal controller](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/controllers/backgroundRemovalController.ts): `backend/src/controllers/backgroundRemovalController.ts`
- [Upscale controller](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/controllers/upscaleController.ts): `backend/src/controllers/upscaleController.ts`
- [Retouch controller](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/controllers/retouchController.ts): `backend/src/controllers/retouchController.ts`
- [Watermark controller](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/controllers/watermarkController.ts): `backend/src/controllers/watermarkController.ts`
- [Compression controller](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/controllers/compressionController.ts): `backend/src/controllers/compressionController.ts`
- [Photo controller](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/controllers/photoGeneratorController.ts): `backend/src/controllers/photoGeneratorController.ts`

### Image processing

- [Background removal](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/background-removal/backgroundRemovalService.ts): `backend/src/services/background-removal/backgroundRemovalService.ts`
- [Upscaling service](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/upscaling/upscaleService.ts): `backend/src/services/upscaling/upscaleService.ts`
- [Retouch service](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/retouch/retouchService.ts): `backend/src/services/retouch/retouchService.ts`
- [Watermark removal](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/watermark/removalService.ts): `backend/src/services/watermark/removalService.ts`
- [Compression service](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/compression/compressionService.ts): `backend/src/services/compression/compressionService.ts`
- [Photo workflow](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/photo-generator/photoGeneratorService.ts): `backend/src/services/photo-generator/photoGeneratorService.ts`
- [Image validation](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/image-processing/imageValidation.service.ts): `backend/src/services/image-processing/imageValidation.service.ts`

### Local engines

- [rembg service](https://github.com/aashiqmahato/studiotools/blob/main/backend/python/rembg_service/app.py): `backend/python/rembg_service/app.py`
- [Upscayl provider](https://github.com/aashiqmahato/studiotools/blob/main/backend/src/services/upscaling/upscaylProvider.ts): `backend/src/services/upscaling/upscaylProvider.ts`

### Other components

- **Image user**

## Connections

- Image user → Tool routes: selects tool
- Tool routes → Background editor: opens
- Tool routes → Upscale workspace: opens
- Tool routes → Retouch workspace: opens
- Tool routes → Watermark workspace: opens
- Tool routes → Compression workspace: opens
- Tool routes → Photo generator: opens
- Tool routes → Crop and editor: opens
- Background editor → Typed API clients: requests
- Upscale workspace → Typed API clients: requests
- Retouch workspace → Typed API clients: requests
- Watermark workspace → Typed API clients: requests
- Compression workspace → Typed API clients: requests
- Photo generator → Typed API clients: requests
- Typed API clients → Express API: HTTP calls
- Express API → API routes: mounts /api
- API routes → Removal controller: dispatches
- API routes → Upscale controller: dispatches
- API routes → Retouch controller: dispatches
- API routes → Watermark controller: dispatches
- API routes → Compression controller: dispatches
- API routes → Photo controller: dispatches
- Removal controller → Background removal: processes image
- Upscale controller → Upscaling service: processes image
- Retouch controller → Retouch service: processes image
- Watermark controller → Watermark removal: processes image
- Compression controller → Image validation: validates upload
- Compression controller → Compression service: compresses
- Photo controller → Photo workflow: generates photo
- Background removal → rembg service: calls local engine
- Upscaling service → Upscayl provider: uses provider
- Crop and editor → Canvas editing: edits locally
- Background editor → Mask engine: refines mask