persistent state and reduced unneeded boolean logic

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

@@ -1,4 +1,5 @@
-import React, {useRef, useEffect} from "react";
+// @ts-nocheck
+import React, { useRef, useEffect } from "react";
 
 // https://github.com/embiem/react-canvas-draw
 
@@ -6,9 +7,7 @@ type DrawImageProps = {
   imageData: string;
 };
 
-
+export default function DrawImage({ imageData }: DrawImageProps) {
-export default function DrawImage({imageData}: DrawImageProps) {
-
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   const draw = (ctx: CanvasRenderingContext2D) => {
@@ -19,8 +18,7 @@ export default function DrawImage({imageData}: DrawImageProps) {
   useEffect(() => {
     const canvas = canvasRef.current;
     if (canvas) {
-    
+      if (imageData) {
-      if(imageData){
         const ctx = canvas.getContext("2d");
         if (ctx) {
           const img = new Image();
@@ -29,37 +27,40 @@ export default function DrawImage({imageData}: DrawImageProps) {
           };
           img.src = imageData;
         }
-      }
+      } else {
-      else {
         const ctx = canvas.getContext("2d");
         if (ctx) {
           draw(ctx);
         }
       }
-    }
+    } else {
-    else {
       console.log("canvas is null");
     }
   }, [imageData, draw]);
 
-
+  const _handleMouseDown = (
-  const _handleMouseDown = (e: React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
+    e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
+  ) => {
     console.log("mouse down", e);
     const canvas = canvasRef.current;
     if (canvas) {
       const ctx = canvas.getContext("2d");
-      ctx.strokeStyle = '#ff0000';
+      ctx.strokeStyle = "#ff0000";
-      const {nativeEvent: {x, y}} = e;
+      const {
+        nativeEvent: { x, y },
+      } = e;
 
       console.log("x: " + x + " y: " + y);
 
-      ctx.moveTo(x,y);
+      ctx.moveTo(x, y);
-      ctx.lineTo(x+1,y+1);
+      ctx.lineTo(x + 1, y + 1);
       ctx.stroke();
     }
   };
 
-  const _handleMouseUp = (e: React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
+  const _handleMouseUp = (
+    e: React.MouseEvent<HTMLCanvasElement, MouseEvent>
+  ) => {
     console.log("mouse up");
     const canvas = canvasRef.current;
     if (canvas) {
@@ -67,25 +68,25 @@ export default function DrawImage({imageData}: DrawImageProps) {
       // if (ctx) {
       //   draw(ctx);
       // }
-      const {nativeEvent: {x, y}} = e;
+      const {
-
+        nativeEvent: { x, y },
-      ctx.moveTo(x,y);
+      } = e;
-      ctx.lineTo(x+1,y+1);
+      ctx.moveTo(x, y);
+      ctx.lineTo(x + 1, y + 1);
       ctx.stroke();
       ctx.closePath();
     }
   };
 
-
   return (
     <div>
-        <canvas
+      <canvas
-          ref={canvasRef}
+        ref={canvasRef}
-          width={512}
+        width={512}
-          height={512}
+        height={512}
-          onMouseDown={_handleMouseDown}
+        onMouseDown={_handleMouseDown}
-          onMouseUp={_handleMouseUp}
+        onMouseUp={_handleMouseUp}
-        ></canvas>
+      ></canvas>
     </div>
   );
-}
+}

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

@@ -1,35 +1,34 @@
-import { style } from '@vanilla-extract/css'
+import { style } from "@vanilla-extract/css";
 
 export const generatedImage = style({
-  position: 'relative',
+  position: "relative",
-  width: '512px',
+  width: "512px",
-  height: '512px',
+  height: "512px",
 });
 
 export const imageContain = style({
-  width:'512px',
+  width: "512px",
-  height:'512px',
+  height: "512px",
-  backgroundColor: 'black',
+  backgroundColor: "black",
-  display: 'flex',
+  display: "flex",
-  justifyContent: 'center',
+  justifyContent: "center",
-  alignItems: 'center',
+  alignItems: "center",
 });
 
 export const image = style({
-  width:'512px',
+  width: "512px",
-  height:'512px',
+  height: "512px",
-  objectFit: 'contain',
+  objectFit: "contain",
 });
 
 export const saveButton = style({
-  position: 'absolute',
+  position: "absolute",
-  bottom: '10px',
+  bottom: "10px",
-  left: '10px',
+  left: "10px",
 });
 
 export const useButton = style({
-  position: 'absolute',
+  position: "absolute",
-  bottom: '10px',
+  bottom: "10px",
-  right: '10px',
+  right: "10px",
 });
-

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

@@ -1,18 +1,14 @@
 import React, { useCallback } from "react";
 
-import {
+import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore";
-  ImageRequest,
-  useImageCreate,
-} from "../../../stores/imageCreateStore";
 
 import {
   generatedImage,
   imageContain,
   image,
   saveButton,
-  useButton,
+  useButton, //@ts-ignore
-} from //@ts-ignore
+} from "./generatedImage.css.ts";
-  "./generatedImage.css.ts";
 
 type GeneretaedImageProps = {
   imageData: string;

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

@@ -1,10 +1,8 @@
 import React from "react";
 import { useImageCreate } from "../../../../../stores/imageCreateStore";
 
-
 import { useCreateUI } from "../../creationPanelUIStore";
 
-
 import {
   MenuButton, //@ts-ignore
 } from "../advancedsettings.css.ts";

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

@@ -3,14 +3,12 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
 
 import { useCreateUI } from "../../creationPanelUIStore";
 
-
 import {
   MenuButton, //@ts-ignore
 } from "../advancedsettings.css.ts";
 
 export default function ImprovementSettings() {
   // these are conditionals that should be retired and inferred from the store
-  const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling());
   const isUsingFaceCorrection = useImageCreate((state) =>
     state.isUsingFaceCorrection()
   );
@@ -27,14 +25,14 @@ export default function ImprovementSettings() {
     (state) => state.toggleUseFaceCorrection
   );
 
-  const toggleUseUpscaling = useImageCreate(
-    (state) => state.toggleUseUpscaling
-  );
-
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
-  const improvementOpen = useCreateUI((state) => state.isOpenAdvImprovementSettings);
+  const improvementOpen = useCreateUI(
-  const toggleImprovementOpen = useCreateUI((state) => state.toggleAdvImprovementSettings);
+    (state) => state.isOpenAdvImprovementSettings
+  );
+  const toggleImprovementOpen = useCreateUI(
+    (state) => state.toggleAdvImprovementSettings
+  );
 
   return (
     <div>
@@ -59,21 +57,16 @@ export default function ImprovementSettings() {
           </div>
           <div>
             <label>
-              <input
-                type="checkbox"
-                checked={isUsingUpscaling}
-                onChange={(e) => toggleUseUpscaling()}
-              />
               Upscale the image to 4x resolution using
               <select
                 id="upscale_model"
                 name="upscale_model"
-                disabled={!isUsingUpscaling}
                 value={use_upscale}
                 onChange={(e) => {
                   setRequestOption("use_upscale", e.target.value);
                 }}
               >
+                <option value="">No Uscaling</option>
                 <option value="RealESRGAN_x4plus">RealESRGAN_x4plus</option>
                 <option value="RealESRGAN_x4plus_anime_6B">
                   RealESRGAN_x4plus_anime_6B

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

@@ -31,7 +31,6 @@ function SettingsList() {
 }
 
 export default function AdvancedSettings() {
-
   const advancedSettingsIsOpen = useCreateUI(
     (state) => state.isOpenAdvancedSettings
   );

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

@@ -47,7 +47,9 @@ export default function PropertySettings() {
   );
 
   const propertyOpen = useCreateUI((state) => state.isOpenAdvPropertySettings);
-  const togglePropertyOpen = useCreateUI((state) => state.toggleAdvPropertySettings);
+  const togglePropertyOpen = useCreateUI(
+    (state) => state.toggleAdvPropertySettings
+  );
 
   return (
     <div>

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

@@ -26,9 +26,9 @@ export default function WorkflowSettings() {
   );
 
   const workflowOpen = useCreateUI((state) => state.isOpenAdvWorkflowSettings);
-  const toggleWorkflowOpen = useCreateUI((state) => state.toggleAdvWorkflowSettings);
+  const toggleWorkflowOpen = useCreateUI(
-
+    (state) => state.toggleAdvWorkflowSettings
-
+  );
 
   return (
     <div>

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

@@ -9,7 +9,7 @@ export const MakeButtonStyle = style({
   padding: "8px",
   borderRadius: "5px",
 
-  ':disabled': {
+  ":disabled": {
     backgroundColor: "rgb(38, 77, 141, 0.5)",
   },
 });

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

@@ -1,11 +1,9 @@
 import create from "zustand";
 import produce from "immer";
-import { persist } from 'zustand/middleware'
+import { persist } from "zustand/middleware";
 import { devtools } from "zustand/middleware";
 
-
 export type ImageCreationUIOptions = {
-  
   isOpenAdvancedSettings: boolean;
   isOpenAdvImprovementSettings: boolean;
   isOpenAdvPropertySettings: boolean;
@@ -23,14 +21,12 @@ export type ImageCreationUIOptions = {
 
   toggleImageModifier: () => void;
   // addImageModifier: (modifier: string) => void;
-
 };
 
-
 export const useCreateUI = create<ImageCreationUIOptions>(
   //@ts-ignore
   persist(
-    (set, get ) => ({
+    (set, get) => ({
       isOpenAdvancedSettings: false,
       isOpenAdvImprovementSettings: false,
       isOpenAdvPropertySettings: false,
@@ -50,7 +46,8 @@ export const useCreateUI = create<ImageCreationUIOptions>(
       toggleAdvImprovementSettings: () => {
         set(
           produce((state) => {
-            state.isOpenAdvImprovementSettings = !state.isOpenAdvImprovementSettings;
+            state.isOpenAdvImprovementSettings =
+              !state.isOpenAdvImprovementSettings;
           })
         );
       },
@@ -63,7 +60,7 @@ export const useCreateUI = create<ImageCreationUIOptions>(
         );
       },
 
-      toggleAdvWorkflowSettings: () => { 
+      toggleAdvWorkflowSettings: () => {
         set(
           produce((state) => {
             state.isOpenAdvWorkflowSettings = !state.isOpenAdvWorkflowSettings;
@@ -86,10 +83,10 @@ export const useCreateUI = create<ImageCreationUIOptions>(
           })
         );
       },
-
+    }),
-  }),
+    {
-  {
+      name: "createUI",
-    name: 'createUI',
+      // getStorage: () => localStorage,
-    // getStorage: () => localStorage,
+    }
-  }
+  )
-));
+);

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

@@ -6,7 +6,6 @@ import { loadModifications } from "../../../../api";
 import { useImageCreate } from "../../../../stores/imageCreateStore";
 import { useCreateUI } from "../creationPanelUIStore";
 
-
 import ModifierTag from "../../../atoms/modifierTag";
 
 type ModifierListProps = {
@@ -14,7 +13,6 @@ type ModifierListProps = {
 };
 
 function ModifierList({ tags }: ModifierListProps) {
-
   return (
     <ul className="modifier-list">
       {tags.map((tag) => (
@@ -64,14 +62,11 @@ export default function ImageModifers() {
 
   console.log("allModifiers", allModifiers);
 
-  const imageModifierIsOpen = useCreateUI(
+  const imageModifierIsOpen = useCreateUI((state) => state.isOpenImageModifier);
-    (state) => state.isOpenImageModifier
-  );
   const toggleImageModifiersIsOpen = useCreateUI(
     (state) => state.toggleImageModifier
   );
 
-
   const handleClick = () => {
     toggleImageModifiersIsOpen();
   };

ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/modifiers.mock.ts

@@ -9,20 +9,10 @@ const Mockifiers = [
       "Doodle",
       "Dot Art",
       "Line Art",
-      "Sketch"
+      "Sketch",
-    ]
+    ],
-  ],
-  [
-    "Visual Style",
-    [
-      "2D",
-      "8-bit",
-      "16-bit",
-      "Anaglyph",
-      "Anime",
-      "CGI",
-    ]
   ],
+  ["Visual Style", ["2D", "8-bit", "16-bit", "Anaglyph", "Anime", "CGI"]],
 ];
 
-export default Mockifiers;
+export default Mockifiers;

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

@@ -1,33 +1,31 @@
-import { style } from '@vanilla-extract/css'
+import { style } from "@vanilla-extract/css";
 
 export const displayPanel = style({
-  padding: '10px',
+  padding: "10px",
   // width: '512px',
   // height: '512px',
 });
 
 export const displayContainer = style({
-  display: 'flex',
+  display: "flex",
-  flexDirection: 'row',
+  flexDirection: "row",
-  height: '100%',
+  height: "100%",
-  width: '100%',
+  width: "100%",
-  overflow: 'hidden',
+  overflow: "hidden",
 });
 
 export const CurrentDisplay = style({
-  width: '512px',
+  width: "512px",
-  height:'100%',
+  height: "100%",
 });
 
 export const previousImages = style({
-  marginLeft: '30px',
+  marginLeft: "30px",
-  display: 'flex',
+  display: "flex",
-  flex: 'auto',
+  flex: "auto",
-  flexWrap: 'wrap',
+  flexWrap: "wrap",
 });
 
 export const previousImage = style({
-  margin: '0 10px',
+  margin: "0 10px",
 });
-
-

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

@@ -10,16 +10,15 @@ import { doMakeImage, MakeImageKey } from "../../../api";
 import AudioDing from "./audioDing";
 
 import GeneratedImage from "../../molecules/generatedImage";
-import DrawImage from "../../molecules/drawImage";
+// import DrawImage from "../../molecules/drawImage";
 
 import {
   displayPanel,
   displayContainer,
   CurrentDisplay,
   previousImages,
-  previousImage
+  previousImage, //@ts-ignore
-} from //@ts-ignore
+} from "./displayPanel.css.ts";
-  "./displayPanel.css.ts";
 
 type CompletedImagesType = {
   id: string;
@@ -101,7 +100,6 @@ export default function DisplayPanel() {
       <AudioDing ref={dingRef}></AudioDing>
       {completedImages.length > 0 && (
         <div className={displayContainer}>
-
           <div className={CurrentDisplay}>
             {/* TODO Put the in painting controls here */}
             {/* <DrawImage imageData={completedImages[0].data}></DrawImage> */}
@@ -111,8 +109,6 @@ export default function DisplayPanel() {
               imageData={completedImages[0].data}
               metadata={completedImages[0].info}
             />
-
-
           </div>
 
           <div className={previousImages}>

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

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

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

@@ -24,8 +24,14 @@ function Editor() {
   // Get the original save directory
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
-  const { status: statusSave, data: dataSave } = useQuery(["SaveDir"], getSaveDirectory);
+  const { status: statusSave, data: dataSave } = useQuery(
-  const { status: statusMods, data: dataMoads } = useQuery(["modifications"], loadModifications);
+    ["SaveDir"],
+    getSaveDirectory
+  );
+  const { status: statusMods, data: dataMoads } = useQuery(
+    ["modifications"],
+    loadModifications
+  );
 
   const setAllModifiers = useImageCreate((state) => state.setAllModifiers);
 
@@ -38,8 +44,7 @@ function Editor() {
   useEffect(() => {
     if (statusMods === "success") {
       setAllModifiers(dataMoads);
-    }
+    } else if (statusMods === "error") {
-    else if (statusMods === "error") {
       // @ts-ignore
       setAllModifiers(Mockifiers);
     }

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

@@ -5,8 +5,8 @@ import { devtools } from "zustand/middleware";
 import { useRandomSeed } from "../utils";
 
 export type ImageCreationUiOptions = {
-  isCheckedUseUpscaling: boolean;
+  // isCheckedUseUpscaling: boolean;
-  isCheckUseFaceCorrection: boolean;
+  // isCheckUseFaceCorrection: boolean;
   isUseRandomSeed: boolean;
   isUseAutoSave: boolean;
   isSoundEnabled: boolean;
@@ -19,44 +19,44 @@ 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;
   use_full_precision: boolean;
   save_to_disk_path: null | string;
   use_face_correction: null | "GFPGANv1.3";
-  use_upscale: null | "RealESRGAN_x4plus" | "RealESRGAN_x4plus_anime_6B";
+  use_upscale: null | "RealESRGAN_x4plus" | "RealESRGAN_x4plus_anime_6B" | "";
   show_only_filtered_image: boolean;
   init_image: undefined | string;
   prompt_strength: undefined | number;
@@ -85,7 +85,7 @@ interface ImageCreateState {
 
   uiOptions: ImageCreationUiOptions;
   toggleUseUpscaling: () => void;
-  isUsingUpscaling: () => boolean;
+  // isUsingUpscaling: () => boolean;
   toggleUseFaceCorrection: () => void;
   isUsingFaceCorrection: () => boolean;
   toggleUseRandomSeed: () => void;
@@ -121,8 +121,17 @@ export const useImageCreate = create<ImageCreateState>(
       show_only_filtered_image: true,
     } as ImageRequest,
 
+    // selected tags
     tags: [] as string[],
 
+    uiOptions: {
+      // TODO proper persistence of all UI / user settings centrally somewhere?
+      // localStorage.getItem('ui:advancedSettingsIsOpen') === 'true',
+      isUseRandomSeed: true,
+      isUseAutoSave: false,
+      isSoundEnabled: false,
+    },
+
     allModifiers: [[[]]] as ModifiersOptionList,
 
     setParallelCount: (count: number) =>
@@ -152,7 +161,6 @@ export const useImageCreate = create<ImageCreateState>(
       );
     },
 
-
     toggleTag: (tag: string) => {
       set(
         produce((state) => {
@@ -194,70 +202,33 @@ export const useImageCreate = create<ImageCreateState>(
         // TODO check this
         request.save_to_disk_path = null;
       }
-      // if we arent using face correction clear the face correction
-      if (!state.uiOptions.isCheckUseFaceCorrection) {
-        request.use_face_correction = null;
-      }
 
+      // a bit of a hack. figure out what a clean value to pass to the server is
       // if we arent using upscaling clear the upscaling
-      if (!state.uiOptions.isCheckedUseUpscaling) {
+      if (request.use_upscale === "") {
         request.use_upscale = null;
       }
 
       return request;
     },
 
-    uiOptions: {
-      // TODO proper persistence of all UI / user settings centrally somewhere?
-      // localStorage.getItem('ui:advancedSettingsIsOpen') === 'true',
-
-      isCheckedUseUpscaling: false,
-      isCheckUseFaceCorrection: true,
-      isUseRandomSeed: true,
-      isUseAutoSave: false,
-      isSoundEnabled: false,
-    },
-
-
-    toggleUseUpscaling: () => {
-      set(
-        produce((state) => {
-          state.uiOptions.isCheckedUseUpscaling =
-            !state.uiOptions.isCheckedUseUpscaling;
-          state.requestOptions.use_upscale = state.uiOptions
-            .isCheckedUseUpscaling
-            ? "RealESRGAN_x4plus"
-            : undefined;
-          localStorage.setItem(
-            "ui:isCheckedUseUpscaling",
-            state.uiOptions.isCheckedUseUpscaling
-          );
-        })
-      );
-    },
-
-    isUsingUpscaling: () => {
-      return get().uiOptions.isCheckedUseUpscaling;
-    },
-
     toggleUseFaceCorrection: () => {
       set(
         produce((state) => {
-          state.uiOptions.isCheckUseFaceCorrection =
+          const isSeting =
-            !state.uiOptions.isCheckUseFaceCorrection;
+            typeof state.getValueForRequestKey("use_face_correction") ===
-          state.use_face_correction = state.uiOptions.isCheckUseFaceCorrection
+            "string"
-            ? "GFPGANv1.3"
+              ? null
-            : null;
+              : "GFPGANv1.3";
-          // localStorage.setItem(
+          state.requestOptions.use_face_correction = isSeting;
-          //   "ui:isCheckUseFaceCorrection",
-          //   state.uiOptions.isCheckUseFaceCorrection
-          // );
         })
       );
     },
 
     isUsingFaceCorrection: () => {
-      return get().uiOptions.isCheckUseFaceCorrection;
+      const isUsing =
+        typeof get().getValueForRequestKey("use_face_correction") === "string";
+      return isUsing;
     },
 
     toggleUseRandomSeed: () => {

ui/frontend/dist/index.css

@@ -1 +1 @@
-._1cjn8au0{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:400px 1fr;grid-template-rows:100px 1fr 50px;grid-template-areas:"header header header" "create display display" "create footer footer"}._1cjn8au1{grid-area:header}._1cjn8au2{grid-area:create;overflow:auto}._1cjn8au3{grid-area:display;overflow:auto}._1cjn8au4{grid-area:footer}@media screen and (max-width: 800px){._1cjn8au0{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 50px;grid-template-areas:"header" "create" "display" "footer"}}.starting{color:#f0ad4e}.error{color:#d9534f}.success{color:#5cb85c}.header-display{color:#fff;display:flex;align-items:center;justify-content:center}.status-display{margin-left:10px}._11d5x3d0{font-size:9pt;margin-bottom:5px;padding-left:10px;list-style-type:none}._11d5x3d1{padding-bottom:5px}._11d5x3d2{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer;padding:0;margin-bottom:10px}._11d5x3d2>h4{color:#e7ba71;margin-top:5px!important}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.cjcdm20{position:relative;width:100%;height:100%;padding:0 10px}._1how28i0{position:relative;width:100%}._1how28i0>*{margin-bottom:10px}._1how28i1>p{font-size:1.5em;font-weight:700;margin-bottom:10px}._1how28i1>textarea{font-size:1.2em;font-weight:700;font-family:Arial;width:100%;resize:vertical;height:100px}._1rn4m8a0{display:flex}._1rn4m8a1{margin-bottom:5px;display:block}._1rn4m8a2{display:none}._1rn4m8a3{background-color:#264d8d;font-size:1.2em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1rn4m8a4{margin-left:20px}._1rn4m8a5{position:absolute;transform:translate(-50%) translateY(-35%);background:black;color:#fff;border:2pt solid #ccc;padding:0;cursor:pointer;outline:inherit;border-radius:8pt;width:16pt;height:16pt;font-family:Verdana;font-size:8pt}._1hnlbmt0{width:100%;background-color:#264d8d;font-size:1.5em;font-weight:700;color:#fff;padding:8px;border-radius:5px}.generated-image,.image-contain{position:relative}#save-button{position:absolute;top:10px;left:10px}#use-button{position:absolute;top:10px;right:10px}.display-panel{padding:10px}#display-container{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}#previous-images{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}.previous-image{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}*{box-sizing:border-box}p,h3,h4{margin:0}textarea{margin:0;padding:0;border:none}
+._1qevocv0{position:relative;width:100%;height:100%;pointer-events:auto;display:grid;background-color:#202124;grid-template-columns:400px 1fr;grid-template-rows:100px 1fr 50px;grid-template-areas:"header header header" "create display display" "create footer footer"}._1qevocv1{grid-area:header}._1qevocv2{grid-area:create;overflow:auto}._1qevocv3{grid-area:display;overflow:auto}._1qevocv4{grid-area:footer}@media screen and (max-width: 800px){._1qevocv0{grid-template-columns:1fr;grid-template-rows:100px 1fr 1fr 50px;grid-template-areas:"header" "create" "display" "footer"}}.starting{color:#f0ad4e}.error{color:#d9534f}.success{color:#5cb85c}.header-display{color:#fff;display:flex;align-items:center;justify-content:center}.status-display{margin-left:10px}._11d5x3d0{font-size:9pt;margin-bottom:5px;padding-left:10px;list-style-type:none}._11d5x3d1{padding-bottom:5px}._11d5x3d2{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer;padding:0;margin-bottom:10px}._11d5x3d2>h4{color:#e7ba71;margin-top:5px!important}.create-layout{padding:10px}.panel-box-toggle-btn{display:block;width:100%;text-align:left;background-color:transparent;color:#fff;border:0 none;cursor:pointer}.selected-tags{margin:10px 0}.selected-tags ul{margin:0;padding:0;display:flex;flex-wrap:wrap}li{list-style:none}.modifier-list{display:flex;flex-wrap:wrap;margin:0;padding:0}.modifierTag{display:inline-block;padding:6px;background-color:#264d8d;color:#fff;border-radius:5px;margin:5px}.modifierTag.selected{background-color:#830b79}.modifierTag p{margin:0}input[type=file]{color:transparent}.cjcdm20{position:relative;width:100%;height:100%;padding:0 10px}._1how28i0{position:relative;width:100%}._1how28i0>*{margin-bottom:10px}._1how28i1>p{font-size:1.5em;font-weight:700;margin-bottom:10px}._1how28i1>textarea{font-size:1.2em;font-weight:700;font-family:Arial;width:100%;resize:vertical;height:100px}._1rn4m8a0{display:flex}._1rn4m8a1{margin-bottom:5px;display:block}._1rn4m8a2{display:none}._1rn4m8a3{background-color:#264d8d;font-size:1.2em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1rn4m8a4{margin-left:20px}._1rn4m8a5{position:absolute;transform:translate(-50%) translateY(-35%);background:black;color:#fff;border:2pt solid #ccc;padding:0;cursor:pointer;outline:inherit;border-radius:8pt;width:16pt;height:16pt;font-family:Verdana;font-size:8pt}._1hnlbmt0{width:100%;background-color:#264d8d;font-size:1.5em;font-weight:700;color:#fff;padding:8px;border-radius:5px}._1hnlbmt0:disabled{background-color:#264d8d80}._1yvg52n0{position:relative;width:512px;height:512px}._1yvg52n1{width:512px;height:512px;background-color:#000;display:flex;justify-content:center;align-items:center}._1yvg52n2{width:512px;height:512px;object-fit:contain}._1yvg52n3{position:absolute;bottom:10px;left:10px}._1yvg52n4{position:absolute;bottom:10px;right:10px}._688lcr0{padding:10px}._688lcr1{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}._688lcr2{width:512px;height:100%}._688lcr3{margin-left:30px;display:flex;flex:auto;flex-wrap:wrap}._688lcr4{margin:0 10px}.footer-display{color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}body{margin:0;min-width:320px;min-height:100vh}#root{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden}*{box-sizing:border-box}p,h3,h4{margin:0}textarea{margin:0;padding:0;border:none}