This is a straightforward application that leverages the fast and affordable Runware API, built using NextJS. This application enables users to generate images from text prompts with various configuration options, requiring minimal coding knowledge or GPU environment setup with install scripts for windows and linux.
-Input for Runware API key -Text prompts for image description -Negative prompts for excluding unwanted elements -Adjustable image dimensions -Configurable inference steps and guidance scale -Seed input for reproducible results -Batch size and number of results options -Scheduler selection -Options for using LCM, XL, Refiner, and ControlNet -Model selection -Output type and format selection -Real-time image preview
- Must setup runware.ai account for API key. (for fast flux image generation, free $15 to start and will make 1000 512x512 images for about $1)
Before you begin, ensure you have met the following requirements:
-Node.js (v14.0.0 or later) -npm (v6.0.0 or later) -A Runware API key
To use the installation scripts:
- On Windows, save the
win_quick.batfile and double-click it to run. - On Linux, save the
linux_quick.shfile, give it execute permissions withchmod +x install.sh, and then run it with./linux_quick.sh.
Clone the repository: git clone https://github.com/PixifyAI/instaflux-nextjs
2. Navigate to the project directory:
cd instaflux-nextjs
3. Install the dependencies:
npm install
## Usage
1. Start the development server:
npm run dev
2. Open your browser and visit `http://localhost:3000`
3. Enter your Runware API key and configure the image generation parameters
4. Click the "Generate Image" button to create your image
## Configuration
The application uses Next.js 13 with the App Router. The main component is located in `components/instaflux.tsx`. You can modify this file to add or remove features as needed.
Here's the file structure for the Runware Image Generator project:
```plaintext
runware-image-generator/
├── app/
│ ├── layout.tsx
│ └── page.tsx
├── components/
│ ├── ui/
│ │ ├── button.tsx
│ │ ├── card.tsx
│ │ ├── input.tsx
│ │ ├── select.tsx
│ │ ├── slider.tsx
│ │ └── switch.tsx
│ └── instaflux.tsx
├── styles/
│ └── globals.css
├── public/
│ └── favicon.ico
├── .gitignore
├── next.config.js
├── package.json
├── README.md
└── tailwind.config.js
Let's break down the structure:
-
app/: This directory contains the main application files for Next.js 13 with App Router. -
layout.tsx: The root layout component. -
page.tsx: The main page component that renders the RunwareApp. -
components/: This directory contains all the React components used in the application. -
ui/: This subdirectory contains the shadcn/ui components. -
button.tsx: The Button component. -
card.tsx: The Card component. -
input.tsx: The Input component. -
select.tsx: The Select component. -
slider.tsx: The Slider component. -
switch.tsx: The Switch component. -
instaflux.tsx: The main component for the Runware Image Generator. -
styles/: This directory contains global styles. -
globals.css: Global CSS file, including Tailwind directives. -
public/: This directory is for static assets. -
favicon.ico: The favicon for the website. -
.gitignore: Specifies which files Git should ignore. -
next.config.js: Configuration file for Next.js. -
package.json: Defines the project dependencies and scripts. -
README.md: Contains information about the project, how to set it up, and how to use it. -
tailwind.config.js: Configuration file for Tailwind CSS.
Contributions to the Runware Image Generator are welcome. Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.