A web application that generates stable images based on user prompts using various AI models
Tags: apps, generator, images
Published: 2023-08-12 20:10:52

---
title: A web application that generates stable images based on user prompts using various AI models
published: true
date: 2023-08-11 00:33:00 UTC
tags: Apps,Generator,Images
canonical_url: https://reactjsexample.com/a-web-application-that-generates-stable-images-based-on-user-prompts-using-various-ai-models/
---

# New UI coming soon!
 ![A web application that generates stable images based on user prompts using various AI models](https://reactjsexample.com/content/images/2023/08/code_2023-09-22-28-29.jpg)

![A web application that generates stable images based on user prompts using various AI models](https://user-images.githubusercontent.com/6137292/259291798-9a8fdaab-4a5f-49d6-b635-fc8f49848cea.png)

## Updates

🌙 Dark Mode Added

![A web application that generates stable images based on user prompts using various AI models](https://user-images.githubusercontent.com/6137292/259355188-481c772c-fae7-4d46-8cb8-5a04ef065a9b.png)

We’re excited to announce the addition of Dark Mode in Pixio! This feature provides a sleek and eye-friendly interface, perfect for those late-night creative sessions.

### How to Enable Dark Mode

Switching to Dark Mode is simple. Just look for the Dark Mode toggle in the menu, and with a single click, you can enjoy the new look.

# Pixio Community Lite Edition

Pixio Community Lite Edition is a web application that generates stable images based on user prompts using various AI models. It provides an interface for users to enter a prompt, select models, and generate images. Users can also send the generated images to a Discord channel.

## Technologies Used

- React: A JavaScript library for building user interfaces.
- Axios: A popular library for making HTTP requests.
- react-image-lightbox: A React component for displaying images in a lightbox.
- Material-UI: A popular React UI framework that provides pre-built components.
- discord.js: A powerful JavaScript library for interacting with the Discord API.
- Prodia: An AI model API for image generation.
- OpenAI: A leading provider of AI models and APIs.
- Upstash: A serverless Redis database for caching and data storage.
- Vercel: A cloud platform for deploying and hosting web applications.
- Next.js: A React framework for building server-rendered and statically exported applications.
- Tailwind CSS: A utility-first CSS framework for building responsive designs.

## Demo

To see a live demo of Pixio Community Lite Edition, you can visit the following link: [Demo]([https://Pixio](https://Pixio) Community Lite Edition-community-lite.vercel.app/)

## Getting Started

To get a local copy of Pixio Community Lite Edition up and running, follow these steps:

1. Clone the repository
2. Navigate to the project directory
3. Install the dependencies: `npm install`
4. Start the development server: `npm start`
5. Open your web browser and visit: `http://localhost:3000`

## Usage

Macro crisp quality, head, solo focus, sharp focus, complex 3d render ultra-detailed, an extremely delicate and beautiful girl, ((half body portrait:1.1)), looking at viewer, 18 yo, blonde with a bun, emerald green eyes, (silver plate mail that has gold outlines:1.3), real soft lustrous human skin, perfect skin, vibrant details, hyper realistic, beautiful background (medieval castle interior:1.2), octane render, 8k, best quality, masterpiece, extremely detailed, CG ,unity, wallpaper, (realistic, photo-realistic:1.37), Amazing, finely detail, physically-based rendering, masterpiece, best quality, official art, extremely detailed CG unity 8k wallpaper,

Prompt 1: epic realistic,bright sunny day, daylight on mars, mars, outside,bright sky, (((sexy spacesuit, havey boots, sexy woman, see-through helmet, straps, belts, black jeans, full body, zoomed out, detailed costume, utility belt))) long slender legs 80mm, sexy woman wearing an astronaut helmet. (((winona ryder,sci-fi, science fiction, spacex fashion, beautiful face))) ((pretty face)),mars background daylight, (((full body, athletic body, action pose, sexy detailed spacesuit, slender long legs))) dusty atmosphere, fog john singer sarget, blue pallette, mars background, (hyperrealism, soft light, sharp:1.2), soft light, sharp, (cinematic, teal and orange:0.85), (muted colors, dim colors, soothing tones:1.3), low saturation, (hyperdetailed:1.2), (intricate details:1.12), hdr, (intricate details, hyperdetailed:1.15), faded, (neutral colors:1.2), art, (hdr:1.5), (muted colors:1.1), (pastel:0.2), hyperdetailed, (artstation:1.4), warm lights, dramatic light, (intricate details:1.2), vignette, natural background, rutkowski

bad face, no identical eyes, bad hands, bad drawed mouth, bad detailed eyes, bad mouth,bad quality, deformities, lowres, polar lowres, bad anatomy, bad face, bad hands, bad body, bad feet, bad proportions, {bad leg}, {more legs}, worst quality, low quality, normal quality, gross proportions, blurry, poorly drawn, text,error, missing fingers, missing arms, missing legs, short legs, extra digit, indoors, out of frame, [petite], low background, distorted perspective, canvas frame, cartoon, 3d, ((disfigured)), ((bad art)), ((deformed)),((extra limbs)),((close up)),((b&w)), wierd colors, blurry, (((duplicate))), ((morbid)), ((mutilated)), [out of frame], extra fingers, mutated hands, ((poorly drawn hands)), ((poorly drawn face)), (((mutation))), (((deformed))), ((ugly)), blurry, ((bad anatomy)), (((bad proportions))), ((extra limbs)), cloned face, (((disfigured))), out of frame, ugly, extra limbs, (bad anatomy), gross proportions, (malformed limbs), ((missing arms)), ((missing legs)), (((extra arms))), (((extra legs))), mutated hands, (fused fingers), (too many fingers), (((long neck))), Photoshop, video game, ugly, tiling, poorly drawn hands, poorly drawn feet, poorly drawn face, out of frame, mutation, mutated, extra limbs, extra legs, extra arms, disfigured, deformed, cross-eye, body out of frame, blurry, bad art, bad anatomy, 3d render, canvas frame, cartoon, 3d, ((disfigured)), ((bad art)), ((deformed)),((extra limbs)),((close up)),((b&w)), wierd colors, blurry, (((duplicate))), ((morbid)), ((mutilated)), [out of frame], extra fingers, mutated hands, ((poorly drawn hands)), ((poorly drawn face)), (((mutation))), (((deformed))), ((ugly)), blurry, ((bad anatomy)), (((bad proportions))), ((extra limbs)), cloned face, (((disfigured))), out of frame, ugly, extra limbs, (bad anatomy), gross proportions, (malformed limbs), ((missing arms)), ((missing legs)), (((extra arms))), (((extra legs))), mutated hands, (fused fingers), (too many fingers), (((long neck))), ugly

cfg is 7 Karras sampler steps 13

1. Enter a prompt in the “Prompt” input field.
2. Enter a negative prompt in the “Negative Prompt” input field.
3. Select one or more AI models from the available options.
4. Click the “Generate Image” button to generate images based on the selected models.
5. Optionally, click on generated images to open them in a lightbox.
6. Select the images you want to send to Discord by checking the corresponding checkboxes.
7. Click the “Send to Gallery” button to send the selected images to Discord.

## Prompt Moderation

Pixio Community Lite Edition performs prompt moderation to ensure that the entered prompts do not contain inappropriate content. It checks for prohibited words such as “nude,” “naked,” and “pussy.” If a prompt contains any of these prohibited words, the generation process will be canceled, and an error message will be displayed.

## Models

Pixio Community Lite Edition supports the following AI models for image generation:

- Analog Diffusion v1.0
- Anything v3.0
- Anything v4.5
- Anything V5
- Orange Mix AOM3A3
- Deliberate v2
- Dreamlike Diffusion 1.0
- Dreamlike Diffusion 2.0
- Dreamshaper 5 BakedVae
- Dreamshaper 6 BakedVae
- Elddreths Vivid Mix
- Lyriel v15
- Meinamix MeinaV9
- Openjourney V4
- Portrait+ 1.0
- Realistic Vision V2.0
- Rev Animated v122
- Riffusion Model v1
- SDV1 4
- Pruned Emaonly v1-5
- Shonins Beautiful v10
- Theallys Mix II Churned
- Timeless 1.0

Feel free to add more models to the `modelMap` object in the code.

## Deployment

To deploy Pixio Community Lite Edition to a production environment, follow these steps:

1. Build the production-ready code: `npm run build`
2. Deploy the generated `build` folder to Vercel or your preferred hosting service.

## Contributing

Contributions are welcome! If you have any ideas, suggestions, or bug reports

## GitHub

[View Github](https://github.com/Tech-in-Schools-Inititaitive/pixio-community-lite-edition?ref=reactjsexample.com)