Baby Adobe - Image Editor

A simplified, web-based image editor inspired by Adobe Photoshop, built with React, TypeScript, and Canvas API.

Features

• Layer System: Create, manage, and organize multiple layers with blend modes
• Drawing Tools: Brush tool with customizable size, opacity, and hardness
• Selection Tools: Marquee and Lasso tools for creating selections
• AI Generate: AI-powered content generation with context-aware inpainting
  • Context analysis (lighting, scene, style)
  • 4 variation generation
  • Color harmonization
  • Seamless blending
• Undo/Redo: Full history system for all operations
• Keyboard Shortcuts:
  • Ctrl/Cmd + Z: Undo
  • Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y: Redo

Getting Started

Prerequisites

• Node.js 18+ and npm

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser to http://localhost:3000

Building for Production

npm run build

The built files will be in the dist directory.

Project Structure

baby-adobe/
├── src/
│   ├── components/          # React components
│   │   ├── Canvas/          # Canvas rendering
│   │   ├── Toolbar/         # Tool selection
│   │   ├── LayersPanel/     # Layer management UI
│   │   ├── PropertiesPanel/ # Tool properties
│   │   └── GenerativeFill/  # AI fill UI
│   ├── core/                # Core engine
│   │   ├── canvas/          # Canvas engine
│   │   ├── layers/          # Layer system
│   │   ├── tools/           # Tool implementations
│   │   ├── selection/       # Selection & masking
│   │   ├── history/         # Undo/redo system
│   │   └── generative-fill/ # AI processing
│   ├── services/            # Business logic
│   │   ├── ai/              # AI services
│   │   └── image/           # Image processing
│   ├── stores/              # Zustand state management
│   ├── types/               # TypeScript definitions
│   └── utils/               # Helper functions

Usage

1. Create a Selection: Use the Marquee or Lasso tool to select an area
2. Use AI Generate: Click the AI Generate tool (✨), enter a prompt, and generate variations
3. Paint: Select the Brush tool and paint on the canvas
4. Manage Layers: Use the Layers panel to add, delete, and organize layers

Technology Stack

• React 18: UI framework
• TypeScript: Type safety
• Vite: Build tool and dev server
• Zustand: State management
• Tailwind CSS: Styling
• Canvas API: Image manipulation

AI Service

The application uses a mock AI service by default. To integrate with a real AI service (e.g., Adobe Firefly):

1. Create a new service class implementing IGenerativeFillService
2. Update the service instantiation in GenerativeFillDialog.tsx

License

MIT