Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ashakoen/next-js-flux1-replicate
FLUX.1 Image Generator is a web application that allows users to generate images using the FLUX.1-dev AI models (dev and schnell versions) hosted on Replicate. Also supports generating images using private LoRA FLUX.1-dev fine-tuned models.
https://github.com/ashakoen/next-js-flux1-replicate
flux nextjs replicate vercel
Last synced: about 20 hours ago
JSON representation
FLUX.1 Image Generator is a web application that allows users to generate images using the FLUX.1-dev AI models (dev and schnell versions) hosted on Replicate. Also supports generating images using private LoRA FLUX.1-dev fine-tuned models.
- Host: GitHub
- URL: https://github.com/ashakoen/next-js-flux1-replicate
- Owner: ashakoen
- License: mit
- Created: 2024-09-20T21:36:28.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-12T00:06:58.000Z (4 days ago)
- Last Synced: 2024-11-12T00:28:53.878Z (4 days ago)
- Topics: flux, nextjs, replicate, vercel
- Language: TypeScript
- Homepage: https://ashalens-87638x.vercel.app
- Size: 6 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Flux.1 Image Generator
Flux.1 Image Generator is a web application that allows users to generate images using the Flux.1 AI models (dev and schnell versions) hosted on Replicate. This project is built with Next.js to provide a user-friendly interface for image generation.
## Features
- Generate images using Flux.1 AI models (dev and schnell versions) through the Replicate API
- Customize image generation parameters such as prompt, aspect ratio, and more
- Support for private LoRA models
- Secure handling of API keys (stored in browser's local storage)
- View and manage generated images
## Installation
1. Clone the repository:
```
git clone https://github.com/ashakoen/next-js-flux1-replicate.git
cd next-js-flux1-replicate
```
2. Install frontend dependencies:
```
npm install
```
3. Start the development server:
```
npm run dev
```
## Usage
1. Open your browser and navigate to ``` http://localhost:3000 ```
2. Enter your Replicate API key in the designated field
3. Configure your image generation parameters
4. Select either the "dev" or "schnell" version of the Flux.1 model
5. Click "Generate Image" to create new images
6. View and manage your generated images in the gallery section
## Security Note
The user's Replicate API key is stored securely in the browser's local storage and is not persisted in the backend. The frontend directly calls the Replicate API using the user's API key. Always ensure you're using the application over a secure connection (HTTPS) in production environments.
# Project Structure
```
.
├── Dockerfile
├── LICENSE
├── README.md
├── components.json
├── docker-compose.yml
├── next-env.d.ts
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.mjs
├── public
│ └── next.svg
├── src
│ ├── app
│ │ ├── api
│ │ │ └── replicate
│ │ │ └── route.ts
│ │ ├── components.tsx
│ │ ├── favicon.ico
│ │ ├── globals.css
│ │ ├── layout.tsx
│ │ └── page.tsx
│ ├── components
│ │ └── ui
│ │ ├── accordion.tsx
│ │ ├── alert.tsx
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── dialog.tsx
│ │ ├── drawer.tsx
│ │ ├── input.tsx
│ │ ├── label.tsx
│ │ ├── select.tsx
│ │ ├── skeleton.tsx
│ │ ├── slider.tsx
│ │ ├── switch.tsx
│ │ ├── tabs.tsx
│ │ ├── textarea.tsx
│ │ └── tooltip.tsx
│ └── lib
│ └── utils.ts
├── tailwind.config.ts
└── tsconfig.json
```
## Key Components
### Frontend
- Built with Next.js and React
- Tailwind CSS for styling
- UI components from Radix UI
## Configuration
This project doesn't use environment files (.env) for configuration. Instead, sensitive information like API keys are handled directly in the frontend and not stored in the backend.
### API Key Handling
- The Replicate API key is entered by the user in the frontend interface.
- The API key is stored in the user's browser local storage for convenience.
- When making requests, the frontend uses the API key to authenticate with the Replicate API.
### Frontend Configuration
You can customize various aspects of the frontend by modifying the following files:
- `next.config.mjs`: Next.js configuration
- `tailwind.config.ts`: Tailwind CSS configuration
- `tsconfig.json`: TypeScript configuration
Remember to never commit sensitive information like API keys to your version control system.
## Contributing
Contributions are welcome! Please submit a pull request.
## License
This project is licensed under the MIT License. See the LICENSE file for details.
## Contact
For any questions or suggestions, please open an issue on the GitHub repository.