tightened up center display

ui/frontend/build_src/src/components/molecules/generatedImage/generatedImage.css.ts

@@ -1,20 +1,11 @@
-import { style } from "@vanilla-extract/css";
+import { style, globalStyle } from "@vanilla-extract/css";
 
 export const generatedImageMain = style({
   position: "relative",
 });
 
-// export const imageContain = style({
+globalStyle(`${generatedImageMain} img`, {
-//   width: "512px",
+  width: "100%",
-//   height: "512px",
+  height: "100%",
-//   backgroundColor: "black",
+  objectFit: "contain",
-//   display: "flex",
-//   justifyContent: "center",
-//   alignItems: "center",
-// });
-
-export const image = style({
-  // width: "512px",
-  // height: "512px",
-  // objectFit: "contain",
 });

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

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

ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts

@@ -14,18 +14,18 @@ export const AdvancedSettingGrouping = style({
   marginTop: vars.spacing.medium,
 });
 
-export const MenuButton = style({
+// export const MenuButton = style({
-  display: "block",
+//   display: "block",
-  width: "100%",
+//   width: "100%",
-  textAlign: "left",
+//   textAlign: "left",
-  backgroundColor: "transparent",
+//   backgroundColor: "transparent",
-  color: vars.colors.text.normal,
+//   color: vars.colors.text.normal,
-  border: "0 none",
+//   border: "0 none",
-  cursor: "pointer",
+//   cursor: "pointer",
-  padding: "0",
+//   padding: "0",
-  marginBottom: vars.spacing.medium,
+//   marginBottom: vars.spacing.medium,
-});
+// });
 
-globalStyle(`${MenuButton}> h4`, {
+// globalStyle(`${MenuButton}> h4`, {
-  color: "#e7ba71",
+//   color: "#e7ba71",
-});
+// });

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

@@ -5,10 +5,8 @@ import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
   SettingItem,
-} from "../../../../../styles/shared.css";
-import {
   MenuButton,
-} from "../advancedsettings.css";
+} from "../../../../../styles/shared.css";
 
 import { useTranslation } from "react-i18next";
 

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

@@ -4,11 +4,10 @@ import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
   SettingItem,
+  MenuButton
 } from "../../../../../styles/shared.css";
 
-import {
+
-  MenuButton,
-} from "../advancedsettings.css";
 
 import { useTranslation } from "react-i18next";
 

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

@@ -4,12 +4,10 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
 import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
-  SettingItem
+  SettingItem,
+  MenuButton,
 } from "../../../../../styles/shared.css";
 
-import {
-  MenuButton,
-} from "../advancedsettings.css";
 
 import { useTranslation } from "react-i18next";
 

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

