diff --git a/ui/frontend/build_src/index.html b/ui/frontend/build_src/index.html index 8b1680f5..39ca7ab4 100644 --- a/ui/frontend/build_src/index.html +++ b/ui/frontend/build_src/index.html @@ -1,1267 +1,1529 @@ - - - - Stable Diffusion UI - - - -
- + + + + Stable Diffusion UI + + + +
+ - + - - - - + + + + + + + + + */} -
- -
+ + +
- { init_image && - - } - + {init_image && ( + + )} +
diff --git a/ui/frontend/build_src/src/components/creationPanel/makeButton/index.tsx b/ui/frontend/build_src/src/components/creationPanel/makeButton/index.tsx index 6a74433b..6e434957 100644 --- a/ui/frontend/build_src/src/components/creationPanel/makeButton/index.tsx +++ b/ui/frontend/build_src/src/components/creationPanel/makeButton/index.tsx @@ -1,19 +1,17 @@ -import React, {useEffect, useState}from "react"; +import React, { useEffect, useState } from "react"; import { useImageCreate } from "../../../store/imageCreateStore"; -import { useImageQueue } from "../../../store/imageQueueStore"; -import {v4 as uuidv4} from 'uuid'; +import { useImageQueue } from "../../../store/imageQueueStore"; +import { v4 as uuidv4 } from "uuid"; import { useRandomSeed } from "../../../utils"; export default function MakeButton() { - const parallelCount = useImageCreate((state) => state.parallelCount); const builtRequest = useImageCreate((state) => state.builtRequest); const addNewImage = useImageQueue((state) => state.addNewImage); - - const makeImages = () => { + const makeImages = () => { // the request that we have built const req = builtRequest(); // the actual number of request we will make @@ -23,49 +21,43 @@ export default function MakeButton() { // if making fewer images than the parallel count // then it is only 1 request - if( parallelCount > num_outputs ) { + if (parallelCount > num_outputs) { requests.push(num_outputs); - } - - else { + } else { // while we have at least 1 image to make while (num_outputs >= 1) { // subtract the parallel count from the number of images to make num_outputs -= parallelCount; - + // if we are still 0 or greater we can make the full parallel count - if(num_outputs <= 0) { - requests.push(parallelCount) + if (num_outputs <= 0) { + requests.push(parallelCount); } // otherwise we can only make the remaining images else { - requests.push(Math.abs(num_outputs)) + requests.push(Math.abs(num_outputs)); } } } // make the requests requests.forEach((num, index) => { - // get the seed we want to use let seed = req.seed; - if(index !== 0) { + if (index !== 0) { // we want to use a random seed for subsequent requests seed = useRandomSeed(); } // add the request to the queue addNewImage(uuidv4(), { - ...req, + ...req, // updated the number of images to make num_outputs: num, // update the seed - seed: seed - }) + seed: seed, + }); }); - }; - - return ( - - ); -} \ No newline at end of file + + return ; +} diff --git a/ui/frontend/build_src/src/components/creationPanel/modierTag/index.tsx b/ui/frontend/build_src/src/components/creationPanel/modierTag/index.tsx index 1737228d..df682add 100644 --- a/ui/frontend/build_src/src/components/creationPanel/modierTag/index.tsx +++ b/ui/frontend/build_src/src/components/creationPanel/modierTag/index.tsx @@ -1,17 +1,16 @@ import React from "react"; import { useImageCreate } from "../../../store/imageCreateStore"; - type ModifierTagProps = { name: string; -} +}; -export default function ModifierTag({name}: ModifierTagProps) { - - const hasTag = useImageCreate((state) => state.hasTag(name)) ? "selected" : ""; +export default function ModifierTag({ name }: ModifierTagProps) { + const hasTag = useImageCreate((state) => state.hasTag(name)) + ? "selected" + : ""; const toggleTag = useImageCreate((state) => state.toggleTag); - const _toggleTag = () => { toggleTag(name); }; @@ -21,4 +20,4 @@ export default function ModifierTag({name}: ModifierTagProps) {

{name}

); -} \ No newline at end of file +} diff --git a/ui/frontend/build_src/src/components/displayPanel/completedImages/index.tsx b/ui/frontend/build_src/src/components/displayPanel/completedImages/index.tsx index 040f0a27..a23522ff 100644 --- a/ui/frontend/build_src/src/components/displayPanel/completedImages/index.tsx +++ b/ui/frontend/build_src/src/components/displayPanel/completedImages/index.tsx @@ -15,4 +15,4 @@ export const CompletedImages = () => { // // // ); -} \ No newline at end of file +}; diff --git a/ui/frontend/build_src/src/components/displayPanel/currentImage/index.tsx b/ui/frontend/build_src/src/components/displayPanel/currentImage/index.tsx index e0cd4aab..d081742b 100644 --- a/ui/frontend/build_src/src/components/displayPanel/currentImage/index.tsx +++ b/ui/frontend/build_src/src/components/displayPanel/currentImage/index.tsx @@ -8,13 +8,12 @@ import GeneratedImage from "../generatedImage"; // TODO move this logic to the display panel export default function CurrentImage() { - const [imageData, setImageData] = useState(null); // @ts-ignore - const {id, options} = useImageQueue((state) => state.firstInQueue()); + const { id, options } = useImageQueue((state) => state.firstInQueue()); const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue); - + const { status, data } = useQuery( [MakeImageKey, id], () => doMakeImage(options), @@ -23,21 +22,17 @@ export default function CurrentImage() { } ); - useEffect(() => { + useEffect(() => { // query is done - if(status === 'success') { - + if (status === "success") { // check to make sure that the image was created - if(data.status === 'succeeded') { + if (data.status === "succeeded") { setImageData(data.output[0].data); removeFirstInQueue(); } } - }, [status, data, removeFirstInQueue]); - - return ( <> //
@@ -45,4 +40,4 @@ export default function CurrentImage() { // {imageData && } //
); -}; \ No newline at end of file +} diff --git a/ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx b/ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx index 923fcf53..94131f87 100644 --- a/ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx +++ b/ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx @@ -1,43 +1,42 @@ -import React, {useCallback} from "react"; - +import React, { useCallback } from "react"; import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore"; type GeneretaedImageProps = { imageData: string; metadata: ImageRequest; -} - - -export default function GeneratedImage({ imageData, metadata}: GeneretaedImageProps) { +}; +export default function GeneratedImage({ + imageData, + metadata, +}: GeneretaedImageProps) { const setRequestOption = useImageCreate((state) => state.setRequestOptions); - - const createFileName = () => { - const { - prompt, - seed, - num_inference_steps, - guidance_scale, - use_face_correction, + const createFileName = () => { + const { + prompt, + seed, + num_inference_steps, + guidance_scale, + use_face_correction, use_upscale, width, height, } = metadata; //Most important information is the prompt - let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, '_') - underscoreName = underscoreName.substring(0, 100) + let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_"); + underscoreName = underscoreName.substring(0, 100); // name and the top level metadata let fileName = `${underscoreName}_Seed-${seed}_Steps-${num_inference_steps}_Guidance-${guidance_scale}`; // Add the face correction and upscale - if(use_face_correction) { + if (use_face_correction) { fileName += `_FaceCorrection-${use_face_correction}`; } - if(use_upscale) { + if (use_upscale) { fileName += `_Upscale-${use_upscale}`; } @@ -45,12 +44,12 @@ export default function GeneratedImage({ imageData, metadata}: GeneretaedImagePr fileName += `_${width}x${height}`; // add the file extension - fileName += `.png` + fileName += `.png`; // return fileName return fileName; - } - + }; + const _handleSave = () => { const link = document.createElement("a"); link.download = createFileName(); @@ -61,12 +60,10 @@ export default function GeneratedImage({ imageData, metadata}: GeneretaedImagePr const _handleUseAsInput = () => { console.log(" TODO : use as input"); - setRequestOption("init_image", imageData); // initImageSelector.value = null // initImagePreview.src = imgBody - // imgUseBtn.addEventListener('click', function() { // initImageSelector.value = null // initImagePreview.src = imgBody @@ -80,18 +77,14 @@ export default function GeneratedImage({ imageData, metadata}: GeneretaedImagePr // seedField.value = seed // seedField.disabled = false // }) - } + }; return (

