{"id":22391539,"url":"https://github.com/chanmeng666/image-generator","last_synced_at":"2026-04-05T20:32:54.035Z","repository":{"id":265016288,"uuid":"894878107","full_name":"ChanMeng666/image-generator","owner":"ChanMeng666","description":"【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.","archived":false,"fork":false,"pushed_at":"2025-01-15T04:12:03.000Z","size":73,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T22:13:50.465Z","etag":null,"topics":["ai-image-generation","artificial-intelligence","nextjs","react","tailwindcss","together-ai","vercel","web-app"],"latest_commit_sha":null,"homepage":"https://image-generator-sable-tau.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ChanMeng666.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-27T06:54:38.000Z","updated_at":"2025-03-26T00:13:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"a61d52da-bd40-44c2-a523-f0cad0d5442f","html_url":"https://github.com/ChanMeng666/image-generator","commit_stats":null,"previous_names":["chanmeng666/image-generator"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Fimage-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Fimage-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Fimage-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChanMeng666%2Fimage-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChanMeng666","download_url":"https://codeload.github.com/ChanMeng666/image-generator/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245743435,"owners_count":20665093,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-image-generation","artificial-intelligence","nextjs","react","tailwindcss","together-ai","vercel","web-app"],"created_at":"2024-12-05T04:10:18.008Z","updated_at":"2025-12-30T23:23:38.435Z","avatar_url":"https://github.com/ChanMeng666.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\u003ca name=\"readme-top\"\u003e\u003c/a\u003e\n\n[![AI Image Generator](./public/logo.svg)](#)\n\n# 🎨 AI Image Generator\u003cbr/\u003e\u003ch3\u003eTransform Your Ideas Into Stunning Visual Art\u003c/h3\u003e\n\nAn innovative AI-powered image generation platform that leverages cutting-edge FLUX.1 technology to transform text descriptions into high-quality images.\u003cbr/\u003e\nSupports real-time generation, instant downloads, and features a beautiful Mondrian-inspired UI design.\u003cbr/\u003e\nOne-click **FREE** deployment of your AI image generation platform.\n\n[Live Demo][project-link] · [Documentation][docs] · [GitHub][github-link] · [Issues][github-issues-link]\n\n\u003cbr/\u003e\n\n[![🚀 Try Live Demo 🚀](https://gradient-svg-generator.vercel.app/api/svg?text=%F0%9F%9A%80Try%20Live%20Demo%F0%9F%9A%80\u0026color=000000\u0026height=60\u0026gradientType=radial\u0026duration=6s\u0026color0=ffffff\u0026template=pride-rainbow)][project-link]\n\n\u003cbr/\u003e\n\n\u003c!-- SHIELD GROUP --\u003e\n\n[![][github-release-shield]][github-release-link]\n[![][vercel-shield]][vercel-link]\n[![][github-action-test-shield]][github-action-test-link]\u003cbr/\u003e\n[![][github-contributors-shield]][github-contributors-link]\n[![][github-forks-shield]][github-forks-link]\n[![][github-stars-shield]][github-stars-link]\n[![][github-issues-shield]][github-issues-link]\n[![][github-license-shield]][github-license-link]\u003cbr\u003e\n\n**Share AI Image Generator**\n\n[![][share-x-shield]][share-x-link]\n[![][share-telegram-shield]][share-telegram-link]\n[![][share-whatsapp-shield]][share-whatsapp-link]\n[![][share-reddit-shield]][share-reddit-link]\n[![][share-linkedin-shield]][share-linkedin-link]\n\n\u003csup\u003e🌟 Pioneering the future of AI-powered creative tools. Built for artists, designers, and creative professionals.\u003c/sup\u003e\n\n## 📸 Project Screenshots\n\n\u003e [!TIP]\n\u003e Experience the intuitive interface and powerful AI image generation capabilities.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/6ae7ccc7-2fba-4e1b-a2c1-e9a9b2b0b041\" alt=\"Main Interface\" width=\"800\"/\u003e\n  \u003cp\u003e\u003cem\u003eMain Interface - Clean and intuitive design inspired by Mondrian's art\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/d9abd50c-8b07-45ce-b360-367a89ae9e3b\" alt=\"Image Generation Process\" width=\"400\"/\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/d5c54d22-122e-4775-9767-a3ca1045b0ef\" alt=\"Generated Results\" width=\"400\"/\u003e\n  \u003cp\u003e\u003cem\u003eAI Generation Process - From prompt to stunning visuals\u003c/em\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n**Tech Stack Badges:**\n\n\u003cdiv align=\"center\"\u003e\n\n \u003cimg src=\"https://img.shields.io/badge/next.js-%23000000.svg?style=for-the-badge\u0026logo=nextdotjs\u0026logoColor=white\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge\u0026logo=tailwindcss\u0026logoColor=white\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/Together%20AI-FF6B6B?style=for-the-badge\u0026logo=openai\u0026logoColor=white\"/\u003e\n \u003cimg src=\"https://img.shields.io/badge/vercel-%23000000.svg?style=for-the-badge\u0026logo=vercel\u0026logoColor=white\"/\u003e\n\n\u003c/div\u003e\n\n\u003c/div\u003e\n\n\u003e [!IMPORTANT]\n\u003e 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.\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003ckbd\u003e📑 Table of Contents\u003c/kbd\u003e\u003c/summary\u003e\n\n#### TOC\n\n- [🎨 AI Image Generator](#-ai-image-generator)\n      - [TOC](#toc)\n  - [🌟 Introduction](#-introduction)\n  - [✨ Key Features](#-key-features)\n    - [`1` AI-Powered Image Generation](#1-ai-powered-image-generation)\n    - [`2` Mondrian-Inspired Design](#2-mondrian-inspired-design)\n    - [`*` Additional Features](#-additional-features)\n  - [🛠️ Tech Stack](#️-tech-stack)\n  - [🏗️ Architecture](#️-architecture)\n    - [System Architecture](#system-architecture)\n    - [Component Structure](#component-structure)\n  - [⚡️ Performance](#️-performance)\n  - [🚀 Getting Started](#-getting-started)\n    - [Prerequisites](#prerequisites)\n    - [Quick Installation](#quick-installation)\n    - [Environment Setup](#environment-setup)\n    - [Development Mode](#development-mode)\n  - [🛳 Deployment](#-deployment)\n    - [`A` Cloud Deployment](#a-cloud-deployment)\n    - [`B` Docker Deployment](#b-docker-deployment)\n    - [`C` Environment Variables](#c-environment-variables)\n  - [📖 Usage Guide](#-usage-guide)\n    - [Basic Usage](#basic-usage)\n    - [API Reference](#api-reference)\n  - [🔌 Integrations](#-integrations)\n  - [⌨️ Development](#️-development)\n    - [Local Development](#local-development)\n    - [Adding Features](#adding-features)\n    - [Testing](#testing)\n  - [🤝 Contributing](#-contributing)\n  - [📄 License](#-license)\n  - [👥 Author](#-author)\n\n####\n\n\u003cbr/\u003e\n\n\u003c/details\u003e\n\n## 🌟 Introduction\n\nWe 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.\n\nWhether 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.\n\n\u003e [!NOTE]\n\u003e - Node.js \u003e= 18.0 required\n\u003e - Together AI API key required for image generation\n\u003e - Modern browser with JavaScript enabled\n\u003e - Optional: Vercel account for deployment\n\n| [![][demo-shield-badge]][demo-link]   | No installation required! Visit our live demo to experience AI image generation firsthand. |\n| :------------------------------------ | :----------------------------------------------------------------------------------------- |\n\n\u003e [!TIP]\n\u003e **⭐ Star us** to receive all release notifications from GitHub without delay!\n\n[![][image-star]][github-stars-link]\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ckbd\u003e⭐ Star History\u003c/kbd\u003e\u003c/summary\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://api.star-history.com/svg?repos=ChanMeng666%2Fimage-generator\u0026theme=dark\u0026type=Date\"\u003e\n    \u003cimg width=\"100%\" src=\"https://api.star-history.com/svg?repos=ChanMeng666%2Fimage-generator\u0026type=Date\"\u003e\n  \u003c/picture\u003e\n\u003c/details\u003e\n\n## ✨ Key Features\n\n### `1` AI-Powered Image Generation\n\nExperience 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.\n\nKey capabilities include:\n- 🚀 **Lightning Fast**: Generate 1024x768 images in seconds\n- 🎨 **High Quality**: FLUX.1-schnell model for superior results\n- 💡 **Creative Freedom**: Transform any text into visual art\n- 🔄 **Real-time Processing**: Instant feedback and generation\n\n\u003e [!TIP]\n\u003e The FLUX.1-schnell model excels at understanding complex prompts and generating detailed, creative images across various styles and subjects.\n\n[![][back-to-top]](#readme-top)\n\n### `2` Mondrian-Inspired Design\n\nRevolutionary user interface inspired by Piet Mondrian's iconic geometric art style. The clean, minimalist design ensures an intuitive user experience while maintaining aesthetic appeal.\n\n**Design Features:**\n- **Geometric Background**: Dynamic Mondrian-style shapes\n- **Clean Interface**: Minimalist and distraction-free design\n- **Responsive Layout**: Perfect on desktop and mobile devices\n- **Accessibility First**: WCAG compliant design principles\n\n[![][back-to-top]](#readme-top)\n\n### `*` Additional Features\n\nBeyond the core AI generation, this project includes:\n\n- [x] 📱 **Responsive Design**: Perfect experience across all devices\n- [x] ⬇️ **Instant Downloads**: One-click image downloading\n- [x] 🛡️ **Error Handling**: Comprehensive error management and user feedback\n- [x] 🔄 **Loading States**: Smooth loading animations and progress indicators\n- [x] 🎯 **TypeScript**: Full type safety throughout the application\n- [x] 🚀 **Next.js App Router**: Modern React architecture with server components\n- [x] 🎨 **Custom UI Components**: Built with Radix UI primitives\n- [x] ⚡ **Optimized Performance**: Fast loading and efficient rendering\n\n\u003e ✨ More features are continuously being added as the project evolves.\n\n\u003cdiv align=\"right\"\u003e\n\n[![][back-to-top]](#readme-top)\n\n\u003c/div\u003e\n\n## 🛠️ Tech Stack\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/nextdotjs\" width=\"48\" height=\"48\" alt=\"Next.js\" /\u003e\n        \u003cbr\u003eNext.js 14\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/react\" width=\"48\" height=\"48\" alt=\"React\" /\u003e\n        \u003cbr\u003eReact 18\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/typescript\" width=\"48\" height=\"48\" alt=\"TypeScript\" /\u003e\n        \u003cbr\u003eTypeScript 5\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/tailwindcss\" width=\"48\" height=\"48\" alt=\"Tailwind CSS\" /\u003e\n        \u003cbr\u003eTailwind CSS\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/openai\" width=\"48\" height=\"48\" alt=\"Together AI\" /\u003e\n        \u003cbr\u003eTogether AI\n      \u003c/td\u003e\n      \u003ctd align=\"center\" width=\"96\"\u003e\n        \u003cimg src=\"https://cdn.simpleicons.org/vercel\" width=\"48\" height=\"48\" alt=\"Vercel\" /\u003e\n        \u003cbr\u003eVercel\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n**Frontend Stack:**\n- **Framework**: Next.js 14 with App Router\n- **Language**: TypeScript for complete type safety\n- **Styling**: Tailwind CSS with custom design system\n- **UI Components**: Radix UI primitives + Custom components\n- **Icons**: Lucide React icon library\n\n**AI \u0026 Backend:**\n- **AI Model**: Together AI FLUX.1-schnell-Free\n- **API**: Next.js API routes with edge runtime\n- **Image Processing**: Base64 encoding for instant display\n- **Error Handling**: Comprehensive error boundaries\n\n**DevOps \u0026 Deployment:**\n- **Platform**: Vercel for seamless deployment\n- **Build System**: Next.js optimized build pipeline\n- **Environment**: Secure environment variable management\n- **Performance**: Automatic image optimization\n\n\u003e [!TIP]\n\u003e Each technology was carefully selected for optimal developer experience, performance, and maintainability in production environments.\n\n## 🏗️ Architecture\n\n### System Architecture\n\n\u003e [!TIP]\n\u003e This architecture supports horizontal scaling and is production-ready for high-traffic applications.\n\n```mermaid\ngraph TB\n    subgraph \"Frontend Layer\"\n        A[Next.js App] --\u003e B[React Components]\n        B --\u003e C[Tailwind Styling]\n        C --\u003e D[API Layer]\n    end\n    \n    subgraph \"Backend Layer\"\n        E[API Routes] --\u003e F[Together AI Client]\n        F --\u003e G[FLUX.1 Model]\n    end\n    \n    subgraph \"External Services\"\n        H[Together AI API]\n        I[Vercel Platform]\n        J[Image Processing]\n    end\n    \n    D --\u003e E\n    F --\u003e H\n    G --\u003e J\n    \n    subgraph \"User Interface\"\n        K[Text Input]\n        L[Image Display]\n        M[Download Feature]\n        N[Error Handling]\n    end\n    \n    A --\u003e K\n    A --\u003e L\n    A --\u003e M\n    A --\u003e N\n```\n\n### Component Structure\n\n```\nsrc/\n├── app/                    # Next.js App Router\n│   ├── api/generate/      # Image generation API route\n│   ├── layout.tsx         # Root layout component\n│   ├── page.tsx           # Main application page\n│   └── globals.css        # Global styles\n├── components/            # Reusable UI components\n│   ├── ui/               # Base UI components (Button, etc.)\n│   └── MondrianBackground.tsx # Custom background component\n├── lib/                  # Utility libraries\n│   └── utils.ts          # Helper functions\n├── public/               # Static assets\n│   ├── logo.svg          # Application logo\n│   └── favicon.svg       # Favicon\n└── types.d.ts           # TypeScript definitions\n```\n\n## ⚡️ Performance\n\n### Performance Metrics\n\n**Key Metrics:**\n- ⚡ **\u003c 2s** Image generation time\n- 🚀 **\u003c 300ms** Initial page load\n- 💨 **95+ Lighthouse Score** for performance\n- 📱 **100% Mobile Responsive** design\n- 🔄 **Real-time** generation feedback\n\n**Performance Optimizations:**\n- 🎯 **Next.js Image Optimization**: Automatic WebP conversion and lazy loading\n- 📦 **Code Splitting**: Automatic bundle optimization\n- 🔄 **API Optimization**: Efficient Together AI integration\n- 🖼️ **Base64 Encoding**: Instant image display without additional requests\n\n\u003e [!NOTE]\n\u003e Performance metrics are continuously monitored in production environments.\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n\u003e [!IMPORTANT]\n\u003e Ensure you have the following installed:\n\n- Node.js 18.0+ ([Download](https://nodejs.org/))\n- npm/yarn/pnpm package manager\n- Git ([Download](https://git-scm.com/))\n- Together AI API key ([Get yours here](https://together.ai/))\n\n### Quick Installation\n\n**1. Clone Repository**\n\n```bash\ngit clone https://github.com/ChanMeng666/image-generator.git\ncd image-generator\n```\n\n**2. Install Dependencies**\n\n```bash\n# Using npm\nnpm install\n\n# Using yarn\nyarn install\n\n# Using pnpm (recommended)\npnpm install\n```\n\n**3. Environment Setup**\n\n```bash\n# Create environment file\ncp .env.example .env.local\n\n# Add your Together AI API key\necho \"TOGETHER_API_KEY=your_api_key_here\" \u003e\u003e .env.local\n```\n\n**4. Start Development**\n\n```bash\nnpm run dev\n```\n\n🎉 **Success!** Open [http://localhost:3000](http://localhost:3000) to start generating images.\n\n### Environment Setup\n\nCreate `.env.local` file with the following variables:\n\n```bash\n# Together AI Configuration\nTOGETHER_API_KEY=\"your-together-ai-api-key\"\n\n# Optional: Additional Configuration\nNEXT_PUBLIC_APP_URL=\"http://localhost:3000\"\n```\n\n\u003e [!TIP]\n\u003e Get your Together AI API key from [https://together.ai/](https://together.ai/) - it's free to start!\n\n### Development Mode\n\n```bash\n# Start development server\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Start production server\nnpm run start\n\n# Run linting\nnpm run lint\n```\n\n## 🛳 Deployment\n\n\u003e [!IMPORTANT]\n\u003e Cloud deployment is recommended for production applications.\n\n### `A` Cloud Deployment\n\n**Vercel (Recommended)**\n\n[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fimage-generator)\n\n**Manual Deployment:**\n\n```bash\n# Install Vercel CLI\nnpm i -g vercel\n\n# Deploy to production\nvercel --prod\n```\n\n**Other Platforms:**\n\n\u003cdiv align=\"center\"\u003e\n\n|           Deploy with Netlify            |                     Deploy with Railway                      |\n| :-------------------------------------: | :---------------------------------------------------------: |\n| [![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) |\n\n\u003c/div\u003e\n\n### `B` Docker Deployment\n\n```bash\n# Build Docker image\ndocker build -t ai-image-generator .\n\n# Run container\ndocker run -p 3000:3000 -e TOGETHER_API_KEY=your_key ai-image-generator\n```\n\n### `C` Environment Variables\n\n\u003e [!WARNING]\n\u003e Never commit sensitive environment variables to version control.\n\n| Variable | Description | Required | Example |\n|----------|-------------|----------|---------|\n| `TOGETHER_API_KEY` | Together AI API key for image generation | ✅ | `sk-xxxxxxxxxxxxx` |\n| `NEXT_PUBLIC_APP_URL` | Application URL for metadata | 🔶 | `https://yourdomain.com` |\n\n\u003e [!NOTE]\n\u003e ✅ Required, 🔶 Optional\n\n## 📖 Usage Guide\n\n### Basic Usage\n\n**Getting Started with AI Image Generation:**\n\n1. **Enter Description**: Type your image description in the text area\n2. **Generate Image**: Click the \"Generate Image\" button\n3. **View Result**: Watch as your AI-generated image appears\n4. **Download**: Click \"Download Image\" to save your creation\n\n### API Reference\n\n**Image Generation Endpoint:**\n\n```bash\nPOST /api/generate\nContent-Type: application/json\n\n{\n  \"prompt\": \"A beautiful sunset over mountains\"\n}\n\n# Response\n{\n  \"b64_json\": \"base64-encoded-image-data\"\n}\n```\n\n**Example Usage:**\n\n```javascript\nconst generateImage = async (prompt) =\u003e {\n  const response = await fetch('/api/generate', {\n    method: 'POST',\n    headers: {\n      'Content-Type': 'application/json'\n    },\n    body: JSON.stringify({ prompt })\n  });\n  \n  const imageData = await response.json();\n  return `data:image/png;base64,${imageData}`;\n};\n```\n\n**Error Responses:**\n\n| Status Code | Description | Response |\n|------------|-------------|----------|\n| `400` | Missing prompt | `{ error: \"Please enter a prompt\" }` |\n| `500` | Generation failed | `{ error: \"Error generating image\" }` |\n\n## 🔌 Integrations\n\n**Current Integrations:**\n\n| Service | Purpose | Status | Documentation |\n|---------|---------|--------|---------------|\n| **Together AI** | AI Image Generation | ✅ Active | [API Docs](https://docs.together.ai/) |\n| **Vercel** | Hosting \u0026 Deployment | ✅ Active | [Setup Guide](https://vercel.com/docs) |\n| **Tailwind CSS** | Styling System | ✅ Active | [Documentation](https://tailwindcss.com/) |\n| **Radix UI** | UI Components | ✅ Active | [Component Docs](https://www.radix-ui.com/) |\n\n## ⌨️ Development\n\n### Local Development\n\n**Setup Development Environment:**\n\n```bash\n# Clone and setup\ngit clone https://github.com/ChanMeng666/image-generator.git\ncd image-generator\nnpm install\n\n# Configure environment\ncp .env.example .env.local\n# Add your TOGETHER_API_KEY\n\n# Start development\nnpm run dev\n```\n\n### Adding Features\n\n**Development Workflow:**\n\n```bash\n# Create feature branch\ngit checkout -b feature/amazing-feature\n\n# Make your changes\n# Add tests if applicable\n# Update documentation\n\n# Submit pull request\ngit push origin feature/amazing-feature\n```\n\n### Testing\n\n**Manual Testing:**\n\n1. Test image generation with various prompts\n2. Verify responsive design on different devices\n3. Check error handling with invalid inputs\n4. Test download functionality\n\n## 🤝 Contributing\n\nWe welcome contributions! Here's how you can help:\n\n**How to Contribute:**\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/AmazingFeature`)\n3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)\n4. Push to the branch (`git push origin feature/AmazingFeature`)\n5. Open a Pull Request\n\n**Contribution Guidelines:**\n\n- Follow TypeScript best practices\n- Maintain consistent code formatting\n- Add meaningful commit messages\n- Update documentation as needed\n\n[![][pr-welcome-shield]][pr-welcome-link]\n\n\u003ca href=\"https://github.com/ChanMeng666/image-generator/graphs/contributors\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=ChanMeng666/image-generator\"\u003e\n\u003c/a\u003e\n\n## 📄 License\n\nThis project is licensed under the Apache-2.0 License - see the [LICENSE](LICENSE) file for details.\n\n**License Benefits:**\n- ✅ Commercial use allowed\n- ✅ Modification allowed\n- ✅ Distribution allowed\n- ✅ Private use allowed\n\n## 👥 Author\n\n\u003cdiv align=\"center\"\u003e\n  \u003ctable\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\"\u003e\n        \u003ca href=\"https://github.com/ChanMeng666\"\u003e\n          \u003cimg src=\"https://github.com/ChanMeng666.png?size=100\" width=\"100px;\" alt=\"Chan Meng\"/\u003e\n          \u003cbr /\u003e\n          \u003csub\u003e\u003cb\u003eChan Meng\u003c/b\u003e\u003c/sub\u003e\n        \u003c/a\u003e\n        \u003cbr /\u003e\n        \u003csmall\u003eCreator \u0026 Lead Developer\u003c/small\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/table\u003e\n\u003c/div\u003e\n\n**Chan Meng**\n- \u003cimg src=\"https://cdn.simpleicons.org/linkedin/0A66C2\" width=\"16\" height=\"16\"\u003e LinkedIn: [chanmeng666](https://www.linkedin.com/in/chanmeng666/)\n- \u003cimg src=\"https://cdn.simpleicons.org/github/181717\" width=\"16\" height=\"16\"\u003e GitHub: [ChanMeng666](https://github.com/ChanMeng666)\n- \u003cimg src=\"https://cdn.simpleicons.org/gmail/EA4335\" width=\"16\" height=\"16\"\u003e Email: [chanmeng.dev@gmail.com](mailto:chanmeng.dev@gmail.com)\n- \u003cimg src=\"https://cdn.simpleicons.org/internetexplorer/0078D4\" width=\"16\" height=\"16\"\u003e Website: [chanmeng.live](https://2d-portfolio-eta.vercel.app/)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\u003cstrong\u003e🎨 Transforming Ideas into Visual Art with AI 🌟\u003c/strong\u003e\n\u003cbr/\u003e\n\u003cem\u003eEmpowering creativity through cutting-edge technology\u003c/em\u003e\n\u003cbr/\u003e\u003cbr/\u003e\n\n⭐ **Star us on GitHub** • 🚀 **Try the Demo** • 🐛 **Report Issues** • 💡 **Request Features** • 🤝 **Contribute**\n\n\u003cbr/\u003e\u003cbr/\u003e\n\n**Made with 💛 by Chan Meng**\n\n\u003cimg src=\"https://img.shields.io/github/stars/ChanMeng666/image-generator?style=social\" alt=\"GitHub stars\"\u003e\n\u003cimg src=\"https://img.shields.io/github/forks/ChanMeng666/image-generator?style=social\" alt=\"GitHub forks\"\u003e\n\u003cimg src=\"https://img.shields.io/github/watchers/ChanMeng666/image-generator?style=social\" alt=\"GitHub watchers\"\u003e\n\n\u003c/div\u003e\n\n---\n\n\u003c!-- LINK DEFINITIONS --\u003e\n\n[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square\n\n\u003c!-- Project Links --\u003e\n[project-link]: https://image-generator-sable-tau.vercel.app/\n[docs]: https://github.com/ChanMeng666/image-generator#readme\n[demo-link]: https://image-generator-sable-tau.vercel.app/\n[github-link]: https://github.com/ChanMeng666/image-generator\n\n\u003c!-- GitHub Links --\u003e\n[github-issues-link]: https://github.com/ChanMeng666/image-generator/issues\n[github-stars-link]: https://github.com/ChanMeng666/image-generator/stargazers\n[github-forks-link]: https://github.com/ChanMeng666/image-generator/forks\n[github-contributors-link]: https://github.com/ChanMeng666/image-generator/contributors\n[github-release-link]: https://github.com/ChanMeng666/image-generator/releases\n[pr-welcome-link]: https://github.com/ChanMeng666/image-generator/pulls\n[github-license-link]: https://github.com/ChanMeng666/image-generator/blob/main/LICENSE\n\n\u003c!-- Shield Badges --\u003e\n[github-release-shield]: https://img.shields.io/github/v/release/ChanMeng666/image-generator?color=369eff\u0026labelColor=black\u0026logo=github\u0026style=flat-square\n[vercel-shield]: https://img.shields.io/badge/vercel-online-55b467?labelColor=black\u0026logo=vercel\u0026style=flat-square\n[vercel-link]: https://image-generator-sable-tau.vercel.app/\n[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/ChanMeng666/image-generator/test.yml?label=test\u0026labelColor=black\u0026logo=githubactions\u0026logoColor=white\u0026style=flat-square\n[github-action-test-link]: https://github.com/ChanMeng666/image-generator/actions\n[github-contributors-shield]: https://img.shields.io/github/contributors/ChanMeng666/image-generator?color=c4f042\u0026labelColor=black\u0026style=flat-square\n[github-forks-shield]: https://img.shields.io/github/forks/ChanMeng666/image-generator?color=8ae8ff\u0026labelColor=black\u0026style=flat-square\n[github-stars-shield]: https://img.shields.io/github/stars/ChanMeng666/image-generator?color=ffcb47\u0026labelColor=black\u0026style=flat-square\n[github-issues-shield]: https://img.shields.io/github/issues/ChanMeng666/image-generator?color=ff80eb\u0026labelColor=black\u0026style=flat-square\n[github-license-shield]: https://img.shields.io/badge/license-Apache--2.0-white?labelColor=black\u0026style=flat-square\n[pr-welcome-shield]: https://img.shields.io/badge/🤝_PRs_welcome-%E2%86%92-ffcb47?labelColor=black\u0026style=for-the-badge\n\n\u003c!-- Badge Variants --\u003e\n[demo-shield-badge]: https://img.shields.io/badge/TRY%20DEMO-ONLINE-55b467?labelColor=black\u0026logo=vercel\u0026style=for-the-badge\n\n\u003c!-- Social Share Links --\u003e\n[share-x-link]: https://x.com/intent/tweet?hashtags=AI,ImageGeneration,NextJS\u0026text=Check%20out%20this%20amazing%20AI%20Image%20Generator%20https%3A%2F%2Fgithub.com%2FChanMeng666%2Fimage-generator\n[share-telegram-link]: https://t.me/share/url?text=AI%20Image%20Generator%20-%20Transform%20text%20into%20stunning%20visuals\u0026url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fimage-generator\n[share-whatsapp-link]: https://api.whatsapp.com/send?text=Check%20out%20this%20AI%20Image%20Generator%20https%3A%2F%2Fgithub.com%2FChanMeng666%2Fimage-generator\n[share-reddit-link]: https://www.reddit.com/submit?title=AI%20Image%20Generator%20with%20Next.js\u0026url=https%3A%2F%2Fgithub.com%2FChanMeng666%2Fimage-generator\n[share-linkedin-link]: https://linkedin.com/sharing/share-offsite/?url=https://github.com/ChanMeng666/image-generator\n\n[share-x-shield]: https://img.shields.io/badge/-share%20on%20x-black?labelColor=black\u0026logo=x\u0026logoColor=white\u0026style=flat-square\n[share-telegram-shield]: https://img.shields.io/badge/-share%20on%20telegram-black?labelColor=black\u0026logo=telegram\u0026logoColor=white\u0026style=flat-square\n[share-whatsapp-shield]: https://img.shields.io/badge/-share%20on%20whatsapp-black?labelColor=black\u0026logo=whatsapp\u0026logoColor=white\u0026style=flat-square\n[share-reddit-shield]: https://img.shields.io/badge/-share%20on%20reddit-black?labelColor=black\u0026logo=reddit\u0026logoColor=white\u0026style=flat-square\n[share-linkedin-shield]: https://img.shields.io/badge/-share%20on%20linkedin-black?labelColor=black\u0026logo=linkedin\u0026logoColor=white\u0026style=flat-square\n\n\u003c!-- Images --\u003e\n[image-star]: https://via.placeholder.com/800x200/FFD700/000000?text=⭐+Star+Us+on+GitHub ","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanmeng666%2Fimage-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanmeng666%2Fimage-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanmeng666%2Fimage-generator/lists"}