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) => {