Your image

generated - - + +
); -} \ No newline at end of file +} diff --git a/ui/frontend/build_src/src/components/displayPanel/index.tsx b/ui/frontend/build_src/src/components/displayPanel/index.tsx index ab1120b6..f727de12 100644 --- a/ui/frontend/build_src/src/components/displayPanel/index.tsx +++ b/ui/frontend/build_src/src/components/displayPanel/index.tsx @@ -1,10 +1,9 @@ -import React, {useEffect, useState} from "react"; +import React, { useEffect, useState } from "react"; import { useImageQueue } from "../../store/imageQueueStore"; -import { ImageRequest } from '../../store/imageCreateStore'; - -import { useQueryClient } from '@tanstack/react-query' +import { ImageRequest } from "../../store/imageCreateStore"; +import { useQueryClient } from "@tanstack/react-query"; import { MakeImageKey } from "../../api"; @@ -12,47 +11,50 @@ import CurrentImage from "./currentImage"; import GeneratedImage from "./generatedImage"; - type CompletedImagesType = { id: string; data: string; info: ImageRequest; -} +}; export default function DisplayPanel() { - const queryClient = useQueryClient(); - const [completedImages, setCompletedImages] = useState([]); + const [completedImages, setCompletedImages] = useState( + [] + ); const completedIds = useImageQueue((state) => state.completedImageIds); useEffect(() => { - const testReq = {} as ImageRequest; const completedQueries = completedIds.map((id) => { - const imageData = queryClient.getQueryData([MakeImageKey,id]) + const imageData = queryClient.getQueryData([MakeImageKey, id]); return imageData; }); if (completedQueries.length > 0) { - // map the completedImagesto a new array + // map the completedImagesto a new array // and then set the state - const temp = completedQueries.map((query, index ) => { - if(void 0 !== query) { - //@ts-ignore - return query.output.map((data)=>{ - // @ts-ignore - return {id: `${completedIds[index]}-${data.seed}`, data: data.data, info: {...query.request, seed:data.seed } } - }) - } - - }).flat().reverse(); + const temp = completedQueries + .map((query, index) => { + if (void 0 !== query) { + //@ts-ignore + return query.output.map((data) => { + // @ts-ignore + return { + id: `${completedIds[index]}-${data.seed}`, + data: data.data, + //@ts-ignore + info: { ...query.request, seed: data.seed }, + }; + }); + } + }) + .flat() + .reverse(); setCompletedImages(temp); - } - else { + } else { setCompletedImages([]); } - - },[setCompletedImages, queryClient, completedIds]); - + }, [setCompletedImages, queryClient, completedIds]); return (
@@ -63,16 +65,20 @@ export default function DisplayPanel() { // if(index == 0){ // return null; // } - if(void 0 !== image) { - return ; - } - else { - console.warn('image is undefined', image, index); + if (void 0 !== image) { + return ( + + ); + } else { + console.warn("image is undefined", image, index); return null; } })}
- ); -}; +} diff --git a/ui/frontend/build_src/src/components/footerDisplay/footerDisplay.css b/ui/frontend/build_src/src/components/footerDisplay/footerDisplay.css index 84bd03e1..434d7695 100644 --- a/ui/frontend/build_src/src/components/footerDisplay/footerDisplay.css +++ b/ui/frontend/build_src/src/components/footerDisplay/footerDisplay.css @@ -4,5 +4,4 @@ flex-direction: column; align-items: center; justify-content: center; - -} \ No newline at end of file +} diff --git a/ui/frontend/build_src/src/components/footerDisplay/index.tsx b/ui/frontend/build_src/src/components/footerDisplay/index.tsx index 85fa485d..6e78b3fd 100644 --- a/ui/frontend/build_src/src/components/footerDisplay/index.tsx +++ b/ui/frontend/build_src/src/components/footerDisplay/index.tsx @@ -1,18 +1,56 @@ import React from "react"; -import './footerDisplay.css'; +import "./footerDisplay.css"; export default function FooterDisplay() { return ( ); } - diff --git a/ui/frontend/build_src/src/components/headerDisplay/headerDisplay.css b/ui/frontend/build_src/src/components/headerDisplay/headerDisplay.css index 6b140142..4ca03c3d 100644 --- a/ui/frontend/build_src/src/components/headerDisplay/headerDisplay.css +++ b/ui/frontend/build_src/src/components/headerDisplay/headerDisplay.css @@ -7,4 +7,4 @@ .status-display { margin-left: 10px; -} \ No newline at end of file +} diff --git a/ui/frontend/build_src/src/components/headerDisplay/index.tsx b/ui/frontend/build_src/src/components/headerDisplay/index.tsx index 6b7a623d..91c5277d 100644 --- a/ui/frontend/build_src/src/components/headerDisplay/index.tsx +++ b/ui/frontend/build_src/src/components/headerDisplay/index.tsx @@ -2,7 +2,7 @@ import React from "react"; import StatusDisplay from "./statusDisplay"; -import './headerDisplay.css'; +import "./headerDisplay.css"; export default function HeaderDisplay() { return ( @@ -11,4 +11,4 @@ export default function HeaderDisplay() { ); -}; \ No newline at end of file +} diff --git a/ui/frontend/build_src/src/components/headerDisplay/statusDisplay/index.tsx b/ui/frontend/build_src/src/components/headerDisplay/statusDisplay/index.tsx index f290fa1a..1d0c61e3 100644 --- a/ui/frontend/build_src/src/components/headerDisplay/statusDisplay/index.tsx +++ b/ui/frontend/build_src/src/components/headerDisplay/statusDisplay/index.tsx @@ -1,45 +1,37 @@ -import React, {useEffect, useState} from 'react' -import { useQuery } from '@tanstack/react-query'; +import React, { useEffect, useState } from "react"; +import { useQuery } from "@tanstack/react-query"; -import { healthPing, HEALTH_PING_INTERVAL } from '../../../api'; +import { healthPing, HEALTH_PING_INTERVAL } from "../../../api"; -const startingMessage = 'Stable Diffusion is starting...'; -const successMessage = 'Stable Diffusion is ready to use!'; -const errorMessage = 'Stable Diffusion is not running!'; +const startingMessage = "Stable Diffusion is starting..."; +const successMessage = "Stable Diffusion is ready to use!"; +const errorMessage = "Stable Diffusion is not running!"; -import './statusDisplay.css'; - -export default function StatusDisplay({className}: {className?: string}) { +import "./statusDisplay.css"; +export default function StatusDisplay({ className }: { className?: string }) { const [statusMessage, setStatusMessage] = useState(startingMessage); - const [statusClass, setStatusClass] = useState('starting'); - + const [statusClass, setStatusClass] = useState("starting"); // but this will be moved to the status display when it is created - const {status, data} = useQuery(['health'], healthPing, {refetchInterval: HEALTH_PING_INTERVAL}); - - + const { status, data } = useQuery(["health"], healthPing, { + refetchInterval: HEALTH_PING_INTERVAL, + }); useEffect(() => { - - if (status === 'loading') { + if (status === "loading") { setStatusMessage(startingMessage); - setStatusClass('starting'); - } - else if (status === 'error') { + setStatusClass("starting"); + } else if (status === "error") { setStatusMessage(errorMessage); - setStatusClass('error'); - } - - else if (status === 'success') { - - if(data[0] === 'OK') { + setStatusClass("error"); + } else if (status === "success") { + if (data[0] === "OK") { setStatusMessage(successMessage); - setStatusClass('success'); - } - else { + setStatusClass("success"); + } else { setStatusMessage(errorMessage); - setStatusClass('error'); + setStatusClass("error"); } } }, [status, data]); @@ -47,7 +39,7 @@ export default function StatusDisplay({className}: {className?: string}) { return ( <> {/* alittle hacky but joins the class names, will probably need a better css in js solution or tailwinds*/} -

{statusMessage}

+

{statusMessage}

); -}; \ No newline at end of file +} diff --git a/ui/frontend/build_src/src/components/headerDisplay/statusDisplay/statusDisplay.css b/ui/frontend/build_src/src/components/headerDisplay/statusDisplay/statusDisplay.css index b51544ee..3b9f6360 100644 --- a/ui/frontend/build_src/src/components/headerDisplay/statusDisplay/statusDisplay.css +++ b/ui/frontend/build_src/src/components/headerDisplay/statusDisplay/statusDisplay.css @@ -1,11 +1,11 @@ .starting { - color: #f0ad4e; + color: #f0ad4e; } .error { - color: #d9534f; + color: #d9534f; } .success { - color: #5cb85c; -} \ No newline at end of file + color: #5cb85c; +} diff --git a/ui/frontend/build_src/src/index.css b/ui/frontend/build_src/src/index.css index 036d0cc0..26104a00 100644 --- a/ui/frontend/build_src/src/index.css +++ b/ui/frontend/build_src/src/index.css @@ -15,4 +15,4 @@ body { /* this are used while we still have the original app code in the index.html */ /* display: none; */ z-index: 1; -} \ No newline at end of file +} diff --git a/ui/frontend/build_src/src/main.tsx b/ui/frontend/build_src/src/main.tsx index 363219a9..5a0ba893 100644 --- a/ui/frontend/build_src/src/main.tsx +++ b/ui/frontend/build_src/src/main.tsx @@ -1,37 +1,32 @@ -import React from 'react' -import ReactDOM from 'react-dom/client' +import React from "react"; +import ReactDOM from "react-dom/client"; -import { - QueryClient, - QueryClientProvider, -} from '@tanstack/react-query'; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; +import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; -import { enableMapSet } from 'immer'; -import App from './App' -import './index.css' +import { enableMapSet } from "immer"; +import App from "./App"; +import "./index.css"; -const queryClient = new QueryClient( - { - defaultOptions: { - queries: { - refetchOnWindowFocus: false, - refetchOnReconnect : false, - refetchOnMount : false, - staleTime: Infinity, - }, +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + refetchOnWindowFocus: false, + refetchOnReconnect: false, + refetchOnMount: false, + staleTime: Infinity, }, - } -); + }, +}); enableMapSet(); // application entry point -ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( +ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - - - - + + + + -) +); diff --git a/ui/frontend/build_src/src/modifiers.json b/ui/frontend/build_src/src/modifiers.json index ca18cc07..d680709e 100644 --- a/ui/frontend/build_src/src/modifiers.json +++ b/ui/frontend/build_src/src/modifiers.json @@ -43,14 +43,7 @@ ], [ "Pen", - [ - "Chalk", - "Colored Pencil", - "Graphite", - "Ink", - "Oil Paint", - "Pastel Art" - ] + ["Chalk", "Colored Pencil", "Graphite", "Ink", "Oil Paint", "Pastel Art"] ], [ "Carving and Etching", diff --git a/ui/frontend/build_src/src/store/imageCreateStore.ts b/ui/frontend/build_src/src/store/imageCreateStore.ts index 493746e9..75bfa831 100644 --- a/ui/frontend/build_src/src/store/imageCreateStore.ts +++ b/ui/frontend/build_src/src/store/imageCreateStore.ts @@ -1,8 +1,8 @@ -import create from 'zustand'; -import produce from 'immer'; -import { devtools } from 'zustand/middleware' +import create from "zustand"; +import produce from "immer"; +import { devtools } from "zustand/middleware"; -import { useRandomSeed } from '../utils'; +import { useRandomSeed } from "../utils"; export type ImageCreationUiOptions = { advancedSettingsIsOpen: boolean; @@ -12,27 +12,57 @@ export type ImageCreationUiOptions = { isUseRandomSeed: boolean; isUseAutoSave: boolean; isSoundEnabled: boolean; -} +}; export type ImageRequest = { prompt: string; seed: number; num_outputs: number; num_inference_steps: number; - guidance_scale: number - width: 128 | 192 | 256 | 320 | 384 | 448 | 512 | 576 | 640 | 704 | 768 | 832 | 896 | 960 | 1024; - height: 128 | 192 | 256 | 320 | 384 | 448 | 512 | 576 | 640 | 704 | 768 | 832 | 896 | 960 | 1024; + guidance_scale: number; + width: + | 128 + | 192 + | 256 + | 320 + | 384 + | 448 + | 512 + | 576 + | 640 + | 704 + | 768 + | 832 + | 896 + | 960 + | 1024; + height: + | 128 + | 192 + | 256 + | 320 + | 384 + | 448 + | 512 + | 576 + | 640 + | 704 + | 768 + | 832 + | 896 + | 960 + | 1024; // allow_nsfw: boolean; turbo: boolean; use_cpu: boolean; use_full_precision: boolean; save_to_disk_path: null | string; - use_face_correction: null | 'GFPGANv1.3'; - use_upscale: null| 'RealESRGAN_x4plus' | 'RealESRGAN_x4plus_anime_6B'; + use_face_correction: null | "GFPGANv1.3"; + use_upscale: null | "RealESRGAN_x4plus" | "RealESRGAN_x4plus_anime_6B"; show_only_filtered_image: boolean; init_image: undefined | string; prompt_strength: undefined | number; - }; +}; interface ImageCreateState { parallelCount: number; @@ -45,7 +75,7 @@ interface ImageCreateState { toggleTag: (tag: string) => void; hasTag: (tag: string) => boolean; - selectedTags:() => string[] + selectedTags: () => string[]; builtRequest: () => ImageRequest; uiOptions: ImageCreationUiOptions; @@ -56,7 +86,7 @@ interface ImageCreateState { toggleUseFaceCorrection: () => void; isUsingFaceCorrection: () => boolean; toggleUseRandomSeed: () => void; - isRandomSeed: () => boolean; + isRandomSeed: () => boolean; toggleUseAutoSave: () => void; isUseAutoSave: () => boolean; toggleSoundEnabled: () => void; @@ -64,185 +94,231 @@ interface ImageCreateState { } // devtools breaks TS -// @ts-ignore -export const useImageCreate = create(devtools((set, get) => ({ - - parallelCount: 1, +export const useImageCreate = create( + // @ts-ignore + devtools((set, get) => ({ + parallelCount: 1, - requestOptions:{ - prompt: 'a photograph of an astronaut riding a horse', - seed: useRandomSeed(), - num_outputs: 1, - num_inference_steps: 50, - guidance_scale: 7.5, - width: 512, - height: 512, - prompt_strength: 0.8, - // allow_nsfw: false, - turbo: true, - use_cpu: false, - use_full_precision: true, - save_to_disk_path: 'null', - use_face_correction: null, - use_upscale: 'RealESRGAN_x4plus', - show_only_filtered_image: false, - } as ImageRequest, + requestOptions: { + prompt: "a photograph of an astronaut riding a horse", + seed: useRandomSeed(), + num_outputs: 1, + num_inference_steps: 50, + guidance_scale: 7.5, + width: 512, + height: 512, + prompt_strength: 0.8, + // allow_nsfw: false, + turbo: true, + use_cpu: false, + use_full_precision: true, + save_to_disk_path: "null", + use_face_correction: null, + use_upscale: "RealESRGAN_x4plus", + show_only_filtered_image: false, + } as ImageRequest, - tags: [] as string[], + tags: [] as string[], - setParallelCount: (count: number) => set(produce((state) => { - state.parallelCount = count; - })), + setParallelCount: (count: number) => + set( + produce((state) => { + state.parallelCount = count; + }) + ), - setRequestOptions: (key: keyof ImageRequest, value: any) => { - set( produce((state) => { - state.requestOptions[key] = value; - })) - }, + setRequestOptions: (key: keyof ImageRequest, value: any) => { + set( + produce((state) => { + state.requestOptions[key] = value; + }) + ); + }, - getValueForRequestKey: (key: keyof ImageRequest) => { - return get().requestOptions[key]; - }, - - toggleTag: (tag: string) => { - set( produce((state) => { - const index = state.tags.indexOf(tag); - if (index > -1) { - state.tags.splice(index, 1); - } else { - state.tags.push(tag); + getValueForRequestKey: (key: keyof ImageRequest) => { + return get().requestOptions[key]; + }, + + toggleTag: (tag: string) => { + set( + produce((state) => { + const index = state.tags.indexOf(tag); + if (index > -1) { + state.tags.splice(index, 1); + } else { + state.tags.push(tag); + } + }) + ); + }, + + hasTag: (tag: string) => { + return get().tags.indexOf(tag) > -1; + }, + + selectedTags: () => { + return get().tags; + }, + + // the request body to send to the server + // this is a computed value, just adding the tags to the request + builtRequest: () => { + const state = get(); + const requestOptions = state.requestOptions; + const tags = state.tags; + + // join all the tags with a comma and add it to the prompt + const prompt = `${requestOptions.prompt} ${tags.join(",")}`; + + const request = { + ...requestOptions, + prompt, + }; + // if we arent using auto save clear the save path + if (!state.uiOptions.isUseAutoSave) { + // maybe this is "None" ? + // TODO check this + request.save_to_disk_path = null; + } + // if we arent using face correction clear the face correction + if (!state.uiOptions.isCheckUseFaceCorrection) { + request.use_face_correction = null; + } + // if we arent using upscaling clear the upscaling + if (!state.uiOptions.isCheckedUseUpscaling) { + request.use_upscale = null; } - })) - }, - hasTag: (tag:string) => { - return get().tags.indexOf(tag) > -1; - }, + return request; + }, - selectedTags: () => { - return get().tags; - }, + uiOptions: { + // TODO proper persistence of all UI / user settings centrally somewhere? + // localStorage.getItem('ui:advancedSettingsIsOpen') === 'true', + advancedSettingsIsOpen: false, + imageModifierIsOpen: false, + isCheckedUseUpscaling: false, + isCheckUseFaceCorrection: true, + isUseRandomSeed: true, + isUseAutoSave: false, + isSoundEnabled: true, + }, - // the request body to send to the server - // this is a computed value, just adding the tags to the request - builtRequest: () => { + toggleAdvancedSettingsIsOpen: () => { + set( + produce((state) => { + state.uiOptions.advancedSettingsIsOpen = + !state.uiOptions.advancedSettingsIsOpen; + localStorage.setItem( + "ui:advancedSettingsIsOpen", + state.uiOptions.advancedSettingsIsOpen + ); + }) + ); + }, - const state = get(); - const requestOptions = state.requestOptions; - const tags = state.tags; + toggleImageModifiersIsOpen: () => { + set( + produce((state) => { + state.uiOptions.imageModifierIsOpen = + !state.uiOptions.imageModifierIsOpen; + localStorage.setItem( + "ui:imageModifierIsOpen", + state.uiOptions.imageModifierIsOpen + ); + }) + ); + }, - // join all the tags with a comma and add it to the prompt - const prompt = `${requestOptions.prompt} ${tags.join(',')}`; + toggleUseUpscaling: () => { + set( + produce((state) => { + state.uiOptions.isCheckedUseUpscaling = + !state.uiOptions.isCheckedUseUpscaling; + state.requestOptions.use_upscale = state.uiOptions + .isCheckedUseUpscaling + ? "RealESRGAN_x4plus" + : null; + localStorage.setItem( + "ui:isCheckedUseUpscaling", + state.uiOptions.isCheckedUseUpscaling + ); + }) + ); + }, - const request = { - ...requestOptions, - prompt - } - // if we arent using auto save clear the save path - if(!state.uiOptions.isUseAutoSave){ - // maybe this is "None" ? - // TODO check this - request.save_to_disk_path = null; - } - // if we arent using face correction clear the face correction - if(!state.uiOptions.isCheckUseFaceCorrection){ - request.use_face_correction = null; - } - // if we arent using upscaling clear the upscaling - if(!state.uiOptions.isCheckedUseUpscaling){ - request.use_upscale = null; - } + isUsingUpscaling: () => { + return get().uiOptions.isCheckedUseUpscaling; + }, - return request; - }, + toggleUseFaceCorrection: () => { + set( + produce((state) => { + state.uiOptions.isCheckUseFaceCorrection = + !state.uiOptions.isCheckUseFaceCorrection; + state.use_face_correction = state.uiOptions.isCheckUseFaceCorrection + ? "GFPGANv1.3" + : null; + localStorage.setItem( + "ui:isCheckUseFaceCorrection", + state.uiOptions.isCheckUseFaceCorrection + ); + }) + ); + }, - uiOptions: { - // TODO proper persistence of all UI / user settings centrally somewhere? - // localStorage.getItem('ui:advancedSettingsIsOpen') === 'true', - advancedSettingsIsOpen:false, - imageModifierIsOpen: false, - isCheckedUseUpscaling: false, - isCheckUseFaceCorrection: true, - isUseRandomSeed: true, - isUseAutoSave: false, - isSoundEnabled: true, - }, + isUsingFaceCorrection: () => { + return get().uiOptions.isCheckUseFaceCorrection; + }, - toggleAdvancedSettingsIsOpen: () => { - set( produce((state) => { - state.uiOptions.advancedSettingsIsOpen = !state.uiOptions.advancedSettingsIsOpen; - localStorage.setItem('ui:advancedSettingsIsOpen', state.uiOptions.advancedSettingsIsOpen); - })) - }, + toggleUseRandomSeed: () => { + set( + produce((state) => { + state.uiOptions.isUseRandomSeed = !state.uiOptions.isUseRandomSeed; + state.requestOptions.seed = state.uiOptions.isUseRandomSeed + ? useRandomSeed() + : state.requestOptions.seed; + localStorage.setItem( + "ui:isUseRandomSeed", + state.uiOptions.isUseRandomSeed + ); + }) + ); + }, - toggleImageModifiersIsOpen: () => { - set( produce((state) => { - state.uiOptions.imageModifierIsOpen = !state.uiOptions.imageModifierIsOpen; - localStorage.setItem('ui:imageModifierIsOpen', state.uiOptions.imageModifierIsOpen); - })) - }, + isRandomSeed: () => { + return get().uiOptions.isUseRandomSeed; + }, - toggleUseUpscaling: () => { - set( produce((state) => { - state.uiOptions.isCheckedUseUpscaling = !state.uiOptions.isCheckedUseUpscaling; - state.requestOptions.use_upscale = state.uiOptions.isCheckedUseUpscaling ? 'RealESRGAN_x4plus' : null; - localStorage.setItem('ui:isCheckedUseUpscaling', state.uiOptions.isCheckedUseUpscaling); - })) - }, + toggleUseAutoSave: () => { + //isUseAutoSave + //save_to_disk_path + set( + produce((state) => { + state.uiOptions.isUseAutoSave = !state.uiOptions.isUseAutoSave; + localStorage.setItem( + "ui:isUseAutoSave", + state.uiOptions.isUseAutoSave + ); + }) + ); + }, - isUsingUpscaling: () => { - return get().uiOptions.isCheckedUseUpscaling; - }, - - toggleUseFaceCorrection: () => { - set( produce((state) => { - state.uiOptions.isCheckUseFaceCorrection = !state.uiOptions.isCheckUseFaceCorrection; - state.use_face_correction = state.uiOptions.isCheckUseFaceCorrection ? 'GFPGANv1.3' : null; - localStorage.setItem('ui:isCheckUseFaceCorrection', state.uiOptions.isCheckUseFaceCorrection); - })) - }, - - isUsingFaceCorrection: () => { - return get().uiOptions.isCheckUseFaceCorrection; - }, - - - toggleUseRandomSeed: () => { - set( produce((state) => { - state.uiOptions.isUseRandomSeed = !state.uiOptions.isUseRandomSeed; - state.requestOptions.seed = state.uiOptions.isUseRandomSeed ? useRandomSeed() : state.requestOptions.seed; - localStorage.setItem('ui:isUseRandomSeed', state.uiOptions.isUseRandomSeed); - })) - }, - - isRandomSeed: () => { - return get().uiOptions.isUseRandomSeed; - }, - - toggleUseAutoSave: () => { - //isUseAutoSave - //save_to_disk_path - set( produce((state) => { - state.uiOptions.isUseAutoSave = !state.uiOptions.isUseAutoSave; - localStorage.setItem('ui:isUseAutoSave', state.uiOptions.isUseAutoSave); - })) - }, - - isUseAutoSave: () => { - return get().uiOptions.isUseAutoSave; - }, - - toggleSoundEnabled: () => { - set( produce((state) => { - state.uiOptions.isSoundEnabled = !state.uiOptions.isSoundEnabled; - //localStorage.setItem('ui:isSoundEnabled', state.uiOptions.isSoundEnabled); - })) - }, - - isSoundEnabled: () => { - return get().uiOptions.isSoundEnabled; - }, - -}))); + isUseAutoSave: () => { + return get().uiOptions.isUseAutoSave; + }, + toggleSoundEnabled: () => { + set( + produce((state) => { + state.uiOptions.isSoundEnabled = !state.uiOptions.isSoundEnabled; + //localStorage.setItem('ui:isSoundEnabled', state.uiOptions.isSoundEnabled); + }) + ); + }, + isSoundEnabled: () => { + return get().uiOptions.isSoundEnabled; + }, + })) +); diff --git a/ui/frontend/build_src/src/store/imageDisplayStore.ts b/ui/frontend/build_src/src/store/imageDisplayStore.ts index c0addd3a..d778b6e9 100644 --- a/ui/frontend/build_src/src/store/imageDisplayStore.ts +++ b/ui/frontend/build_src/src/store/imageDisplayStore.ts @@ -1,12 +1,12 @@ -import create from 'zustand'; -import produce from 'immer'; +import create from "zustand"; +import produce from "immer"; // import { devtools } from 'zustand/middleware' interface ImageDisplayState { imageOptions: Map; currentImage: object | null; - addNewImage: (ImageData: string, imageOptions: any) => void + addNewImage: (ImageData: string, imageOptions: any) => void; } export const useImageDisplay = create((set) => ({ @@ -14,9 +14,11 @@ export const useImageDisplay = create((set) => ({ currentImage: null, // use produce to make sure we don't mutate state addNewImage: (ImageData: string, imageOptions: any) => { - set( produce((state) => { - state.currentImage = { display: ImageData, options: imageOptions }; - state.images.set(ImageData, imageOptions) - })); - } -})); \ No newline at end of file + set( + produce((state) => { + state.currentImage = { display: ImageData, options: imageOptions }; + state.images.set(ImageData, imageOptions); + }) + ); + }, +})); diff --git a/ui/frontend/build_src/src/store/imageQueueStore.ts b/ui/frontend/build_src/src/store/imageQueueStore.ts index 9177480d..ba5fc22d 100644 --- a/ui/frontend/build_src/src/store/imageQueueStore.ts +++ b/ui/frontend/build_src/src/store/imageQueueStore.ts @@ -1,13 +1,13 @@ -import create from 'zustand'; -import produce from 'immer'; -import { useRandomSeed } from '../utils'; +import create from "zustand"; +import produce from "immer"; +import { useRandomSeed } from "../utils"; -import { ImageRequest } from './imageCreateStore'; +import { ImageRequest } from "./imageCreateStore"; interface ImageQueueState { - images : ImageRequest[]; + images: ImageRequest[]; completedImageIds: string[]; - addNewImage: (id:string, imgRec: ImageRequest) => void + addNewImage: (id: string, imgRec: ImageRequest) => void; hasQueuedImages: () => boolean; firstInQueue: () => ImageRequest | []; removeFirstInQueue: () => void; @@ -19,29 +19,31 @@ export const useImageQueue = create((set, get) => ({ images: new Array(), completedImageIds: new Array(), // use produce to make sure we don't mutate state - addNewImage: (id: string, imgRec: ImageRequest, isRandom= false) => { - set( produce((state) => { - - let { seed } = imgRec; - if (isRandom) { - seed = useRandomSeed(); - } - state.images.push({ id, options: {...imgRec, seed} }); - })); + addNewImage: (id: string, imgRec: ImageRequest, isRandom = false) => { + set( + produce((state) => { + let { seed } = imgRec; + if (isRandom) { + seed = useRandomSeed(); + } + state.images.push({ id, options: { ...imgRec, seed } }); + }) + ); }, - + hasQueuedImages: () => { return get().images.length > 0; }, firstInQueue: () => { - return get().images[0] as ImageRequest || []; + return (get().images[0] as ImageRequest) || []; }, - + removeFirstInQueue: () => { - set( produce((state) => { - const image = state.images.shift(); - state.completedImageIds.push(image.id); - })); - } + set( + produce((state) => { + const image = state.images.shift(); + state.completedImageIds.push(image.id); + }) + ); + }, })); - \ No newline at end of file diff --git a/ui/frontend/build_src/src/utils.ts b/ui/frontend/build_src/src/utils.ts index 0c91183a..dbe52aad 100644 --- a/ui/frontend/build_src/src/utils.ts +++ b/ui/frontend/build_src/src/utils.ts @@ -1,3 +1,3 @@ -export function useRandomSeed(){ +export function useRandomSeed() { return Math.floor(Math.random() * 10000); -}; \ No newline at end of file +} diff --git a/ui/frontend/build_src/vite.config.ts b/ui/frontend/build_src/vite.config.ts index 93da2313..6a735829 100644 --- a/ui/frontend/build_src/vite.config.ts +++ b/ui/frontend/build_src/vite.config.ts @@ -1,5 +1,5 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ @@ -9,16 +9,15 @@ export default defineConfig({ }, build: { // make sure everythign is in the same directory - outDir: '../dist', + outDir: "../dist", rollupOptions: { output: { // dont hash the file names // maybe once we update the python server? entryFileNames: `[name].js`, chunkFileNames: `[name].js`, - assetFileNames: `[name].[ext]` - } - } + assetFileNames: `[name].[ext]`, + }, + }, }, - -}) +}); diff --git a/ui/frontend/dist/index.html b/ui/frontend/dist/index.html index 4c9a4376..cdf8474c 100644 --- a/ui/frontend/dist/index.html +++ b/ui/frontend/dist/index.html @@ -1,1269 +1,1531 @@ - - - - Stable Diffusion UI - - - - - -
- + + + + Stable Diffusion UI + + + + + +
+ - + - - - - + + + + + + + + +