How aashiqmahato/studiotools works
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: AppRoutes.tsx Tool routes · index.ts API routes · apiClient.ts Typed API clients · RemoveBackgroundPage.tsx Background editor
Components 29
Browser application
- Tool routes
frontend/src/routes/AppRoutes.tsx - Background editor
frontend/src/pages/RemoveBackground/RemoveBackgroundPage.tsx - Upscale workspace
frontend/src/pages/Upscaler/UpscalerPage.tsx - Retouch workspace
frontend/src/pages/Retouch/RetouchPage.tsx - Watermark workspace
frontend/src/pages/WatermarkRemover/WatermarkRemoverPage.tsx - Compression workspace
frontend/src/pages/Compressor/CompressorPage.tsx - Photo generator
frontend/src/pages/PhotoGenerator/PhotoGeneratorPage.tsx - Crop and editor
frontend/src/pages/Editor/EditorPage.tsx - Typed API clients
frontend/src/lib/api/apiClient.ts - Canvas editing
frontend/src/features/editor/PhotoEditor.tsx - Mask engine
frontend/src/features/background-removal/editor/useMaskEngine.ts
API dispatch
- Express API
backend/src/app.ts - API routes
backend/src/routes/index.ts - Removal controller
backend/src/controllers/backgroundRemovalController.ts - Upscale controller
backend/src/controllers/upscaleController.ts - Retouch controller
backend/src/controllers/retouchController.ts - Watermark controller
backend/src/controllers/watermarkController.ts - Compression controller
backend/src/controllers/compressionController.ts - Photo controller
backend/src/controllers/photoGeneratorController.ts
Image processing
- Background removal
backend/src/services/background-removal/backgroundRemovalService.ts - Upscaling service
backend/src/services/upscaling/upscaleService.ts - Retouch service
backend/src/services/retouch/retouchService.ts - Watermark removal
backend/src/services/watermark/removalService.ts - Compression service
backend/src/services/compression/compressionService.ts - Photo workflow
backend/src/services/photo-generator/photoGeneratorService.ts - Image validation
backend/src/services/image-processing/imageValidation.service.ts
Local engines
- rembg service
backend/python/rembg_service/app.py - Upscayl provider
backend/src/services/upscaling/upscaylProvider.ts
Other components
- Image user
Connections 33
- 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