tidy and pretty

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

@@ -1,25 +1,13 @@
 import React from "react";
-
-import { useRef } from "react";
 import { API_URL } from "../../../api";
 
 const url = `${API_URL}/ding.mp3`;
 
 const AudioDing = React.forwardRef((props, ref) => (
-  <audio ref={ref} style={{display:'none'}}>
+  // @ts-ignore
-    <source src={url} type="audio/mp3"/>
+  <audio ref={ref} style={{ display: "none" }}>
+    <source src={url} type="audio/mp3" />
   </audio>
 ));
 
 export default AudioDing;
-  
-//   {
-//   const url = `${API_URL}/ding.mp3`;
-//   const audioRef = useRef<HTMLAudioElement>(null);
-
-//   return (
-//       <audio ref={audioRef} style={{display:'none'}}>
-//         <source src={url} type="audio/mp3"/>
-//       </audio>
-//   );
-// }

ui/frontend/build_src/src/components/displayPanel/currentImage/index.tsx

@@ -1,43 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useImageQueue } from "../../../store/imageQueueStore";
-
-import { doMakeImage, MakeImageKey } from "../../../api";
-
-import { useQuery } from "@tanstack/react-query";
-import GeneratedImage from "../generatedImage";
-
-// TODO move this logic to the display panel
-export default function CurrentImage() {
-  // const [imageData, setImageData] = useState(null);
-  // @ts-ignore
-  const { id, options } = useImageQueue((state) => state.firstInQueue());
-
-  const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue);
-
-  const { status, data } = useQuery(
-    [MakeImageKey, id],
-    () => doMakeImage(options),
-    {
-      enabled: void 0 !== id,
-    }
-  );
-
-  useEffect(() => {
-    // query is done
-    if (status === "success") {
-      // check to make sure that the image was created
-      if (data.status === "succeeded") {
-        setImageData(data.output[0].data);
-        removeFirstInQueue();
-      }
-    }
-  }, [status, data, removeFirstInQueue]);
-
-  return (
-    <></>
-    // <div className="current-display">
-    //   <h1>Current Image</h1>
-    //   {imageData && <GeneratedImage imageData={imageData} />}
-    // </div>
-  );
-}

ui/frontend/build_src/src/components/displayPanel/index.tsx

@@ -3,11 +3,10 @@ import { useImageQueue } from "../../store/imageQueueStore";
 
 import { ImageRequest, useImageCreate } from "../../store/imageCreateStore";
 
-import {useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 
-import {doMakeImage, MakeImageKey } from "../../api";
+import { doMakeImage, MakeImageKey } from "../../api";
 
-import CurrentImage from "./currentImage";
 import AudioDing from "./audioDing";
 
 import GeneratedImage from "./generatedImage";
@@ -18,7 +17,6 @@ type CompletedImagesType = {
   info: ImageRequest;
 };
 export default function DisplayPanel() {
-
   const dingRef = useRef<HTMLAudioElement>(null);
   const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
 
@@ -39,7 +37,7 @@ export default function DisplayPanel() {
     if (status === "success") {
       // check to make sure that the image was created
       if (data.status === "succeeded") {
-        if(isSoundEnabled) {
+        if (isSoundEnabled) {
           dingRef.current?.play();
         }
         removeFirstInQueue();
@@ -47,7 +45,6 @@ export default function DisplayPanel() {
     }
   }, [status, data, removeFirstInQueue, dingRef, isSoundEnabled]);
 
-
   /* COMPLETED IMAGES */
 
   const queryClient = useQueryClient();
@@ -83,11 +80,10 @@ export default function DisplayPanel() {
         })
         .flat()
         .reverse();
-        setCompletedImages(temp);
+      setCompletedImages(temp);
     } else {
       setCompletedImages([]);
     }
-
   }, [setCompletedImages, queryClient, completedIds]);
 
   return (
@@ -95,7 +91,6 @@ export default function DisplayPanel() {
       <h1>Display Panel</h1>
       <div>
         <AudioDing ref={dingRef}></AudioDing>
-        {/* <CurrentImage /> */}
         {completedImages.map((image, index) => {
           // if(index == 0){
           //   return null;

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

@@ -113,7 +113,7 @@ export const useImageCreate = create<ImageCreateState>(
       use_cpu: false,
       use_full_precision: true,
       save_to_disk_path: "null",
-      use_face_correction: 'GFPGANv1.3',
+      use_face_correction: "GFPGANv1.3",
       use_upscale: "RealESRGAN_x4plus",
       show_only_filtered_image: true,
     } as ImageRequest,