mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-21 18:31:28 +02:00
fix up types, and display id
This commit is contained in:
parent
1b439c15f6
commit
60992ae492
@ -2,7 +2,7 @@
|
|||||||
* basic server health
|
* 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 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
|
// 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
|
* post a new request for an image
|
||||||
*/
|
*/
|
||||||
// TODO; put hese some place better
|
// 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 {
|
export interface ImageOutput {
|
||||||
data: string;
|
data: string;
|
||||||
path_abs: string | null;
|
path_abs: string | null;
|
||||||
@ -65,9 +121,8 @@ export interface ImageOutput {
|
|||||||
|
|
||||||
export interface ImageReturnType {
|
export interface ImageReturnType {
|
||||||
output: ImageOutput[];
|
output: ImageOutput[];
|
||||||
request: {};
|
request: ImageRequest;
|
||||||
status: string;
|
status: string;
|
||||||
session_id: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const MakeImageKey = "MakeImage";
|
export const MakeImageKey = "MakeImage";
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
import { ImageRequest } from "../../../stores/imageCreateStore";
|
import { ImageRequest } from "../../../api";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
generatedImageMain,
|
generatedImageMain,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
/* eslint-disable @typescript-eslint/naming-convention */
|
/* eslint-disable @typescript-eslint/naming-convention */
|
||||||
import React, { useEffect, useRef } from "react";
|
import React, { useEffect, useRef } from "react";
|
||||||
|
|
||||||
import { useImageCreate, ImageRequest } from "../../../../../stores/imageCreateStore";
|
import { useImageCreate } from "../../../../../stores/imageCreateStore";
|
||||||
import { useImageQueue } from "../../../../../stores/imageQueueStore";
|
import { useImageQueue } from "../../../../../stores/imageQueueStore";
|
||||||
import {
|
import {
|
||||||
FetchingStates,
|
FetchingStates,
|
||||||
@ -13,7 +13,12 @@ import { useImageDisplay } from "../../../../../stores/imageDisplayStore";
|
|||||||
import { v4 as uuidv4 } from "uuid";
|
import { v4 as uuidv4 } from "uuid";
|
||||||
|
|
||||||
import { useRandomSeed } from "../../../../../utils";
|
import { useRandomSeed } from "../../../../../utils";
|
||||||
import { doMakeImage } from "../../../../../api";
|
import {
|
||||||
|
ImageRequest,
|
||||||
|
ImageReturnType,
|
||||||
|
ImageOutput,
|
||||||
|
doMakeImage,
|
||||||
|
} from "../../../../../api";
|
||||||
import {
|
import {
|
||||||
MakeButtonStyle,
|
MakeButtonStyle,
|
||||||
} from "./makeButton.css";
|
} from "./makeButton.css";
|
||||||
@ -22,6 +27,8 @@ import { useTranslation } from "react-i18next";
|
|||||||
|
|
||||||
import AudioDing from "../../../../molecules/audioDing";
|
import AudioDing from "../../../../molecules/audioDing";
|
||||||
|
|
||||||
|
const idDelim = "_batch";
|
||||||
|
|
||||||
export default function MakeButton() {
|
export default function MakeButton() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
@ -49,45 +56,24 @@ export default function MakeButton() {
|
|||||||
|
|
||||||
const updateDisplay = useImageDisplay((state) => state.updateDisplay);
|
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
|
// 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 {
|
try {
|
||||||
|
|
||||||
// todo - used zod or something to validate this
|
const parsed = JSON.parse(jsonStr);
|
||||||
interface jsonResponseType {
|
const { status, request, output: outputs } = parsed as ImageReturnType;
|
||||||
status: string;
|
|
||||||
request: ImageRequest;
|
|
||||||
output: []
|
|
||||||
}
|
|
||||||
const { status, request, output: outputs }: jsonResponseType = JSON.parse(jsonStr);
|
|
||||||
|
|
||||||
if (status === 'succeeded') {
|
if (status === 'succeeded') {
|
||||||
outputs.forEach((output: any) => {
|
outputs.forEach((output: any, index: number) => {
|
||||||
|
|
||||||
const { data, seed } = output;
|
|
||||||
|
|
||||||
|
const { data, seed } = output as ImageOutput;
|
||||||
const seedReq = {
|
const seedReq = {
|
||||||
...request,
|
...request,
|
||||||
seed,
|
seed,
|
||||||
};
|
};
|
||||||
|
const batchId = `${id}${idDelim}-${seed}-${index}`;
|
||||||
updateDisplay(data, seedReq);
|
updateDisplay(batchId, data, seedReq);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -112,7 +98,7 @@ export default function MakeButton() {
|
|||||||
if (done) {
|
if (done) {
|
||||||
removeFirstInQueue();
|
removeFirstInQueue();
|
||||||
setStatus(FetchingStates.COMPLETE);
|
setStatus(FetchingStates.COMPLETE);
|
||||||
hackJson(finalJSON);
|
hackJson(finalJSON, id);
|
||||||
void dingRef.current?.play();
|
void dingRef.current?.play();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
@ -26,6 +26,26 @@ export default function CompletedImages(
|
|||||||
clearDisplay();
|
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 (
|
return (
|
||||||
<div className={completedImagesMain}>
|
<div className={completedImagesMain}>
|
||||||
{/* Adjust the dom do we dont do this check twice */}
|
{/* Adjust the dom do we dont do this check twice */}
|
||||||
|
@ -5,6 +5,9 @@ import { devtools } from "zustand/middleware";
|
|||||||
|
|
||||||
import { useRandomSeed } from "../utils";
|
import { useRandomSeed } from "../utils";
|
||||||
|
|
||||||
|
import { ImageRequest } from "../api";
|
||||||
|
|
||||||
|
|
||||||
export interface ImageCreationUiOptions {
|
export interface ImageCreationUiOptions {
|
||||||
isUseRandomSeed: boolean;
|
isUseRandomSeed: boolean;
|
||||||
isUseAutoSave: boolean;
|
isUseAutoSave: boolean;
|
||||||
@ -22,62 +25,6 @@ export const SAMPLER_OPTIONS = [
|
|||||||
'lms',
|
'lms',
|
||||||
] as const;
|
] 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 {
|
export interface ModifierPreview {
|
||||||
name: string;
|
name: string;
|
||||||
path: string;
|
path: string;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import create from "zustand";
|
import create from "zustand";
|
||||||
import produce from "immer";
|
import produce from "immer";
|
||||||
|
|
||||||
import { ImageRequest } from "./imageCreateStore";
|
import { ImageRequest } from "../api";
|
||||||
|
|
||||||
export interface CompletedImagesType {
|
export interface CompletedImagesType {
|
||||||
id?: string;
|
id?: string;
|
||||||
@ -13,7 +13,7 @@ interface ImageDisplayState {
|
|||||||
// imageOptions: Map<string, any>;
|
// imageOptions: Map<string, any>;
|
||||||
images: CompletedImagesType[]
|
images: CompletedImagesType[]
|
||||||
currentImage: CompletedImagesType | null
|
currentImage: CompletedImagesType | null
|
||||||
updateDisplay: (ImageData: string, imageOptions: any) => void;
|
updateDisplay: (id: string, ImageData: string, imageOptions: any) => void;
|
||||||
setCurrentImage: (image: CompletedImagesType) => void;
|
setCurrentImage: (image: CompletedImagesType) => void;
|
||||||
clearDisplay: () => void;
|
clearDisplay: () => void;
|
||||||
|
|
||||||
@ -26,13 +26,13 @@ export const useImageDisplay = create<ImageDisplayState>((set, get) => ({
|
|||||||
currentImage: null,
|
currentImage: null,
|
||||||
// use produce to make sure we don't mutate state
|
// use produce to make sure we don't mutate state
|
||||||
// imageOptions: any
|
// imageOptions: any
|
||||||
updateDisplay: (ImageData: string, imageOptions) => {
|
updateDisplay: (id: string, ImageData: string, imageOptions) => {
|
||||||
set(
|
set(
|
||||||
produce((state) => {
|
produce((state) => {
|
||||||
// options: imageOptions
|
// options: imageOptions
|
||||||
// state.currentImage = { display: ImageData, imageOptions };
|
state.currentImage = { id, display: ImageData, info: imageOptions };
|
||||||
// imageOptions
|
// // imageOptions
|
||||||
state.images.unshift({ data: ImageData, info: imageOptions });
|
state.images.unshift({ id, data: ImageData, info: imageOptions });
|
||||||
state.currentImage = state.images[0];
|
state.currentImage = state.images[0];
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
@ -2,7 +2,7 @@ import create from "zustand";
|
|||||||
import produce from "immer";
|
import produce from "immer";
|
||||||
import { useRandomSeed } from "../utils";
|
import { useRandomSeed } from "../utils";
|
||||||
|
|
||||||
import { ImageRequest } from "./imageCreateStore";
|
import { ImageRequest } from "../api";
|
||||||
|
|
||||||
interface QueueItem {
|
interface QueueItem {
|
||||||
id?: string;
|
id?: string;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user