🖼️ AI Image Generator with Pollinations API

A fully functional AI image generation app built with React (Vite) and Tailwind CSS, using state-based routing and no external router library. Users can generate images from prompts using the Pollinations AI API, apply advanced settings, download generated images, and view download history — all using custom state management with useState, useEffect, useContext,useMemo, and Custom Hooks.

📚 Table of Contents

• 🚀 Live Preview
• ✨ Features
• 💪 Extra Features
• 🛠️ Tech Stack
• ⚙️ How to Run the Project Locally

🚀 Live Preview (Demo)

---

✨ Key Features

🧭 Navigation (State-Based Routing)

• Manual routing using a route state (no React Router).
• Pages:
  • Create Image
  • Downloaded Images

🖌️ Create Image Page

• Input prompt via text box.
• Press Enter or click "Generate" to fetch images from Pollinations AI API.
• Shows 9 AI-generated images per prompt.

⚙️ Advanced Settings

• Select image Model (fetched dynamically from API).
• Choose Image Size (Height / Width) manually or via Ratio Presets (1:1, 16:9, etc.).
• Random Seed used to generate unique images every time.

📷 Result Display

• Lazy loading with error fallback ("Unable to Load" message).
• Fetch timeout handling for long API delays.
• Real-time feedback: loading indicators, error states, and retry support.

⬇️ Image Download

• Each image has a Download button.
• Image gets saved to user's device and also recorded in Download History.

🗃️ Downloaded Images Page

• Displays list of all unique images user has downloaded.
• Even if downloaded multiple times, appears once in history.

---

💪 Extra Features

Image View With Popup

• User can select individually picture to see with perfect view.

NoLogo Features Switcher

• User can generate image without Water Mark
• Toggle button Help to switch nologo or logo mood in the advance settings section.

🛠️ Tech Stack

Tech	Purpose
React + Vite	Frontend Framework & Bundler
Tailwind CSS	Styling & Responsive Design
JavaScript (ES6)	Application Logic
REST API	Image Generation (Pollinations)
React lightbox	For View Image Perfectly and Largely
Custom Hooks	Kepp All Business Logic clean and separated

---

⚙️ How to Run the Project Locally

Make sure you have Node.js installed on your machine.

1. Clone the Repository

git clone https://github.com/Mr-Rafiqul-Islam/mr-rafiqulthedev-img-generator-ai-studio.git

2. Navigate into the Project Directory

cd mr-rafiqulthedev-img-generator-ai-studio

3. Install Dependencies

npm install

4. Start the Development Server

npm run dev

The project will start at: http://localhost:5173