https://github.com/chanmeng666/image-generator

【Your star could be the one that makes our day! ⭐️】A modern Next.js application for AI image generation using Together AI, featuring a beautiful Mondrian-inspired design and intuitive user interface.
https://github.com/chanmeng666/image-generator
ai-image-generation artificial-intelligence nextjs react tailwindcss together-ai vercel web-app
Last synced: 3 months ago
JSON representation
Host: GitHub
URL: https://github.com/chanmeng666/image-generator
Owner: ChanMeng666
License: apache-2.0
Created: 2024-11-27T06:54:38.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2025-01-15T04:12:03.000Z (over 1 year ago)
Last Synced: 2025-03-26T22:13:50.465Z (over 1 year ago)
Topics: ai-image-generation, artificial-intelligence, nextjs, react, tailwindcss, together-ai, vercel, web-app
Language: TypeScript
Homepage: https://image-generator-sable-tau.vercel.app
Size: 71.3 KB
Stars: 1
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project

README

          




[![AI Image Generator](./public/logo.svg)](#)

# 🎨 AI Image Generator
Transform Your Ideas Into Stunning Visual Art


An innovative AI-powered image generation platform that leverages cutting-edge FLUX.1 technology to transform text descriptions into high-quality images.


Supports real-time generation, instant downloads, and features a beautiful Mondrian-inspired UI design.


One-click **FREE** deployment of your AI image generation platform.

[Live Demo][project-link] · [Documentation][docs] · [GitHub][github-link] · [Issues][github-issues-link]




[![🚀 Try Live Demo 🚀](https://gradient-svg-generator.vercel.app/api/svg?text=%F0%9F%9A%80Try%20Live%20Demo%F0%9F%9A%80&color=000000&height=60&gradientType=radial&duration=6s&color0=ffffff&template=pride-rainbow)][project-link]




[![][github-release-shield]][github-release-link]

[![][vercel-shield]][vercel-link]

[![][github-action-test-shield]][github-action-test-link]


[![][github-contributors-shield]][github-contributors-link]

[![][github-forks-shield]][github-forks-link]

[![][github-stars-shield]][github-stars-link]

[![][github-issues-shield]][github-issues-link]

[![][github-license-shield]][github-license-link]


**Share AI Image Generator**

[![][share-x-shield]][share-x-link]

[![][share-telegram-shield]][share-telegram-link]

[![][share-whatsapp-shield]][share-whatsapp-link]

[![][share-reddit-shield]][share-reddit-link]

[![][share-linkedin-shield]][share-linkedin-link]

^{🌟 Pioneering the future of AI-powered creative tools. Built for artists, designers, and creative professionals.}

## 📸 Project Screenshots

> [!TIP]

> Experience the intuitive interface and powerful AI image generation capabilities.



  

  Main Interface - Clean and intuitive design inspired by Mondrian's art





  

  

  AI Generation Process - From prompt to stunning visuals



**Tech Stack Badges:**



 

 

 

 

 

 





> [!IMPORTANT]

> This project demonstrates modern AI integration with Next.js App Router, featuring real-time image generation powered by Together AI's FLUX.1-schnell model. It combines React 18 server components with TypeScript for type safety and Tailwind CSS for responsive design.

📑 Table of Contents

#### TOC

- [🎨 AI Image Generator](#-ai-image-generator)

      - [TOC](#toc)

  - [🌟 Introduction](#-introduction)

  - [✨ Key Features](#-key-features)

    - [`1` AI-Powered Image Generation](#1-ai-powered-image-generation)

    - [`2` Mondrian-Inspired Design](#2-mondrian-inspired-design)

    - [`*` Additional Features](#-additional-features)

  - [🛠️ Tech Stack](#️-tech-stack)

  - [🏗️ Architecture](#️-architecture)

    - [System Architecture](#system-architecture)

    - [Component Structure](#component-structure)

  - [⚡️ Performance](#️-performance)

  - [🚀 Getting Started](#-getting-started)

    - [Prerequisites](#prerequisites)

    - [Quick Installation](#quick-installation)

    - [Environment Setup](#environment-setup)

    - [Development Mode](#development-mode)

  - [🛳 Deployment](#-deployment)

    - [`A` Cloud Deployment](#a-cloud-deployment)

    - [`B` Docker Deployment](#b-docker-deployment)

    - [`C` Environment Variables](#c-environment-variables)

  - [📖 Usage Guide](#-usage-guide)

    - [Basic Usage](#basic-usage)

    - [API Reference](#api-reference)

  - [🔌 Integrations](#-integrations)

  - [⌨️ Development](#️-development)

    - [Local Development](#local-development)

    - [Adding Features](#adding-features)

    - [Testing](#testing)

  - [🤝 Contributing](#-contributing)

  - [📄 License](#-license)

  - [👥 Author](#-author)

####




## 🌟 Introduction

We are passionate developers creating the next generation of AI-powered creative tools. By adopting modern web technologies and cutting-edge AI models, we aim to provide users with powerful, intuitive, and accessible image generation capabilities.

Whether you're a professional designer, digital artist, or creative enthusiast, this AI Image Generator will be your creative playground. The application leverages Together AI's FLUX.1-schnell model to transform text descriptions into stunning visual art.

> [!NOTE]

> - Node.js >= 18.0 required

> - Together AI API key required for image generation

> - Modern browser with JavaScript enabled

> - Optional: Vercel account for deployment

| [![][demo-shield-badge]][demo-link]   | No installation required! Visit our live demo to experience AI image generation firsthand. |

| :------------------------------------ | :----------------------------------------------------------------------------------------- |

> [!TIP]

> **⭐ Star us** to receive all release notifications from GitHub without delay!

[![][image-star]][github-stars-link]

  ⭐ Star History

  

    

    

  

## ✨ Key Features

### `1` AI-Powered Image Generation

Experience state-of-the-art image generation using Together AI's FLUX.1-schnell model. Our platform delivers high-quality, creative visuals from simple text descriptions with impressive speed and accuracy.

Key capabilities include:

- 🚀 **Lightning Fast**: Generate 1024x768 images in seconds

- 🎨 **High Quality**: FLUX.1-schnell model for superior results

- 💡 **Creative Freedom**: Transform any text into visual art

- 🔄 **Real-time Processing**: Instant feedback and generation

> [!TIP]

> The FLUX.1-schnell model excels at understanding complex prompts and generating detailed, creative images across various styles and subjects.

[![][back-to-top]](#readme-top)

### `2` Mondrian-Inspired Design

Revolutionary user interface inspired by Piet Mondrian's iconic geometric art style. The clean, minimalist design ensures an intuitive user experience while maintaining aesthetic appeal.

**Design Features:**

- **Geometric Background**: Dynamic Mondrian-style shapes

- **Clean Interface**: Minimalist and distraction-free design

- **Responsive Layout**: Perfect on desktop and mobile devices

- **Accessibility First**: WCAG compliant design principles

[![][back-to-top]](#readme-top)

### `*` Additional Features

Beyond the core AI generation, this project includes:

- [x] 📱 **Responsive Design**: Perfect experience across all devices

- [x] ⬇️ **Instant Downloads**: One-click image downloading

- [x] 🛡️ **Error Handling**: Comprehensive error management and user feedback

- [x] 🔄 **Loading States**: Smooth loading animations and progress indicators

- [x] 🎯 **TypeScript**: Full type safety throughout the application

- [x] 🚀 **Next.js App Router**: Modern React architecture with server components

- [x] 🎨 **Custom UI Components**: Built with Radix UI primitives

- [x] ⚡ **Optimized Performance**: Fast loading and efficient rendering

> ✨ More features are continuously being added as the project evolves.



[![][back-to-top]](#readme-top)



## 🛠️ Tech Stack



  

    

      

        

        
Next.js 14

      

      

        

        
React 18

      

      

        

        
TypeScript 5

      

      

        

        
Tailwind CSS

      

      

        

        
Together AI

      

      

        

        
Vercel

      

    

  



**Frontend Stack:**

- **Framework**: Next.js 14 with App Router

- **Language**: TypeScript for complete type safety

- **Styling**: Tailwind CSS with custom design system

- **UI Components**: Radix UI primitives + Custom components

- **Icons**: Lucide React icon library

**AI & Backend:**

- **AI Model**: Together AI FLUX.1-schnell-Free

- **API**: Next.js API routes with edge runtime

- **Image Processing**: Base64 encoding for instant display

- **Error Handling**: Comprehensive error boundaries

**DevOps & Deployment:**

- **Platform**: Vercel for seamless deployment

- **Build System**: Next.js optimized build pipeline

- **Environment**: Secure environment variable management

- **Performance**: Automatic image optimization

> [!TIP]

> Each technology was carefully selected for optimal developer experience, performance, and maintainability in production environments.

## 🏗️ Architecture

### System Architecture

> [!TIP]

> This architecture supports horizontal scaling and is production-ready for high-traffic applications.

```mermaid

graph TB

    subgraph "Frontend Layer"

        A[Next.js App] --> B[React Components]

        B --> C[Tailwind Styling]

        C --> D[API Layer]

    end

    

    subgraph "Backend Layer"

        E[API Routes] --> F[Together AI Client]

        F --> G[FLUX.1 Model]

    end

    

    subgraph "External Services"

        H[Together AI API]

        I[Vercel Platform]

        J[Image Processing]

    end

    

    D --> E

    F --> H

    G --> J

    

    subgraph "User Interface"

        K[Text Input]

        L[Image Display]

        M[Download Feature]

        N[Error Handling]

    end

    

    A --> K

    A --> L

    A --> M

    A --> N

```

### Component Structure

```

src/

├── app/                    # Next.js App Router

│   ├── api/generate/      # Image generation API route

│   ├── layout.tsx         # Root layout component

│   ├── page.tsx           # Main application page

│   └── globals.css        # Global styles

├── components/            # Reusable UI components

│   ├── ui/               # Base UI components (Button, etc.)

│   └── MondrianBackground.tsx # Custom background component

├── lib/                  # Utility libraries

│   └── utils.ts          # Helper functions

├── public/               # Static assets

│   ├── logo.svg          # Application logo

│   └── favicon.svg       # Favicon

└── types.d.ts           # TypeScript definitions

```

## ⚡️ Performance

### Performance Metrics

**Key Metrics:**

- ⚡ **< 2s** Image generation time

- 🚀 **< 300ms** Initial page load

- 💨 **95+ Lighthouse Score** for performance

- 📱 **100% Mobile Responsive** design

- 🔄 **Real-time** generation feedback

**Performance Optimizations:**

- 🎯 **Next.js Image Optimization**: Automatic WebP conversion and lazy loading

- 📦 **Code Splitting**: Automatic bundle optimization

- 🔄 **API Optimization**: Efficient Together AI integration

- 🖼️ **Base64 Encoding**: Instant image display without additional requests

> [!NOTE]

> Performance metrics are continuously monitored in production environments.

## 🚀 Getting Started

### Prerequisites

> [!IMPORTANT]

> Ensure you have the following installed:

- Node.js 18.0+ ([Download](https://nodejs.org/))

- npm/yarn/pnpm package manager

- Git ([Download](https://git-scm.com/))

- Together AI API key ([Get yours here](https://together.ai/))

### Quick Installation

**1. Clone Repository**

```bash

git clone https://github.com/ChanMeng666/image-generator.git

cd image-generator

```

**2. Install Dependencies**

```bash

# Using npm

npm install

# Using yarn

yarn install

# Using pnpm (recommended)

pnpm install

```

**3. Environment Setup**

```bash

# Create environment file

cp .env.example .env.local

# Add your Together AI API key

echo "TOGETHER_API_KEY=your_api_key_here" >> .env.local

```

**4. Start Development**

```bash

npm run dev

```

🎉 **Success!** Open [http://localhost:3000](http://localhost:3000) to start generating images.

### Environment Setup

Create `.env.local` file with the following variables:

```bash

# Together AI Configuration

TOGETHER_API_KEY="your-together-ai-api-key"

# Optional: Additional Configuration

NEXT_PUBLIC_APP_URL="http://localhost:3000"

```

> [!TIP]

> Get your Together AI API key from [https://together.ai/](https://together.ai/) - it's free to start!

### Development Mode

```bash

# Start development server

npm run dev

# Build for production

npm run build

# Start production server

npm run start

# Run linting

npm run lint

```

## 🛳 Deployment

> [!IMPORTANT]

> Cloud deployment is recommended for production applications.

### `A` Cloud Deployment

**Vercel (Recommended)**

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fimage-generator)

**Manual Deployment:**

```bash

# Install Vercel CLI

npm i -g vercel

# Deploy to production

vercel --prod

```

**Other Platforms:**



|           Deploy with Netlify            |                     Deploy with Railway                      |

| :-------------------------------------: | :---------------------------------------------------------: |

| [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/ChanMeng666/image-generator) | [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/new/template?template=https://github.com/ChanMeng666/image-generator) |



### `B` Docker Deployment

```bash

# Build Docker image

docker build -t ai-image-generator .

# Run container

docker run -p 3000:3000 -e TOGETHER_API_KEY=your_key ai-image-generator

```

### `C` Environment Variables

> [!WARNING]

> Never commit sensitive environment variables to version control.

| Variable | Description | Required | Example |

|----------|-------------|----------|---------|

| `TOGETHER_API_KEY` | Together AI API key for image generation | ✅ | `sk-xxxxxxxxxxxxx` |

| `NEXT_PUBLIC_APP_URL` | Application URL for metadata | 🔶 | `https://yourdomain.com` |

> [!NOTE]

> ✅ Required, 🔶 Optional

## 📖 Usage Guide

### Basic Usage

**Getting Started with AI Image Generation:**

1. **Enter Description**: Type your image description in the text area

2. **Generate Image**: Click the "Generate Image" button

3. **View Result**: Watch as your AI-generated image appears

4. **Download**: Click "Download Image" to save your creation

### API Reference

**Image Generation Endpoint:**

```bash

POST /api/generate

Content-Type: application/json

{

  "prompt": "A beautiful sunset over mountains"

}

# Response

{

  "b64_json": "base64-encoded-image-data"

}

```

**Example Usage:**

```javascript

const generateImage = async (prompt) => {

  const response = await fetch('/api/generate', {

    method: 'POST',

    headers: {

      'Content-Type': 'application/json'

    },

    body: JSON.stringify({ prompt })

  });

  

  const imageData = await response.json();

  return `data:image/png;base64,${imageData}`;

};

```

**Error Responses:**

| Status Code | Description | Response |

|------------|-------------|----------|

| `400` | Missing prompt | `{ error: "Please enter a prompt" }` |

| `500` | Generation failed | `{ error: "Error generating image" }` |

## 🔌 Integrations

**Current Integrations:**

| Service | Purpose | Status | Documentation |

|---------|---------|--------|---------------|

| **Together AI** | AI Image Generation | ✅ Active | [API Docs](https://docs.together.ai/) |

| **Vercel** | Hosting & Deployment | ✅ Active | [Setup Guide](https://vercel.com/docs) |

| **Tailwind CSS** | Styling System | ✅ Active | [Documentation](https://tailwindcss.com/) |

| **Radix UI** | UI Components | ✅ Active | [Component Docs](https://www.radix-ui.com/) |

## ⌨️ Development

### Local Development

**Setup Development Environment:**

```bash

# Clone and setup

git clone https://github.com/ChanMeng666/image-generator.git

cd image-generator

npm install

# Configure environment

cp .env.example .env.local

# Add your TOGETHER_API_KEY

# Start development

npm run dev

```

### Adding Features

**Development Workflow:**

```bash

# Create feature branch

git checkout -b feature/amazing-feature

# Make your changes

# Add tests if applicable

# Update documentation

# Submit pull request

git push origin feature/amazing-feature

```

### Testing

**Manual Testing:**

1. Test image generation with various prompts

2. Verify responsive design on different devices

3. Check error handling with invalid inputs

4. Test download functionality

## 🤝 Contributing

We welcome contributions! Here's how you can help:

**How to Contribute:**

1. Fork the repository

2. Create your feature branch (`git checkout -b feature/AmazingFeature`)

3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)

4. Push to the branch (`git push origin feature/AmazingFeature`)

5. Open a Pull Request

**Contribution Guidelines:**

- Follow TypeScript best practices

- Maintain consistent code formatting

- Add meaningful commit messages

- Update documentation as needed

[![][pr-welcome-shield]][pr-welcome-link]



  



## 📄 License

This project is licensed under the Apache-2.0 License - see the [LICENSE](LICENSE) file for details.

**License Benefits:**

- ✅ Commercial use allowed

- ✅ Modification allowed

- ✅ Distribution allowed

- ✅ Private use allowed

## 👥 Author



  

    

      

        

          

          


          _{Chan Meng}

        

        


        Creator & Lead Developer

      

    

  



**Chan Meng**

-  LinkedIn: [chanmeng666](https://www.linkedin.com/in/chanmeng666/)

-  GitHub: [ChanMeng666](https://github.com/ChanMeng666)

-  Email: [chanmeng.dev@gmail.com](mailto:chanmeng.dev@gmail.com)

-  Website: [chanmeng.live](https://2d-portfolio-eta.vercel.app/)

---



🎨 Transforming Ideas into Visual Art with AI 🌟




Empowering creativity through cutting-edge technology





⭐ **Star us on GitHub** • 🚀 **Try the Demo** • 🐛 **Report Issues** • 💡 **Request Features** • 🤝 **Contribute**





**Made with 💛 by Chan Meng**









---

[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square

[project-link]: https://image-generator-sable-tau.vercel.app/

[docs]: https://github.com/ChanMeng666/image-generator#readme

[demo-link]: https://image-generator-sable-tau.vercel.app/

[github-link]: https://github.com/ChanMeng666/image-generator

[github-issues-link]: https://github.com/ChanMeng666/image-generator/issues

[github-stars-link]: https://github.com/ChanMeng666/image-generator/stargazers

[github-forks-link]: https://github.com/ChanMeng666/image-generator/forks

[github-contributors-link]: https://github.com/ChanMeng666/image-generator/contributors

[github-release-link]: https://github.com/ChanMeng666/image-generator/releases

[pr-welcome-link]: https://github.com/ChanMeng666/image-generator/pulls

[github-license-link]: https://github.com/ChanMeng666/image-generator/blob/main/LICENSE

[github-release-shield]: https://img.shields.io/github/v/release/ChanMeng666/image-generator?color=369eff&labelColor=black&logo=github&style=flat-square

[vercel-shield]: https://img.shields.io/badge/vercel-online-55b467?labelColor=black&logo=vercel&style=flat-square

[vercel-link]: https://image-generator-sable-tau.vercel.app/

[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/ChanMeng666/image-generator/test.yml?label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square

[github-action-test-link]: https://github.com/ChanMeng666/image-generator/actions

[github-contributors-shield]: https://img.shields.io/github/contributors/ChanMeng666/image-generator?color=c4f042&labelColor=black&style=flat-square

[github-forks-shield]: https://img.shields.io/github/forks/ChanMeng666/image-generator?color=8ae8ff&labelColor=black&style=flat-square

[github-stars-shield]: https://img.shields.io/github/stars/ChanMeng666/image-generator?color=ffcb47&labelColor=black&style=flat-square

[github-issues-shield]: https://img.shields.io/github/issues/ChanMeng666/image-generator?color=ff80eb&labelColor=black&style=flat-square

[github-license-shield]: https://img.shields.io/badge/license-Apache--2.0-white?labelColor=black&style=flat-square

[pr-welcome-shield]: https://img.shields.io/badge/🤝_PRs_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge

[demo-shield-badge]: https://img.shields.io/badge/TRY%20DEMO-ONLINE-55b467?labelColor=black&logo=vercel&style=for-the-badge

[share-x-link]: https://x.com/intent/tweet?hashtags=AI,ImageGeneration,NextJS&text=Check%20out%20this%20amazing%20AI%20Image%20Generator%20https%3A%2F%2Fgithub.com%2FChanMeng666%2Fimage-generator

[share-telegram-link]: https://t.me/share/url?text=AI%20Image%20Generator%20-%20Transform%20text%20into%20stunning%20visuals&url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fimage-generator

[share-whatsapp-link]: https://api.whatsapp.com/send?text=Check%20out%20this%20AI%20Image%20Generator%20https%3A%2F%2Fgithub.com%2FChanMeng666%2Fimage-generator

[share-reddit-link]: https://www.reddit.com/submit?title=AI%20Image%20Generator%20with%20Next.js&url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fimage-generator

[share-linkedin-link]: https://linkedin.com/sharing/share-offsite/?url=https://github.com/ChanMeng666/image-generator

[share-x-shield]: https://img.shields.io/badge/-share%20on%20x-black?labelColor=black&logo=x&logoColor=white&style=flat-square

[share-telegram-shield]: https://img.shields.io/badge/-share%20on%20telegram-black?labelColor=black&logo=telegram&logoColor=white&style=flat-square

[share-whatsapp-shield]: https://img.shields.io/badge/-share%20on%20whatsapp-black?labelColor=black&logo=whatsapp&logoColor=white&style=flat-square

[share-reddit-shield]: https://img.shields.io/badge/-share%20on%20reddit-black?labelColor=black&logo=reddit&logoColor=white&style=flat-square

[share-linkedin-shield]: https://img.shields.io/badge/-share%20on%20linkedin-black?labelColor=black&logo=linkedin&logoColor=white&style=flat-square

[image-star]: https://via.placeholder.com/800x200/FFD700/000000?text=⭐+Star+Us+on+GitHub
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/chanmeng666/image-generator

Awesome Lists containing this project

README

Transform Your Ideas Into Stunning Visual Art
