patching cors issue with modifcations

ui/frontend/build_src/src/App.tsx

@@ -1,7 +1,7 @@
 import { ReactLocation, Router } from "@tanstack/react-location";
 
-import Home from "./components/layouts/Home";
-import Settings from "./components/layouts/Settings";
+import Home from "./pages/Home";
+import Settings from "./pages/Settings";
 
 const location = new ReactLocation();
 

ui/frontend/build_src/src/api/index.ts

@@ -2,7 +2,7 @@
  * basic server health
  */
 
-import type { ImageRequest } from "../store/imageCreateStore";
+import type { ImageRequest } from "../stores/imageCreateStore";
 
 // when we are on dev we want to specifiy 9000 as the port for the backend
 // when we are on prod we want be realtive to the current url

ui/frontend/build_src/src/components/atoms/modifierTag/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { useImageCreate } from "../../../store/imageCreateStore";
+import { useImageCreate } from "../../../stores/imageCreateStore";
 
 type ModifierTagProps = {
   name: string;

ui/frontend/build_src/src/components/layouts/Home/index.tsx

@@ -1,49 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import {
-  AppLayout,
-  HeaderLayout,
-  CreateLayout,
-  DisplayLayout,
-  FooterLayout, // @ts-ignore
-} from "./home.css.ts";
-
-import { useQuery } from "@tanstack/react-query";
-import { getSaveDirectory } from "../../../api";
-import { useImageCreate } from "../../../store/imageCreateStore";
-
-// Todo - import components here
-import HeaderDisplay from "../../organisms/headerDisplay";
-import CreationPanel from "../../organisms/creationPanel";
-import DisplayPanel from "../../organisms/displayPanel";
-import FooterDisplay from "../../organisms/footerDisplay";
-
-function Editor() {
-  // Get the original save directory
-  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
-  const { status, data } = useQuery(["SaveDir"], getSaveDirectory);
-  useEffect(() => {
-    if (status === "success") {
-      setRequestOption("save_to_disk_path", data);
-    }
-  }, [setRequestOption, status, data]);
-
-  return (
-    <div className={AppLayout}>
-      <header className={HeaderLayout}>
-        <HeaderDisplay></HeaderDisplay>
-      </header>
-      <nav className={CreateLayout}>
-        <CreationPanel></CreationPanel>
-      </nav>
-      <main className={DisplayLayout}>
-        <DisplayPanel></DisplayPanel>
-      </main>
-      <footer className={FooterLayout}>
-        <FooterDisplay></FooterDisplay>
-      </footer>
-    </div>
-  );
-}
-
-export default Editor;

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

@@ -3,7 +3,7 @@ import React, { useCallback } from "react";
 import {
   ImageRequest,
   useImageCreate,
-} from "../../../store/imageCreateStore";
+} from "../../../stores/imageCreateStore";
 
 import {
   generatedImage,

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

@@ -1,5 +1,9 @@
-import React, { useState } from "react";
-import { useImageCreate } from "../../../../../store/imageCreateStore";
+import React from "react";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+
+
+import { useCreateUI } from "../../creationPanelUIStore";
+
 
 import {
   MenuButton, //@ts-ignore
@@ -16,11 +20,8 @@ export default function GpuSettings() {
 
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
-  const [gpuOpen, setGpuOpen] = useState(false);
-
-  const toggleGpuOpen = () => {
-    setGpuOpen(!gpuOpen);
-  };
+  const gpuOpen = useCreateUI((state) => state.isOpenAdvGPUSettings);
+  const toggleGpuOpen = useCreateUI((state) => state.toggleAdvGPUSettings);
 
   return (
     <div>

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

@@ -1,5 +1,8 @@
-import React, { useState } from "react";
-import { useImageCreate } from "../../../../../store/imageCreateStore";
+import React from "react";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+
+import { useCreateUI } from "../../creationPanelUIStore";
+
 
 import {
   MenuButton, //@ts-ignore
@@ -30,11 +33,8 @@ export default function ImprovementSettings() {
 
   const setRequestOption = useImageCreate((state) => state.setRequestOptions);
 
-  const [improvementOpen, setImprovementOpen] = useState(true);
-
-  const toggleImprovementOpen = () => {
-    setImprovementOpen(!improvementOpen);
-  };
+  const improvementOpen = useCreateUI((state) => state.isOpenAdvImprovementSettings);
+  const toggleImprovementOpen = useCreateUI((state) => state.toggleAdvImprovementSettings);
 
   return (
     <div>

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

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
-import { useImageCreate } from "../../../../store/imageCreateStore";
+import { useCreateUI } from "../creationPanelUIStore";
+
 import {
   AdvancedSettingsList,
   AdvancedSettingItem, // @ts-ignore
@@ -30,12 +31,13 @@ function SettingsList() {
 }
 
 export default function AdvancedSettings() {
-  const advancedSettingsIsOpen = useImageCreate(
-    (state) => state.uiOptions.advancedSettingsIsOpen
+
+  const advancedSettingsIsOpen = useCreateUI(
+    (state) => state.isOpenAdvancedSettings
   );
 
-  const toggleAdvancedSettingsIsOpen = useImageCreate(
-    (state) => state.toggleAdvancedSettingsIsOpen
+  const toggleAdvancedSettingsIsOpen = useCreateUI(
+    (state) => state.toggleAdvancedSettings
   );
 
   return (

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

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { useImageCreate } from "../../../../../store/imageCreateStore";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
   MenuButton, //@ts-ignore
@@ -45,11 +46,8 @@ export default function PropertySettings() {
     state.getValueForRequestKey("height")
   );
 
-  const [propertyOpen, setPropertyOpen] = useState(true);
-
-  const togglePropertyOpen = () => {
-    setPropertyOpen(!propertyOpen);
-  };
+  const propertyOpen = useCreateUI((state) => state.isOpenAdvPropertySettings);
+  const togglePropertyOpen = useCreateUI((state) => state.toggleAdvPropertySettings);
 
   return (
     <div>

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

@@ -1,5 +1,7 @@
-import React, { useState } from "react";
-import { useImageCreate } from "../../../../../store/imageCreateStore";
+import React from "react";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+
+import { useCreateUI } from "../../creationPanelUIStore";
 
 import {
   MenuButton, //@ts-ignore
@@ -23,11 +25,10 @@ export default function WorkflowSettings() {
     (state) => state.toggleSoundEnabled
   );
 
-  const [workflowOpen, setWorkflowOpen] = useState(true);
+  const workflowOpen = useCreateUI((state) => state.isOpenAdvWorkflowSettings);
+  const toggleWorkflowOpen = useCreateUI((state) => state.toggleAdvWorkflowSettings);
+
 
-  const toggleWorkflowOpen = () => {
-    setWorkflowOpen(!workflowOpen);
-  };
 
   return (
     <div>

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { useImageCreate } from "../../../../../store/imageCreateStore";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
 import ModifierTag from "../../../../atoms/modifierTag";
 
 export default function ActiveTags() {

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

@@ -1,5 +1,5 @@
 import React, { ChangeEvent } from "react";
-import { useImageCreate } from "../../../../store/imageCreateStore";
+import { useImageCreate } from "../../../../stores/imageCreateStore";
 
 import {
   CreationBasicMain,

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 
-import { useImageCreate } from "../../../../../store/imageCreateStore";
-import { useImageQueue } from "../../../../../store/imageQueueStore";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
+import { useImageQueue } from "../../../../../stores/imageQueueStore";
 import { v4 as uuidv4 } from "uuid";
 
 import { useRandomSeed } from "../../../../../utils";

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

@@ -8,7 +8,7 @@ import {
   ImageFixer,
   XButton, // @ts-ignore
 } from "./seedImage.css.ts";
-import { useImageCreate } from "../../../../../store/imageCreateStore";
+import { useImageCreate } from "../../../../../stores/imageCreateStore";
 
 // TODO : figure out why this needs props to be passed in.. fixes a type error
 // when the component is used in the parent component

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

@@ -0,0 +1,95 @@
+import create from "zustand";
+import produce from "immer";
+import { persist } from 'zustand/middleware'
+import { devtools } from "zustand/middleware";
+
+
+export type ImageCreationUIOptions = {
+  
+  isOpenAdvancedSettings: boolean;
+  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;
+
+};
+
+
+export const useCreateUI = create<ImageCreationUIOptions>(
+  //@ts-ignore
+  persist(
+    (set, get ) => ({
+      isOpenAdvancedSettings: false,
+      isOpenAdvImprovementSettings: false,
+      isOpenAdvPropertySettings: false,
+      isOpenAdvWorkflowSettings: false,
+      isOpenAdvGPUSettings: false,
+      isOpenImageModifier: false,
+      imageMofidiersMap: {},
+
+      toggleAdvancedSettings: () => {
+        set(
+          produce((state) => {
+            state.isOpenAdvancedSettings = !state.isOpenAdvancedSettings;
+          })
+        );
+      },
+
+      toggleAdvImprovementSettings: () => {
+        set(
+          produce((state) => {
+            state.isOpenAdvImprovementSettings = !state.isOpenAdvImprovementSettings;
+          })
+        );
+      },
+
+      toggleAdvPropertySettings: () => {
+        set(
+          produce((state) => {
+            state.isOpenAdvPropertySettings = !state.isOpenAdvPropertySettings;
+          })
+        );
+      },
+
+      toggleAdvWorkflowSettings: () => { 
+        set(
+          produce((state) => {
+            state.isOpenAdvWorkflowSettings = !state.isOpenAdvWorkflowSettings;
+          })
+        );
+      },
+
+      toggleAdvGPUSettings: () => {
+        set(
+          produce((state) => {
+            state.isOpenAdvGPUSettings = !state.isOpenAdvGPUSettings;
+          })
+        );
+      },
+
+      toggleImageModifier: () => {
+        set(
+          produce((state) => {
+            state.isOpenImageModifier = !state.isOpenImageModifier;
+          })
+        );
+      },
+
+  }),
+  {
+    name: 'createUI',
+    // getStorage: () => localStorage,
+  }
+));

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

@@ -3,7 +3,9 @@ import React, { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { loadModifications } from "../../../../api";
 
-import { useImageCreate } from "../../../../store/imageCreateStore";
+import { useImageCreate } from "../../../../stores/imageCreateStore";
+import { useCreateUI } from "../creationPanelUIStore";
+
 
 import ModifierTag from "../../../atoms/modifierTag";
 
@@ -12,8 +14,7 @@ type ModifierListProps = {
 };
 
 function ModifierList({ tags }: ModifierListProps) {
-  // const setImageOptions = useImageCreate((state) => state.setImageOptions);
-  // const imageOptions = useImageCreate((state) => state.imageOptions);
+
   return (
     <ul className="modifier-list">
       {tags.map((tag) => (
@@ -50,15 +51,27 @@ function ModifierGrouping({ title, tags }: ModifierGroupingProps) {
 }
 
 export default function ImageModifers() {
-  const { status, data } = useQuery(["modifications"], loadModifications);
+  // const { status, data } = useQuery(["modifications"], loadModifications);
 
-  const imageModifierIsOpen = useImageCreate(
-    (state) => state.uiOptions.imageModifierIsOpen
+  // const imageModifierIsOpen = useImageCreate(
+  //   (state) => state.uiOptions.imageModifierIsOpen
+  // );
+  // const toggleImageModifiersIsOpen = useImageCreate(
+  //   (state) => state.toggleImageModifiersIsOpen
+  // );
+
+  const allModifiers = useImageCreate((state) => state.allModifiers);
+
+  console.log("allModifiers", allModifiers);
+
+  const imageModifierIsOpen = useCreateUI(
+    (state) => state.isOpenImageModifier
   );
-  const toggleImageModifiersIsOpen = useImageCreate(
-    (state) => state.toggleImageModifiersIsOpen
+  const toggleImageModifiersIsOpen = useCreateUI(
+    (state) => state.toggleImageModifier
   );
 
+
   const handleClick = () => {
     toggleImageModifiersIsOpen();
   };
@@ -77,8 +90,9 @@ export default function ImageModifers() {
       {/* @ts-ignore */}
       {imageModifierIsOpen &&
         // @ts-ignore
-        data.map((item, index) => {
+        allModifiers.map((item, index) => {
           return (
+            // @ts-ignore
             <ModifierGrouping key={item[0]} title={item[0]} tags={item[1]} />
           );
         })}

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

@@ -0,0 +1,28 @@
+const Mockifiers = [
+  [
+    "Drawing Style",
+    [
+      "Cel Shading",
+      "Children's Drawing",
+      "Crosshatch",
+      "Detailed and Intricate",
+      "Doodle",
+      "Dot Art",
+      "Line Art",
+      "Sketch"
+    ]
+  ],
+  [
+    "Visual Style",
+    [
+      "2D",
+      "8-bit",
+      "16-bit",
+      "Anaglyph",
+      "Anime",
+      "CGI",
+    ]
+  ],
+];
+
+export default Mockifiers;

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
-import { useImageQueue } from "../../../store/imageQueueStore";
+import { useImageQueue } from "../../../stores/imageQueueStore";
 
-import { ImageRequest, useImageCreate } from "../../../store/imageCreateStore";
+import { ImageRequest, useImageCreate } from "../../../stores/imageCreateStore";
 
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 

ui/frontend/build_src/src/main.tsx

@@ -6,9 +6,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 import { enableMapSet } from "immer";
-import Editor from "./components/layouts/Home";
+import Editor from "./pages/Home";
 
-import App from "./App";
+import App from "./app";
 
 import "./styles.css.ts";
 

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

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from "react";
+
+import {
+  AppLayout,
+  HeaderLayout,
+  CreateLayout,
+  DisplayLayout,
+  FooterLayout, // @ts-ignore
+} from "./home.css.ts";
+
+import { useQuery } from "@tanstack/react-query";
+import { getSaveDirectory, loadModifications } from "../../api";
+import Mockifiers from "../../components/organisms/creationPanel/imageModifiers/modifiers.mock";
+
+import { useImageCreate } from "../../stores/imageCreateStore";
+
+// Todo - import components here
+import HeaderDisplay from "../../components/organisms/headerDisplay";
+import CreationPanel from "../../components/organisms/creationPanel";
+import DisplayPanel from "../../components/organisms/displayPanel";
+import FooterDisplay from "../../components/organisms/footerDisplay";
+
+function Editor() {
+  // Get the original save directory
+  const setRequestOption = useImageCreate((state) => state.setRequestOptions);
+
+  const { status: statusSave, data: dataSave } = useQuery(["SaveDir"], getSaveDirectory);
+  const { status: statusMods, data: dataMoads } = useQuery(["modifications"], loadModifications);
+
+  const setAllModifiers = useImageCreate((state) => state.setAllModifiers);
+
+  useEffect(() => {
+    if (statusSave === "success") {
+      setRequestOption("save_to_disk_path", dataSave);
+    }
+  }, [setRequestOption, statusSave, dataSave]);
+
+  useEffect(() => {
+    if (statusMods === "success") {
+      setAllModifiers(dataMoads);
+    }
+    else if (statusMods === "error") {
+      // @ts-ignore
+      setAllModifiers(Mockifiers);
+    }
+  }, [setRequestOption, statusMods, dataMoads]);
+
+  return (
+    <div className={AppLayout}>
+      <header className={HeaderLayout}>
+        <HeaderDisplay></HeaderDisplay>
+      </header>
+      <nav className={CreateLayout}>
+        <CreationPanel></CreationPanel>
+      </nav>
+      <main className={DisplayLayout}>
+        <DisplayPanel></DisplayPanel>
+      </main>
+      <footer className={FooterLayout}>
+        <FooterDisplay></FooterDisplay>
+      </footer>
+    </div>
+  );
+}
+
+export default Editor;

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

@@ -5,8 +5,6 @@ import { devtools } from "zustand/middleware";
 import { useRandomSeed } from "../utils";
 
 export type ImageCreationUiOptions = {
-  advancedSettingsIsOpen: boolean;
-  imageModifierIsOpen: boolean;
   isCheckedUseUpscaling: boolean;
   isCheckUseFaceCorrection: boolean;
   isUseRandomSeed: boolean;
@@ -64,23 +62,29 @@ export type ImageRequest = {
   prompt_strength: undefined | number;
 };
 
+type ModifiersList = string[];
+type ModifiersOptions = string | ModifiersList[];
+type ModifiersOptionList = ModifiersOptions[];
+
+
 interface ImageCreateState {
   parallelCount: number;
   requestOptions: ImageRequest;
+  allModifiers: ModifiersOptionList;
   tags: string[];
 
   setParallelCount: (count: number) => void;
   setRequestOptions: (key: keyof ImageRequest, value: any) => void;
   getValueForRequestKey: (key: keyof ImageRequest) => any;
+  setAllModifiers: (modifiers: ModifiersOptionList) => void;
 
+  setModifierOptions: (key: string, value: any) => void;
   toggleTag: (tag: string) => void;
   hasTag: (tag: string) => boolean;
   selectedTags: () => string[];
   builtRequest: () => ImageRequest;
 
   uiOptions: ImageCreationUiOptions;
-  toggleAdvancedSettingsIsOpen: () => void;
-  toggleImageModifiersIsOpen: () => void;
   toggleUseUpscaling: () => void;
   isUsingUpscaling: () => boolean;
   toggleUseFaceCorrection: () => void;
@@ -120,6 +124,8 @@ export const useImageCreate = create<ImageCreateState>(
 
     tags: [] as string[],
 
+    allModifiers: [[[]]] as ModifiersOptionList,
+
     setParallelCount: (count: number) =>
       set(
         produce((state) => {
@@ -139,6 +145,15 @@ export const useImageCreate = create<ImageCreateState>(
       return get().requestOptions[key];
     },
 
+    setAllModifiers: (modifiers: ModifiersOptionList) => {
+      set(
+        produce((state) => {
+          state.allModifiers = modifiers;
+        })
+      );
+    },
+
+
     toggleTag: (tag: string) => {
       set(
         produce((state) => {
@@ -196,8 +211,7 @@ export const useImageCreate = create<ImageCreateState>(
     uiOptions: {
       // TODO proper persistence of all UI / user settings centrally somewhere?
       // localStorage.getItem('ui:advancedSettingsIsOpen') === 'true',
-      advancedSettingsIsOpen: false,
-      imageModifierIsOpen: false,
+
       isCheckedUseUpscaling: false,
       isCheckUseFaceCorrection: true,
       isUseRandomSeed: true,
@@ -205,31 +219,6 @@ export const useImageCreate = create<ImageCreateState>(
       isSoundEnabled: false,
     },
 
-    toggleAdvancedSettingsIsOpen: () => {
-      set(
-        produce((state) => {
-          state.uiOptions.advancedSettingsIsOpen =
-            !state.uiOptions.advancedSettingsIsOpen;
-          localStorage.setItem(
-            "ui:advancedSettingsIsOpen",
-            state.uiOptions.advancedSettingsIsOpen
-          );
-        })
-      );
-    },
-
-    toggleImageModifiersIsOpen: () => {
-      set(
-        produce((state) => {
-          state.uiOptions.imageModifierIsOpen =
-            !state.uiOptions.imageModifierIsOpen;
-          localStorage.setItem(
-            "ui:imageModifierIsOpen",
-            state.uiOptions.imageModifierIsOpen
-          );
-        })
-      );
-    },
 
     toggleUseUpscaling: () => {
       set(

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

@@ -1,8 +1,6 @@
 import create from "zustand";
 import produce from "immer";
 
-// import { devtools } from 'zustand/middleware'
-
 interface ImageDisplayState {
   imageOptions: Map<string, any>;
   currentImage: object | null;