diff --git a/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts new file mode 100644 index 00000000..733d9f73 --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts @@ -0,0 +1,34 @@ +import { style, globalStyle } from "@vanilla-extract/css"; + +export const AdvancedSettingsList = style({ + // font-size: 9pt; + // margin-bottom: 5px; + // padding-left: 10px; + // list-style-type: none; + + fontSize: "9pt", + marginBottom: "5px", + paddingLeft: "10px", + listStyleType: "none", +}); + +export const AdvancedSettingItem = style({ + paddingBottom: "5px", +}); + +export const MenuButton = style({ + display: "block", + width: "100%", + textAlign: "left", + backgroundColor: "transparent", + color: "#fff", + border: "0 none", + cursor: "pointer", + padding: "0", + marginBottom: "10px", +}); + +globalStyle(`${MenuButton}> h4`, { + color: "#e7ba71", + marginTop: "5px !important", +}); 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 new file mode 100644 index 00000000..cfc6f5d7 --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/gpuSettings/index.tsx @@ -0,0 +1,70 @@ +import React, { useState } from "react"; +import { useImageCreate } from "../../../../../store/imageCreateStore"; + +import { + MenuButton, //@ts-ignore +} from "../advancedsettings.css.ts"; + +export default function GpuSettings() { + const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo")); + const use_cpu = useImageCreate((state) => + state.getValueForRequestKey("use_cpu") + ); + const use_full_precision = useImageCreate((state) => + state.getValueForRequestKey("use_full_precision") + ); + + const setRequestOption = useImageCreate((state) => state.setRequestOptions); + + const [gpuOpen, setGpuOpen] = useState(false); + + const toggleGpuOpen = () => { + setGpuOpen(!gpuOpen); + }; + + return ( +
+ + {gpuOpen && ( + <> +
+ +
+
+ +
+
+ +
+ + )} +
+ ); +} 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 new file mode 100644 index 00000000..24137c2d --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/improvementSettings/index.tsx @@ -0,0 +1,100 @@ +import React, { useState } from "react"; +import { useImageCreate } from "../../../../../store/imageCreateStore"; + +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() + ); + + const use_upscale = useImageCreate((state) => + state.getValueForRequestKey("use_upscale") + ); + + const show_only_filtered_image = useImageCreate((state) => + state.getValueForRequestKey("show_only_filtered_image") + ); + + const toggleUseFaceCorrection = useImageCreate( + (state) => state.toggleUseFaceCorrection + ); + + const toggleUseUpscaling = useImageCreate( + (state) => state.toggleUseUpscaling + ); + + const setRequestOption = useImageCreate((state) => state.setRequestOptions); + + const [improvementOpen, setImprovementOpen] = useState(true); + + const toggleImprovementOpen = () => { + setImprovementOpen(!improvementOpen); + }; + + return ( +
+ + {improvementOpen && ( + <> +
+ +
+
+ +
+
+ +
+ + )} +
+ ); +} 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 9b1aa5a0..5295d593 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,343 +1,34 @@ import React, { useEffect } from "react"; import { useImageCreate } from "../../../../store/imageCreateStore"; -// import "./advancedSettings.css"; +import { + AdvancedSettingsList, + AdvancedSettingItem, // @ts-ignore +} from "./advancedsettings.css.ts"; -// todo: move this someplace more global -const IMAGE_DIMENSIONS = [ - { value: 128, label: "128 (*)" }, - { value: 192, label: "192" }, - { value: 256, label: "256 (*)" }, - { value: 320, label: "320" }, - { value: 384, label: "384" }, - { value: 448, label: "448" }, - { value: 512, label: "512 (*)" }, - { value: 576, label: "576" }, - { value: 640, label: "640" }, - { value: 704, label: "704" }, - { value: 768, label: "768 (*)" }, - { value: 832, label: "832" }, - { value: 896, label: "896" }, - { value: 960, label: "960" }, - { value: 1024, label: "1024 (*)" }, -]; +import ImprovementSettings from "./improvementSettings"; +import PropertySettings from "./propertySettings"; +import WorkflowSettings from "./workflowSettings"; +import GpuSettings from "./gpuSettings"; function SettingsList() { - const parallelCount = useImageCreate((state) => state.parallelCount); - const setParallelCount = useImageCreate((state) => state.setParallelCount); - const setRequestOption = useImageCreate((state) => state.setRequestOptions); - - const toggleUseFaceCorrection = useImageCreate( - (state) => state.toggleUseFaceCorrection - ); - - const isUsingFaceCorrection = useImageCreate((state) => - state.isUsingFaceCorrection() - ); - - const toggleUseUpscaling = useImageCreate( - (state) => state.toggleUseUpscaling - ); - const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling()); - - const toggleUseRandomSeed = useImageCreate( - (state) => state.toggleUseRandomSeed - ); - const isRandomSeed = useImageCreate((state) => state.isRandomSeed()); - - const toggleUseAutoSave = useImageCreate((state) => state.toggleUseAutoSave); - const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave()); - - const toggleSoundEnabled = useImageCreate( - (state) => state.toggleSoundEnabled - ); - const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled()); - - const use_upscale = useImageCreate((state) => - state.getValueForRequestKey("use_upscale") - ); - const show_only_filtered_image = useImageCreate((state) => - state.getValueForRequestKey("show_only_filtered_image") - ); - const seed = useImageCreate((state) => state.getValueForRequestKey("seed")); - const width = useImageCreate((state) => state.getValueForRequestKey("width")); - const num_outputs = useImageCreate((state) => - state.getValueForRequestKey("num_outputs") - ); - const height = useImageCreate((state) => - state.getValueForRequestKey("height") - ); - const steps = useImageCreate((state) => - state.getValueForRequestKey("num_inference_steps") - ); - const guidance_scale = useImageCreate((state) => - state.getValueForRequestKey("guidance_scale") - ); - const prompt_strength = useImageCreate((state) => - state.getValueForRequestKey("prompt_strength") - ); - const save_to_disk_path = useImageCreate((state) => - state.getValueForRequestKey("save_to_disk_path") - ); - const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo")); - const use_cpu = useImageCreate((state) => - state.getValueForRequestKey("use_cpu") - ); - const use_full_precision = useImageCreate((state) => - state.getValueForRequestKey("use_full_precision") - ); - return ( -