moved the settings

2024-11-22 16:23:28 +01:00 · 2022-09-28 11:22:17 -04:00 · 2022-09-28 11:22:17 -04:00 · 5375166f04
commit 5375166f04
parent 5e85cae9ce
16 changed files with 291 additions and 61 deletions
--- a/ui/frontend/build_src/index.html
+++ b/ui/frontend/build_src/index.html
@ -3,7 +3,10 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/png" href="/media/favicon-16x16.png" sizes="16x16">
+    <link rel="icon" type="image/png" href="/media/favicon-32x32.png" sizes="32x32">
    <meta name="color-scheme" content="dark light" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
    <title>Stable Diffusion UI</title>
  </head>
  <body>
--- 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",
--- 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",
--- a/ui/frontend/build_src/src/components/_headless/popover/index.css.ts
+++ 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,
+});
+
+
--- a/ui/frontend/build_src/src/components/_headless/switch/index.css.ts
+++ 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({
+});
--- 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")}
    </label>
  );
--- 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() {
      <li className={AdvancedSettingGrouping}>
        <WorkflowSettings />
      </li>
-      <li className={AdvancedSettingGrouping}>
+      {/* <li className={AdvancedSettingGrouping}>
        <GpuSettings />
-      </li>
+      </li> */}

      {/* <li className={AdvancedSettingGrouping}>
        <BetaMode />
--- 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() {
              />
            </label>
          </div>
-
-          <div className={SettingItem}>
-            <label>
-              <input
-                checked={isUseAutoSave}
-                onChange={(e) => toggleUseAutoSave()}
-                type="checkbox"
-              />
-              {t("storage.ast")}{" "}
-            </label>
-            <label>
-              <input
-                value={diskPath}
-                onChange={(e) =>
-                  setRequestOption("save_to_disk_path", e.target.value)
-                }
-                size={40}
-                disabled={!isUseAutoSave}
-              />
-              <span className="visually-hidden">
-                Path on disk where images will be saved
-              </span>
-            </label>
-          </div>
-          <div className={SettingItem}>
-            <label>
-              <input
-                checked={isSoundEnabled}
-                onChange={(e) => toggleSoundEnabled()}
-                type="checkbox"
-              />
-              {t("advanced-settings.sound")}
-            </label>
-          </div>
        </>
      )}
    </div>
--- 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,
--- 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() {
      </h1>
      <StatusDisplay className="status-display"></StatusDisplay>

+      <SystemSettings></SystemSettings>
+
      {/* <LanguageDropdown></LanguageDropdown> */}
    </div>
  );
--- a/ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/index.tsx
+++ 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 (
+    <Popover className={PopoverMain}>
+      <Popover.Button className={PopoverButtonStyle}>
+        <i className={[IconFont, 'fa-solid', 'fa-gear'].join(" ")}></i>
+        Settings
+      </Popover.Button>
+
+      <Popover.Panel className={PopoverPanelMain}>
+        <div className={SettingContent}>
+          <h4>System Settings</h4>
+          <ul>
+            <li className={SettingItem}>
+              <label>
+                <input
+                  checked={isUseAutoSave}
+                  onChange={(e) => toggleUseAutoSave()}
+                  type="checkbox"
+                />
+                {t("storage.ast")}{" "}
+              </label>
+              <label>
+                <input
+                  value={diskPath}
+                  onChange={(e) =>
+                    setRequestOption("save_to_disk_path", e.target.value)
+                  }
+                  size={40}
+                  disabled={!isUseAutoSave}
+                />
+                <span className="visually-hidden">
+                  Path on disk where images will be saved
+                </span>
+              </label>
+            </li>
+            <li className={SettingItem}>
+              <label>
+                <input
+                  checked={isSoundEnabled}
+                  onChange={(e) => toggleSoundEnabled()}
+                  type="checkbox"
+                />
+                {t("advanced-settings.sound")}
+              </label>
+
+
+              {/* <Switch.Group>
+                <Switch.Label passive> <>{t("advanced-settings.sound")}</> </Switch.Label>
+                <Switch checked={isSoundEnabled} onChange={toggleSoundEnabled} className={SwitchMain}>
+                  <span
+                    className={SwitchPill}
+                  />
+                </Switch>
+              </Switch.Group> */}
+            </li>
+
+
+            <li className={SettingItem}>
+              <label>
+                <input
+                  checked={turbo}
+                  onChange={(e) => setRequestOption("turbo", e.target.checked)}
+                  type="checkbox"
+                />
+                {t("advanced-settings.turbo")} {t("advanced-settings.turbo-disc")}
+              </label>
+            </li>
+            <li className={SettingItem}>
+              <label>
+                <input
+                  type="checkbox"
+                  checked={useCpu}
+                  onChange={(e) => setRequestOption("use_cpu", e.target.checked)}
+                />
+                {t("advanced-settings.cpu")} {t("advanced-settings.cpu-disc")}
+              </label>
+            </li>
+            <li className={SettingItem}>
+              <label>
+                <input
+                  checked={useFullPrecision}
+                  onChange={(e) =>
+                    setRequestOption("use_full_precision", e.target.checked)
+                  }
+                  type="checkbox"
+                />
+                {t("advanced-settings.gpu")} {t("advanced-settings.gpu-disc")}
+              </label>
+            </li>
+
+            <li className={SettingItem}>
+              <BetaMode />
+            </li>
+
+
+
+
+
+          </ul>
+        </div>
+      </Popover.Panel>
+    </Popover>
+
+  );
+}
--- 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
@ -0,0 +1,5 @@
+import { style } from "@vanilla-extract/css";
+
+export const SettingContent = style({
+  width: '480px',
+});
--- 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";
--- 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,
 });
--- 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"
+});
--- 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",