diff --git a/ui/frontend/build_src/src/api/index.ts b/ui/frontend/build_src/src/api/index.ts index 3305e86d..82e07633 100644 --- a/ui/frontend/build_src/src/api/index.ts +++ b/ui/frontend/build_src/src/api/index.ts @@ -2,7 +2,7 @@ * basic server health */ -import type { ImageRequest } from "../stores/imageCreateStore"; +import type { SAMPLER_OPTIONS } from "../stores/imageCreateStore"; // when we are on dev we want to specifiy 9000 as the port for the backend // when we are on prod we want be realtive to the current url @@ -57,6 +57,62 @@ export const toggleBetaConfig = async (branch: string) => { * post a new request for an image */ // TODO; put hese some place better +export interface ImageRequest { + session_id: string; + 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; + // 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" | ""; + show_only_filtered_image: boolean; + init_image: undefined | string; + prompt_strength: undefined | number; + mask: undefined | string; + sampler: typeof SAMPLER_OPTIONS[number]; + stream_progress_updates: true; + stream_image_progress: boolean; + +} + export interface ImageOutput { data: string; path_abs: string | null; @@ -65,9 +121,8 @@ export interface ImageOutput { export interface ImageReturnType { output: ImageOutput[]; - request: {}; + request: ImageRequest; status: string; - session_id: string; } export const MakeImageKey = "MakeImage"; diff --git a/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx b/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx index d3abb029..53200ee5 100644 --- a/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx +++ b/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { ImageRequest } from "../../../stores/imageCreateStore"; +import { ImageRequest } from "../../../api"; import { generatedImageMain, diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx index 46dc5910..aaaf6625 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/naming-convention */ import React, { useEffect, useRef } from "react"; -import { useImageCreate, ImageRequest } from "../../../../../stores/imageCreateStore"; +import { useImageCreate } from "../../../../../stores/imageCreateStore"; import { useImageQueue } from "../../../../../stores/imageQueueStore"; import { FetchingStates, @@ -13,7 +13,12 @@ import { useImageDisplay } from "../../../../../stores/imageDisplayStore"; import { v4 as uuidv4 } from "uuid"; import { useRandomSeed } from "../../../../../utils"; -import { doMakeImage } from "../../../../../api"; +import { + ImageRequest, + ImageReturnType, + ImageOutput, + doMakeImage, +} from "../../../../../api"; import { MakeButtonStyle, } from "./makeButton.css"; @@ -22,6 +27,8 @@ import { useTranslation } from "react-i18next"; import AudioDing from "../../../../molecules/audioDing"; +const idDelim = "_batch"; + export default function MakeButton() { const { t } = useTranslation(); @@ -49,45 +56,24 @@ export default function MakeButton() { const updateDisplay = useImageDisplay((state) => state.updateDisplay); - const hackJson = (jsonStr: string) => { + const hackJson = (jsonStr: string, id: string) => { // DONES't seem to be needed for the updated progress implementation - // if (jsonStr !== undefined && jsonStr.indexOf('}{') !== -1) { - // // hack for a middleman buffering all the streaming updates, and unleashing them - // // on the poor browser in one shot. - // // this results in having to parse JSON like {"step": 1}{"step": 2}...{"status": "succeeded"..} - // // which is obviously invalid. - // // So we need to just extract the last {} section, starting from "status" to the end of the response - - // const lastChunkIdx = jsonStr.lastIndexOf('}{') - // if (lastChunkIdx !== -1) { - // const remaining = jsonStr.substring(lastChunkIdx) - // jsonStr = remaining.substring(1) - // } - // } - try { - // todo - used zod or something to validate this - interface jsonResponseType { - status: string; - request: ImageRequest; - output: [] - } - const { status, request, output: outputs }: jsonResponseType = JSON.parse(jsonStr); - + const parsed = JSON.parse(jsonStr); + const { status, request, output: outputs } = parsed as ImageReturnType; if (status === 'succeeded') { - outputs.forEach((output: any) => { - - const { data, seed } = output; + outputs.forEach((output: any, index: number) => { + const { data, seed } = output as ImageOutput; const seedReq = { ...request, seed, }; - - updateDisplay(data, seedReq); + const batchId = `${id}${idDelim}-${seed}-${index}`; + updateDisplay(batchId, data, seedReq); }); } @@ -112,7 +98,7 @@ export default function MakeButton() { if (done) { removeFirstInQueue(); setStatus(FetchingStates.COMPLETE); - hackJson(finalJSON); + hackJson(finalJSON, id); void dingRef.current?.play(); break; } diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx index 1237003e..54e9b85d 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx @@ -26,6 +26,26 @@ export default function CompletedImages( clearDisplay(); }; + // const idDelim = "_batch"; + // if (completedQueries.length > 0) { + // // map the completedImagesto a new array + // // and then set the state + // const temp = completedQueries + // .map((query, index) => { + // if (void 0 !== query) { + // return query.output.map((data: ImageOutput, index: number) => { + // return { + // id: `${completedIds[index]}${idDelim}-${data.seed}-${index}`, + // data: data.data, + // info: { ...query.request, seed: data.seed }, + // }; + // }); + // } + // }) + // .flat() + // .reverse() + // .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items + return (
{/* Adjust the dom do we dont do this check twice */} diff --git a/ui/frontend/build_src/src/stores/imageCreateStore.ts b/ui/frontend/build_src/src/stores/imageCreateStore.ts index 6e7dd524..5bd075e1 100644 --- a/ui/frontend/build_src/src/stores/imageCreateStore.ts +++ b/ui/frontend/build_src/src/stores/imageCreateStore.ts @@ -5,6 +5,9 @@ import { devtools } from "zustand/middleware"; import { useRandomSeed } from "../utils"; +import { ImageRequest } from "../api"; + + export interface ImageCreationUiOptions { isUseRandomSeed: boolean; isUseAutoSave: boolean; @@ -22,62 +25,6 @@ export const SAMPLER_OPTIONS = [ 'lms', ] as const; -export interface ImageRequest { - session_id: string; - 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; - // 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" | ""; - show_only_filtered_image: boolean; - init_image: undefined | string; - prompt_strength: undefined | number; - mask: undefined | string; - sampler: typeof SAMPLER_OPTIONS[number]; - stream_progress_updates: true; - stream_image_progress: boolean; - -} - export interface ModifierPreview { name: string; path: string; diff --git a/ui/frontend/build_src/src/stores/imageDisplayStore.ts b/ui/frontend/build_src/src/stores/imageDisplayStore.ts index a7800af6..2a1253b9 100644 --- a/ui/frontend/build_src/src/stores/imageDisplayStore.ts +++ b/ui/frontend/build_src/src/stores/imageDisplayStore.ts @@ -1,7 +1,7 @@ import create from "zustand"; import produce from "immer"; -import { ImageRequest } from "./imageCreateStore"; +import { ImageRequest } from "../api"; export interface CompletedImagesType { id?: string; @@ -13,7 +13,7 @@ interface ImageDisplayState { // imageOptions: Map; images: CompletedImagesType[] currentImage: CompletedImagesType | null - updateDisplay: (ImageData: string, imageOptions: any) => void; + updateDisplay: (id: string, ImageData: string, imageOptions: any) => void; setCurrentImage: (image: CompletedImagesType) => void; clearDisplay: () => void; @@ -26,13 +26,13 @@ export const useImageDisplay = create((set, get) => ({ currentImage: null, // use produce to make sure we don't mutate state // imageOptions: any - updateDisplay: (ImageData: string, imageOptions) => { + updateDisplay: (id: string, ImageData: string, imageOptions) => { set( produce((state) => { // options: imageOptions - // state.currentImage = { display: ImageData, imageOptions }; - // imageOptions - state.images.unshift({ data: ImageData, info: imageOptions }); + state.currentImage = { id, display: ImageData, info: imageOptions }; + // // imageOptions + state.images.unshift({ id, data: ImageData, info: imageOptions }); state.currentImage = state.images[0]; }) ); diff --git a/ui/frontend/build_src/src/stores/imageQueueStore.ts b/ui/frontend/build_src/src/stores/imageQueueStore.ts index b003bab7..6e9c7a0d 100644 --- a/ui/frontend/build_src/src/stores/imageQueueStore.ts +++ b/ui/frontend/build_src/src/stores/imageQueueStore.ts @@ -2,7 +2,7 @@ import create from "zustand"; import produce from "immer"; import { useRandomSeed } from "../utils"; -import { ImageRequest } from "./imageCreateStore"; +import { ImageRequest } from "../api"; interface QueueItem { id?: string;