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 (