diff --git a/ui/frontend/build_src/index.html b/ui/frontend/build_src/index.html index 7788cf3f..7223622c 100644 --- a/ui/frontend/build_src/index.html +++ b/ui/frontend/build_src/index.html @@ -3,7 +3,10 @@ + + + Stable Diffusion UI diff --git a/ui/frontend/build_src/package-lock.json b/ui/frontend/build_src/package-lock.json index b6934b28..99be5ccb 100644 --- a/ui/frontend/build_src/package-lock.json +++ b/ui/frontend/build_src/package-lock.json @@ -8,6 +8,7 @@ "name": "react-ts", "version": "0.0.0", "dependencies": { + "@headlessui/react": "^1.7.2", "@tanstack/react-location": "^3.7.4", "@tanstack/react-query": "^4.2.3", "@tanstack/react-query-devtools": "^4.2.3", @@ -593,6 +594,18 @@ "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", "dev": true }, + "node_modules/@headlessui/react": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.2.tgz", + "integrity": "sha512-snLv2lxwsf2HNTOBNgHYdvoYZ3ChJE8QszPi1d/hl9js8KrFrUulTaQBfSyPbJP5BybVreWh9DxCgz9S0Z6hKQ==", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.10.4", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz", @@ -5288,6 +5301,12 @@ } } }, + "@headlessui/react": { + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.2.tgz", + "integrity": "sha512-snLv2lxwsf2HNTOBNgHYdvoYZ3ChJE8QszPi1d/hl9js8KrFrUulTaQBfSyPbJP5BybVreWh9DxCgz9S0Z6hKQ==", + "requires": {} + }, "@humanwhocodes/config-array": { "version": "0.10.4", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz", diff --git a/ui/frontend/build_src/package.json b/ui/frontend/build_src/package.json index dedc9a18..af627228 100644 --- a/ui/frontend/build_src/package.json +++ b/ui/frontend/build_src/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@headlessui/react": "^1.7.2", "@tanstack/react-location": "^3.7.4", "@tanstack/react-query": "^4.2.3", "@tanstack/react-query-devtools": "^4.2.3", diff --git a/ui/frontend/build_src/src/components/_headless/popover/index.css.ts b/ui/frontend/build_src/src/components/_headless/popover/index.css.ts new file mode 100644 index 00000000..06b66c91 --- /dev/null +++ b/ui/frontend/build_src/src/components/_headless/popover/index.css.ts @@ -0,0 +1,34 @@ + +import { style, globalStyle } from "@vanilla-extract/css"; + +import { vars } from "../../../styles/theme/index.css"; + +export const PopoverMain = style({ + position: 'relative' +}); + +export const PopoverButtonStyle = style({ + backgroundColor: "transparent", + border: "0 none", + cursor: "pointer", + padding: vars.spacing.none, + fontSize: vars.fonts.sizes.Subheadline, +}); + +globalStyle(`${PopoverButtonStyle} > i`, { + marginRight: vars.spacing.small, +}); + +export const PopoverPanelMain = style({ + position: 'absolute', + top: '100%', + right: '0', + zIndex: '1', + background: vars.colors.backgroundDark, + color: vars.colors.text.normal, + padding: vars.spacing.medium, + borderRadius: vars.trim.smallBorderRadius, + marginBottom: vars.spacing.medium, +}); + + diff --git a/ui/frontend/build_src/src/components/_headless/switch/index.css.ts b/ui/frontend/build_src/src/components/_headless/switch/index.css.ts new file mode 100644 index 00000000..d9922b20 --- /dev/null +++ b/ui/frontend/build_src/src/components/_headless/switch/index.css.ts @@ -0,0 +1,18 @@ +import { style, } from "@vanilla-extract/css"; + +//import { vars } from "../../../styles/theme/index.css"; + +export const SwitchGroupMain = style({ +}); + +export const SwitchMain = style({ +}); + +export const SwitchLabel = style({ +}); + +export const SwitchEnabled = style({ +}); + +export const SwitchPill = style({ +}); diff --git a/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx b/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx index ade47769..62740b28 100644 --- a/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx +++ b/ui/frontend/build_src/src/components/molecules/betaMode/index.tsx @@ -52,7 +52,7 @@ export default function BetaMode() { if (toggleStatus === "success") { if (toggleData[0] === "OK") { // force a refetch of the config - queryClient.invalidateQueries([KEY_CONFIG]); + void queryClient.invalidateQueries([KEY_CONFIG]) } setShouldSetConfig(false); } @@ -66,7 +66,7 @@ export default function BetaMode() { onChange={(e) => { setShouldSetConfig(true); }} - /> + />🔥 {t("advanced-settings.beta")} {t("advanced-settings.beta-disc")} ); 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 acee9650..f94640f6 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 @@ -12,7 +12,7 @@ import { import ImprovementSettings from "./improvementSettings"; import PropertySettings from "./propertySettings"; import WorkflowSettings from "./workflowSettings"; -import GpuSettings from "./gpuSettings"; +// import GpuSettings from "./gpuSettings"; // import BetaMode from "../../../molecules/betaMode"; @@ -28,9 +28,9 @@ function SettingsList() {
    • -
  • + {/*
  • -
    • + */} {/*
  • 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 0c22d71e..cda46f80 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 @@ -4,8 +4,8 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore"; import { useCreateUI } from "../../creationPanelUIStore"; import { - SettingItem, // @ts-expect-error -} from "../../../../../styles/shared.css.ts"; + SettingItem +} from "../../../../../styles/shared.css"; import { MenuButton, // @ts-expect-error @@ -20,21 +20,21 @@ export default function WorkflowSettings() { state.getValueForRequestKey("num_outputs") ); const parallelCount = useImageCreate((state) => state.parallelCount); - const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave()); - const diskPath = useImageCreate((state) => - state.getValueForRequestKey("save_to_disk_path") - ); - const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled()); + // const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave()); + // const diskPath = useImageCreate((state) => + // state.getValueForRequestKey("save_to_disk_path") + // ); + // const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled()); const setRequestOption = useImageCreate((state) => state.setRequestOptions); const setParallelCount = useImageCreate((state) => state.setParallelCount); const shouldStreamImages = useImageCreate((state) => state.getValueForRequestKey("stream_image_progress")); - const toggleUseAutoSave = useImageCreate((state) => state.toggleUseAutoSave); + // const toggleUseAutoSave = useImageCreate((state) => state.toggleUseAutoSave); - const toggleSoundEnabled = useImageCreate( - (state) => state.toggleSoundEnabled - ); + // const toggleSoundEnabled = useImageCreate( + // (state) => state.toggleSoundEnabled + // ); const workflowOpen = useCreateUI((state) => state.isOpenAdvWorkflowSettings); const toggleWorkflowOpen = useCreateUI( @@ -85,40 +85,6 @@ export default function WorkflowSettings() { /> - -
    - - -
    -
    - -
    )} diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts b/ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts index ea6412c0..3cc91842 100644 --- a/ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts +++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts @@ -1,6 +1,5 @@ import { style, globalStyle } from "@vanilla-extract/css"; -//@ts-expect-error -import { vars } from "../../../styles/theme/index.css.ts"; +import { vars } from "../../../styles/theme/index.css"; export const HeaderDisplayMain = style({ color: vars.colors.text.normal, diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx index 3993ff37..a2625c46 100644 --- a/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx +++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx @@ -5,6 +5,8 @@ import { KEY_CONFIG, getConfig } from "../../../api"; import StatusDisplay from "./statusDisplay"; +import SystemSettings from "./systemSettings"; + import { useTranslation } from "react-i18next"; import { @@ -46,6 +48,8 @@ export default function HeaderDisplay() { + + {/* */} ); diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/index.tsx b/ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/index.tsx new file mode 100644 index 00000000..dfbcbb6c --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/index.tsx @@ -0,0 +1,162 @@ +/* eslint-disable @typescript-eslint/strict-boolean-expressions */ +import React from "react"; +import { Popover, Switch } from '@headlessui/react'; +import { useTranslation } from "react-i18next"; + +import { useImageCreate } from "../../../../stores/imageCreateStore"; + +import BetaMode from "../../../molecules/betaMode"; + + +import { + IconFont, + SettingItem +} from "../../../../styles/shared.css"; + +import { + PopoverMain, + PopoverButtonStyle, + PopoverPanelMain, +} from "../../../_headless/popover/index.css"; + +import { + SettingContent +} from "./systemSettings.css"; + +// import { +// SwitchGroupMain, +// SwitchMain, +// SwitchLabel, +// SwitchEnabled, +// SwitchPill, +// } from "../../../_headless/switch/index.css"; + + +export default function SystemSettings() { + const { t } = useTranslation(); + + const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave()); + const diskPath = useImageCreate((state) => + state.getValueForRequestKey("save_to_disk_path") + ); + + const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo")); + const useCpu = useImageCreate((state) => + state.getValueForRequestKey("use_cpu") + ); + const useFullPrecision = useImageCreate((state) => + state.getValueForRequestKey("use_full_precision") + ); + + const isSoundEnabled = true; //useImageCreate((state) => state.isSoundEnabled()); + + const setRequestOption = useImageCreate((state) => state.setRequestOptions); + const toggleUseAutoSave = useImageCreate((state) => state.toggleUseAutoSave); + const toggleSoundEnabled = useImageCreate( + (state) => state.toggleSoundEnabled + ); + + return ( + + + + Settings + + + +
    +

    System Settings

    +
      +
    • + + +
      • +
    • + + + + {/* + <>{t("advanced-settings.sound")} + + + + */} +
      • + + +
    • + +
      • +
    • + +
      • +
    • + +
      • + +
    • + +
      • + + + + + +
    +
    +     +     + + ); +} diff --git a/ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/systemSettings.css.ts b/ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/systemSettings.css.ts new file mode 100644 index 00000000..6d7cb097 --- /dev/null +++ b/ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/systemSettings.css.ts @@ -0,0 +1,5 @@ +import { style } from "@vanilla-extract/css"; + +export const SettingContent = style({ + width: '480px', +}); diff --git a/ui/frontend/build_src/src/pages/Home/index.tsx b/ui/frontend/build_src/src/pages/Home/index.tsx index 4ba6092c..368ceb0c 100644 --- a/ui/frontend/build_src/src/pages/Home/index.tsx +++ b/ui/frontend/build_src/src/pages/Home/index.tsx @@ -5,8 +5,8 @@ import { HeaderLayout, CreateLayout, DisplayLayout, - FooterLayout, // @ts-expect-error -} from "./home.css.ts"; + FooterLayout, +} from "./home.css"; import { useQuery } from "@tanstack/react-query"; import { getSaveDirectory, loadModifications } from "../../api"; diff --git a/ui/frontend/build_src/src/styles/index.css.ts b/ui/frontend/build_src/src/styles/index.css.ts index 175b519e..dc8d347d 100644 --- a/ui/frontend/build_src/src/styles/index.css.ts +++ b/ui/frontend/build_src/src/styles/index.css.ts @@ -28,31 +28,35 @@ globalStyle(`button`, { fontSize: vars.fonts.sizes.Body, }); +globalStyle(`.visually-hidden`, { + visibility: "hidden", + position: "absolute", +}); + /** RESETS */ -globalStyle(`p, h1, h2, h3, h4, h5, h6, ul`, { +globalStyle(`h1, h2, h3, h4, h5, h6, p, label, ul, textarea`, { margin: 0, + padding: 0, + fontFamily: vars.fonts.body, }); globalStyle(`h3`, { fontSize: vars.fonts.sizes.Subheadline, - fontFamily: vars.fonts.body, + marginBottom: vars.spacing.small, }); globalStyle(`h4, h5`, { fontSize: vars.fonts.sizes.SubSubheadline, - fontFamily: vars.fonts.body, + marginBottom: vars.spacing.medium, }); globalStyle(`p, label`, { fontSize: vars.fonts.sizes.Body, - fontFamily: vars.fonts.body, }); globalStyle(`textarea`, { - margin: 0, padding: 0, border: "none", fontSize: vars.fonts.sizes.Body, fontWeight: "bold", - fontFamily: vars.fonts.body, }); diff --git a/ui/frontend/build_src/src/styles/shared.css.ts b/ui/frontend/build_src/src/styles/shared.css.ts index 1584ab17..24730d57 100644 --- a/ui/frontend/build_src/src/styles/shared.css.ts +++ b/ui/frontend/build_src/src/styles/shared.css.ts @@ -27,3 +27,9 @@ globalStyle(`${PanelBox} .panel-box-toggle-btn`, { export const SettingItem = style({ marginBottom: vars.spacing.medium, }); + + +export const IconFont = style({ + // reliant on font-awesome cdn + fontFamily: "Font Awesome 6 Free" +}); \ No newline at end of file diff --git a/ui/frontend/build_src/src/styles/theme/index.css.ts b/ui/frontend/build_src/src/styles/theme/index.css.ts index f2ccf714..7aee7f2e 100644 --- a/ui/frontend/build_src/src/styles/theme/index.css.ts +++ b/ui/frontend/build_src/src/styles/theme/index.css.ts @@ -11,7 +11,6 @@ import { * * Lots of these arent used yet, but once they are defined and useable then they can be set. */ - const colors = createThemeContract({ brand: null, brandDimmed: null, @@ -33,6 +32,8 @@ const colors = createThemeContract({ backgroundAccent: null, backgroundAlt: null, backgroundAltAccent: null, + backgroundDark: null, + backgroundDarkAccent: null, text: { normal: null, @@ -66,6 +67,7 @@ const app = createGlobalTheme(":root", { fonts: { body: "Arial, Helvetica, sans-serif;", + // IconFont is a shared class for now sizes: { Title: "2em", Headline: "1.5em", @@ -99,9 +101,13 @@ export const darkTheme = createTheme(colors, { background: "#202124", // dark grey backgroundAccent: " #383838", // lighter grey + backgroundAlt: "#2c2d30", // med grey backgroundAltAccent: "#383838", // lighter grey + backgroundDark: "#121213", // darker grey + backgroundDarkAccent: "#383838", // lighter grey + text: { normal: "#ffffff", // white dimmed: "#d1d5db", // off white @@ -141,6 +147,9 @@ export const lightTheme = createTheme(colors, { backgroundAccent: "#EFF6FF", backgroundAlt: "#EFF6FF", backgroundAltAccent: "#EFF6FF", + backgroundDark: "#EFF6FF", + backgroundDarkAccent: "#EFF6FF", + text: { normal: "#1F2937", dimmed: "#6B7280",