loading and cache are better

ui/frontend/build_src/.eslintrc.cjs

@@ -35,6 +35,7 @@ module.exports = {
     yoda: ["off"],
     eqeqeq: ["off"],
     "spaced-comment": ["off"],
+    "padded-blocks": ["off"],
 
     // TS  things turned off for now
     "@typescript-eslint/ban-ts-comment": "off",

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

@@ -59,7 +59,6 @@ export const toggleBetaConfig = async (branch: string) => {
 
 export const MakeImageKey = "MakeImage";
 export const doMakeImage = async (reqBody: ImageRequest) => {
-  const { seed, num_outputs } = reqBody;
 
   const res = await fetch(`${API_URL}/image`, {
     method: "POST",

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

@@ -8,8 +8,8 @@ import {
 } from "./generatedImage.css.ts";
 
 interface GeneretaedImageProps {
-  imageData: string;
-  metadata: ImageRequest;
+  imageData: string | undefined;
+  metadata: ImageRequest | undefined;
   className?: string;
   // children: never[];
 }
@@ -21,7 +21,7 @@ export default function GeneratedImage({
 }: GeneretaedImageProps) {
   return (
     <div className={[generatedImageMain, className].join(" ")}>
-      <img className={image} src={imageData} alt={metadata.prompt} />
+      <img className={image} src={imageData} alt={metadata!.prompt} />
     </div>
   );
 }

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx

@@ -43,8 +43,6 @@ export default function ImprovementSettings() {
   const [isFilteringDisabled, setIsFilteringDisabled] = useState(false);
   // should probably be a store selector
   useEffect(() => {
-    console.log("isUsingUpscaling", isUsingUpscaling);
-    console.log("isUsingFaceCorrection", isUsingFaceCorrection);
 
     // if either are true we arent disabled
     if (isUsingFaceCorrection || use_upscale) {

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

@@ -10,4 +10,6 @@ const AudioDing = React.forwardRef((props, ref) => (
   </audio>
 ));
 
+AudioDing.displayName = "AudioDing";
+
 export default AudioDing;

ui/frontend/build_src/src/components/organisms/displayPanel/completedImages/completedImages.css.ts

@@ -4,15 +4,37 @@ import { style, globalStyle } from "@vanilla-extract/css";
 import { vars } from "../../../../styles/theme/index.css.ts";
 
 export const completedImagesMain = style({
+  height: "100%",
+  width: "100%",
+  display: "flex",
+  paddingBottom: vars.spacing.medium,
+});
+
+export const completedImagesList = style({
   display: "flex",
   flexDirection: "row",
   flexWrap: "nowrap",
   height: "100%",
   width: "100%",
   overflow: "auto",
-  paddingBottom: vars.spacing.medium,
+  paddingLeft: vars.spacing.none,
+
 });
 
+globalStyle(`${completedImagesMain} li`, {
+
+  position: "relative",
+});
+
+globalStyle(`${completedImagesMain} > li:first-of-type`, {
+  marginLeft: vars.spacing.medium,
+});
+
+globalStyle(`${completedImagesMain} > li:last-of-type`, {
+  marginRight: 0,
+});
+
+
 export const imageContain = style({
   width: "206px",
   backgroundColor: "black",
@@ -26,15 +48,18 @@ export const imageContain = style({
   cursor: "pointer",
 });
 
+
+
 globalStyle(`${imageContain} img`, {
   width: "100%",
   objectFit: "contain",
 });
 
-globalStyle(`${completedImagesMain} > ${imageContain}:first-of-type`, {
-  marginLeft: vars.spacing.medium,
-});
-
-globalStyle(`${imageContain} > ${imageContain}:last-of-type`, {
-  marginRight: 0,
-});
+export const RemoveButton = style({
+  marginLeft: vars.spacing.small,
+  backgroundColor: vars.colors.brand,
+  border: "0 none",
+  padding: vars.spacing.small,
+  cursor: "pointer",
+  borderRadius: vars.trim.borderRadiusSmall,
+});

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

@@ -4,17 +4,22 @@ import { CompletedImagesType } from "../index";
 
 import {
   completedImagesMain,
-  imageContain, // @ts-expect-error
+  completedImagesList,
+  imageContain,
+  RemoveButton,
+  // @ts-expect-error
 } from "./completedImages.css.ts";
 
 interface CurrentDisplayProps {
   images: CompletedImagesType[] | null;
   setCurrentDisplay: (image: CompletedImagesType) => void;
+  removeImages: () => void;
 }
 
 export default function CompletedImages({
   images,
   setCurrentDisplay,
+  removeImages,
 }: CurrentDisplayProps) {
   const _handleSetCurrentDisplay = (index: number) => {
     const image = images![index];
@@ -23,25 +28,37 @@ export default function CompletedImages({
 
   return (
     <div className={completedImagesMain}>
-      {images != null &&
-        images.map((image, index) => {
-          if (void 0 === image) {
-            console.warn(`image ${index} is undefined`);
-            return null;
+      {/* Adjust the dom do we dont do this check twice */}
+      {images != null && images.length > 0 && (
+        <button className={RemoveButton} onClick={
+          () => {
+            removeImages();
           }
+        }>REMOVE</button>
+      )}
+      <ul className={completedImagesList}>
+        {images != null &&
+          images.map((image, index) => {
+            if (void 0 === image) {
+              console.warn(`image ${index} is undefined`);
+              return null;
+            }
 
-          return (
-            <button
-              key={index}
-              className={imageContain}
-              onClick={() => {
-                _handleSetCurrentDisplay(index);
-              }}
-            >
-              <img src={image.data} alt={image.info.prompt} />
-            </button>
-          );
-        })}
+            return (
+              <li key={image.id}>
+                <button
+                  className={imageContain}
+                  onClick={() => {
+                    _handleSetCurrentDisplay(index);
+                  }}
+                >
+                  <img src={image.data} alt={image.info.prompt} />
+                </button>
+              </li>
+            );
+          })}
+      </ul>
     </div>
+
   );
 }

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

@@ -13,12 +13,10 @@ interface CurrentDisplayProps {
 }
 
 export default function CurrentDisplay({ isLoading, image }: CurrentDisplayProps) {
-  // @ts-ignore
-  const { info, data } = image;
+  const { info, data } = image ?? {};
 
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
-  console.log('current data', data);
-  console.log('current info', info);
+
   const createFileName = () => {
     const {
       prompt,
@@ -29,9 +27,7 @@ export default function CurrentDisplay({ isLoading, image }: CurrentDisplayProps
       use_upscale,
       width,
       height,
-    } = info;
-
-
+    } = info!;
 
 
     // Most important information is the prompt
@@ -81,7 +77,6 @@ export default function CurrentDisplay({ isLoading, image }: CurrentDisplayProps
           </div>
         )) || <h4 className="no-image">Try Making a new image!</h4>}
 
-      <div></div>
     </div>
   );
 }

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

@@ -29,22 +29,23 @@ export interface CompletedImagesType {
   info: ImageRequest;
 }
 
+const idDelim = '_batch';
+
 export default function DisplayPanel() {
   const dingRef = useRef<HTMLAudioElement>(null);
   const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
+
   // @ts-expect-error
   const { id, options } = useImageQueue((state) => state.firstInQueue());
   const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue);
+
   const [currentImage, setCurrentImage] = useState<CompletedImagesType | null>(
     null
   );
 
-
-
   const [isEnabled, setIsEnabled] = useState(false);
 
-  const [isLoading, setIsLoading] = useState(false);
-
+  const [isLoading, setIsLoading] = useState(true);
 
   const { status, data } = useQuery(
     [MakeImageKey, id],
@@ -54,11 +55,13 @@ export default function DisplayPanel() {
       // void 0 !== id,
     }
   );
+
   // update the enabled state when the id changes
   useEffect(() => {
     setIsEnabled(void 0 !== id)
   }, [id]);
 
+  // helper for the loading state to be enabled aware
   useEffect(() => {
     if (isEnabled && status === "loading") {
       setIsLoading(true);
@@ -67,9 +70,8 @@ export default function DisplayPanel() {
     }
   }, [isEnabled, status]);
 
-
+  // this is where there loading actually happens
   useEffect(() => {
-    console.log("status", status);
     // query is done
     if (status === "success") {
       // check to make sure that the image was created
@@ -82,17 +84,17 @@ export default function DisplayPanel() {
     }
   }, [status, data, removeFirstInQueue, dingRef, isSoundEnabled]);
 
+
   /* COMPLETED IMAGES */
   const queryClient = useQueryClient();
   const [completedImages, setCompletedImages] = useState<CompletedImagesType[]>(
     []
   );
+
   const completedIds = useImageQueue((state) => state.completedImageIds);
+  const clearCachedIds = useImageQueue((state) => state.clearCachedIds);
 
-  // const init_image = useImageCreate((state) =>
-  //   state.getValueForRequestKey("init_image")
-  // );
-
+  // this is where we generate the list of completed images
   useEffect(() => {
     const testReq = {} as ImageRequest;
     const completedQueries = completedIds.map((id) => {
@@ -107,10 +109,10 @@ export default function DisplayPanel() {
         .map((query, index) => {
           if (void 0 !== query) {
             // @ts-ignore
-            return query.output.map((data) => {
+            return query.output.map((data, index) => {
               // @ts-ignore
               return {
-                id: `${completedIds[index]}-${data.seed}`,
+                id: `${completedIds[index]}${idDelim}-${data.seed}-${data.index}`,
                 data: data.data,
                 // @ts-ignore
                 info: { ...query.request, seed: data.seed },
@@ -123,9 +125,6 @@ export default function DisplayPanel() {
         .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items
 
       setCompletedImages(temp);
-
-      console.log("temp", temp);
-
       setCurrentImage(temp[0] || null);
     } else {
       setCompletedImages([]);
@@ -133,9 +132,15 @@ export default function DisplayPanel() {
     }
   }, [setCompletedImages, setCurrentImage, queryClient, completedIds]);
 
-  useEffect(() => {
-    console.log("completedImages", currentImage);
-  }, [currentImage]);
+  // this is how we remove them
+  const removeImages = () => {
+    completedIds.forEach((id) => {
+      queryClient.removeQueries([MakeImageKey, id]);
+    });
+    clearCachedIds();
+  };
+
+
 
   return (
     <div className={displayPanel}>
@@ -145,6 +150,7 @@ export default function DisplayPanel() {
       </div>
       <div className={previousImages}>
         <CompletedImages
+          removeImages={removeImages}
           images={completedImages}
           setCurrentDisplay={setCurrentImage}
         ></CompletedImages>

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

@@ -11,6 +11,7 @@ interface ImageQueueState {
   hasQueuedImages: () => boolean;
   firstInQueue: () => ImageRequest | [];
   removeFirstInQueue: () => void;
+  clearCachedIds: () => void;
 }
 
 // figure out why TS is complaining about this
@@ -46,4 +47,12 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
       })
     );
   },
+  clearCachedIds: () => {
+    set(
+      produce((state) => {
+        state.completedImageIds = [];
+      })
+    );
+  }
+
 }));