Spaces:
Paused
Paused
| title: Image Generation & Editing | |
| emoji: 🖼️ | |
| colorFrom: blue | |
| colorTo: blue | |
| sdk: docker | |
| header: mini | |
| app_port: 3000 | |
| pinned: false | |
| license: apache-2.0 | |
| short_description: Generate and Edit images with Gemini 2.0 | |
| # Image Creation & Editing with Next.js and Gemini 2.0 Flash | |
| This project demonstrates how to create and edit images using Google's Gemini 2.0 Flash AI model in a Next.js web application. It allows users to generate images from text prompts or edit existing images through natural language instructions, maintaining conversation context for iterative refinements. | |
| **How It Works:** | |
| 1. **Create Images**: Generate images from text prompts using Gemini 2.0 Flash | |
| 2. **Edit Images**: Upload an image and provide instructions to modify it | |
| 3. **Conversation History**: Maintain context through a conversation with the AI for iterative refinements | |
| 4. **Download Results**: Save your generated or edited images | |
| ## Features | |
| - 🎨 Text-to-image generation with Gemini 2.0 Flash | |
| - 🖌️ Image editing through natural language instructions | |
| - 💬 Conversation history for context-aware image refinements | |
| - 📱 Responsive UI built with Next.js and shadcn/ui | |
| - 🔄 Seamless workflow between creation and editing modes | |
| - ⚡ Uses Gemini 2.0 Flash Javascript SDK | |
| ## Getting Started | |
| ### Local Development | |
| First, set up your environment variables: | |
| ```bash | |
| cp .env.example .env | |
| ``` | |
| Add your Google AI Studio API key to the `.env` file: | |
| ``` | |
| GEMINI_API_KEY=your_google_api_key | |
| ``` | |
| Then, install dependencies and run the development server: | |
| ```bash | |
| npm install | |
| npm run dev | |
| ``` | |
| Open [http://localhost:3000](http://localhost:3000) with your browser to see the application. | |
| ### Docker Deployment | |
| 1. Build the Docker image: | |
| ```bash | |
| docker build -t nextjs-gemini-image-editing . | |
| ``` | |
| 2. Run the container with your Google API key: | |
| ```bash | |
| docker run -p 3000:3000 -e GEMINI_API_KEY=your_google_api_key nextjs-gemini-image-editing | |
| ``` | |
| Or using an environment file: | |
| ```bash | |
| # Run container with env file | |
| docker run -p 3000:3000 --env-file .env nextjs-gemini-image-editing | |
| ``` | |
| Open [http://localhost:3000](http://localhost:3000) with your browser to see the application. | |
| ## Technologies Used | |
| - [Next.js](https://nextjs.org/) - React framework for the web application | |
| - [Google Gemini 2.0 Flash](https://deepmind.google/technologies/gemini/) - AI model for image generation and editing | |
| - [shadcn/ui](https://ui.shadcn.com/) - Re-usable components built using Radix UI and Tailwind CSS | |
| ## License | |
| This project is licensed under the Apache License 2.0 - see the [LICENSE](./LICENSE) file for details. |