clean and pretty

ui/frontend/build_src/src/App.tsx

@@ -7,7 +7,7 @@ import { darkTheme, lightTheme } from "./styles/theme/index.css.ts";
 import "./Translation/config";
 const location = new ReactLocation();
 
-function App () {
+function App() {
   // just check for the theme one 1 time
 
   // var { matches } = window.matchMedia('(prefers-color-scheme: dark)')

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/atoms/modifierTag/index.tsx

@@ -5,7 +5,7 @@ interface ModifierTagProps {
   name: string;
 }
 
-export default function ModifierTag ({ name }: ModifierTagProps) {
+export default function ModifierTag({ name }: ModifierTagProps) {
   const hasTag = useImageCreate((state) => state.hasTag(name))
     ? "selected"
     : "";

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

@@ -16,7 +16,7 @@ interface DrawImageProps {
   isErasing: boolean;
 }
 
-export default function DrawImage ({
+export default function DrawImage({
   imageData,
   brushSize,
   brushShape,

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

@@ -14,7 +14,7 @@ interface GeneretaedImageProps {
   // children: never[];
 }
 
-export default function GeneratedImage ({
+export default function GeneratedImage({
   imageData,
   metadata,
   className,

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/index.tsx

@@ -16,7 +16,7 @@ import GpuSettings from "./gpuSettings";
 
 import BetaMode from "../../../molecules/betaMode";
 
-function SettingsList () {
+function SettingsList() {
   return (
     <ul className={AdvancedSettingsList}>
       <li className={AdvancedSettingGrouping}>
@@ -39,7 +39,7 @@ function SettingsList () {
   );
 }
 
-export default function AdvancedSettings () {
+export default function AdvancedSettings() {
   const advancedSettingsIsOpen = useCreateUI(
     (state) => state.isOpenAdvancedSettings
   );

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/basicCreation/activeTags/index.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { useImageCreate } from "../../../../../stores/imageCreateStore";
 import ModifierTag from "../../../../atoms/modifierTag";
 
-export default function ActiveTags () {
+export default function ActiveTags() {
   const selectedtags = useImageCreate((state) => state.selectedTags());
   return (
     <div className="selected-tags">

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

@@ -10,7 +10,7 @@ import SeedImage from "./seedImage";
 import ActiveTags from "./activeTags";
 import MakeButton from "./makeButton";
 
-export default function BasicCreation () {
+export default function BasicCreation() {
   const promptText = useImageCreate((state) =>
     state.getValueForRequestKey("prompt")
   );

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

@@ -42,4 +42,4 @@ export const ModifierListStyle = style({
 
 globalStyle(`${ModifierListStyle} li`, {
   margin: 0,
-});
+});

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";
@@ -23,7 +22,7 @@ interface ModifierListProps {
   tags: string[];
 }
 
-function ModifierList ({ tags }: ModifierListProps) {
+function ModifierList({ tags }: ModifierListProps) {
   return (
     <ul className={ModifierListStyle}>
       {tags.map((tag) => (
@@ -40,7 +39,7 @@ interface ModifierGroupingProps {
   tags: string[];
 }
 
-function ModifierGrouping ({ title, tags }: ModifierGroupingProps) {
+function ModifierGrouping({ title, tags }: ModifierGroupingProps) {
   // doing this localy for now, but could move to a store
   // and persist if we wanted to
   const [isExpanded, setIsExpanded] = useState(false);
@@ -59,7 +58,7 @@ function ModifierGrouping ({ title, tags }: ModifierGroupingProps) {
   );
 }
 
-export default function ImageModifers () {
+export default function ImageModifers() {
   const allModifiers = useImageCreate((state) => state.allModifiers);
 
   const imageModifierIsOpen = useCreateUI((state) => state.isOpenImageModifier);

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/creationPanel/index.tsx

@@ -18,7 +18,7 @@ import {
 
 import BasicCreation from "./basicCreation";
 
-export default function CreationPanel () {
+export default function CreationPanel() {
   const isInPaintingMode = useImageCreate((state) => state.isInpainting);
   return (
     <>

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",
@@ -62,4 +57,4 @@ export const RemoveButton = style({
   padding: vars.spacing.small,
   cursor: "pointer",
   borderRadius: vars.trim.borderRadiusSmall,
-});
+});

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

@@ -16,7 +16,7 @@ interface CurrentDisplayProps {
   removeImages: () => void;
 }
 
-export default function CompletedImages ({
+export default function CompletedImages({
   images,
   setCurrentDisplay,
   removeImages,
@@ -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;
@@ -58,4 +57,4 @@ globalStyle(`${FooterDisplayMain} p`, {
 // #coffeeButton {
 //   height: 23px;
 //   transform: translateY(25%);
-// }
+// }

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

@@ -2,13 +2,12 @@ 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";
 
-export default function FooterDisplay () {
+export default function FooterDisplay() {
   return (
     <div className={FooterDisplayMain}>
       <p>

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

@@ -13,7 +13,7 @@ const startingMessage = "Stable Diffusion is starting...";
 const successMessage = "Stable Diffusion is ready to use!";
 const errorMessage = "Stable Diffusion is not running!";
 
-export default function StatusDisplay ({ className }: { className?: string }) {
+export default function StatusDisplay({ className }: { className?: string }) {
   const [statusMessage, setStatusMessage] = useState(startingMessage);
   const [statusClass, setStatusClass] = useState(StartingStatus);
 

ui/frontend/build_src/src/pages/Experimental/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function Beta () {
+export default function Beta() {
   return (
     <div>
       <h1>Beta</h1>

ui/frontend/build_src/src/pages/Home/index.tsx

@@ -20,7 +20,7 @@ import CreationPanel from "../../components/organisms/creationPanel";
 import DisplayPanel from "../../components/organisms/displayPanel";
 import FooterDisplay from "../../components/organisms/footerDisplay";
 
-function Home ({ className }: { className: any }) {
+function Home({ className }: { className: any }) {
   // Get the original save directory
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 

ui/frontend/build_src/src/pages/Settings/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-export default function Settings ({ className }: { className: any }) {
+export default function Settings({ className }: { className: any }) {
   return (
     <div>
       <h1>Settings</h1>

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

@@ -17,37 +17,37 @@ export type ImageRequest = {
   num_inference_steps: number;
   guidance_scale: number;
   width:
-  | 128
+    | 128
-  | 192
+    | 192
-  | 256
+    | 256
-  | 320
+    | 320
-  | 384
+    | 384
-  | 448
+    | 448
-  | 512
+    | 512
-  | 576
+    | 576
-  | 640
+    | 640
-  | 704
+    | 704
-  | 768
+    | 768
-  | 832
+    | 832
-  | 896
+    | 896
-  | 960
+    | 960
-  | 1024;
+    | 1024;
   height:
-  | 128
+    | 128
-  | 192
+    | 192
-  | 256
+    | 256
-  | 320
+    | 320
-  | 384
+    | 384
-  | 448
+    | 448
-  | 512
+    | 512
-  | 576
+    | 576
-  | 640
+    | 640
-  | 704
+    | 704
-  | 768
+    | 768
-  | 832
+    | 832
-  | 896
+    | 896
-  | 960
+    | 960
-  | 1024;
+    | 1024;
   // allow_nsfw: boolean;
   turbo: boolean;
   use_cpu: boolean;
@@ -235,7 +235,7 @@ export const useImageCreate = create<ImageCreateState>(
         produce((state) => {
           const isSeting =
             typeof state.getValueForRequestKey("use_face_correction") ===
-              "string"
+            "string"
               ? null
               : "GFPGANv1.3";
           state.requestOptions.use_face_correction = isSeting;

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: {