@@ -32,7 +32,7 @@ const idDelim = "_batch";
 export default function MakeButton() {
   const { t } = useTranslation();
 
-  const dingRef = useRef<HTMLAudioElement>(null);
+  const dingRef = useRef<HTMLAudioElement>();
 
   const parallelCount = useImageCreate((state) => state.parallelCount);
   const builtRequest = useImageCreate((state) => state.builtRequest);
@@ -58,8 +58,6 @@ export default function MakeButton() {
 
   const hackJson = (jsonStr: string, id: string) => {
 
-    // DONES't seem to be needed for the updated progress implementation
-
     try {
 
       const parsed = JSON.parse(jsonStr);
@@ -91,7 +89,6 @@ export default function MakeButton() {
     const decoder = new TextDecoder();
     let finalJSON = '';
 
-    //console.log('id', id);
     while (true) {
       const { done, value } = await reader.read();
       const jsonStr = decoder.decode(value);
@@ -151,10 +148,7 @@ export default function MakeButton() {
   }
 
   const startStream = async (id: string, req: ImageRequest) => {
-    // const streamReq = {
+
-    //   ...req,
-    //   stream_image_progress: true,
-    // };
 
     try {
       resetForFetching();

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/makeButton.css.ts

@@ -2,29 +2,9 @@ import { style } from "@vanilla-extract/css";
 
 import { vars } from "../../../../../styles/theme/index.css";
 
-export const MakeButtonStyle = style({
+import { BrandedButton } from "../../../../../styles/shared.css";
+
+export const MakeButtonStyle = style([BrandedButton, {
   width: "100%",
-  backgroundColor: vars.colors.brand,
   fontSize: vars.fonts.sizes.Headline,
-  fontWeight: "bold",
+}]);
-  color: vars.colors.text.normal,
-  padding: vars.spacing.small,
-  borderRadius: vars.trim.smallBorderRadius,
-
-  ":hover": {
-    backgroundColor: vars.colors.brandHover,
-  },
-
-  ":active": {
-    backgroundColor: vars.colors.brandActive,
-  },
-
-  ":disabled": {
-    backgroundColor: vars.colors.brandDimmed,
-    color: vars.colors.text.dimmed,
-  },
-
-  ":focus": {
-    outline: "none",
-  },
-});

ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/seedImage.css.ts

@@ -2,6 +2,8 @@ import { style } from "@vanilla-extract/css";
 
 import { vars } from "../../../../../styles/theme/index.css";
 
+import { BrandedButton } from "../../../../../styles/shared.css";
+
 export const ImageInputDisplay = style({
   display: "flex",
 });
@@ -15,27 +17,7 @@ export const ImageInput = style({
   display: "none",
 });
 
-export const ImageInputButton = style({
+export const ImageInputButton = style([BrandedButton]);
-  backgroundColor: vars.colors.brand,
-  fontSize: vars.fonts.sizes.Subheadline,
-  fontWeight: "bold",
-  color: vars.colors.text.normal,
-  padding: vars.spacing.small,
-  borderRadius: vars.trim.smallBorderRadius,
-
-  ":hover": {
-    backgroundColor: vars.colors.brandHover,
-  },
-
-  ":active": {
-    backgroundColor: vars.colors.brandActive,
-  },
-
-  ":disabled": {
-    backgroundColor: vars.colors.brandDimmed,
-    color: vars.colors.text.dimmed,
-  },
-});
 
 // this is needed to fix an issue with the image input text
 // when that is a drag an drop we can remove this

ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts

@@ -7,16 +7,12 @@ export interface ImageCreationUIOptions {
   isOpenAdvImprovementSettings: boolean;
   isOpenAdvPropertySettings: boolean;
   isOpenAdvWorkflowSettings: boolean;
-  isOpenAdvGPUSettings: boolean;
-
   isOpenImageModifier: boolean;
-  imageMofidiersMap: object;
 
   toggleAdvancedSettings: () => void;
   toggleAdvImprovementSettings: () => void;
   toggleAdvPropertySettings: () => void;
   toggleAdvWorkflowSettings: () => void;
-  toggleAdvGPUSettings: () => void;
 
   toggleImageModifier: () => void;
   // addImageModifier: (modifier: string) => void;
@@ -30,9 +26,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(
       isOpenAdvImprovementSettings: false,
       isOpenAdvPropertySettings: false,
       isOpenAdvWorkflowSettings: false,
-      isOpenAdvGPUSettings: false,
       isOpenImageModifier: false,
-      imageMofidiersMap: {},
 
       toggleAdvancedSettings: () => {
         set(
@@ -67,14 +61,6 @@ export const useCreateUI = create<ImageCreationUIOptions>(
         );
       },
 
-      toggleAdvGPUSettings: () => {
-        set(
-          produce((state: ImageCreationUIOptions) => {
-            state.isOpenAdvGPUSettings = !state.isOpenAdvGPUSettings;
-          })
-        );
-      },
-
       toggleImageModifier: () => {
         set(
           produce((state: ImageCreationUIOptions) => {

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/imageModifiers.css.ts

@@ -15,21 +15,21 @@ export const ImageModifierGrouping = style({
   marginTop: vars.spacing.medium,
 });
 
-export const MenuButton = style({
+// export const MenuButton = style({
-  display: "block",
+//   display: "block",
-  width: "100%",
+//   width: "100%",
-  textAlign: "left",
+//   textAlign: "left",
-  backgroundColor: "transparent",
+//   backgroundColor: "transparent",
-  color: vars.colors.text.normal,
+//   color: vars.colors.text.normal,
-  border: "0 none",
+//   border: "0 none",
-  cursor: "pointer",
+//   cursor: "pointer",
-  padding: "0",
+//   padding: "0",
-  marginBottom: vars.spacing.medium,
+//   marginBottom: vars.spacing.medium,
-});
+// });
 
-globalStyle(`${MenuButton}> h4`, {
+// globalStyle(`${MenuButton}> h4`, {
-  color: "#e7ba71",
+//   color: "#e7ba71",
-});
+// });
 
 export const ModifierListStyle = style({
   // marginBottom: vars.spacing.small,

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx

@@ -1,12 +1,14 @@
 import React, { useState } from "react";
 
 
-import { PanelBox } from "../../../../styles/shared.css";
+import {
+  PanelBox,
+  MenuButton,
+} from "../../../../styles/shared.css";
 
 import {
   ImagerModifierGroups,
   ImageModifierGrouping,
-  MenuButton,
   ModifierListStyle,
 } from "./imageModifiers.css";
 

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

@@ -26,26 +26,6 @@ export default function CompletedImages(
     clearDisplay();
   };
 
-  // const idDelim = "_batch";
-  //   if (completedQueries.length > 0) {
-  //     // map the completedImagesto a new array
-  //     // and then set the state
-  //     const temp = completedQueries
-  //       .map((query, index) => {
-  //         if (void 0 !== query) {
-  //           return query.output.map((data: ImageOutput, index: number) => {
-  //             return {
-  //               id: `${completedIds[index]}${idDelim}-${data.seed}-${index}`,
-  //               data: data.data,
-  //               info: { ...query.request, seed: data.seed },
-  //             };
-  //           });
-  //         }
-  //       })
-  //       .flat()
-  //       .reverse()
-  //       .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items
-
   return (
     <div className={completedImagesMain}>
       {/* Adjust the dom do we dont do this check twice */}

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

@@ -0,0 +1,12 @@
+import { style } from '@vanilla-extract/css'
+
+// handles all 3
+export const currentDisplayMain = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '100%',
+  width: '100%',
+  padding: '0 0 0 0',
+})

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

@@ -0,0 +1,41 @@
+import { style, globalStyle } from '@vanilla-extract/css'
+
+
+import { vars } from '../../../../../styles/theme/index.css'
+
+export const imageDisplayMain = style({
+  height: '100%',
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const imageDisplayContainer = style({
+  height: '100%',
+  width: '80%',
+  display: 'flex',
+  justifyContent: 'center',
+});
+
+export const imageDisplayCenter = style({
+  width: '100%',
+  maxWidth: '1000px',
+  position: 'relative',
+});
+
+export const imageDisplayContent = style({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+globalStyle(`${imageDisplayContent} > div`, {
+  marginBottom: vars.spacing.large,
+});
+
+globalStyle(`${imageDisplayContent} p`, {
+  marginBottom: vars.spacing.small,
+});
+
+globalStyle(`${imageDisplayContent} button`, {
+  marginRight: vars.spacing.medium,
+});

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

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+import React from "react";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+import { CompletedImagesType } from "../../../../../stores/imageDisplayStore";
+
+import GeneratedImage from "../../../../molecules/generatedImage";
+
+import {
+  imageDisplayMain,
+  imageDisplayContainer,
+  imageDisplayCenter,
+  imageDisplayContent,
+} from './imageDisplay.css';
+
+import {
+  BrandedButton
+} from '../../../../../styles/shared.css'
+
+export default function ImageDisplay({ info, data }: CompletedImagesType) {
+
+  const createFileName = () => {
+    const {
+      prompt,
+      seed,
+      num_inference_steps,
+      guidance_scale,
+      use_face_correction,
+      use_upscale,
+      width,
+      height,
+    } = info;
+
+    // Most important information is the prompt
+    let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_");
+    underscoreName = underscoreName.substring(0, 100);
+    // name and the top level metadata
+    let fileName = `${underscoreName}_Seed-${seed}_Steps-${num_inference_steps}_Guidance-${guidance_scale}`;
+    // Add the face correction and upscale
+    if (typeof use_face_correction == "string") {
+      fileName += `_FaceCorrection-${use_face_correction}`;
+    }
+    if (typeof use_upscale == "string") {
+      fileName += `_Upscale-${use_upscale}`;
+    }
+    // Add the width and height
+    fileName += `_${width}x${height}`;
+    // add the file extension
+    fileName += ".png";
+    // return fileName
+    return fileName;
+  };
+
+  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+  const _handleSave = () => {
+    const link = document.createElement("a");
+    link.download = createFileName();
+    link.href = data ?? "";
+    link.click();
+  };
+
+  const _handleUseAsInput = () => {
+    setRequestOption("init_image", data);
+  };
+
+  return (
+    <div className={imageDisplayMain}>
+
+      <div className={imageDisplayContainer}>
+
+        <div className={imageDisplayCenter}>
+
+          <div className={imageDisplayContent}>
+            <div>
+              <p> {info?.prompt}</p>
+              <div>
+                <button className={BrandedButton} onClick={_handleSave}>Save</button>
+                <button className={BrandedButton} onClick={_handleUseAsInput}>Use as Input</button>
+              </div>
+            </div>
+            <GeneratedImage imageData={data} metadata={info}></GeneratedImage>
+
+          </div>
+
+        </div>
+
+      </div>
+
+    </div>
+  );
+};

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

@@ -1,13 +1,15 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-
 import React, { useEffect, useState } from "react";
-import GeneratedImage from "../../../molecules/generatedImage";
+
-import { useImageCreate } from "../../../../stores/imageCreateStore";
 import { FetchingStates, useImageFetching } from "../../../../stores/imageFetchingStore";
-import { CompletedImagesType, useImageDisplay } from "../../../../stores/imageDisplayStore";
+import { useImageDisplay } from "../../../../stores/imageDisplayStore";
 
 import { API_URL } from "../../../../api";
-import { isGeneratorFunction } from "util/types";
+
+import {
+  currentDisplayMain,
+} from './currentDisplay.css';
+
+import ImageDisplay from "./imageDisplay";
 
 
 const IdleDisplay = () => {
@@ -65,64 +67,6 @@ const LoadingDisplay = () => {
   );
 };
 
-const ImageDisplay = ({ info, data }: CompletedImagesType) => {
-
-  const createFileName = () => {
-    const {
-      prompt,
-      seed,
-      num_inference_steps,
-      guidance_scale,
-      use_face_correction,
-      use_upscale,
-      width,
-      height,
-    } = info;
-
-    // Most important information is the prompt
-    let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_");
-    underscoreName = underscoreName.substring(0, 100);
-    // name and the top level metadata
-    let fileName = `${underscoreName}_Seed-${seed}_Steps-${num_inference_steps}_Guidance-${guidance_scale}`;
-    // Add the face correction and upscale
-    if (typeof use_face_correction == "string") {
-      fileName += `_FaceCorrection-${use_face_correction}`;
-    }
-    if (typeof use_upscale == "string") {
-      fileName += `_Upscale-${use_upscale}`;
-    }
-    // Add the width and height
-    fileName += `_${width}x${height}`;
-    // add the file extension
-    fileName += ".png";
-    // return fileName
-    return fileName;
-  };
-
-  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
-
-  const _handleSave = () => {
-    const link = document.createElement("a");
-    link.download = createFileName();
-    link.href = data ?? "";
-    link.click();
-  };
-
-  const _handleUseAsInput = () => {
-    setRequestOption("init_image", data);
-  };
-
-  return (
-    <div className="imageDisplay">
-      <p> {info?.prompt}</p>
-      <GeneratedImage imageData={data} metadata={info}></GeneratedImage>
-      <div>
-        <button onClick={_handleSave}>Save</button>
-        <button onClick={_handleUseAsInput}>Use as Input</button>
-      </div>
-    </div>
-  );
-};
 
 export default function CurrentDisplay() {
 
@@ -130,7 +74,7 @@ export default function CurrentDisplay() {
   const currentImage = useImageDisplay((state) => state.currentImage);
 
   return (
-    <div className="current-display">
+    <div className={currentDisplayMain}>
 
       {status === FetchingStates.IDLE && <IdleDisplay />}
 

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

@@ -1,17 +1,18 @@
 import { style } from "@vanilla-extract/css";
+import { vars } from "../../../styles/theme/index.css";
 
 export const displayPanel = style({
   height: "100%",
   display: "flex",
   flexDirection: "column",
+  paddingRight: vars.spacing.medium,
 });
 
 export const displayContainer = style({
   flexGrow: 1,
-  display: "flex",
+  overflow: 'auto',
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "center",
 });
 
-export const previousImages = style({});
+export const previousImages = style({
+  minHeight: '250px',
+});

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

@@ -10,31 +10,11 @@ import {
   previousImages,
 } from "./displayPanel.css";
 
-
-const idDelim = "_batch";
-
 export default function DisplayPanel() {
 
-  //   if (completedQueries.length > 0) {
-  //     // map the completedImagesto a new array
-  //     // and then set the state
-  //     const temp = completedQueries
-  //       .map((query, index) => {
-  //         if (void 0 !== query) {
-  //           return query.output.map((data: ImageOutput, index: number) => {
-  //             return {
-  //               id: `${completedIds[index]}${idDelim}-${data.seed}-${index}`,
-  //               data: data.data,
-  //               info: { ...query.request, seed: data.seed },
-  //             };
-  //           });
-  //         }
-  //       })
-  //       .flat()
-  //       .reverse()
-  //       .filter((item) => void 0 !== item) as CompletedImagesType[]; // remove undefined items
   return (
     <div className={displayPanel}>
+
       <div className={displayContainer}>
         <CurrentDisplay
         ></CurrentDisplay>

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

@@ -19,7 +19,7 @@ export default function StatusDisplay({ className }: { className?: string }) {
   const [statusMessage, setStatusMessage] = useState(startingMessage);
   const [statusClass, setStatusClass] = useState(StartingStatus);
 
-  const dingRef = useRef<HTMLAudioElement>(null);
+  const dingRef = useRef<HTMLAudioElement>();
 
   // but this will be moved to the status display when it is created
   const { status, data } = useQuery(["health"], healthPing, {

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

@@ -7,7 +7,6 @@ import { useRandomSeed } from "../utils";
 
 import { ImageRequest } from "../api";
 
-
 export interface ImageCreationUiOptions {
   isUseRandomSeed: boolean;
   isUseAutoSave: boolean;

ui/frontend/build_src/src/styles/shared.css.ts

@@ -40,3 +40,43 @@ export const IconFont = style({
   // reliant on font-awesome cdn
   fontFamily: "Font Awesome 6 Free"
 });
+
+
+export const MenuButton = style({
+  display: "block",
+  width: "100%",
+  textAlign: "left",
+  backgroundColor: "transparent",
+  color: vars.colors.text.normal,
+  border: "0 none",
+  cursor: "pointer",
+  padding: "0",
+  marginBottom: vars.spacing.medium,
+});
+
+globalStyle(`${MenuButton}> h4`, {
+  color: "#e7ba71",
+});
+
+
+export const BrandedButton = style({
+  backgroundColor: vars.colors.brand,
+  fontSize: vars.fonts.sizes.Subheadline,
+  fontWeight: "bold",
+  color: vars.colors.text.normal,
+  padding: vars.spacing.small,
+  borderRadius: vars.trim.smallBorderRadius,
+
+  ":hover": {
+    backgroundColor: vars.colors.brandHover,
+  },
+
+  ":active": {
+    backgroundColor: vars.colors.brandActive,
+  },
+
+  ":disabled": {
+    backgroundColor: vars.colors.brandDimmed,
+    color: vars.colors.text.dimmed,
+  },
+});