extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-05-31 23:25:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

moved the settings

Browse Source
This commit is contained in:
caranicas 2022-09-28 11:22:17 -04:00
parent 5e85cae9ce
commit 5375166f04
16 changed files with 291 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/frontend/build_src/index.html
View File

@ -3,7 +3,10 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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" /> <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> <title>Stable Diffusion UI</title>
</head> </head>
<body> <body>

19
ui/frontend/build_src/package-lock.json generated
View File

@ -8,6 +8,7 @@
"name": "react-ts", "name": "react-ts",
"version": "0.0.0", "version": "0.0.0",
"dependencies": { "dependencies": {
"@headlessui/react": "^1.7.2",
"@tanstack/react-location": "^3.7.4", "@tanstack/react-location": "^3.7.4",
"@tanstack/react-query": "^4.2.3", "@tanstack/react-query": "^4.2.3",
"@tanstack/react-query-devtools": "^4.2.3", "@tanstack/react-query-devtools": "^4.2.3",
@ -593,6 +594,18 @@
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==", "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
"dev": true "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": { "node_modules/@humanwhocodes/config-array": {
"version": "0.10.4", "version": "0.10.4",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz", "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": { "@humanwhocodes/config-array": {
"version": "0.10.4", "version": "0.10.4",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz",

1
ui/frontend/build_src/package.json
View File

@ -10,6 +10,7 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@headlessui/react": "^1.7.2",
"@tanstack/react-location": "^3.7.4", "@tanstack/react-location": "^3.7.4",
"@tanstack/react-query": "^4.2.3", "@tanstack/react-query": "^4.2.3",
"@tanstack/react-query-devtools": "^4.2.3", "@tanstack/react-query-devtools": "^4.2.3",

34
ui/frontend/build_src/src/components/_headless/popover/index.css.ts Normal file
View File

@ -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,
});

18
ui/frontend/build_src/src/components/_headless/switch/index.css.ts Normal file
View File

@ -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({
});

4
ui/frontend/build_src/src/components/molecules/betaMode/index.tsx
View File

@ -52,7 +52,7 @@ export default function BetaMode() {
if (toggleStatus === "success") { if (toggleStatus === "success") {
if (toggleData[0] === "OK") { if (toggleData[0] === "OK") {
// force a refetch of the config // force a refetch of the config
queryClient.invalidateQueries([KEY_CONFIG]); void queryClient.invalidateQueries([KEY_CONFIG])
} }
setShouldSetConfig(false); setShouldSetConfig(false);
} }
@ -66,7 +66,7 @@ export default function BetaMode() {
onChange={(e) => { onChange={(e) => {
setShouldSetConfig(true); setShouldSetConfig(true);
}} }}
/> />🔥
{t("advanced-settings.beta")} {t("advanced-settings.beta-disc")} {t("advanced-settings.beta")} {t("advanced-settings.beta-disc")}
</label> </label>
); );

6
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/index.tsx
View File

@ -12,7 +12,7 @@ import {
import ImprovementSettings from "./improvementSettings"; import ImprovementSettings from "./improvementSettings";
import PropertySettings from "./propertySettings"; import PropertySettings from "./propertySettings";
import WorkflowSettings from "./workflowSettings"; import WorkflowSettings from "./workflowSettings";
import GpuSettings from "./gpuSettings"; // import GpuSettings from "./gpuSettings";
// import BetaMode from "../../../molecules/betaMode"; // import BetaMode from "../../../molecules/betaMode";
@ -28,9 +28,9 @@ function SettingsList() {
<li className={AdvancedSettingGrouping}> <li className={AdvancedSettingGrouping}>
<WorkflowSettings /> <WorkflowSettings />
</li> </li>
<li className={AdvancedSettingGrouping}> {/* <li className={AdvancedSettingGrouping}>
<GpuSettings /> <GpuSettings />
</li> </li> */}
{/* <li className={AdvancedSettingGrouping}> {/* <li className={AdvancedSettingGrouping}>
<BetaMode /> <BetaMode />

56
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/workflowSettings/index.tsx
View File

@ -4,8 +4,8 @@ import { useImageCreate } from "../../../../../stores/imageCreateStore";
import { useCreateUI } from "../../creationPanelUIStore"; import { useCreateUI } from "../../creationPanelUIStore";
import { import {
SettingItem, // @ts-expect-error SettingItem
} from "../../../../../styles/shared.css.ts"; } from "../../../../../styles/shared.css";
import { import {
MenuButton, // @ts-expect-error MenuButton, // @ts-expect-error
@ -20,21 +20,21 @@ export default function WorkflowSettings() {
state.getValueForRequestKey("num_outputs") state.getValueForRequestKey("num_outputs")
); );
const parallelCount = useImageCreate((state) => state.parallelCount); const parallelCount = useImageCreate((state) => state.parallelCount);
const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave()); // const isUseAutoSave = useImageCreate((state) => state.isUseAutoSave());
const diskPath = useImageCreate((state) => // const diskPath = useImageCreate((state) =>
state.getValueForRequestKey("save_to_disk_path") // state.getValueForRequestKey("save_to_disk_path")
); // );
const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled()); // const isSoundEnabled = useImageCreate((state) => state.isSoundEnabled());
const setRequestOption = useImageCreate((state) => state.setRequestOptions); const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const setParallelCount = useImageCreate((state) => state.setParallelCount); const setParallelCount = useImageCreate((state) => state.setParallelCount);
const shouldStreamImages = useImageCreate((state) => state.getValueForRequestKey("stream_image_progress")); const shouldStreamImages = useImageCreate((state) => state.getValueForRequestKey("stream_image_progress"));
const toggleUseAutoSave = useImageCreate((state) => state.toggleUseAutoSave); // const toggleUseAutoSave = useImageCreate((state) => state.toggleUseAutoSave);
const toggleSoundEnabled = useImageCreate( // const toggleSoundEnabled = useImageCreate(
(state) => state.toggleSoundEnabled // (state) => state.toggleSoundEnabled
); // );
const workflowOpen = useCreateUI((state) => state.isOpenAdvWorkflowSettings); const workflowOpen = useCreateUI((state) => state.isOpenAdvWorkflowSettings);
const toggleWorkflowOpen = useCreateUI( const toggleWorkflowOpen = useCreateUI(
@ -85,40 +85,6 @@ export default function WorkflowSettings() {
/> />
</label> </label>
</div> </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> </div>

3
ui/frontend/build_src/src/components/organisms/headerDisplay/headerDisplay.css.ts
View File

@ -1,6 +1,5 @@
import { style, globalStyle } from "@vanilla-extract/css"; import { style, globalStyle } from "@vanilla-extract/css";
//@ts-expect-error import { vars } from "../../../styles/theme/index.css";
import { vars } from "../../../styles/theme/index.css.ts";
export const HeaderDisplayMain = style({ export const HeaderDisplayMain = style({
color: vars.colors.text.normal, color: vars.colors.text.normal,

4
ui/frontend/build_src/src/components/organisms/headerDisplay/index.tsx
View File

@ -5,6 +5,8 @@ import { KEY_CONFIG, getConfig } from "../../../api";
import StatusDisplay from "./statusDisplay"; import StatusDisplay from "./statusDisplay";
import SystemSettings from "./systemSettings";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import {
@ -46,6 +48,8 @@ export default function HeaderDisplay() {
</h1> </h1>
<StatusDisplay className="status-display"></StatusDisplay> <StatusDisplay className="status-display"></StatusDisplay>
<SystemSettings></SystemSettings>
{/* <LanguageDropdown></LanguageDropdown> */} {/* <LanguageDropdown></LanguageDropdown> */}
</div> </div>
); );

162
ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/index.tsx Normal file
View File

@ -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>
);
}

