added audio ding

ui/frontend/build_src/src/api/index.ts

@@ -79,9 +79,5 @@ export const doMakeImage = async (reqBody: ImageRequest) => {
     },
     body: JSON.stringify(reqBody),
   });
-  console.log('doMakeImage= GOT RESPONSE', res);
-
-  // const data = await res.json();
-  // return data;
   return res;
 };

ui/frontend/build_src/src/components/molecules/audioDing/index.tsx

@@ -13,3 +13,4 @@ const AudioDing = React.forwardRef((props, ref) => (
 AudioDing.displayName = "AudioDing";
 
 export default AudioDing;
+

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/activeTags/index.tsx

@@ -6,8 +6,6 @@ import ModifierTag from "../../../../atoms/modifierTag";
 export default function ActiveTags() {
   const selectedtags = useImageCreate((state) => state.selectedTags());
 
-  console.log("ActiveTags", selectedtags);
-
   return (
     <div className="selected-tags">
       <p>Active Tags</p>

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 
 import { useImageCreate, ImageRequest } from "../../../../../stores/imageCreateStore";
 import { useImageQueue } from "../../../../../stores/imageQueueStore";
@@ -25,6 +25,8 @@ import AudioDing from "../../../../molecules/audioDing";
 export default function MakeButton() {
   const { t } = useTranslation();
 
+  const dingRef = useRef<HTMLAudioElement>(null);
+
   const parallelCount = useImageCreate((state) => state.parallelCount);
   const builtRequest = useImageCreate((state) => state.builtRequest);
   const isRandomSeed = useImageCreate((state) => state.isRandomSeed());
@@ -100,18 +102,18 @@ export default function MakeButton() {
   }
 
   const parseRequest = async (id: string, reader: ReadableStreamDefaultReader<Uint8Array>) => {
-    console.log('parseRequest');
     const decoder = new TextDecoder();
     let finalJSON = '';
 
-    console.log('id', id);
+    //console.log('id', id);
     while (true) {
       const { done, value } = await reader.read();
       const jsonStr = decoder.decode(value);
       if (done) {
         removeFirstInQueue();
         setStatus(FetchingStates.COMPLETE);
-        hackJson(finalJSON)
+        hackJson(finalJSON);
+        void dingRef.current?.play();
         break;
       }
 
@@ -262,6 +264,7 @@ export default function MakeButton() {
   }, [hasQueue, status, id, options, startStream]);
 
   return (
+    <>
       <button
         className={MakeButtonStyle}
         onClick={() => {
@@ -271,5 +274,7 @@ export default function MakeButton() {
       >
         {t("home.make-img-btn")}
       </button>
+      <AudioDing ref={dingRef}></AudioDing>
+    </>
   );
 }

ui/frontend/build_src/src/components/organisms/headerDisplay/statusDisplay/index.tsx

@@ -1,8 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useQuery } from "@tanstack/react-query";
 
 import { healthPing, HEALTH_PING_INTERVAL } from "../../../../api";
 
+import AudioDing from "../../../molecules/audioDing";
+
 import {
   StartingStatus,
   ErrorStatus,
@@ -17,6 +19,8 @@ export default function StatusDisplay({ className }: { className?: string }) {
   const [statusMessage, setStatusMessage] = useState(startingMessage);
   const [statusClass, setStatusClass] = useState(StartingStatus);
 
+  const dingRef = useRef<HTMLAudioElement>(null);
+
   // but this will be moved to the status display when it is created
   const { status, data } = useQuery(["health"], healthPing, {
     refetchInterval: HEALTH_PING_INTERVAL,
@@ -33,16 +37,20 @@ export default function StatusDisplay({ className }: { className?: string }) {
       if (data[0] === "OK") {
         setStatusMessage(successMessage);
         setStatusClass(SuccessStatus);
+        // catch an auto play error
+        dingRef.current?.play().catch((e) => {
+          console.log('DING!')
+        });
       } else {
         setStatusMessage(errorMessage);
         setStatusClass(ErrorStatus);
       }
     }
-  }, [status, data]);
+  }, [status, data, dingRef]);
 
   return (
     <>
-      {/* alittle hacky but joins the class names, will probably need a better css in js solution or tailwinds */}
+      <AudioDing ref={dingRef}></AudioDing>
       <p className={[statusClass, className].join(" ")}>{statusMessage}</p>
     </>
   );