12 |
13 | {title}
14 |
15 |
16 |
17 |
18 |
23 |
24 | {children}
25 |
29 |
30 | )
31 |
32 | export default Layout
33 |
--------------------------------------------------------------------------------
/components/List.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import ListItem from './ListItem'
3 | import { User } from '../interfaces'
4 |
5 | type Props = {
6 | items: User[]
7 | }
8 |
9 | const List = ({ items }: Props) => (
10 | -
11 | {items.map((item) => (
12 |
-
13 |
14 |
15 | ))}
16 |
11 |
14 | )
15 |
16 | export default ListDetail
17 |
--------------------------------------------------------------------------------
/components/ListItem.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Link from 'next/link'
3 |
4 | import { User } from '../interfaces'
5 |
6 | type Props = {
7 | data: User
8 | }
9 |
10 | const ListItem = ({ data }: Props) => (
11 |
12 | {data.id}:{data.name}
13 |
14 | )
15 |
16 | export default ListItem
17 |
--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
1 | .vercel
2 |
--------------------------------------------------------------------------------
/docs/.nojekyll:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Tech-in-Schools-Initiative/pixio-community-lite-edition/7e7f08e6020b28f8d0971cb1b7ec7f2b65486639/docs/.nojekyll
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | # Pixio Community Lite Edition
2 |
3 | Introducing Pixio Community Lite Edition, a cutting-edge web application designed to breathe life into your creativity. Imagine being able to transform simple textual prompts into stunning visual art. With Pixio, that imagination becomes a reality.
4 |
5 | Built on the foundation of various advanced AI models, Pixio Community Lite Edition empowers users to generate stable and visually captivating images by merely entering a prompt. Whether you're an artist looking to explore new horizons or a hobbyist seeking to express yourself in a novel way, Pixio offers a seamless experience that caters to your artistic desires.
6 |
7 | Here's how it works:
8 | 1. **Enter Your Prompt**: Start with a thought, an idea, or even a mood. Type it into Pixio, and watch as the platform interprets your words.
9 | 2. **Select Your Model**: Choose from a range of AI models, each with its unique style and capability. From abstract to realistic, Pixio has it all.
10 | 3. **Generate and Admire**: With a click of a button, your prompt becomes a visual masterpiece. It's art at the speed of thought.
11 | 4. **Share and Connect**: Want to showcase your creation? Pixio allows you to send your generated images directly to a Discord channel, bridging creativity and community.
12 |
13 | Pixio Community Lite Edition is more than just a tool; it's a community of creators, innovators, and dreamers. It's where words meet art, and imagination meets reality. Join us today, and take the first step on a journey filled with endless creative possibilities.
14 |
15 |
16 | # New UI coming soon!
17 |
18 | 
19 |
20 | ## Technologies Used
21 |
22 | - React: A JavaScript library for building user interfaces.
23 | - Axios: A popular library for making HTTP requests.
24 | - react-image-lightbox: A React component for displaying images in a lightbox.
25 | - Material-UI: A popular React UI framework that provides pre-built components.
26 | - discord.js: A powerful JavaScript library for interacting with the Discord API.
27 | - Prodia: An AI model API for image generation.
28 | - OpenAI: A leading provider of AI models and APIs.
29 | - Upstash: A serverless Redis database for caching and data storage.
30 | - Vercel: A cloud platform for deploying and hosting web applications.
31 | - Next.js: A React framework for building server-rendered and statically exported applications.
32 | - Tailwind CSS: A utility-first CSS framework for building responsive designs.
33 |
34 | ## Demo
35 |
36 | To see a live demo of Pixio Community Lite Edition, you can visit the following link: [Demo](https://pixio-community-lite.vercel.app/)
37 |
38 | ## Getting Started
39 |
40 | To get a local copy of Pixio Community Lite Edition up and running, follow these steps:
41 |
42 | 1. Clone the repository
43 | 2. Navigate to the project directory
44 | 3. Install the dependencies: `npm install`
45 | 4. Start the development server: `npm start`
46 | 5. Open your web browser and visit: `http://localhost:3000`
47 |
48 | ## Usage
49 |
50 | 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,
51 |
52 |
53 | 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
54 |
55 | 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
56 |
57 | cfg is 7
58 | Karras sampler
59 | steps 13
60 |
61 | 1. Enter a prompt in the "Prompt" input field.
62 | 2. Enter a negative prompt in the "Negative Prompt" input field.
63 | 3. Select one or more AI models from the available options.
64 | 4. Click the "Generate Image" button to generate images based on the selected models.
65 | 5. Optionally, click on generated images to open them in a lightbox.
66 | 6. Select the images you want to send to Discord by checking the corresponding checkboxes.
67 | 7. Click the "Send to Gallery" button to send the selected images to Discord.
68 |
69 | ## Prompt Moderation
70 |
71 | 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.
72 |
73 | ## Models
74 |
75 | Pixio Community Lite Edition supports the following AI models for image generation:
76 |
77 | - Analog Diffusion v1.0
78 | - Anything v3.0
79 | - Anything v4.5
80 | - Anything V5
81 | - Orange Mix AOM3A3
82 | - Deliberate v2
83 | - Dreamlike Diffusion 1.0
84 | - Dreamlike Diffusion 2.0
85 | - Dreamshaper 5 BakedVae
86 | - Dreamshaper 6 BakedVae
87 | - Elddreths Vivid Mix
88 | - Lyriel v15
89 | - Meinamix MeinaV9
90 | - Openjourney V4
91 | - Portrait+ 1.0
92 | - Realistic Vision V2.0
93 | - Rev Animated v122
94 | - Riffusion Model v1
95 | - SDV1 4
96 | - Pruned Emaonly v1-5
97 | - Shonins Beautiful v10
98 | - Theallys Mix II Churned
99 | - Timeless 1.0
100 |
101 | Feel free to add more models to the `modelMap` object in the code.
102 |
103 | ## Deployment
104 |
105 | To deploy Pixio Community Lite Edition to a production environment, follow these steps:
106 |
107 | 1. Build the production-ready code: `npm run build`
108 | 2. Deploy the generated `build` folder to Vercel or your preferred hosting service.
109 |
110 | ## Contributing
111 |
112 | Contributions are welcome! If you have any ideas, suggestions, or bug reports
113 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Detail for {user.name}
12 |ID: {user.id}
13 |About
7 |This is the about page
8 |9 | Go home 10 |
11 |
15 |
17 | );
18 | }
19 |
20 | function ImageCard({ url, text, onClick }) {
21 | const [isLoading, setIsLoading] = useState(true);
22 |
23 | const limitText = (text, maxLength = 50) => {
24 | return text.length > maxLength ? text.slice(0, maxLength) + '...' : text;
25 | };
26 |
27 | return (
28 | Pixio Gallery
16 |
42 | {isLoading ? (
43 | 
setIsLoading(false)}
50 | style={{
51 | borderRadius: '10%',
52 | width: '100%',
53 | height: '100%',
54 | objectFit: 'cover',
55 | objectPosition: 'center',
56 | display: isLoading ? 'none' : 'block',
57 | }}
58 | />
59 |
60 | );
61 | }
62 |
63 | // Create a PageNumber component
64 | function PageNumber({ currentPage }) {
65 | return (
66 |
81 | );
82 | }
83 | // Update the Pagination component
84 | function Pagination({ currentPage, onPageChange, disablePrev, disableNext }) {
85 | const isMobile = useMediaQuery('(max-width:600px)'); // Detects mobile screen
86 |
87 | const handleClick = () => {
88 | window.location.href = "/";
89 | };
90 |
91 | // Adjusts flex direction based on the screen size
92 | const buttonContainerStyle = isMobile ?
93 | { marginBottom: '10px', display: 'flex', flexWrap: 'wrap' as 'wrap', justifyContent: 'space-around', width: '100%' } :
94 | { marginBottom: '10px', display: 'flex', justifyContent: 'space-between', width: '96%' };
95 |
96 | return (
97 |
98 |
99 |
100 |
103 | );
104 | }
105 |
106 | export default function Gallery() {
107 | const isMobile = useMediaQuery('(max-width:600px)');
108 | const [pages, setPages] = useState<{ [index: number]: { url: string; text: string }[] }>({});
109 | const [isLoading, setIsLoading] = useState(true);
110 | const [photoIndex, setPhotoIndex] = useState(0);
111 | const [isOpen, setIsOpen] = useState(false);
112 | const [page, setPage] = useState(1);
113 |
114 | const fetchImages = useCallback(async () => {
115 | setIsLoading(true);
116 | const response = await axios.get(`/api/discord-images?page=${page}`);
117 | setPages(prevPages => ({ ...prevPages, [page]: response.data }));
118 | setIsLoading(false);
119 | }, [page]);
120 |
121 | useEffect(() => {
122 | fetchImages();
123 | }, [fetchImages, page]);
124 |
125 | const currentPageImages = pages[page] || [];
126 |
127 | return (
128 |
129 | setIsOpen(false)}
160 | onMovePrevRequest={() =>
161 | setPhotoIndex((photoIndex + currentPageImages.length - 1) % currentPageImages.length)
162 | }
163 | onMoveNextRequest={() =>
164 | setPhotoIndex((photoIndex + 1) % currentPageImages.length)
165 | }
166 | toolbarButtons={[
167 | saveAs(currentPageImages[photoIndex].url, "downloadedImage.jpg")}
169 | aria-label="Download image"
170 | color="primary"
171 | >
172 |
174 | ]}
175 | />
176 | )}
177 |
178 | );
179 | }
--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
1 | require('dotenv').config()
2 | import { FaSun, FaMoon, FaGithub, FaQuestionCircle, FaLink, FaLifeRing, FaTwitter } from 'react-icons/fa';
3 | import { useState, useEffect } from 'react';
4 | import axios from 'axios';
5 | import Lightbox from 'react-image-lightbox';
6 | import 'react-image-lightbox/style.css';
7 | import { CircularProgress, Button } from '@material-ui/core';
8 | import Autocomplete from 'react-autocomplete';
9 | import Select from 'react-select';
10 | import { components } from 'react-select';
11 | import React, { useRef } from 'react';
12 |
13 |
14 | const modelDetails = {
15 | 'Absolute Reality 1.6': { label: 'Absolute Reality 1.6', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/0375afda-d837-4cf9-a0f1-958810ab300d/width=1120/26072207-5775662-(masterpiece),%20(extremely%20intricate_1.3),,%20(realistic),%20portrait%20of%20a%20girl,%20the%20most%20beautiful%20in%20the%20world,%20(medieval%20armor),%20m.jpeg', is18Plus: false, description: 'Great for humans and animals and fantasy' },
16 | 'Absolute Reality 1.8': { label: 'Absolute Reality 1.8', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/0375afda-d837-4cf9-a0f1-958810ab300d/width=1120/26072207-5775662-(masterpiece),%20(extremely%20intricate_1.3),,%20(realistic),%20portrait%20of%20a%20girl,%20the%20most%20beautiful%20in%20the%20world,%20(medieval%20armor),%20m.jpeg', is18Plus: false, description: 'Amazing at high detail images' },
17 | 'Analog Diffusion v1.0': { label: 'Analog Diffusion v1.0', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/540d46ed-6dd6-402e-4b9f-a2b4bc82d800/width=450/out2-03.jpeg', is18Plus: false, description: 'Almost indistinguishable from real photographs.' },
18 | 'Anything v5': { label: 'Anything v5', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/2bf8c914-7bac-4645-b5e9-9c17b8889a1d/width=700/00000-3014210268.jpeg', is18Plus: true, description: 'Really great for Anime and art.' },
19 | 'Anything v3.0': { label: 'Anything v3.0', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/c38dc610-697c-4df3-9235-1b8ec89885bd/width=450/10791-number-seed.jpeg', is18Plus: true, description: 'General Art and Digital art.' },
20 | 'Anything v4.5': { label: 'Anything v4.5', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/e4deb0f1-035f-41b8-4ded-a7049096be00/width=450/384040.jpeg', is18Plus: true, description: 'Fantasy anime and comic style.' },
21 | 'Deliberate v2': { label: 'Deliberate v2', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/40943b9c-ede2-48c0-77d7-b48fee661d00/width=768/150224.jpeg', is18Plus: false, description: 'Great results detailed prompts' },
22 | 'Dreamshaper 7': { label: 'Dreamshaper 7', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/a78a4bd3-b662-4587-893b-207a3abf9ec9/width=450/01576-132340236-8k%20portrait%20of%20beautiful%20cyborg%20with%20brown%20hair,%20intricate,%20elegant,%20highly%20detailed,%20majestic,%20digital%20photography,%20art%20by%20artg.jpeg', is18Plus: false, description: 'Amazing for artistic or creative prompting.' },
23 | 'Dreamlike Diffusion 1.0': { label: 'Dreamlike Diffusion 1.0', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/b784f763-c457-499b-83d5-3814bea2af00/width=1024/1.jpg-01.jpeg', is18Plus: false, description: 'Good colors and style.' },
24 | 'Dreamlike Diffusion 2.0': { label: 'Dreamlike Diffusion 2.0', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/8f00b26d-3deb-48d0-6c42-aac525a70800/width=1024/2.jpg-00.jpeg', is18Plus: false, description: 'Good colors and style.' },
25 | 'Dreamshaper 8': { label: 'Dreamshaper 8', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/dd9b038c-bd15-43ab-86ab-66e145ad7ff2/width=450/26072158-132340247-8k%20portrait%20of%20beautiful%20cyborg%20with%20brown%20hair,%20intricate,%20elegant,%20highly%20detailed,%20majestic,%20digital%20photography,%20art%20by%20artg_ed.jpeg', is18Plus: true, description: 'Dreamshaper series trained on SD XL' },
26 | 'Dreamshaper 6': { label: 'Dreamshaper 6', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/dc17400a-8fe6-44f1-a874-077112735f14/width=1536/xl_upscaled_00793_.jpeg', is18Plus: false, description: 'Fantastic at creative animals and wildlife.' },
27 | 'Eimis Anime': { label: 'Eimis Anime', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/2ff70747-90cf-4ffb-a548-7139f3487390/width=450/02582-1548498048-0000.jpeg', is18Plus: false, description: 'Amazing new age anime model.' },
28 | 'Elddreths Vivid Mix': { label: 'Elddreths Vivid Mix', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/7324d161-457e-4d54-0f74-11a390410700/width=450/13402-401903071-award%20winning%20waist%20up%20photo%20of%20a%20rugged%20dark%20science%20fiction%20space%20marine,%20wearing%20scratched%20and%20dented%20space%20marine%20gear,%20midd.jpeg', is18Plus: false, description: 'description coming soon.' },
29 | 'Lyriel v16': { label: 'Lyriel v16', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/c028d3fe-669c-44c0-9eac-b9d67f729492/width=450/00014-1261263585.jpeg', is18Plus: false, description: 'Description coming soon' },
30 | 'Meinamix MeinaV9': { label: 'Meinamix MeinaV9', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/406fed25-61de-491e-a30e-77f9efe0321e/width=450/00050.jpeg', is18Plus: false, description: 'Description coming soon' },
31 | 'meinamix meinaV11': { label: 'meinamix meinaV11', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/d0c38bc9-bc80-458a-93f6-550cac33b7ab/width=450/00001.jpeg', is18Plus: false, description: 'Description coming soon' },
32 | 'mechamix V1': { label: 'mechamix V1', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/82ad9f25-41e1-4021-8beb-f2020282e805/width=450/00140-2799398995.jpeg', is18Plus: false, description: 'Description coming soon' },
33 | 'Openjourney V4': { label: 'Openjourney V4', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/3cd864b8-d684-43b6-1402-cae9ee2e1200/width=512/301518.jpeg', is18Plus: false, description: 'Description coming soon' },
34 | 'Orange Mix': { label: 'Orange Mix', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/8e43c79f-1a34-46a5-0708-c031a8ede200/width=450/175095.jpeg', is18Plus: false, description: 'Description coming soon' },
35 | 'portraitplus V1.0': { label: 'portraitplus V1.0', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/574ec1e7-d7ab-4d0c-3f6e-da02d3145200/width=450/03.jpeg', is18Plus: false, description: 'Description coming soon' },
36 | 'Realistic Vision v1.4': { label: 'Realistic Vision v1.4', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/8e8f5d72-27e9-4096-bbaf-9ce268a80c00/width=450/00153-389638894.0.jpeg', is18Plus: false, description: 'Description coming soon' },
37 | 'Realistic Vision V4.0': { label: 'Realistic Vision V4.0', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/81b987ea-f450-45c1-8d17-40c0bf55b60c/width=1024/00000-3839617620.jpeg', is18Plus: false, description: 'Description coming soon' },
38 | 'Realistic Vision V5.0': { label: 'Realistic Vision V5.0', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/624cc2f7-e78f-44ac-9b35-9db11246da35/width=640/00000-3379275068.jpeg', is18Plus: false, description: 'Description coming soon' },
39 | 'redshift diffusion V10': { label: 'redshift diffusion V10', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/1a9410d9-1a04-457d-1966-e5ec08bbaf00/width=450/peopl-01.jpeg', is18Plus: false, description: 'Description coming soon' },
40 | 'Rev Animated v122': { label: 'Rev Animated v122', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/13303d08-1b18-4b89-728f-82aa3b4aaa00/width=450/00009-735323561.jpeg', is18Plus: false, description: 'Description coming soon' },
41 | 'SD 1.4': { label: 'SD 1.4', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/39e05a22-6bc5-4201-e96e-307b937c1600/width=450/peopl-06.jpeg', is18Plus: false, description: 'Description coming soon' },
42 | 'SD 1.5': { label: 'SD 1.5', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/1c1d4f13-21b0-4068-acd0-51a3ec1c18bc/width=450/26072218-2067885436-(anime%20coloring,%20anime%20screencap,%20ghibli,%20mappa,%20anime%20style),%201girl,%20hatsune%20miku,%20white%20gown,%20angel,%20angel%20wings,%20golden%20halo,.jpeg', is18Plus: false, description: 'Description coming soon' },
43 | 'Shonins Beautiful v10': { label: 'Shonins Beautiful v10', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/3184b8c0-1a01-4b33-8599-cfe09bfc49ab/width=1536/00028-2059916058.jpeg', is18Plus: false, description: 'Description coming soon' },
44 | 'Theallys Mix II Churned': { label: 'Theallys Mix II Churned', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/69abd7aa-45a8-4e84-a0dd-63e2094c93a1/width=450/149471-943806964-30-DPM++%202M%20Karras-1408-serenity_v1.jpeg', is18Plus: false, description: 'Description coming soon' },
45 | 'Timeless 1.0': { label: 'Timeless 1.0', image: 'https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/69abd7aa-45a8-4e84-a0dd-63e2094c93a1/width=450/149471-943806964-30-DPM++%202M%20Karras-1408-serenity_v1.jpeg', is18Plus: false, description: 'Description coming soon' },
46 | };
47 |
48 |
49 |
50 | const allOption = { value: 'all', label: 'Select All' };
51 | const modelOptions = Object.keys(modelDetails).map((key) => ({
52 | value: key,
53 | label: modelDetails[key].label,
54 | image: modelDetails[key].image,
55 | is18Plus: modelDetails[key].is18Plus,
56 | description: modelDetails[key].description,
57 | }));
58 |
59 | const prohibitedWords = ['"none"'];
60 |
61 | // Define your suggestions for autocomplete here
62 | const suggestions = [
63 | // Add your suggestions for autocomplete
64 | ];
65 |
66 | const getSuggestions = (value) => {
67 | const inputValue = value.trim().toLowerCase();
68 | const inputLength = inputValue.length;
69 | return inputLength === 0 ? [] : suggestions.filter(suggestion =>
70 | suggestion.toLowerCase().slice(0, inputLength) === inputValue
71 | );
72 | };
73 | const ProdiaKeyModal = ({ setProdiaKey, setShowProdiaKeyModal }) => {
74 | const [key, setKey] = useState('');
75 |
76 | const handleInputChange = (e) => {
77 | setKey(e.target.value);
78 | };
79 |
80 | const handleSubmit = (e) => {
81 | e.preventDefault();
82 | localStorage.setItem('NEXT_PUBLIC_PRODIA_KEY', key);
83 | setProdiaKey(key);
84 | setShowProdiaKeyModal(false);
85 | };
86 |
87 |
88 | return (
89 |
142 |
143 | {isLoading ? (
144 | {setIsOpen(true); setPhotoIndex(index);}} />
149 | ))}
150 |
151 |
152 | No images for this page.
147 | ) : currentPageImages.map((image, index) => (
148 |
104 |
153 |
154 | );
155 | };
156 |
157 |
158 |
159 | export default function HomePage() {
160 | const [prodiaKey, setProdiaKey] = useState('');
161 | const [darkMode, setDarkMode] = useState(false);
162 | // Handle dark mode changes
163 | useEffect(() => {
164 | if (darkMode) {
165 | document.documentElement.classList.add('dark');
166 | } else {
167 | document.documentElement.classList.remove('dark');
168 | }
169 | }, [darkMode]);
170 |
171 | const [showProdiaKeyModal, setShowProdiaKeyModal] = useState(true); // Add this line
172 | useEffect(() => {
173 | const storedKey = localStorage.getItem('NEXT_PUBLIC_PRODIA_KEY');
174 | console.log('Stored key:', storedKey); // Add this line
175 | if (storedKey) {
176 | setProdiaKey(storedKey);
177 | setShowProdiaKeyModal(false);
178 | } else {
179 | const envKey = process.env.NEXT_PUBLIC_PRODIA_KEY;
180 | console.log('Env key:', envKey); // And this line
181 | if (envKey) {
182 | setProdiaKey(envKey);
183 | setShowProdiaKeyModal(false);
184 | }
185 | }
186 | }, []);
187 |
188 | const [prompt, setPrompt] = useState('');
189 | const [previewVisible, setPreviewVisible] = useState(null);
190 | const [seed, setSeed] = useState(-1); // or any default value for seed
191 | const [steps, setSteps] = useState(30); // or any default value for steps
192 | const [cfg_scale, setCfg_scale] = useState(20); // or any default value for cfg_scale
193 | const [upscale, setUpscale] = useState(false); // or any default value for upscale
194 | const [negativePrompt, setNegativePrompt] = useState('');
195 | const [selectedModels, setSelectedModels] = useState([]);
196 | const [aspect_ratio, setaspect_ratio] = useState('');
197 | const [sampler, setSampler] = useState('');
198 | const [imageUrls, setImageUrls] = useState([]);
199 | const [loading, setLoading] = useState(false);
200 | const [error, setError] = useState(null);
201 | const [lightboxOpen, setLightboxOpen] = useState(false);
202 | const [lightboxIndex, setLightboxIndex] = useState(0);
203 | const [rawText, setRawText] = useState('');
204 | const [buttonText, setButtonText] = useState('Generate Images');
205 | const toggleModelSelection = (model) => {
206 | if (selectedModels.includes(model)) {
207 | setSelectedModels(selectedModels.filter(selectedModel => selectedModel !== model));
208 | } else {
209 | setSelectedModels([...selectedModels, model]);
210 | }
211 | };
212 |
213 | // const modelImages = {
214 | // 'Absolute Reality 1.6': 'https://images.prodia.xyz/9c602f83-643c-4283-a1f3-eae7f5507fa2.png',
215 |
216 | // };
217 |
218 |
219 |
220 | const modelMap = {
221 | 'Absolute Reality 1.6': 'absolutereality_V16.safetensors [37db0fc3]',
222 | 'Absolute Reality 1.8': 'absolutereality_v181.safetensors [3d9d4d2b]',
223 | 'Analog Diffusion v1.0': 'analog-diffusion-1.0.ckpt [9ca13f02]',
224 | 'Anything v5': 'anythingV5_PrtRE.safetensors [893e49b9]',
225 | 'Anything v3.0': 'anythingv3_0-pruned.ckpt [2700c435]',
226 | 'Anything v4.5': 'anything-v4.5-pruned.ckpt [65745d25]',
227 | 'Deliberate v2': 'deliberate_v2.safetensors [10ec4b29]',
228 | 'Dreamshaper 7': 'dreamshaper_7.safetensors [5cf5ae06]',
229 | 'Dreamlike Diffusion 1.0': 'dreamlike-diffusion-1.0.safetensors [5c9fd6e0]',
230 | 'Dreamlike Diffusion 2.0': 'dreamlike-diffusion-2.0.safetensors [fdcf65e7]',
231 | 'Dreamshaper 8': 'dreamshaper_8.safetensors [9d40847d]',
232 | 'Dreamshaper 6 BakedVae': 'dreamshaper_6BakedVae.safetensors [114c8abb]',
233 | 'Eimis Anime Diffusion': 'EimisAnimeDiffusion_V1.ckpt [4f828a15]',
234 | 'Elddreths Vivid Mix': 'elldreths-vivid-mix.safetensors [342d9d26]',
235 | 'Lyriel v16': 'lyriel_v16.safetensors [68fceea2]',
236 | 'Meinamix MeinaV9': 'meinamix_meinaV9.safetensors [2ec66ab0]',
237 | 'meinamix meinaV11': 'meinamix_meinaV11.safetensors [b56ce717]',
238 | 'mechamix V1': 'mechamix_v10.safetensors [ee685731]',
239 | 'Openjourney V4': 'openjourney_V4.ckpt [ca2f377f]',
240 | 'Orange Mix AOM3A3': 'AOM3A3_orangemixs.safetensors [9600da17]',
241 | 'portraitplus V1.0': 'portraitplus_V1.0.safetensors [1400e684]',
242 | 'Realistic Vision v1.4': 'Realistic_Vision_V1.4-pruned-fp16.safetensors [8d21810b]',
243 | 'Realistic Vision V4.0': 'Realistic_Vision_V4.0.safetensors [29a7afaa]',
244 | 'Realistic Vision V5.0': 'Realistic_Vision_V5.0.safetensors [614d1063]',
245 | 'redshift diffusion V10': 'redshift_diffusion-V10.safetensors [1400e684]',
246 | 'Rev Animated v122': 'revAnimated_v122.safetensors [3f4fefd9]',
247 | 'SD 1.4': 'sdv1_4.ckpt [7460a6fa]',
248 | 'SD 1.5': 'v1-5-pruned-emaonly.ckpt [81761151]',
249 | 'Shonins Beautiful v10': 'shoninsBeautiful_v10.safetensors [25d8c546]',
250 | 'Theallys Mix II Churned': 'theallys-mix-ii-churned.safetensors [5d9225a4]',
251 | 'Timeless 1.0': 'timeless-1.0.ckpt [7c4971d4]',
252 | };
253 |
254 | const models = Object.keys(modelMap);
255 | const modelOptions = Object.keys(modelDetails).map((key) => ({
256 | value: key,
257 | label: modelDetails[key].label,
258 | image: modelDetails[key].image,
259 | is18Plus: modelDetails[key].is18Plus,
260 | description: modelDetails[key].description,
261 | }));
262 |
263 |
264 |
265 | const toggleSelectAllImages = () => {
266 | const areAllSelected = imageUrls.every((image) => image.selected);
267 | const updatedImageUrls = imageUrls.map((image) => ({ ...image, selected: !areAllSelected }));
268 | setImageUrls(updatedImageUrls);
269 | };
270 |
271 | // Add this to your component to handle image clicks
272 | const handleImageClick = (index) => {
273 | setLightboxIndex(index);
274 | setLightboxOpen(true);
275 | };
276 |
277 | const handleGenerateImage = async () => {
278 | setButtonText('Loading...');
279 | setLoading(true);
280 | setError(null);
281 |
282 | // Perform prompt moderation
283 | const isPromptSafe = performPromptModeration(prompt);
284 | const isNegativePromptSafe = performPromptModeration(negativePrompt);
285 | if (!isPromptSafe || !isNegativePromptSafe) {
286 | setError('The prompt or negative prompt contains inappropriate content. Please revise your input.');
287 | setLoading(false);
288 | setButtonText('Generate Image');
289 | return;
290 | }
291 |
292 | try {
293 | const newImageUrls = [];
294 | for (const model of selectedModels) {
295 | const response = await axios.post('/api/generateImage', {
296 | prompt,
297 | negativePrompt,
298 | model: modelMap[model],
299 | upscale: upscale,
300 | aspect_ratio, // add this line
301 | sampler, // and this line
302 | prodiaKey,
303 | seed:seed,
304 | cfg_scale:cfg_scale,
305 | });
306 |
307 | const imageUrl = response.data.imageUrl;
308 | newImageUrls.push({ imageUrl, selected: false });
309 | }
310 | setImageUrls(newImageUrls);
311 | } catch (error) {
312 | // Check if error is a rate limit error
313 | if (error.response && error.response.status === 429) {
314 | setError('You have exceeded the rate limit. Please try again later.');
315 | } else {
316 | setError('There was a problem generating the image. Please try again.');
317 | }
318 | } finally {
319 | setLoading(false);
320 | setButtonText('Generate Image');
321 | }
322 | };
323 |
324 | // Perform prompt moderation
325 | const performPromptModeration = (text) => {
326 | const words = text.toLowerCase().split(' ');
327 |
328 | for (const word of words) {
329 | if (prohibitedWords.includes(word)) {
330 | return false; // Prompt contains prohibited word
331 | }
332 | }
333 |
334 | return true; // Prompt is safe
335 | };
336 | const downloadImage = (url, filename) => {
337 | fetch(url)
338 | .then((response) => response.blob())
339 | .then((blob) => {
340 | const url = window.URL.createObjectURL(blob);
341 | const a = document.createElement('a');
342 | a.href = url;
343 | a.download = filename || 'image.png';
344 | a.click();
345 | window.URL.revokeObjectURL(url);
346 | });
347 | };
348 |
349 | const handleSendToDiscord = async () => {
350 | const selectedImageUrls = imageUrls.filter((image) => image.selected).map((image) => image.imageUrl);
351 | if (selectedImageUrls.length === 0) {
352 | return;
353 | }
354 | try {
355 | for (const imageUrl of selectedImageUrls) {
356 | await axios.post('/api/postToDiscord', { message: prompt, imageUrl });
357 | }
358 | } catch (error) {
359 | setError('There was a problem sending the image to Discord. Please try again.');
360 | }
361 | };
362 |
363 | const handleOpenLightbox = (index) => {
364 | setLightboxOpen(true);
365 | setLightboxIndex(index);
366 | };
367 | const [selectAll, setSelectAll] = useState(false);
368 |
369 | const selectAllModels = () => {
370 | setSelectedModels(models);
371 | };
372 |
373 | const handleSelectAllClick = () => {
374 | if (selectAll) {
375 | setSelectedModels([]); // Deselect all
376 | } else {
377 | setSelectedModels(modelOptions.map((option) => option.value)); // Select all
378 | }
379 | setSelectAll(!selectAll);
380 | };
381 |
382 | const CustomOption = (props) => {
383 | return (
384 |
386 | 
387 |
395 |
388 |
394 |
389 | {props.data.is18Plus &&
392 | 18+
}
390 | {props.data.label}
391 | {props.data.description}
393 |
452 | {children}
453 |
454 | );
455 | const selectRef = useRef(null);
456 |
457 | const CustomMultiValue = (props) => (
458 |
459 |
460 |
463 | );
464 |
465 | const [searchValue, setSearchValue] = useState(''); // define the state for search value
466 |
467 | const handleSelect = (value) => {
468 | // find the selected model by its label
469 | const selectedModel = modelOptions.find((option) => option.label === value);
470 |
471 | if (selectedModel) {
472 | // add the selected model to the selectedModels array
473 | setSelectedModels([...selectedModels, selectedModel.value]);
474 | }
475 |
476 | setSearchValue(''); // clear the search value
477 | };
478 | const handleToggleImageSelection = (index) => {
479 | const updatedImageUrls = [...imageUrls];
480 | updatedImageUrls[index].selected = !updatedImageUrls[index].selected;
481 | setImageUrls(updatedImageUrls);
482 | if (lightboxOpen && updatedImageUrls[index].selected) {
483 | setLightboxOpen(false);
484 | }
485 | };
486 |
487 |
488 | return (
489 | {props.children}
461 | ×
462 |
490 | {/* Dark mode toggle button */}
491 | {showProdiaKeyModal &&
494 | {/* Icons */}
495 |
496 |
516 |
517 |
518 | {/* Left Side (UI/UX Inputs) */}
519 |
520 | 
521 | {/*
Image Generation
*/} 522 | {error &&{error}
} 523 | 524 |
525 |
526 | {/* Prompt Input */}
527 |
528 |
529 |
532 |