5
ui/frontend/build_src/src/components/organisms/headerDisplay/systemSettings/systemSettings.css.ts Normal file
View File

@ -0,0 +1,5 @@
import { style } from "@vanilla-extract/css";
export const SettingContent = style({
width: '480px',
});

4
ui/frontend/build_src/src/pages/Home/index.tsx
View File

@ -5,8 +5,8 @@ import {
HeaderLayout, HeaderLayout,
CreateLayout, CreateLayout,
DisplayLayout, DisplayLayout,
FooterLayout, // @ts-expect-error FooterLayout,
} from "./home.css.ts"; } from "./home.css";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { getSaveDirectory, loadModifications } from "../../api"; import { getSaveDirectory, loadModifications } from "../../api";

16
ui/frontend/build_src/src/styles/index.css.ts
View File

@ -28,31 +28,35 @@ globalStyle(`button`, {
fontSize: vars.fonts.sizes.Body, fontSize: vars.fonts.sizes.Body,
}); });
globalStyle(`.visually-hidden`, {
visibility: "hidden",
position: "absolute",
});
/** RESETS */ /** RESETS */
globalStyle(`p, h1, h2, h3, h4, h5, h6, ul`, { globalStyle(`h1, h2, h3, h4, h5, h6, p, label, ul, textarea`, {
margin: 0, margin: 0,
padding: 0,
fontFamily: vars.fonts.body,
}); });
globalStyle(`h3`, { globalStyle(`h3`, {
fontSize: vars.fonts.sizes.Subheadline, fontSize: vars.fonts.sizes.Subheadline,
fontFamily: vars.fonts.body, marginBottom: vars.spacing.small,
}); });
globalStyle(`h4, h5`, { globalStyle(`h4, h5`, {
fontSize: vars.fonts.sizes.SubSubheadline, fontSize: vars.fonts.sizes.SubSubheadline,
fontFamily: vars.fonts.body, marginBottom: vars.spacing.medium,
}); });
globalStyle(`p, label`, { globalStyle(`p, label`, {
fontSize: vars.fonts.sizes.Body, fontSize: vars.fonts.sizes.Body,
fontFamily: vars.fonts.body,
}); });
globalStyle(`textarea`, { globalStyle(`textarea`, {
margin: 0,
padding: 0, padding: 0,
border: "none", border: "none",
fontSize: vars.fonts.sizes.Body, fontSize: vars.fonts.sizes.Body,
fontWeight: "bold", fontWeight: "bold",
fontFamily: vars.fonts.body,
}); });

