added stop and queue clear

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)
+  // }
+};

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 (
+    <button onClick={() => void stopAll()}>Clear Queue</button>
+  );
+}

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() {
         <textarea value={promptText} onChange={handlePromptChange}></textarea>
       </div>
       <MakeButton></MakeButton>
+      <div>
+        <StopButton></StopButton>
+        <ClearQueue></ClearQueue>
+      </div>
 
       <SeedImage></SeedImage>
-
       <ActiveTags></ActiveTags>
     </div>
   );

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;
       }
 

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 <button onClick={() => void stopMake()}>Stop</button>;
+}

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);

ui/frontend/build_src/src/stores/imageCreateStore.ts

@@ -317,7 +317,6 @@ export const useImageCreate = create<ImageCreateState>(
       set(
         produce((state: ImageCreateState) => {
           state.uiOptions.isSoundEnabled = !state.uiOptions.isSoundEnabled;
-          //localStorage.setItem('ui:isSoundEnabled', state.uiOptions.isSoundEnabled);
         })
       );
     },

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<ImageQueueState>((set, get) => ({
     );
   },
 
+  clearQueue: () => {
+    set(
+      produce((state) => {
+        state.images = [];
+      })
+    );
+  },
+
   clearCachedIds: () => {
     set(
       produce((state) => {