AI Image Generator

A modern, responsive AI image generator built with Next.js and Hugging Face's free API. Generate stunning images from text prompts using various AI models.

Features

• 🎨 Multiple AI Models: Choose from different Stable Diffusion models
• 🖼️ Flexible Image Sizes: Square, landscape, and portrait orientations
• 🔢 Batch Generation: Generate 1-4 images at once
• 📱 Responsive Design: Works perfectly on desktop and mobile
• ⚡ Fast Generation: Optimized for quick image creation
• 🎲 Random Prompts: Get inspired with sample prompts
• 💾 Download Images: Save generated images directly

Getting Started

Prerequisites

• Node.js 18+
• A Hugging Face account and API key

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd ai-image-generator

2. Install dependencies

   npm install

3. Set up environment variables

   cp .env.local.example .env.local

   Edit .env.local and add your Hugging Face API key:

   HUGGINGFACE_API_KEY=your_actual_api_key_here
   

4. Get your Hugging Face API key

   • Go to Hugging Face Settings
   • Create a new token with "Read" permissions
   • Copy the token to your .env.local file

5. Run the development server

   npm run dev

6. Open your browser Navigate to http://localhost:3000

Usage

1. Enter a prompt: Describe the image you want to generate
2. Choose settings:
   • Model: Select from available AI models
   • Images: Choose how many images to generate (1-4)
   • Size: Pick the image dimensions
3. Generate: Click the "Generate" button
4. Download: Hover over generated images and click the download button

Available Models

• Stable Diffusion XL: High-quality image generation (recommended)
• Stable Diffusion v1.5: Fast and reliable generation
• Stable Diffusion v1.4: Classic stable diffusion

Image Sizes

• Square (1:1): 512x512px or 1024x1024px
• Landscape (3:2): 768x512px
• Portrait (2:3): 512x768px

Project Structure

ai-image-generator/
├── app/                    # Next.js App Router
│   ├── api/generate/      # API endpoint for image generation
│   ├── layout.jsx         # Root layout
│   ├── page.jsx           # Main page
│   └── globals.css        # Global styles
├── components/            # Reusable React components
│   ├── Button/
│   ├── ControlsBar/
│   ├── IconButton/
│   ├── ImageGrid/
│   ├── PromptForm/
│   └── Select/
├── lib/                   # Utility functions
│   ├── models.js          # Available AI models
│   ├── prompts.js         # Sample prompts
│   ├── sizeMap.js         # Image size options
│   └── validate.js        # Input validation
└── public/                # Static assets

API Usage

The application uses Hugging Face's Inference API. The free tier includes:

• Limited requests per month
• Queue-based processing
• Various AI models available

Troubleshooting

Common Issues

1. "Failed to generate images" error

   • Check your Hugging Face API key
   • Ensure you have remaining API credits
   • Try a different model

2. Images not loading

   • Check your internet connection
   • Verify the API key is correct
   • Try refreshing the page

3. Slow generation

   • Free tier has queue delays
   • Try during off-peak hours
   • Consider upgrading to a paid plan

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is open source and available under the MIT License.

Acknowledgments

• Hugging Face for providing the AI models
• Next.js for the React framework
• Stable Diffusion for the image generation models