extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-06-21 10:27:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix up types, and display id

Browse Source
This commit is contained in:
caranicas 2022-09-28 13:34:00 -04:00
parent 1b439c15f6
commit 60992ae492
7 changed files with 106 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
ui/frontend/build_src/src/api/index.ts
View File

@ -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";

2
ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx
View File

@ -1,6 +1,6 @@
import React from "react";
import { ImageRequest } from "../../../stores/imageCreateStore";
import { ImageRequest } from "../../../api";
import {
generatedImageMain,

48
ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx
View File

@ -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;
}

20
ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/index.tsx
View File

@ -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 (
<div className={completedImagesMain}>
{/* Adjust the dom do we dont do this check twice */}

59
ui/frontend/build_src/src/stores/imageCreateStore.ts
View File

@ -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;

12
ui/frontend/build_src/src/stores/imageDisplayStore.ts
View File

@ -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<string, any>;
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<ImageDisplayState>((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];
})
);

2
ui/frontend/build_src/src/stores/imageQueueStore.ts
View File

@ -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;