A mobile-friendly, AI-powered image editing web application that transforms photos using natural language prompts. Built with React 19, Tailwind CSS 4, and modern web technologies.
Describe your desired edits in plain English, and let AI understand your commands to transform photos instantly. No complex tools or technical knowledge required.
Fine-tune your images with intuitive controls:
- Brightness - Adjust image luminosity from 0% to 200%
- Contrast - Control the difference between light and dark areas
- Saturation - Modify color intensity and vibrancy
- Rotation - Rotate images from 0° to 360°
- Scale - Zoom in or out from 0.1x to 3x
Fully responsive design that works seamlessly across all devices - desktop, tablet, and mobile. Touch-optimized controls for mobile editing.
See your edits applied instantly with canvas-based rendering. Download your edited images in high quality PNG format.
- Quick rotate (90° increments)
- Zoom in/out buttons
- Reset all filters
- Download edited image
- Change image on the fly
- Node.js 22.x or higher
- pnpm package manager
- Clone the repository:
git clone https://github.com/Orchid12721/Manusom.git
cd Manusom- Install dependencies:
pnpm install- Start the development server:
pnpm dev- Open your browser and navigate to
http://localhost:3000
- Frontend Framework: React 19
- Styling: Tailwind CSS 4
- UI Components: shadcn/ui
- Routing: Wouter
- Build Tool: Vite
- Language: TypeScript
- State Management: React Hooks
nano-banana-editor/
├── client/
│ ├── public/ # Static assets
│ ├── src/
│ │ ├── components/ # Reusable UI components
│ │ │ ├── ui/ # shadcn/ui components
│ │ │ └── ImageEditor.tsx # Main editor component
│ │ ├── pages/ # Page components
│ │ │ └── Home.tsx # Home page
│ │ ├── contexts/ # React contexts
│ │ ├── hooks/ # Custom hooks
│ │ ├── lib/ # Utility functions
│ │ ├── App.tsx # App entry with routing
│ │ ├── main.tsx # React DOM entry
│ │ └── index.css # Global styles
│ └── index.html # HTML template
├── package.json
└── README.md
-
Upload an Image: Click the "Choose Image" button to upload a photo (JPG, PNG, WEBP up to 50MB)
-
AI Editing:
- Switch to the "AI Edit" tab
- Enter your editing prompt (e.g., "Make the sky more dramatic, add sunset colors")
- Click "Generate Edit" to apply AI-powered transformations
-
Manual Filters:
- Switch to the "Filters" tab
- Use sliders to adjust brightness, contrast, saturation, rotation, and scale
- Changes are applied in real-time
-
Quick Actions:
- Use toolbar buttons for quick rotate, zoom in/out
- Reset all filters with one click
- Download your edited image when satisfied
Try these example prompts for AI editing:
- "Change background to beach"
- "Make it look vintage"
- "Add dramatic lighting"
- "Remove background"
- "Make the colors more vibrant"
- "Add a sunset effect"
- Integration with real AI image editing APIs (Gemini, DALL-E, Stable Diffusion)
- Batch image processing
- More advanced filters (blur, sharpen, noise reduction)
- Image history and undo/redo functionality
- Save projects and resume editing later
- Export in multiple formats (JPEG, PNG, WEBP)
- Social media sharing integration
- User accounts and cloud storage
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by Google's Nano Banana AI image editing model
- Built with shadcn/ui components
- Icons from Lucide Icons
For questions or feedback, please open an issue on GitHub.
Note: The AI editing feature in this version is a demo placeholder. To enable real AI-powered editing, you'll need to integrate with an AI image editing API service such as Google's Gemini, OpenAI's DALL-E, or Stability AI's Stable Diffusion.
Built with ❤️ using React & Tailwind CSS