Create a fully integrated web image editor, "iO Editor."
Project: Create a web page for image editing (photo editor) with a modern and easy-to-use interface, inspired by the functionality of the PhotoRoom app, with a focus on using ready-made libraries to speed up the development process.
Visual Identity (Branding):
The entire project identity should revolve around the "iO" logo.
* Editor Name: iO Editor
* Page Logo: Use the "iO" logo design in the page header.
* Website Favicon: A simplified version of the "iO" logo.
* Watermark: When exporting an image, an option (which the user can enable or disable) should be added to place a small, transparent watermark in the corner of the image bearing the phrase "Created with iO."
* Colors: Use a professional and simple color scheme that reflects the "iO" identity (e.g., grayscale, white, with a distinctive base color such as electric blue or bright orange).
 Core Functionalities:
Stage 1: Image Upload and Preparation
* Starting Interface:
* Clean and simple design with a prominent "Upload Image" button.
* Ability to drag and drop images directly onto the page.
* Support for common image formats (PNG, JPG, WEBP, HEIC).
* Preprocessing (inspired by PhotoRoom):
* Automatic Background Removal: Once the image is uploaded, use an API to automatically and accurately remove the background.
* Display only the primary element (person or product) against a transparent background in the main workspace.
Stage 2: Editing and Design Tools
1. Toolbar:
Tools should be arranged in a clear and accessible sidebar or top bar.
2. Object Controls:
* Move: Free to move the element anywhere on the workspace.
* Scale: Enlarge and reduce the element while maintaining its dimensions.
 * Rotate: Rotate the element at free angles.
* Flip: Flip horizontally and vertically.
* Layers: Send the element forward or backward.
3. Background Tools:
* Solid Color: Choose any color from the Color Picker.
* Gradient: Create color gradients.
* Replace Background with Image: Upload a new image as the background.
* Ready-Made Backgrounds: A small library of high-quality backgrounds (abstract, walls, nature, etc.).
* Transparent Background: Option to make the background transparent (for PNG export).
4. Text Tool:
* Add a new text box.
* Change the text content.
* Formatting Options:
* A library of fonts (Google Fonts).
* Font Size.
* Font Color.
* Font Style (Bold, Italic).
* Text Alignment.
 * Add a shadow or outline to the text.
5. Image Adjustments & Filters:
* Brightness
* Contrast
* Saturation
* Sharpness
* Shadows and Highlights
* Ready-Made Filters: A collection of one-click filters (e.g., black and white, sepia, vintage).
6. Adding Other Elements:
* Adding an Image/Logo: Upload another image (e.g., a logo) and add it as a new layer above the design.
* Shapes: Add basic shapes (circle, square, triangle) with control over their color and size.
Step 3: Export
* Clear "Export" or "Download" button.
* Export Options:
* Format: PNG (for transparent backgrounds) or JPG (for colored backgrounds).
 * Quality: Choose the image quality (high, medium, low) to affect the file size.
* Preview before saving: View the final image before downloading.
Technical Stack and Recommended Libraries:
* Programming Language: JavaScript/TypeScript.
* Frontend Framework: React.js or Vue.js for easy building of interactive components.
* Canvas Library:
* Fabric.js (highly recommended): A powerful library ideal for creating an interactive image editor, supporting objects, layers, image manipulation, adding text, and filters.
* Konva.js is an excellent alternative.
* File Upload Library:
* FilePond: Provides an elegant drag-and-drop interface for uploading images.
* Background Removal API:
* Use an external service such as remove.bg, removal.ai, or ClipDrop. Integrate its API.
 * Design and Style:
* Tailwind CSS or Styled-Components to quickly create a modern, clean design.
* Icons:
* Use an icon library like Font Awesome or Material Icons for widget icons.