File size: 2,621 Bytes
1843419 faee5d2 1843419 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | ---
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. |