diff --git a/ui/frontend/build_src/src/api/index.ts b/ui/frontend/build_src/src/api/index.ts index 82e07633..c30e5db0 100644 --- a/ui/frontend/build_src/src/api/index.ts +++ b/ui/frontend/build_src/src/api/index.ts @@ -136,3 +136,19 @@ export const doMakeImage = async (reqBody: ImageRequest) => { }); return res; }; + +export const doStopImage = async () => { + + console.log("stopping image"); + const response = await fetch(`${API_URL}/image/stop`); + console.log("stopping image response", response); + const data = await response.json(); + console.log("stopping image data", data); + return data; + + // try { + // let res = await fetch('/image/stop') + // } catch (e) { + // console.log(e) + // } +}; \ No newline at end of file diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/clearQueue/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/clearQueue/index.tsx new file mode 100644 index 00000000..96c5d434 --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/clearQueue/index.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { doStopImage } from "../../../../../api"; +import { useImageQueue } from "../../../../../stores/imageQueueStore"; + +export default function ClearQueue() { + + const hasQueue = useImageQueue((state) => state.hasQueuedImages()); + const clearQueue = useImageQueue((state) => state.clearQueue); + + const stopAll = async () => { + console.log("stopAll"); + try { + clearQueue(); + const res = await doStopImage(); + } catch (e) { + console.log(e); + } + }; + // / disabled={!hasQueue} + + return ( + + ); +} \ No newline at end of file diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx index a1384dbd..d93121a1 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx @@ -6,9 +6,12 @@ import { PromptDisplay, } from "./basicCreation.css"; +import MakeButton from "./makeButton"; +import StopButton from "./stopButton"; +import ClearQueue from "./clearQueue"; import SeedImage from "./seedImage"; import ActiveTags from "./activeTags"; -import MakeButton from "./makeButton"; + import { useTranslation } from "react-i18next"; @@ -31,9 +34,12 @@ export default function BasicCreation() { +
+ + +
- ); 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 233b8743..c0d92cbc 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 @@ -8,6 +8,7 @@ import { useImageFetching } from "../../../../../stores/imageFetchingStore"; + import { useImageDisplay } from "../../../../../stores/imageDisplayStore"; import { v4 as uuidv4 } from "uuid"; @@ -39,6 +40,8 @@ export default function MakeButton() { const isRandomSeed = useImageCreate((state) => state.isRandomSeed()); const setRequestOption = useImageCreate((state) => state.setRequestOptions); + const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled()); + const addNewImage = useImageQueue((state) => state.addNewImage); const hasQueue = useImageQueue((state) => state.hasQueuedImages()); const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue); @@ -96,7 +99,9 @@ export default function MakeButton() { removeFirstInQueue(); setStatus(FetchingStates.COMPLETE); hackJson(finalJSON, id); - void dingRef.current?.play(); + if (isSoundEnabled) { + void dingRef.current?.play(); + } break; } diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/stopButton/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/stopButton/index.tsx new file mode 100644 index 00000000..2234d348 --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/stopButton/index.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { doStopImage } from "../../../../../api"; + + +export default function StopButton() { + + const stopMake = async () => { + try { + const res = await doStopImage(); + } catch (e) { + console.log(e); + } + }; + + return ; +} diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/index.tsx index ee2b24a9..cd0a4cbc 100644 --- a/ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/index.tsx @@ -48,7 +48,7 @@ export default function SystemSettings() { state.getValueForRequestKey("use_full_precision") ); - const isSoundEnabled = true; //useImageCreate((state) => state.isSoundEnabled()); + const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled()); const setRequestOption = useImageCreate((state) => state.setRequestOptions); const toggleUseAutoSave = useImageCreate((state) => state.toggleUseAutoSave); diff --git a/ui/frontend/build_src/src/stores/imageCreateStore.ts b/ui/frontend/build_src/src/stores/imageCreateStore.ts index eccbec09..db7bfb11 100644 --- a/ui/frontend/build_src/src/stores/imageCreateStore.ts +++ b/ui/frontend/build_src/src/stores/imageCreateStore.ts @@ -317,7 +317,6 @@ export const useImageCreate = create( set( produce((state: ImageCreateState) => { state.uiOptions.isSoundEnabled = !state.uiOptions.isSoundEnabled; - //localStorage.setItem('ui:isSoundEnabled', state.uiOptions.isSoundEnabled); }) ); }, diff --git a/ui/frontend/build_src/src/stores/imageQueueStore.ts b/ui/frontend/build_src/src/stores/imageQueueStore.ts index 6e9c7a0d..a3ef7e21 100644 --- a/ui/frontend/build_src/src/stores/imageQueueStore.ts +++ b/ui/frontend/build_src/src/stores/imageQueueStore.ts @@ -17,6 +17,7 @@ interface ImageQueueState { hasQueuedImages: () => boolean; firstInQueue: () => QueueItem; removeFirstInQueue: () => void; + clearQueue: () => void; clearCachedIds: () => void; } @@ -59,6 +60,14 @@ export const useImageQueue = create((set, get) => ({ ); }, + clearQueue: () => { + set( + produce((state) => { + state.images = []; + }) + ); + }, + clearCachedIds: () => { set( produce((state) => {