display clean

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

@@ -60,7 +60,6 @@ export default function DrawImage({
   const _handleMouseDown = (
     e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
   ) => {
-
     const {
       nativeEvent: { offsetX, offsetY },
     } = e;

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

@@ -4,15 +4,14 @@ import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore";
 
 import {
   generatedImageMain,
-  image,
+  image, //@ts-ignore
-} from //@ts-ignore
+} from "./generatedImage.css.ts";
-  "./generatedImage.css.ts";
 
 type GeneretaedImageProps = {
   imageData: string;
   metadata: ImageRequest;
   className?: string;
-  children: never[];
+  // children: never[];
 };
 
 export default function GeneratedImage({
@@ -20,7 +19,6 @@ export default function GeneratedImage({
   metadata,
   className,
 }: GeneretaedImageProps) {
-
   return (
     <div className={[generatedImageMain, className].join(" ")}>
       <img className={image} src={imageData} alt={metadata.prompt} />

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

@@ -1,23 +1,18 @@
-
-
 import { style, globalStyle } from "@vanilla-extract/css";
 
 // @ts-ignore
 import { vars } from "../../../../styles/theme/index.css.ts";
 
-
 export const completedImagesMain = style({
-  display: 'flex',
+  display: "flex",
-  flexDirection: 'row',
+  flexDirection: "row",
-  flexWrap: 'nowrap',
+  flexWrap: "nowrap",
-  height: '100%',
+  height: "100%",
-  width: '100%',
+  width: "100%",
-  overflow: 'auto',
+  overflow: "auto",
   paddingBottom: vars.spacing.medium,
-
 });
 
-
 export const imageContain = style({
   width: "112px",
   backgroundColor: "black",
@@ -25,14 +20,13 @@ export const imageContain = style({
   justifyContent: "center",
   alignItems: "center",
   flexShrink: 0,
-  border: '0 none',
+  border: "0 none",
-  padding: '0',
+  padding: "0",
 });
 
 globalStyle(`${imageContain} img`, {
   width: "100%",
   objectFit: "contain",
-
 });
 
 globalStyle(`${completedImagesMain} > ${imageContain}:first-of-type`, {

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

@@ -1,61 +1,58 @@
 import React from "react";
 
-
 import { CompletedImagesType } from "../index";
 
 type CurrentDisplayProps = {
   images: CompletedImagesType[] | null;
   setCurrentDisplay: (image: CompletedImagesType) => void;
-}
+};
-
 
 import {
   completedImagesMain,
-  imageContain
+  imageContain, //@ts-ignore
-} from //@ts-ignore
+} from "./completedImages.css.ts";
-  "./completedImages.css.ts";
-
-export default function CompletedImages({ images, setCurrentDisplay }: CurrentDisplayProps) {
-
 
+export default function CompletedImages({
+  images,
+  setCurrentDisplay,
+}: CurrentDisplayProps) {
   const _handleSetCurrentDisplay = (index: number) => {
-    debugger
+    debugger;
     const image = images![index];
     setCurrentDisplay(image);
   };
 
-
+  console.log("COMP{LETED IMAGES", images);
-  console.log('COMP{LETED IMAGES', images);
   return (
     <div className={completedImagesMain}>
-      {images && images.map((image, index) => {
+      {images &&
+        images.map((image, index) => {
+          // if (void 0 !== image) {
+          //   return null;
+          // }
 
-        // if (void 0 !== image) {
+          return (
-        //   return null;
+            // <div className={imageContain} key={index} value={index} onClick={() => {
-        // }
+            //   debugger;
+            //   const image = images[index];
+            //   _handleSetCurrentDisplay(image);
+            // }}>
+            //   <img src={image.data} alt={image.info.prompt} />
+            // </div>
 
-        return (
+            <button
-
+              key={index}
-          // <div className={imageContain} key={index} value={index} onClick={() => {
+              className={imageContain}
-          //   debugger;
+              onClick={() => {
-          //   const image = images[index];
+                console.log("CLICKED", index);
-          //   _handleSetCurrentDisplay(image);
+                debugger;
-          // }}>
+                _handleSetCurrentDisplay(index);
-          //   <img src={image.data} alt={image.info.prompt} />
+              }}
-          // </div>
+            >
-
+              <img src={image.data} alt={image.info.prompt} />
-          <button key={index} className={imageContain} onClick={
+            </button>
-            () => {
+          );
-
+        })}
-              console.log('CLICKED', index);
-              debugger;
-              _handleSetCurrentDisplay(index);
-            }
-          }>
-            <img src={image.data} alt={image.info.prompt} />
-          </button>
-        );
-      })}
     </div>
-  )
+  );
-};
+}

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

@@ -1,6 +1,9 @@
 import React from "react";
 import GeneratedImage from "../../../molecules/generatedImage";
-import { ImageRequest, useImageCreate } from "../../../../stores/imageCreateStore";
+import {
+  ImageRequest,
+  useImageCreate,
+} from "../../../../stores/imageCreateStore";
 
 import { CompletedImagesType } from "../index";
 
@@ -8,9 +11,7 @@ type CurrentDisplayProps = {
   image: CompletedImagesType | null;
 };
 
-
 export default function CurrentDisplay({ image }: CurrentDisplayProps) {
-
   const { info, data } = image || { info: null, data: null };
 
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
@@ -58,33 +59,20 @@ export default function CurrentDisplay({ image }: CurrentDisplayProps) {
     setRequestOption("init_image", data);
   };
 
-
-
   return (
     <div className="current-display">
-      {image &&
+      {image && (
         <div>
           <p> {info!.prompt}</p>
-          <GeneratedImage
+          <GeneratedImage imageData={data!} metadata={info!}></GeneratedImage>
-            imageData={data!}
-            metadata={info!}
-          >
-          </GeneratedImage>
 
           <div>
-            <button onClick={_handleSave}>
+            <button onClick={_handleSave}>Save</button>
-              Save
+            <button onClick={_handleUseAsInput}>Use as Input</button>
-            </button>
-            <button onClick={_handleUseAsInput}>
-              Use as Input
-            </button>
           </div>
         </div>
-      }
+      )}
-      <div>
+      <div></div>
-      </div>
     </div>
   );
 }
-
-

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

@@ -4,21 +4,19 @@ import { style } from "@vanilla-extract/css";
 import { vars } from "../../../styles/theme/index.css.ts";
 
 export const displayPanel = style({
-  height: '100%',
+  height: "100%",
-  display: 'flex',
+  display: "flex",
-  flexDirection: 'column',
+  flexDirection: "column",
 });
 
 export const displayContainer = style({
-
   flexGrow: 1,
-  display: 'flex',
+  display: "flex",
-  flexDirection: 'column',
+  flexDirection: "column",
-  justifyContent: 'center',
+  justifyContent: "center",
-  alignItems: 'center',
+  alignItems: "center",
-
 });
 
 export const previousImages = style({
-  height: '150px',
+  height: "150px",
 });

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

@@ -12,7 +12,6 @@ import AudioDing from "./audioDing";
 // import GeneratedImage from "../../molecules/generatedImage";
 // import DrawImage from "../../molecules/drawImage";
 
-
 import CurrentDisplay from "./currentDisplay";
 import CompletedImages from "./completedImages";
 
@@ -31,13 +30,14 @@ export type CompletedImagesType = {
 };
 
 export default function DisplayPanel() {
-
   const dingRef = useRef<HTMLAudioElement>(null);
   const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
   // @ts-ignore
   const { id, options } = useImageQueue((state) => state.firstInQueue());
   const removeFirstInQueue = useImageQueue((state) => state.removeFirstInQueue);
-  const [currentImage, setCurrentImage] = useState<CompletedImagesType | null>(null);
+  const [currentImage, setCurrentImage] = useState<CompletedImagesType | null>(
+    null
+  );
 
   const { status, data } = useQuery(
     [MakeImageKey, id],
@@ -113,9 +113,11 @@ export default function DisplayPanel() {
         <CurrentDisplay image={currentImage}></CurrentDisplay>
       </div>
       <div className={previousImages}>
-        <CompletedImages images={completedImages} setCurrentDisplay={setCurrentImage}></CompletedImages>
+        <CompletedImages
+          images={completedImages}
+          setCurrentDisplay={setCurrentImage}
+        ></CompletedImages>
       </div>
     </div>
   );
 }
-

ui/frontend/build_src/vite.config.ts

@@ -5,17 +5,14 @@ import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 import path from "path";
 // https://vitejs.dev/config/
 export default defineConfig({
-
   resolve: {
     alias: {
       // TODO figure out why vs code complains about this even though it works
       "@stores": path.resolve(__dirname, "./src/stores"),
       // TODO - add more aliases
-
     },
   },
 
-
   plugins: [
     react(),
     vanillaExtractPlugin({
@@ -23,7 +20,6 @@ export default defineConfig({
     }),
   ],
 
-
   server: {
     port: 9001,
   },