Image Generation Studio

A modern image generation application built with Next.js, React, and Tailwind CSS. Generate images using Google Gemini, xAI Grok, Hugging Face FLUX.1-Kontext, or Qwen with a beautiful glass morphism UI.

Features

🎨 Modern glass morphism design
📱 Multiple layout options (Landscape, Mobile, Square)
⚡ Fast image generation using Google Gemini, xAI Grok, Hugging Face FLUX.1-Kontext, or Qwen
🤖 Model switching between Google, Grok, FLUX.1-Kontext, and Qwen
🖼️ Image preview and download
⏳ Beautiful loading screen
✍️ AI-powered text autocomplete and spell correction
🖼️ Image-to-image generation with reference images (Google Gemini, FLUX.1-Kontext, and Qwen)

Getting Started

Prerequisites

Node.js 18+ and npm

Installation

Clone the repository and install dependencies:

npm install

Configure API keys (see Configuration section below)
Run the development server:

npm run dev

Open http://localhost:3000 in your browser.

Configuration

Environment Variables

Create a .env.local file in the root directory with the following variables:

Google Generative AI API Setup

GOOGLE_API_KEY=your_google_api_key_here
GOOGLE_MODEL=gemini-2.5-flash-image  # Optional, defaults to gemini-2.5-flash-image for image generation

GOOGLE_API_KEY: Your Google API key (required) - Get it from Google AI Studio
GOOGLE_MODEL: The model name (optional, defaults to gemini-2.5-flash-image for image generation)

Image Generation: The app uses Gemini's native image generation capabilities. See the documentation for details.

⚠️ Geographic Restrictions: If you get "Image generation is not available in your country" error, you need to deploy the app to a server in a supported region (like Vercel, which runs in US regions by default). The restriction is based on the server's location, not your local machine. See Deployment section below.

xAI Grok API Setup

GROK_API_KEY=your_grok_api_key_here
# OR alternatively:
XAI_API_KEY=your_grok_api_key_here

# Optional: Customize models
GROK_MODEL=grok-2-image-1212  # Image generation model (default: grok-2-image-1212)
GROK_COMPLETION_MODEL=grok-4-fast-non-reasoning  # Text completion model (default: grok-4-fast-non-reasoning)

GROK_API_KEY or XAI_API_KEY: Your Grok API key (required) - Both are supported for compatibility
GROK_MODEL: Image generation model (optional, defaults to grok-2-image-1212)
GROK_COMPLETION_MODEL: Text completion model (optional, defaults to grok-4-fast-non-reasoning)

Obtaining a Grok API Key:

Sign up for an account at x.ai or visit the xAI Developer Console
Navigate to API Keys section in your account settings
Generate a new API key

API Documentation:

Official xAI API documentation: https://docs.x.ai/
Image generation endpoint: https://docs.x.ai/docs/api-reference#image-generations
Chat completions endpoint: https://docs.x.ai/docs/api-reference#chat-completions

Note: Grok's image generation API supports fixed dimensions, but the app will pass your selected layout dimensions in case the API supports them in future updates. Reference images are not supported by Grok - use Google Gemini, FLUX.1-Kontext, or Qwen for image-to-image generation.

Hugging Face API Setup (FLUX.1-Kontext)

HF_TOKEN=your_huggingface_token_here
HF_MODEL=black-forest-labs/FLUX.1-Kontext-dev  # Image generation model (default: FLUX.1-Kontext-dev)
HF_PROVIDER=fal-ai  # Provider for fast inference (default: fal-ai)

HF_TOKEN: Your Hugging Face API token (required) - Get it from Hugging Face Settings
HF_MODEL: The Hugging Face model to use (optional, defaults to black-forest-labs/FLUX.1-Kontext-dev)
HF_PROVIDER: The inference provider (optional, defaults to fal-ai for fast inference)

Obtaining a Hugging Face Token:

Sign up at Hugging Face
Go to Settings → Access Tokens
Create a new token with read permissions

API Documentation: Hugging Face Inference API

Note: FLUX.1-Kontext supports both text-to-image and image-to-image generation with reference images using Hugging Face's inference API.

Hugging Face API Setup (Qwen)

HF_TOKEN=your_huggingface_token_here
HF_MODEL2=Qwen/Qwen-Image-Edit  # Qwen image-to-image model (default: Qwen/Qwen-Image-Edit)

HF_TOKEN: Your Hugging Face API token (required) - Same token as FLUX.1-Kontext
HF_MODEL2: The Qwen model to use (optional, defaults to Qwen/Qwen-Image-Edit)

Obtaining a Hugging Face Token:

Sign up at Hugging Face
Go to Settings → Access Tokens
Create a new token with read permissions

API Documentation: Hugging Face Inference API

Important Notes:

Qwen uses Hugging Face's image-to-image inference endpoint
Reference images are REQUIRED for Qwen - Qwen is only available when a reference image is uploaded
Qwen supports layout dimensions (1:1, 16:9, 9:16, etc.) for image-to-image generation
The Qwen model button will be disabled until a reference image is uploaded

Project Structure

ImageGen/
├── app/
│   ├── api/
│   │   ├── complete/
│   │   │   └── route.ts      # API route for text autocomplete/correction
│   │   └── generate/
│   │       └── route.ts      # API route for image generation
│   ├── globals.css           # Global styles
│   ├── layout.tsx            # Root layout
│   └── page.tsx              # Home page
├── components/
│   ├── AutocompleteTextarea.tsx  # Textarea with AI autocomplete and correction
│   ├── ImagePreview.tsx      # Image preview component
│   ├── ImageStudio.tsx       # Main studio component
│   ├── LayoutSelector.tsx    # Layout selection UI
│   ├── LoadingScreen.tsx     # Loading state component
│   └── ModelSelector.tsx    # Model selection UI (Google/Grok)
└── lib/
    └── nanobanana.ts         # Image generation client wrapper

Features in Detail