From f04b5244faf9e9b9322c93074396baf9d6b424b6 Mon Sep 17 00:00:00 2001 From: caranicas Date: Tue, 20 Sep 2022 12:35:44 -0400 Subject: [PATCH] cleaning up type issues --- ui/frontend/build_src/.eslintrc.cjs | 26 ++- ui/frontend/build_src/package-lock.json | 20 ++ ui/frontend/build_src/package.json | 1 + .../build_src/src/Translation/config.ts | 9 +- ui/frontend/build_src/src/api/index.ts | 6 +- .../components/molecules/drawImage/index.tsx | 10 +- .../improvementSettings/index.tsx | 2 +- .../propertySettings/index.tsx | 2 +- .../basicCreation/seedImage/index.tsx | 4 +- .../creationPanel/creationPanelUIStore.ts | 42 ++-- .../creationPanel/imageModifiers/index.tsx | 6 +- .../displayPanel/currentDisplay/index.tsx | 9 +- .../organisms/displayPanel/index.tsx | 11 +- .../build_src/src/stores/imageCreateStore.ts | 184 +++++++++--------- .../build_src/src/stores/imageQueueStore.ts | 8 +- 15 files changed, 189 insertions(+), 151 deletions(-) diff --git a/ui/frontend/build_src/.eslintrc.cjs b/ui/frontend/build_src/.eslintrc.cjs index 0d81b727..9a5f9a6d 100644 --- a/ui/frontend/build_src/.eslintrc.cjs +++ b/ui/frontend/build_src/.eslintrc.cjs @@ -18,6 +18,7 @@ module.exports = { plugins: ["react"], extends: [ + "prettier", "plugin:react/recommended", "standard-with-typescript", "plugin:i18next/recommended", @@ -48,27 +49,24 @@ module.exports = { "@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/ban-ts-comment": "off", - // TS WARNINGS WE WANT - "@typescript-eslint/no-unused-vars": "warn", - - // TS things turned off for now - "@typescript-eslint/no-non-null-assertion": "off", - "@typescript-eslint/strict-boolean-expressions": "off", - "@typescript-eslint/no-floating-promises": "off", - "@typescript-eslint/consistent-type-assertions": "off", + // these are things that fight with prettier "@typescript-eslint/comma-dangle": "off", + "@typescript-eslint/space-before-function-paren": "off", "@typescript-eslint/quotes": "off", "@typescript-eslint/semi": "off", + + // TS WARNINGS WE WANT + "@typescript-eslint/no-unused-vars": "warn", + "@typescript-eslint/no-non-null-assertion": "warn", + + // TS things turned off for now + "@typescript-eslint/consistent-type-assertions": "off", + "@typescript-eslint/restrict-plus-operands": "off", "@typescript-eslint/brace-style": "off", "@typescript-eslint/prefer-ts-expect-error": "off", "@typescript-eslint/indent": "off", - "@typescript-eslint/member-delimiter-style": "off", - "@typescript-eslint/prefer-includes": "off", - "@typescript-eslint/consistent-type-definitions": "off", - "@typescript-eslint/no-unnecessary-condition": "off", - "@typescript-eslint/no-unnecessary-type-assertion": "off", - "@typescript-eslint/space-before-function-paren": "off", + // "@typescript-eslint/member-delimiter-style": "off", // i18n stuff no string literal works but turned off for now "i18next/no-literal-string": "off", diff --git a/ui/frontend/build_src/package-lock.json b/ui/frontend/build_src/package-lock.json index d20ce970..b6934b28 100644 --- a/ui/frontend/build_src/package-lock.json +++ b/ui/frontend/build_src/package-lock.json @@ -31,6 +31,7 @@ "@typescript-eslint/parser": "^5.37.0", "@vitejs/plugin-react": "^2.0.1", "eslint": "^8.23.1", + "eslint-config-prettier": "^8.5.0", "eslint-config-standard-with-typescript": "^23.0.0", "eslint-plugin-i18n-json": "^4.0.0", "eslint-plugin-i18next": "^6.0.0-4", @@ -2201,6 +2202,18 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/eslint-config-prettier": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz", + "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==", + "dev": true, + "bin": { + "eslint-config-prettier": "bin/cli.js" + }, + "peerDependencies": { + "eslint": ">=7.0.0" + } + }, "node_modules/eslint-config-standard": { "version": "17.0.0", "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.0.0.tgz", @@ -6392,6 +6405,13 @@ } } }, + "eslint-config-prettier": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz", + "integrity": "sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==", + "dev": true, + "requires": {} + }, "eslint-config-standard": { "version": "17.0.0", "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.0.0.tgz", diff --git a/ui/frontend/build_src/package.json b/ui/frontend/build_src/package.json index 46e6b350..dedc9a18 100644 --- a/ui/frontend/build_src/package.json +++ b/ui/frontend/build_src/package.json @@ -33,6 +33,7 @@ "@typescript-eslint/parser": "^5.37.0", "@vitejs/plugin-react": "^2.0.1", "eslint": "^8.23.1", + "eslint-config-prettier": "^8.5.0", "eslint-config-standard-with-typescript": "^23.0.0", "eslint-plugin-i18n-json": "^4.0.0", "eslint-plugin-i18next": "^6.0.0-4", diff --git a/ui/frontend/build_src/src/Translation/config.ts b/ui/frontend/build_src/src/Translation/config.ts index 18878a0f..f347cd2a 100644 --- a/ui/frontend/build_src/src/Translation/config.ts +++ b/ui/frontend/build_src/src/Translation/config.ts @@ -12,11 +12,16 @@ export const resources = { translation: ESTranslation, }, } as const; - i18n.use(initReactI18next).init({ lng: "en", interpolation: { escapeValue: false, }, resources, -}); +}).then(() => { + console.log("i18n initialized"); +}).catch((err) => { + console.error("i18n initialization failed", err); +}).finally(() => { + console.log("i18n initialization finished"); +}); \ No newline at end of file diff --git a/ui/frontend/build_src/src/api/index.ts b/ui/frontend/build_src/src/api/index.ts index e3de95e5..8ff8d4f2 100644 --- a/ui/frontend/build_src/src/api/index.ts +++ b/ui/frontend/build_src/src/api/index.ts @@ -57,13 +57,13 @@ export const toggleBetaConfig = async (branch: string) => { * post a new request for an image */ // TODO; put hese some place better -export type ImageOutput = { +export interface ImageOutput { data: string; path_abs: string | null; seed: number; }; -export type ImageReturnType = { +export interface ImageReturnType { output: ImageOutput[]; request: {}; status: string; @@ -82,4 +82,4 @@ export const doMakeImage = async (reqBody: ImageRequest) => { const data = await res.json(); return data; -}; +}; \ No newline at end of file diff --git a/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx b/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx index 5e236393..d088a231 100644 --- a/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx +++ b/ui/frontend/build_src/src/components/molecules/drawImage/index.tsx @@ -8,12 +8,12 @@ import { // https://github.com/embiem/react-canvas-draw interface DrawImageProps { - imageData: string; - brushSize: string; + imageData: string + brushSize: string - brushShape: string; - brushColor: string; - isErasing: boolean; + brushShape: string + brushColor: string + isErasing: boolean } export default function DrawImage({ diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx index 37f51e32..ffc2ba34 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx @@ -48,7 +48,7 @@ export default function ImprovementSettings() { // should probably be a store selector useEffect(() => { // if either are true we arent disabled - if (isUsingFaceCorrection || useUpscale) { + if (isUsingFaceCorrection || useUpscale != '') { setIsFilteringDisabled(false); } else { setIsFilteringDisabled(true); diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx index e0e759ef..f18d291c 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx @@ -124,7 +124,7 @@ export default function PropertySettings() { {guidanceScale} - {initImage && ( + {void 0 !== initImage && (
- {initImage && ( + {void 0 !== initImage && ( <>
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts index 0ebdc8ca..58ff6e0c 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts @@ -2,23 +2,23 @@ import create from "zustand"; import produce from "immer"; import { persist } from "zustand/middleware"; -export type ImageCreationUIOptions = { - isOpenAdvancedSettings: boolean; - isOpenAdvImprovementSettings: boolean; - isOpenAdvPropertySettings: boolean; - isOpenAdvWorkflowSettings: boolean; - isOpenAdvGPUSettings: boolean; +export interface ImageCreationUIOptions { + isOpenAdvancedSettings: boolean + isOpenAdvImprovementSettings: boolean + isOpenAdvPropertySettings: boolean + isOpenAdvWorkflowSettings: boolean + isOpenAdvGPUSettings: boolean - isOpenImageModifier: boolean; - imageMofidiersMap: object; + isOpenImageModifier: boolean + imageMofidiersMap: object - toggleAdvancedSettings: () => void; - toggleAdvImprovementSettings: () => void; - toggleAdvPropertySettings: () => void; - toggleAdvWorkflowSettings: () => void; - toggleAdvGPUSettings: () => void; + toggleAdvancedSettings: () => void + toggleAdvImprovementSettings: () => void + toggleAdvPropertySettings: () => void + toggleAdvWorkflowSettings: () => void + toggleAdvGPUSettings: () => void - toggleImageModifier: () => void; + toggleImageModifier: () => void // addImageModifier: (modifier: string) => void; }; @@ -36,15 +36,15 @@ export const useCreateUI = create( toggleAdvancedSettings: () => { set( - produce((state) => { - state.isOpenAdvancedSettings = !state.isOpenAdvancedSettings; + produce((state: ImageCreationUIOptions) => { + state.isOpenAdvancedSettings = !(state.isOpenAdvancedSettings); }) ); }, toggleAdvImprovementSettings: () => { set( - produce((state) => { + produce((state: ImageCreationUIOptions) => { state.isOpenAdvImprovementSettings = !state.isOpenAdvImprovementSettings; }) @@ -53,7 +53,7 @@ export const useCreateUI = create( toggleAdvPropertySettings: () => { set( - produce((state) => { + produce((state: ImageCreationUIOptions) => { state.isOpenAdvPropertySettings = !state.isOpenAdvPropertySettings; }) ); @@ -61,7 +61,7 @@ export const useCreateUI = create( toggleAdvWorkflowSettings: () => { set( - produce((state) => { + produce((state: ImageCreationUIOptions) => { state.isOpenAdvWorkflowSettings = !state.isOpenAdvWorkflowSettings; }) ); @@ -69,7 +69,7 @@ export const useCreateUI = create( toggleAdvGPUSettings: () => { set( - produce((state) => { + produce((state: ImageCreationUIOptions) => { state.isOpenAdvGPUSettings = !state.isOpenAdvGPUSettings; }) ); @@ -77,7 +77,7 @@ export const useCreateUI = create( toggleImageModifier: () => { set( - produce((state) => { + produce((state: ImageCreationUIOptions) => { state.isOpenImageModifier = !state.isOpenImageModifier; }) ); diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx index 312b1ff4..d613b67f 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx @@ -16,7 +16,7 @@ import { useCreateUI } from "../creationPanelUIStore"; import ModifierTag from "../../../atoms/modifierTag"; interface ModifierListProps { - tags: string[]; + tags: string[] } function ModifierList({ tags }: ModifierListProps) { @@ -32,8 +32,8 @@ function ModifierList({ tags }: ModifierListProps) { } interface ModifierGroupingProps { - title: string; - tags: string[]; + title: string + tags: string[] } function ModifierGrouping({ title, tags }: ModifierGroupingProps) { diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx index 68416dd6..f542e218 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/currentDisplay/index.tsx @@ -32,7 +32,7 @@ export default function CurrentDisplay({ use_upscale, width, height, - } = info! as ImageRequest; + } = info!; // Most important information is the prompt let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_"); @@ -40,10 +40,10 @@ export default function CurrentDisplay({ // name and the top level metadata let fileName = `${underscoreName}_Seed-${seed}_Steps-${num_inference_steps}_Guidance-${guidance_scale}`; // Add the face correction and upscale - if (use_face_correction) { + if (typeof use_face_correction == "string") { fileName += `_FaceCorrection-${use_face_correction}`; } - if (use_upscale) { + if (typeof use_upscale == "string") { fileName += `_Upscale-${use_upscale}`; } // Add the width and height @@ -70,7 +70,8 @@ export default function CurrentDisplay({ {isLoading ? (

Loading...

) : ( - (image != null && ( + (image !== null && ( + // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions

{info?.prompt}

diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx index 86a26d86..757a35fa 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx @@ -80,7 +80,8 @@ export default function DisplayPanel() { // check to make sure that the image was created if (data.status === "succeeded") { if (isSoundEnabled) { - dingRef.current?.play(); + // not awaiting the promise or error handling + void dingRef.current?.play(); } removeFirstInQueue(); } @@ -123,7 +124,13 @@ export default function DisplayPanel() { .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items setCompletedImages(temp); - setCurrentImage(temp[0] || null); + + // could move this to the useEffect for completedImages + if (temp.length > 0) { + setCurrentImage(temp[0]); + } else { + setCurrentImage(null); + } } else { setCompletedImages([]); setCurrentImage(null); diff --git a/ui/frontend/build_src/src/stores/imageCreateStore.ts b/ui/frontend/build_src/src/stores/imageCreateStore.ts index a6dedd85..48f6fe73 100644 --- a/ui/frontend/build_src/src/stores/imageCreateStore.ts +++ b/ui/frontend/build_src/src/stores/imageCreateStore.ts @@ -4,60 +4,60 @@ import { devtools } from "zustand/middleware"; import { useRandomSeed } from "../utils"; -export type ImageCreationUiOptions = { - isUseRandomSeed: boolean; - isUseAutoSave: boolean; - isSoundEnabled: boolean; +export interface ImageCreationUiOptions { + isUseRandomSeed: boolean + isUseAutoSave: boolean + isSoundEnabled: boolean }; -export type ImageRequest = { - prompt: string; - seed: number; - num_outputs: number; - num_inference_steps: number; - guidance_scale: number; +export interface ImageRequest { + 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; + | 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; + | 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 }; type ModifiersList = string[]; @@ -65,36 +65,36 @@ type ModifiersOptions = string | ModifiersList[]; type ModifiersOptionList = ModifiersOptions[]; interface ImageCreateState { - parallelCount: number; - requestOptions: ImageRequest; - allModifiers: ModifiersOptionList; - tags: string[]; - isInpainting: boolean; + parallelCount: number + requestOptions: ImageRequest + allModifiers: ModifiersOptionList + tags: string[] + isInpainting: boolean - setParallelCount: (count: number) => void; - setRequestOptions: (key: keyof ImageRequest, value: any) => void; - getValueForRequestKey: (key: keyof ImageRequest) => any; - setAllModifiers: (modifiers: ModifiersOptionList) => void; + setParallelCount: (count: number) => void + setRequestOptions: (key: keyof ImageRequest, value: any) => void + getValueForRequestKey: (key: keyof ImageRequest) => any + setAllModifiers: (modifiers: ModifiersOptionList) => void - setModifierOptions: (key: string, value: any) => void; - toggleTag: (tag: string) => void; - hasTag: (tag: string) => boolean; - selectedTags: () => string[]; - builtRequest: () => ImageRequest; + setModifierOptions: (key: string, value: any) => void + toggleTag: (tag: string) => void + hasTag: (tag: string) => boolean + selectedTags: () => string[] + builtRequest: () => ImageRequest - uiOptions: ImageCreationUiOptions; - toggleUseUpscaling: () => void; - // isUsingUpscaling: () => boolean; - toggleUseFaceCorrection: () => void; - isUsingFaceCorrection: () => boolean; - isUsingUpscaling: () => boolean; - toggleUseRandomSeed: () => void; - isRandomSeed: () => boolean; - toggleUseAutoSave: () => void; - isUseAutoSave: () => boolean; - toggleSoundEnabled: () => void; - isSoundEnabled: () => boolean; - toggleInpainting: () => void; + uiOptions: ImageCreationUiOptions + toggleUseUpscaling: () => void + // isUsingUpscaling: () => boolean + toggleUseFaceCorrection: () => void + isUsingFaceCorrection: () => boolean + isUsingUpscaling: () => boolean + toggleUseRandomSeed: () => void + isRandomSeed: () => boolean + toggleUseAutoSave: () => void + isUseAutoSave: () => boolean + toggleSoundEnabled: () => void + isSoundEnabled: () => boolean + toggleInpainting: () => void } // devtools breaks TS @@ -178,7 +178,7 @@ export const useImageCreate = create( }, hasTag: (tag: string) => { - return get().tags.indexOf(tag) > -1; + return get().tags.includes(tag); }, selectedTags: () => { @@ -235,7 +235,7 @@ export const useImageCreate = create( produce((state) => { const isSeting = typeof state.getValueForRequestKey("use_face_correction") === - "string" + "string" ? null : "GFPGANv1.3"; state.requestOptions.use_face_correction = isSeting; @@ -256,15 +256,16 @@ export const useImageCreate = create( toggleUseRandomSeed: () => { set( - produce((state) => { + produce((state: ImageCreateState) => { state.uiOptions.isUseRandomSeed = !state.uiOptions.isUseRandomSeed; state.requestOptions.seed = state.uiOptions.isUseRandomSeed ? useRandomSeed() : state.requestOptions.seed; - localStorage.setItem( - "ui:isUseRandomSeed", - state.uiOptions.isUseRandomSeed - ); + + // localStorage.setItem( + // "ui:isUseRandomSeed", + // state.uiOptions.isUseRandomSeed + // ); }) ); }, @@ -277,12 +278,13 @@ export const useImageCreate = create( //isUseAutoSave //save_to_disk_path set( - produce((state) => { + produce((state: ImageCreateState) => { state.uiOptions.isUseAutoSave = !state.uiOptions.isUseAutoSave; - localStorage.setItem( - "ui:isUseAutoSave", - state.uiOptions.isUseAutoSave - ); + + // localStorage.setItem( + // "ui:isUseAutoSave", + // state.uiOptions.isUseAutoSave + // ); }) ); }, @@ -293,7 +295,7 @@ export const useImageCreate = create( toggleSoundEnabled: () => { set( - produce((state) => { + produce((state: ImageCreateState) => { state.uiOptions.isSoundEnabled = !state.uiOptions.isSoundEnabled; //localStorage.setItem('ui:isSoundEnabled', state.uiOptions.isSoundEnabled); }) @@ -306,7 +308,7 @@ export const useImageCreate = create( toggleInpainting: () => { set( - produce((state) => { + produce((state: ImageCreateState) => { state.isInpainting = !state.isInpainting; }) ); diff --git a/ui/frontend/build_src/src/stores/imageQueueStore.ts b/ui/frontend/build_src/src/stores/imageQueueStore.ts index e52d70bd..00f73758 100644 --- a/ui/frontend/build_src/src/stores/imageQueueStore.ts +++ b/ui/frontend/build_src/src/stores/imageQueueStore.ts @@ -9,7 +9,7 @@ interface ImageQueueState { completedImageIds: string[]; addNewImage: (id: string, imgRec: ImageRequest) => void; hasQueuedImages: () => boolean; - firstInQueue: () => ImageRequest | []; + firstInQueue: () => ImageRequest | {}; removeFirstInQueue: () => void; clearCachedIds: () => void; } @@ -33,8 +33,11 @@ export const useImageQueue = create((set, get) => ({ hasQueuedImages: () => { return get().images.length > 0; }, + firstInQueue: () => { - return (get().images[0] as ImageRequest) || []; + let first: ImageRequest | {} = get().images[0] + first = void 0 !== first ? first : {}; + return first; }, removeFirstInQueue: () => { @@ -45,6 +48,7 @@ export const useImageQueue = create((set, get) => ({ }) ); }, + clearCachedIds: () => { set( produce((state) => {