6
ui/frontend/build_src/src/styles/shared.css.ts
View File

@ -27,3 +27,9 @@ globalStyle(`${PanelBox} .panel-box-toggle-btn`, {
export const SettingItem = style({ export const SettingItem = style({
marginBottom: vars.spacing.medium, marginBottom: vars.spacing.medium,
}); });
export const IconFont = style({
// reliant on font-awesome cdn
fontFamily: "Font Awesome 6 Free"
});

11
ui/frontend/build_src/src/styles/theme/index.css.ts
View File

@ -11,7 +11,6 @@ import {
* *
* Lots of these arent used yet, but once they are defined and useable then they can be set. * Lots of these arent used yet, but once they are defined and useable then they can be set.
*/ */
const colors = createThemeContract({ const colors = createThemeContract({
brand: null, brand: null,
brandDimmed: null, brandDimmed: null,
@ -33,6 +32,8 @@ const colors = createThemeContract({
backgroundAccent: null, backgroundAccent: null,
backgroundAlt: null, backgroundAlt: null,
backgroundAltAccent: null, backgroundAltAccent: null,
backgroundDark: null,
backgroundDarkAccent: null,
text: { text: {
normal: null, normal: null,
@ -66,6 +67,7 @@ const app = createGlobalTheme(":root", {
fonts: { fonts: {
body: "Arial, Helvetica, sans-serif;", body: "Arial, Helvetica, sans-serif;",
// IconFont is a shared class for now
sizes: { sizes: {
Title: "2em", Title: "2em",
Headline: "1.5em", Headline: "1.5em",
@ -99,9 +101,13 @@ export const darkTheme = createTheme(colors, {
background: "#202124", // dark grey background: "#202124", // dark grey
backgroundAccent: " #383838", // lighter grey backgroundAccent: " #383838", // lighter grey
backgroundAlt: "#2c2d30", // med grey backgroundAlt: "#2c2d30", // med grey
backgroundAltAccent: "#383838", // lighter grey backgroundAltAccent: "#383838", // lighter grey
backgroundDark: "#121213", // darker grey
backgroundDarkAccent: "#383838", // lighter grey
text: { text: {
normal: "#ffffff", // white normal: "#ffffff", // white
dimmed: "#d1d5db", // off white dimmed: "#d1d5db", // off white
@ -141,6 +147,9 @@ export const lightTheme = createTheme(colors, {
backgroundAccent: "#EFF6FF", backgroundAccent: "#EFF6FF",
backgroundAlt: "#EFF6FF", backgroundAlt: "#EFF6FF",
backgroundAltAccent: "#EFF6FF", backgroundAltAccent: "#EFF6FF",
backgroundDark: "#EFF6FF",
backgroundDarkAccent: "#EFF6FF",
text: { text: {
normal: "#1F2937", normal: "#1F2937",
dimmed: "#6B7280", dimmed: "#6B7280",