Doolo Pixel Generator

An AI-powered pixel art generator built with Next.js and shadcn/ui, featuring a comprehensive pixel art editor with advanced tools and real AI generation capabilities.

Features

🎨 AI Pixel Art Generation

• Replicate API: Powered by specialized pixel art models for authentic pixel art creation
• Smart Prompt Processing: Describe your pixel art idea and watch AI bring it to life
• Multiple Canvas Sizes: Choose from preset sizes (16x16 to 256x256) or create custom dimensions
• Real-time Generation: Watch as your pixel art is generated with AI processing
• High Quality: Uses optimized models specifically trained for pixel art

🖌️ Advanced Pixel Art Editor

• Full-Screen Editor: Click on generated art to enter a professional pixel art editor
• Multiple Tools: Brush, eraser, and eyedropper tools for precise editing
• Brush Sizes: Adjustable brush size from 1x1 to 5x5 pixels
• Color Palette: Extensive color palette with custom color picker
• Undo/Redo: Full history support with unlimited undo/redo operations
• Canvas Controls: Zoom in/out, toggle grid, and rotate canvas
• Fill Tools: Fill white areas or clear entire canvas

📱 Modern UI/UX

• Dark Theme: Beautiful dark interface optimized for pixel art creation
• Responsive Design: Works seamlessly on desktop and tablet devices
• Toast Notifications: User-friendly feedback for all actions
• Keyboard Shortcuts: Efficient workflow with keyboard support
• shadcn/ui Components: Modern, accessible UI components

💾 Export & Share

• High-Quality Export: Download pixel art as PNG with 4x scaling
• Share Functionality: Share your creations via native sharing or clipboard
• Save Progress: Save your edited pixel art and continue later

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm
• Replicate API token (for AI generation)

Installation

1. Clone the repository:

git clone https://github.com/yourusername/doolo-pixel-generator.git
cd doolo-pixel-generator

2. Install dependencies:

pnpm install
# or
npm install

3. Set up environment variables:

# Create .env.local file
echo "REPLICATE_API_TOKEN=your_replicate_token_here" > .env.local

4. Configure AI API:

   • Get your Replicate API token from https://replicate.com/account/api-tokens
   • Add your token to .env.local

5. Run the development server:

pnpm dev
# or
npm run dev

6. Open http://localhost:3001 in your browser.

AI Configuration

Replicate API Setup

1. Go to Replicate and create an account
2. Go to Account > API Tokens
3. Create a new API token
4. Add the token to your .env.local file

Environment Variables

# Required for AI generation
REPLICATE_API_TOKEN=your_replicate_token_here

Model Benefits

• Specialized Models: Uses models specifically trained for pixel art
• High Quality: Optimized for pixel art generation
• Fast generation: Cloud-based processing for quick results
• Fallback mode: If no API token is configured, uses local seeded generation

Usage

Generating Pixel Art with AI

1. Select Canvas Size: Choose from preset sizes or enter custom dimensions
2. Write Your Prompt: Describe your pixel art idea in detail
3. Generate with AI: Click "Generate with AI" and wait for the pixel art model to create your art
4. View Result: Your AI-generated pixel art will appear in the main area

Editing Pixel Art

1. Open Editor: Click the edit button on your generated art
2. Choose Tools: Select brush, eraser, or eyedropper from the toolbar
3. Pick Colors: Use the color picker or palette to select colors
4. Adjust Settings: Modify brush size, zoom level, and grid visibility
5. Edit Freely: Click and drag to paint, use keyboard shortcuts for efficiency
6. Save Changes: Click save to preserve your edits

Keyboard Shortcuts

• B - Switch to brush tool
• E - Switch to eraser tool
• I - Switch to eyedropper tool
• Ctrl+Z - Undo
• Ctrl+Y - Redo
• Ctrl+S - Save
• + - Zoom in
• - - Zoom out
• G - Toggle grid

Technology Stack

• Framework: Next.js 14 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: shadcn/ui
• Icons: Lucide React
• Notifications: Custom toast system
• Canvas: Custom pixel grid implementation
• Package Manager: pnpm
• AI Generation: Replicate Pixel Art Models

Project Structure

doolo-pixel-generator/
├── app/                    # Next.js app directory
│   ├── api/               # API routes
│   │   └── generate/      # AI generation endpoint
│   ├── globals.css        # Global styles with shadcn/ui
│   ├── layout.tsx         # Root layout
│   └── page.tsx           # Main page
├── components/            # React components
│   ├── ui/               # shadcn/ui components
│   │   ├── button.tsx    # Button component
│   │   ├── input.tsx     # Input component
│   │   ├── textarea.tsx  # Textarea component
│   │   ├── slider.tsx    # Slider component
│   │   ├── card.tsx      # Card component
│   │   ├── toast.tsx     # Toast component
│   │   └── toaster.tsx   # Toaster component
│   ├── Sidebar.tsx        # Generation controls
│   ├── PixelArtDisplay.tsx # Art display component
│   └── PixelArtEditor.tsx # Full-screen editor
├── hooks/                 # Custom hooks
│   └── use-toast.ts      # Toast hook
├── lib/                   # Utility functions
│   └── utils.ts          # shadcn/ui utilities
├── types/                 # TypeScript definitions
│   └── index.ts          # Type definitions
├── package.json           # Dependencies and scripts
└── README.md             # Project documentation

shadcn/ui Components Used

• Button: Primary action buttons with variants
• Input: Form input fields
• Textarea: Multi-line text input
• Slider: Range input for brush size
• Card: Content containers with headers
• Toast: Notification system
• Toaster: Toast container and provider

AI Generation Details

How It Works

1. Prompt Processing: Your text prompt is sent to Replicate's pixel art models
2. AI Generation: Specialized models generate high-quality pixel art images
3. Image Processing: The image is converted to a pixel art grid on the client side
4. Fallback: If API fails, a seeded color palette is used
5. Editor Ready: The final pixel art is ready for editing

Model Configuration

• Model: Pixel Art Diffusion (specialized for pixel art)
• Output: High-quality pixel art images
• Style: Authentic pixel art aesthetic
• Quality: Optimized for pixel art generation

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Inspired by classic pixel art tools and modern AI art generators
• Built with love for the pixel art community
• Special thanks to all contributors and users
• Powered by shadcn/ui for beautiful, accessible components
• AI generation powered by Replicate Pixel Art Models

Support

If you encounter any issues or have questions, please:

1. Check the Issues page
2. Create a new issue with detailed information
3. Join our community discussions

---

Happy AI Pixel Art Creating! 🎨✨🤖