diff --git a/gui/src/client.ts b/gui/src/client.ts index 127ddc07..6df385c1 100644 --- a/gui/src/client.ts +++ b/gui/src/client.ts @@ -145,7 +145,7 @@ export interface BlendParams { * General response for most image requests. */ export interface ImageResponse { - output: Array<{ + outputs: Array<{ key: string; url: string; }>; @@ -258,7 +258,7 @@ export const FIXED_FLOAT = 2; export const STATUS_SUCCESS = 200; export function equalResponse(a: ImageResponse, b: ImageResponse): boolean { - return a.output === b.output; + return a.outputs === b.outputs; } /** @@ -546,12 +546,12 @@ export function makeClient(root: string, f = fetch): ApiClient { * that into a full URL, since it already knows the root URL of the server. */ export async function parseApiResponse(root: string, res: Response): Promise { - type LimitedResponse = Omit & { output: Array }; + type LimitedResponse = Omit & { outputs: Array }; if (res.status === STATUS_SUCCESS) { const data = await res.json() as LimitedResponse; - const images = data.output.map((output) => { + const outputs = data.outputs.map((output) => { const url = new URL(joinPath('output', output), root).toString(); return { key: output, @@ -561,7 +561,7 @@ export async function parseApiResponse(root: string, res: Response): Promise>(); @@ -42,7 +42,7 @@ export function ImageCard(props: ImageCardProps) { const setBlend = useStore(state, (s) => s.setBlend); async function loadSource() { - const req = await fetch(output[0].url); + const req = await fetch(outputs[index].url); return req.blob(); } @@ -88,7 +88,7 @@ export function ImageCard(props: ImageCardProps) { } function downloadImage() { - window.open(output[0].url, '_blank'); + window.open(outputs[index].url, '_blank'); } function close() { @@ -103,7 +103,7 @@ export function ImageCard(props: ImageCardProps) { return @@ -114,7 +114,7 @@ export function ImageCard(props: ImageCardProps) { { const prevIndex = index - 1; if (prevIndex < 0) { - setIndex(output.length + prevIndex); + setIndex(outputs.length + prevIndex); } else { setIndex(prevIndex); } @@ -124,12 +124,12 @@ export function ImageCard(props: ImageCardProps) { - {visibleIndex(index)} of {output.length} + {visibleIndex(index)} of {outputs.length} { - setIndex((index + 1) % output.length); + setIndex((index + 1) % outputs.length); }}> diff --git a/gui/src/components/ImageHistory.tsx b/gui/src/components/ImageHistory.tsx index a0dd5824..0c3c30d3 100644 --- a/gui/src/components/ImageHistory.tsx +++ b/gui/src/components/ImageHistory.tsx @@ -18,11 +18,11 @@ export function ImageHistory() { const children = []; if (loading.length > 0) { - children.push(...loading.map((item) => )); + children.push(...loading.map((item) => )); } if (history.length > 0) { - children.push(...history.map((item) => )); + children.push(...history.map((item) => )); } else { if (doesExist(loading) === false) { children.push(No results. Press Generate.); diff --git a/gui/src/components/LoadingCard.tsx b/gui/src/components/LoadingCard.tsx index e81b5588..ffcdec89 100644 --- a/gui/src/components/LoadingCard.tsx +++ b/gui/src/components/LoadingCard.tsx @@ -33,8 +33,8 @@ export function LoadingCard(props: LoadingCardProps) { // eslint-disable-next-line @typescript-eslint/unbound-method const setReady = useStore(state, (s) => s.setReady); - const cancel = useMutation(() => client.cancel(loading.output[index].key)); - const ready = useQuery(`ready-${loading.output[index].key}`, () => client.ready(loading.output[index].key), { + const cancel = useMutation(() => client.cancel(loading.outputs[index].key)); + const ready = useQuery(`ready-${loading.outputs[index].key}`, () => client.ready(loading.outputs[index].key), { // data will always be ready without this, even if the API says its not cacheTime: 0, refetchInterval: POLL_TIME, diff --git a/gui/src/state.ts b/gui/src/state.ts index 0b06ab25..baabf493 100644 --- a/gui/src/state.ts +++ b/gui/src/state.ts @@ -164,7 +164,7 @@ export const STATE_KEY = 'onnx-web'; /** * Current state version for zustand persistence. */ -export const STATE_VERSION = 5; +export const STATE_VERSION = 6; export const BLEND_SOURCES = 2; @@ -311,7 +311,7 @@ export function createStateSlices(server: ServerParams) { clearLoading(image) { set((prev) => ({ ...prev, - loading: prev.loading.filter((it) => it.image.output[0].key !== image.output[0].key), + loading: prev.loading.filter((it) => it.image.outputs[0].key !== image.outputs[0].key), })); }, pushHistory(image) { @@ -321,7 +321,7 @@ export function createStateSlices(server: ServerParams) { image, ...prev.history, ].slice(0, prev.limit + DEFAULT_HISTORY.scrollback), - loading: prev.loading.filter((it) => it.image.output[0].key !== image.output[0].key), + loading: prev.loading.filter((it) => it.image.outputs[0].key !== image.outputs[0].key), })); }, pushLoading(image) { @@ -342,7 +342,7 @@ export function createStateSlices(server: ServerParams) { removeHistory(image) { set((prev) => ({ ...prev, - history: prev.history.filter((it) => it.output !== image.output), + history: prev.history.filter((it) => it.outputs !== image.outputs), })); }, setLimit(limit) { @@ -354,7 +354,7 @@ export function createStateSlices(server: ServerParams) { setReady(image, ready) { set((prev) => { const loading = [...prev.loading]; - const idx = loading.findIndex((it) => it.image.output[0].key === image.output[0].key); + const idx = loading.findIndex((it) => it.image.outputs[0].key === image.outputs[0].key); if (idx >= 0) { loading[idx].ready = ready; } else {