patching cors issue with modifcations

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

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

ui/frontend/build_src/src/components/layouts/Home/home.css.ts

@@ -1,48 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const AppLayout = style({
-  position: "relative",
-  width: "100%",
-  height: "100%",
-  pointerEvents: "auto",
-  display: "grid",
-  backgroundColor: "rgb(32, 33, 36)",
-  gridTemplateColumns: "400px 1fr",
-  gridTemplateRows: "100px 1fr 50px",
-  gridTemplateAreas: `
-    "header header header"
-    "create display display"
-    "create footer footer"
-  `,
-
-  "@media": {
-    "screen and (max-width: 800px)": {
-      gridTemplateColumns: "1fr",
-      gridTemplateRows: "100px 1fr 1fr 50px",
-      gridTemplateAreas: `
-        "header"
-        "create"
-        "display"
-        "footer"
-      `,
-    },
-  },
-});
-
-export const HeaderLayout = style({
-  gridArea: "header",
-});
-
-export const CreateLayout = style({
-  gridArea: "create",
-  overflow: "auto",
-});
-
-export const DisplayLayout = style({
-  gridArea: "display",
-  overflow: "auto",
-});
-
-export const FooterLayout = style({
-  gridArea: "footer",
-});

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

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

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,
@@ -12,7 +12,7 @@ import {
   saveButton,
   useButton,
 } from //@ts-ignore
-"./generatedImage.css.ts";
+  "./generatedImage.css.ts";
 
 type GeneretaedImageProps = {
   imageData: string;

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";
 
@@ -19,7 +19,7 @@ import {
   previousImages,
   previousImage
 } from //@ts-ignore
-"./displayPanel.css.ts";
+  "./displayPanel.css.ts";
 
 type CompletedImagesType = {
   id: string;