clean and pretty

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 res = await fetch(`${API_URL}/image`, {
     method: "POST",
     headers: {

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

@@ -4,10 +4,9 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
 import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
-  SettingItem // @ts-expect-error
+  SettingItem, // @ts-expect-error
 } from "../../../../../styles/shared.css.ts";
 
-
 import {
   MenuButton, // @ts-expect-error
 } from "../advancedsettings.css.ts";

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

@@ -4,7 +4,7 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
 import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
-  SettingItem // @ts-expect-error
+  SettingItem, // @ts-expect-error
 } from "../../../../../styles/shared.css.ts";
 import {
   MenuButton, // @ts-expect-error
@@ -43,7 +43,6 @@ export default function ImprovementSettings() {
   const [isFilteringDisabled, setIsFilteringDisabled] = useState(false);
   // should probably be a store selector
   useEffect(() => {
-
     // if either are true we arent disabled
     if (isUsingFaceCorrection || useUpscale) {
       setIsFilteringDisabled(false);

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

@@ -3,7 +3,7 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
 import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
-  SettingItem // @ts-expect-error
+  SettingItem, // @ts-expect-error
 } from "../../../../../styles/shared.css.ts";
 
 import {

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

@@ -4,7 +4,7 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
 import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
-  SettingItem // @ts-expect-error
+  SettingItem, // @ts-expect-error
 } from "../../../../../styles/shared.css.ts";
 
 import {

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

@@ -10,9 +10,8 @@ import {
   ImagerModifierGroups,
   ImageModifierGrouping,
   MenuButton,
-  ModifierListStyle
+  ModifierListStyle, //@ts-expect-error
-} from //@ts-expect-error
+} from "./imageModifiers.css.ts";
-  "./imageModifiers.css.ts";
 
 import { useImageCreate } from "../../../../stores/imageCreateStore";
 import { useCreateUI } from "../creationPanelUIStore";

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

@@ -74,7 +74,6 @@ const app = createGlobalTheme(":root", {
       Body: "1em",
       Caption: ".75em",
       Overline: ".5em",
-
     },
   },
   colors: colors,
@@ -113,7 +112,7 @@ export const darkTheme = createTheme(colors, {
     accentDimmed: "#7d6641", // muted orange
   },
 
-  link: '#0066cc', // blue
+  link: "#0066cc", // blue
   warning: "#f0ad4e",
   error: "#d9534f",
   success: "#5cb85c",
@@ -152,7 +151,7 @@ export const lightTheme = createTheme(colors, {
     accentDimmed: "#6B7280",
   },
 
-  link: '#0066cc', // blue
+  link: "#0066cc", // blue
   warning: "yellow",
   error: "red",
   success: "green",

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

@@ -18,11 +18,9 @@ export const completedImagesList = style({
   width: "100%",
   overflow: "auto",
   paddingLeft: vars.spacing.none,
-
 });
 
 globalStyle(`${completedImagesMain} li`, {
-
   position: "relative",
 });
 
@@ -34,7 +32,6 @@ globalStyle(`${completedImagesMain} > li:last-of-type`, {
   marginRight: 0,
 });
 
-
 export const imageContain = style({
   width: "206px",
   backgroundColor: "black",
@@ -48,8 +45,6 @@ export const imageContain = style({
   cursor: "pointer",
 });
 
-
-
 globalStyle(`${imageContain} img`, {
   width: "100%",
   objectFit: "contain",

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

@@ -30,11 +30,14 @@ export default function CompletedImages ({
     <div className={completedImagesMain}>
       {/* Adjust the dom do we dont do this check twice */}
       {images != null && images.length > 0 && (
-        <button className={RemoveButton} onClick={
+        <button
-          () => {
+          className={RemoveButton}
+          onClick={() => {
             removeImages();
-          }
+          }}
-        }>REMOVE</button>
+        >
+          REMOVE
+        </button>
       )}
       <ul className={completedImagesList}>
         {images != null &&
@@ -59,6 +62,5 @@ export default function CompletedImages ({
           })}
       </ul>
     </div>
-
   );
 }

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

@@ -1,3 +1,4 @@
+/* eslint-disable multiline-ternary */
 /* eslint-disable @typescript-eslint/naming-convention */
 import React from "react";
 import GeneratedImage from "../../../molecules/generatedImage";
@@ -13,7 +14,10 @@ interface CurrentDisplayProps {
   image: CompletedImagesType | null;
 }
 
-export default function CurrentDisplay({ isLoading, image }: CurrentDisplayProps) {
+export default function CurrentDisplay({
+  isLoading,
+  image,
+}: CurrentDisplayProps) {
   const { info, data } = image ?? {};
 
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
@@ -30,7 +34,6 @@ export default function CurrentDisplay({ isLoading, image }: CurrentDisplayProps
       height,
     } = info! as ImageRequest;
 
-
     // Most important information is the prompt
     let underscoreName = prompt.replace(/[^a-zA-Z0-9]/g, "_");
     underscoreName = underscoreName.substring(0, 100);
@@ -62,12 +65,12 @@ export default function CurrentDisplay({ isLoading, image }: CurrentDisplayProps
     setRequestOption("init_image", data);
   };
 
-
   return (
     <div className="current-display">
-      {isLoading
+      {isLoading ? (
-        ? <h4 className="loading">Loading...</h4>
+        <h4 className="loading">Loading...</h4>
-        : (image != null && (
+      ) : (
+        (image != null && (
           <div>
             <p> {info?.prompt}</p>
             <GeneratedImage imageData={data} metadata={info}></GeneratedImage>
@@ -76,8 +79,8 @@ export default function CurrentDisplay({ isLoading, image }: CurrentDisplayProps
               <button onClick={_handleUseAsInput}>Use as Input</button>
             </div>
           </div>
-        )) || <h4 className="no-image">Try Making a new image!</h4>}
+        )) || <h4 className="no-image">Try Making a new image!</h4>
-
+      )}
     </div>
   );
 }

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

@@ -29,7 +29,7 @@ export interface CompletedImagesType {
   info: ImageRequest;
 }
 
-const idDelim = '_batch';
+const idDelim = "_batch";
 
 export default function DisplayPanel() {
   const dingRef = useRef<HTMLAudioElement>(null);
@@ -51,14 +51,14 @@ export default function DisplayPanel() {
     [MakeImageKey, id],
     async () => await doMakeImage(options),
     {
-      enabled: isEnabled
+      enabled: isEnabled,
       // void 0 !== id,
     }
   );
 
   // update the enabled state when the id changes
   useEffect(() => {
-    setIsEnabled(void 0 !== id)
+    setIsEnabled(void 0 !== id);
   }, [id]);
 
   // helper for the loading state to be enabled aware
@@ -84,7 +84,6 @@ export default function DisplayPanel() {
     }
   }, [status, data, removeFirstInQueue, dingRef, isSoundEnabled]);
 
-
   /* COMPLETED IMAGES */
   const queryClient = useQueryClient();
   const [completedImages, setCompletedImages] = useState<CompletedImagesType[]>(
@@ -140,13 +139,14 @@ export default function DisplayPanel() {
     clearCachedIds();
   };
 
-
-
   return (
     <div className={displayPanel}>
       <AudioDing ref={dingRef}></AudioDing>
       <div className={displayContainer}>
-        <CurrentDisplay isLoading={isLoading} image={currentImage}></CurrentDisplay>
+        <CurrentDisplay
+          isLoading={isLoading}
+          image={currentImage}
+        ></CurrentDisplay>
       </div>
       <div className={previousImages}>
         <CompletedImages

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

@@ -3,7 +3,6 @@ import { style, globalStyle } from "@vanilla-extract/css";
 // @ts-ignore
 import { vars } from "../../../styles/theme/index.css.ts";
 
-
 export const FooterDisplayMain = style({
   color: vars.colors.text.normal,
   fontSize: vars.fonts.sizes.Caption,
@@ -13,7 +12,8 @@ export const FooterDisplayMain = style({
   // marginBottom: vars.spacing.medium,
   // TODO move this to the theme
   padding: vars.spacing.small,
-  boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)",
+  boxShadow:
+    "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)",
 });
 
 export const CoffeeButton = style({
@@ -46,7 +46,6 @@ globalStyle(`${FooterDisplayMain} p`, {
   margin: vars.spacing.min,
 });
 
-
 // .footer-display {
 //   color: #ffffff;
 //   display: flex;

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

@@ -2,9 +2,8 @@ import React from "react";
 
 import {
   FooterDisplayMain,
-  CoffeeButton
+  CoffeeButton, // @ts-ignore
-} from // @ts-ignore
+} from "./footerDisplay.css.ts";
-  "./footerDisplay.css.ts";
 
 import { API_URL } from "../../../api";
 

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

@@ -53,6 +53,5 @@ export const useImageQueue = create<ImageQueueState>((set, get) => ({
         state.completedImageIds = [];
       })
     );
-  }
+  },
-
 }));

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

@@ -26,7 +26,7 @@ globalStyle(`*`, {
 
 globalStyle(`button`, {
   fontSize: vars.fonts.sizes.Body,
-})
+});
 
 /** RESETS */
 globalStyle(`p, h1, h2, h3, h4, h5, h6, ul`, {
@@ -41,7 +41,6 @@ globalStyle(`h3`, {
 globalStyle(`h4, h5`, {
   fontSize: vars.fonts.sizes.SubSubheadline,
   fontFamily: vars.fonts.body,
-
 });
 
 globalStyle(`p, label`, {
@@ -54,6 +53,6 @@ globalStyle(`textarea`, {
   padding: 0,
   border: "none",
   fontSize: vars.fonts.sizes.Body,
-  fontWeight: 'bold',
+  fontWeight: "bold",
   fontFamily: vars.fonts.body,
 });

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

@@ -9,11 +9,10 @@ export const PanelBox = style({
   borderRadius: vars.trim.smallBorderRadius,
   marginBottom: vars.spacing.medium,
   // TODO move this to the theme
-  boxShadow: "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)",
+  boxShadow:
+    "0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15)",
 });
 
-
-
 globalStyle(`${PanelBox} .panel-box-toggle-btn`, {
   display: "block",
   width: "100%",

ui/frontend/build_src/src/styles/theme/index.css.ts

@@ -12,7 +12,6 @@ import {
  * Lots of these arent used yet, but once they are defined and useable then they can be set.
  */
 
-
 const colors = createThemeContract({
   brand: null,
   brandDimmed: null,
@@ -55,7 +54,7 @@ const colors = createThemeContract({
 const app = createGlobalTheme(":root", {
   spacing: {
     none: "0",
-    min: '2px',
+    min: "2px",
     small: "5px",
     medium: "10px",
     large: "25px",
@@ -76,7 +75,6 @@ const app = createGlobalTheme(":root", {
       Plain: "0.8em",
       Caption: ".75em",
       Overline: ".5em",
-
     },
   },
   colors,
@@ -115,7 +113,7 @@ export const darkTheme = createTheme(colors, {
     accentDimmed: "#7d6641", // muted orange
   },
 
-  link: '#0066cc', // blue
+  link: "#0066cc", // blue
   warning: "#f0ad4e",
   error: "#d9534f",
   success: "#5cb85c",
@@ -154,7 +152,7 @@ export const lightTheme = createTheme(colors, {
     accentDimmed: "#6B7280",
   },
 
-  link: '#0066cc', // blue
+  link: "#0066cc", // blue
   warning: "yellow",
   error: "red",
   success: "green",

ui/frontend/build_src/vite.config.ts

@@ -1,9 +1,9 @@
-import { defineConfig } from 'vite';
+import { defineConfig } from "vite";
-import eslint from 'vite-plugin-eslint';
+import eslint from "vite-plugin-eslint";
-import react from '@vitejs/plugin-react';
+import react from "@vitejs/plugin-react";
-import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 
-import path from 'path';
+import path from "path";
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {