From b21ec7a302141391eda3572388c0f4aff4b77247 Mon Sep 17 00:00:00 2001 From: caranicas Date: Fri, 16 Sep 2022 11:32:36 -0400 Subject: [PATCH] patching cors issue with modifcations --- ui/frontend/build_src/src/App.tsx | 4 +- ui/frontend/build_src/src/api/index.ts | 2 +- .../components/atoms/modifierTag/index.tsx | 2 +- .../src/components/layouts/Home/index.tsx | 49 - .../molecules/generatedImage/index.tsx | 4 +- .../advancedSettings/gpuSettings/index.tsx | 15 +- .../improvementSettings/index.tsx | 14 +- .../creationPanel/advancedSettings/index.tsx | 12 +- .../propertySettings/index.tsx | 10 +- .../workflowSettings/index.tsx | 13 +- .../basicCreation/activeTags/index.tsx | 2 +- .../creationPanel/basicCreation/index.tsx | 2 +- .../basicCreation/makeButton/index.tsx | 4 +- .../basicCreation/seedImage/index.tsx | 2 +- .../creationPanel/creationPanelUIStore.ts | 95 ++ .../creationPanel/imageModifiers/index.tsx | 32 +- .../imageModifiers/modifiers.mock.ts | 28 + .../organisms/displayPanel/index.tsx | 6 +- ui/frontend/build_src/src/main.tsx | 4 +- .../Beta => pages/Experimental}/index.tsx | 0 .../layouts => pages}/Home/home.css.ts | 0 .../build_src/src/pages/Home/index.tsx | 66 + .../layouts => pages}/Settings/index.tsx | 0 .../src/{store => stores}/imageCreateStore.ts | 111 +- .../{store => stores}/imageDisplayStore.ts | 2 - .../src/{store => stores}/imageQueueStore.ts | 0 ui/frontend/dist/index.html | 1250 ----------------- 27 files changed, 311 insertions(+), 1418 deletions(-) delete mode 100644 ui/frontend/build_src/src/components/layouts/Home/index.tsx create mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts create mode 100644 ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/modifiers.mock.ts rename ui/frontend/build_src/src/{components/layouts/Beta => pages/Experimental}/index.tsx (100%) rename ui/frontend/build_src/src/{components/layouts => pages}/Home/home.css.ts (100%) create mode 100644 ui/frontend/build_src/src/pages/Home/index.tsx rename ui/frontend/build_src/src/{components/layouts => pages}/Settings/index.tsx (100%) rename ui/frontend/build_src/src/{store => stores}/imageCreateStore.ts (86%) rename ui/frontend/build_src/src/{store => stores}/imageDisplayStore.ts (92%) rename ui/frontend/build_src/src/{store => stores}/imageQueueStore.ts (100%) diff --git a/ui/frontend/build_src/src/App.tsx b/ui/frontend/build_src/src/App.tsx index d56fe11a..eecf8a34 100644 --- a/ui/frontend/build_src/src/App.tsx +++ b/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(); diff --git a/ui/frontend/build_src/src/api/index.ts b/ui/frontend/build_src/src/api/index.ts index 624c03fc..4da3f7fe 100644 --- a/ui/frontend/build_src/src/api/index.ts +++ b/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 diff --git a/ui/frontend/build_src/src/components/atoms/modifierTag/index.tsx b/ui/frontend/build_src/src/components/atoms/modifierTag/index.tsx index df682add..3e378aa1 100644 --- a/ui/frontend/build_src/src/components/atoms/modifierTag/index.tsx +++ b/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; diff --git a/ui/frontend/build_src/src/components/layouts/Home/index.tsx b/ui/frontend/build_src/src/components/layouts/Home/index.tsx deleted file mode 100644 index c63bdac6..00000000 --- a/ui/frontend/build_src/src/components/layouts/Home/index.tsx +++ /dev/null @@ -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 ( -
-
- -
- -
- -
-
- -
-
- ); -} - -export default Editor; diff --git a/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx b/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx index 6b6db6e2..e70e3bc8 100644 --- a/ui/frontend/build_src/src/components/molecules/generatedImage/index.tsx +++ b/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; diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx index cfc6f5d7..ff1e3d99 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx +++ b/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 (
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx index 24137c2d..b508fc6c 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx +++ b/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 (
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx index 5295d593..79bc1def 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx +++ b/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 ( diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx index 826eaa61..e40be949 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/propertySettings/index.tsx +++ b/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 (
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx index 82cdc61d..a2560dbe 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx +++ b/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 (
diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/activeTags/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/activeTags/index.tsx index 9eb17e5c..61b3af7e 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/activeTags/index.tsx +++ b/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() { diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx index f9a09052..3b61f3c5 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/index.tsx +++ b/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, diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx index d4ffcbc0..b78921f9 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/makeButton/index.tsx +++ b/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"; diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx index 18fa4522..58aeddaf 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/basicCreation/seedImage/index.tsx +++ b/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 diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/creationPanelUIStore.ts new file mode 100644 index 00000000..239f2085 --- /dev/null +++ b/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( + //@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, + } +)); diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx index 46a1f1bc..88b1d5af 100644 --- a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/index.tsx +++ b/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 (
    {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 ); })} diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/modifiers.mock.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/imageModifiers/modifiers.mock.ts new file mode 100644 index 00000000..697ba904 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx b/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx index b752674c..ba428ef9 100644 --- a/ui/frontend/build_src/src/components/organisms/displayPanel/index.tsx +++ b/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; diff --git a/ui/frontend/build_src/src/main.tsx b/ui/frontend/build_src/src/main.tsx index 3a38f908..9b22e061 100644 --- a/ui/frontend/build_src/src/main.tsx +++ b/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"; diff --git a/ui/frontend/build_src/src/components/layouts/Beta/index.tsx b/ui/frontend/build_src/src/pages/Experimental/index.tsx similarity index 100% rename from ui/frontend/build_src/src/components/layouts/Beta/index.tsx rename to ui/frontend/build_src/src/pages/Experimental/index.tsx diff --git a/ui/frontend/build_src/src/components/layouts/Home/home.css.ts b/ui/frontend/build_src/src/pages/Home/home.css.ts similarity index 100% rename from ui/frontend/build_src/src/components/layouts/Home/home.css.ts rename to ui/frontend/build_src/src/pages/Home/home.css.ts diff --git a/ui/frontend/build_src/src/pages/Home/index.tsx b/ui/frontend/build_src/src/pages/Home/index.tsx new file mode 100644 index 00000000..6f6031f0 --- /dev/null +++ b/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 ( +
    +
    + +
    + +
    + +
    +
    + +
    +
    + ); +} + +export default Editor; diff --git a/ui/frontend/build_src/src/components/layouts/Settings/index.tsx b/ui/frontend/build_src/src/pages/Settings/index.tsx similarity index 100% rename from ui/frontend/build_src/src/components/layouts/Settings/index.tsx rename to ui/frontend/build_src/src/pages/Settings/index.tsx diff --git a/ui/frontend/build_src/src/store/imageCreateStore.ts b/ui/frontend/build_src/src/stores/imageCreateStore.ts similarity index 86% rename from ui/frontend/build_src/src/store/imageCreateStore.ts rename to ui/frontend/build_src/src/stores/imageCreateStore.ts index 3f24bab4..47c46c9c 100644 --- a/ui/frontend/build_src/src/store/imageCreateStore.ts +++ b/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; @@ -21,37 +19,37 @@ export type ImageRequest = { num_inference_steps: number; guidance_scale: number; width: - | 128 - | 192 - | 256 - | 320 - | 384 - | 448 - | 512 - | 576 - | 640 - | 704 - | 768 - | 832 - | 896 - | 960 - | 1024; + | 128 + | 192 + | 256 + | 320 + | 384 + | 448 + | 512 + | 576 + | 640 + | 704 + | 768 + | 832 + | 896 + | 960 + | 1024; height: - | 128 - | 192 - | 256 - | 320 - | 384 - | 448 - | 512 - | 576 - | 640 - | 704 - | 768 - | 832 - | 896 - | 960 - | 1024; + | 128 + | 192 + | 256 + | 320 + | 384 + | 448 + | 512 + | 576 + | 640 + | 704 + | 768 + | 832 + | 896 + | 960 + | 1024; // allow_nsfw: boolean; turbo: boolean; use_cpu: 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( tags: [] as string[], + allModifiers: [[[]]] as ModifiersOptionList, + setParallelCount: (count: number) => set( produce((state) => { @@ -139,6 +145,15 @@ export const useImageCreate = create( 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( 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( 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( diff --git a/ui/frontend/build_src/src/store/imageDisplayStore.ts b/ui/frontend/build_src/src/stores/imageDisplayStore.ts similarity index 92% rename from ui/frontend/build_src/src/store/imageDisplayStore.ts rename to ui/frontend/build_src/src/stores/imageDisplayStore.ts index d778b6e9..361d988b 100644 --- a/ui/frontend/build_src/src/store/imageDisplayStore.ts +++ b/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; currentImage: object | null; diff --git a/ui/frontend/build_src/src/store/imageQueueStore.ts b/ui/frontend/build_src/src/stores/imageQueueStore.ts similarity index 100% rename from ui/frontend/build_src/src/store/imageQueueStore.ts rename to ui/frontend/build_src/src/stores/imageQueueStore.ts diff --git a/ui/frontend/dist/index.html b/ui/frontend/dist/index.html index cdf8474c..5ba294d9 100644 --- a/ui/frontend/dist/index.html +++ b/ui/frontend/dist/index.html @@ -277,1255 +277,5 @@ transform: translateY(25%); } - - - - - - - - -