extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2025-04-30 14:24:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

advanced panels

Browse Source
This commit is contained in:
caranicas 2022-09-15 15:35:41 -04:00
parent 93e71027fd
commit fd3b0c20b6
8 changed files with 314 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
ui/frontend/build_src/src/components/organisms/creationPanel/advancedSettings/advancedsettings.css.ts
View File

@ -1,4 +1,4 @@
import { style, globalStyle } from '@vanilla-extract/css'; import { style, globalStyle } from "@vanilla-extract/css";
export const AdvancedSettingsList = style({ export const AdvancedSettingsList = style({
// font-size: 9pt; // font-size: 9pt;
@ -6,17 +6,32 @@ export const AdvancedSettingsList = style({
// padding-left: 10px; // padding-left: 10px;
// list-style-type: none; // list-style-type: none;
fontSize: '9pt', fontSize: "9pt",
marginBottom: '5px', marginBottom: "5px",
paddingLeft: '10px', paddingLeft: "10px",
listStyleType: 'none', listStyleType: "none",
}); });
export const AdvancedSettingItem = style({ export const AdvancedSettingItem = style({
paddingBottom: '5px', paddingBottom: "5px",
}); });
globalStyle( 'button > h4', { export const MenuButton = style({
color:'lightgrey' 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",
});

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

@ -1,9 +1,12 @@
import React, {useState} from "react"; import React, { useState } from "react";
import { useImageCreate } from "../../../../../store/imageCreateStore"; import { useImageCreate } from "../../../../../store/imageCreateStore";
import { MenuButton }
from //@ts-ignore
'../advancedsettings.css.ts'
export default function GpuSettings() { export default function GpuSettings() {
const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo")); const turbo = useImageCreate((state) => state.getValueForRequestKey("turbo"));
const use_cpu = useImageCreate((state) => const use_cpu = useImageCreate((state) =>
state.getValueForRequestKey("use_cpu") state.getValueForRequestKey("use_cpu")
@ -24,47 +27,49 @@ export default function GpuSettings() {
<div> <div>
<button <button
type="button" type="button"
className="panel-box-toggle-btn" className={MenuButton}
onClick={toggleGpuOpen} onClick={toggleGpuOpen}
> >
<h4>GPU Settings</h4> <h4>GPU Settings</h4>
</button> </button>
{gpuOpen && <> {gpuOpen && (
<div> <>
<label> <div>
<input <label>
checked={turbo} <input
onChange={(e) => setRequestOption("turbo", e.target.checked)} checked={turbo}
type="checkbox" onChange={(e) => setRequestOption("turbo", e.target.checked)}
/> type="checkbox"
Turbo mode (generates images faster, but uses an additional 1 GB of />
GPU memory) Turbo mode (generates images faster, but uses an additional 1 GB
</label> of GPU memory)
</div> </label>
<div> </div>
<label> <div>
<input <label>
type="checkbox" <input
checked={use_cpu} type="checkbox"
onChange={(e) => setRequestOption("use_cpu", e.target.checked)} checked={use_cpu}
/> onChange={(e) => setRequestOption("use_cpu", e.target.checked)}
Use CPU instead of GPU (warning: this will be *very* slow) />
</label> Use CPU instead of GPU (warning: this will be *very* slow)
</div> </label>
<div> </div>
<label> <div>
<input <label>
checked={use_full_precision} <input
onChange={(e) => checked={use_full_precision}
setRequestOption("use_full_precision", e.target.checked) onChange={(e) =>
} setRequestOption("use_full_precision", e.target.checked)
type="checkbox" }
/> type="checkbox"
Use full precision (for GPU-only. warning: this will consume more />
VRAM) Use full precision (for GPU-only. warning: this will consume more
</label> VRAM)
</div> </label>
</>} </div>
</>
)}
</div> </div>
); );
} }

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

@ -1,16 +1,21 @@
import React, {useState} from "react"; import React, { useState } from "react";
import { useImageCreate } from "../../../../../store/imageCreateStore"; import { useImageCreate } from "../../../../../store/imageCreateStore";
export default function ImprovementSettings() { import { MenuButton }
from //@ts-ignore
'../advancedsettings.css.ts';
export default function ImprovementSettings() {
// these are conditionals that should be retired and inferred from the store // these are conditionals that should be retired and inferred from the store
const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling()); const isUsingUpscaling = useImageCreate((state) => state.isUsingUpscaling());
const isUsingFaceCorrection = useImageCreate((state) =>state.isUsingFaceCorrection()); const isUsingFaceCorrection = useImageCreate((state) =>
state.isUsingFaceCorrection()
);
const use_upscale = useImageCreate((state) => const use_upscale = useImageCreate((state) =>
state.getValueForRequestKey("use_upscale") state.getValueForRequestKey("use_upscale")
); );
const show_only_filtered_image = useImageCreate((state) => const show_only_filtered_image = useImageCreate((state) =>
state.getValueForRequestKey("show_only_filtered_image") state.getValueForRequestKey("show_only_filtered_image")
); );
@ -31,64 +36,65 @@ export default function ImprovementSettings() {
setImprovementOpen(!improvementOpen); setImprovementOpen(!improvementOpen);
}; };
return ( return (
<div> <div>
<button <button
type="button" type="button"
className="panel-box-toggle-btn" className={MenuButton}
onClick={toggleImprovementOpen} onClick={toggleImprovementOpen}
> >
<h4>Improvement Settings</h4> <h4>Improvement Settings</h4>
</button> </button>
{improvementOpen && <> {improvementOpen && (
<div> <>
<label> <div>
<input <label>
type="checkbox" <input
checked={isUsingFaceCorrection} type="checkbox"
onChange={(e) => toggleUseFaceCorrection()} checked={isUsingFaceCorrection}
/> onChange={(e) => toggleUseFaceCorrection()}
Fix incorrect faces and eyes (uses GFPGAN) />
</label> Fix incorrect faces and eyes (uses GFPGAN)
</div> </label>
<div> </div>
<label> <div>
<input <label>
type="checkbox" <input
checked={isUsingUpscaling} type="checkbox"
onChange={(e) => toggleUseUpscaling()} checked={isUsingUpscaling}
/> onChange={(e) => toggleUseUpscaling()}
Upscale the image to 4x resolution using />
<select Upscale the image to 4x resolution using
id="upscale_model" <select
name="upscale_model" id="upscale_model"
disabled={!isUsingUpscaling} name="upscale_model"
value={use_upscale} disabled={!isUsingUpscaling}
onChange={(e) => { value={use_upscale}
setRequestOption("use_upscale", e.target.value); onChange={(e) => {
}} setRequestOption("use_upscale", e.target.value);
> }}
<option value="RealESRGAN_x4plus">RealESRGAN_x4plus</option> >
<option value="RealESRGAN_x4plus_anime_6B"> <option value="RealESRGAN_x4plus">RealESRGAN_x4plus</option>
RealESRGAN_x4plus_anime_6B <option value="RealESRGAN_x4plus_anime_6B">
</option> RealESRGAN_x4plus_anime_6B
</select> </option>
</label> </select>
</div> </label>
<div> </div>
<label> <div>
<input <label>
type="checkbox" <input
checked={show_only_filtered_image} type="checkbox"
onChange={(e) => checked={show_only_filtered_image}
setRequestOption("show_only_filtered_image", e.target.checked) onChange={(e) =>
} setRequestOption("show_only_filtered_image", e.target.checked)
/> }
Show only filtered image />
</label> Show only filtered image
</div> </label>
</>} </div>
</>
)}
</div> </div>
); );
} }

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

@ -1,10 +1,9 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { useImageCreate } from "../../../../store/imageCreateStore"; import { useImageCreate } from "../../../../store/imageCreateStore";
import { import {
AdvancedSettingsList, AdvancedSettingsList,
AdvancedSettingItem AdvancedSettingItem, // @ts-ignore
} // @ts-ignore } from "./advancedsettings.css.ts";
from "./advancedsettings.css.ts";
import ImprovementSettings from "./improvementSettings"; import ImprovementSettings from "./improvementSettings";
import PropertySettings from "./propertySettings"; import PropertySettings from "./propertySettings";
@ -12,7 +11,6 @@ import WorkflowSettings from "./workflowSettings";
import GpuSettings from "./gpuSettings"; import GpuSettings from "./gpuSettings";
function SettingsList() { function SettingsList() {
return ( return (
<ul className={AdvancedSettingsList}> <ul className={AdvancedSettingsList}>
<li className={AdvancedSettingItem}> <li className={AdvancedSettingItem}>

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

@ -1,7 +1,9 @@
import React, {useState} from "react"; import React, { useState } from "react";
import { useImageCreate } from "../../../../../store/imageCreateStore"; import { useImageCreate } from "../../../../../store/imageCreateStore";
import { MenuButton }
from //@ts-ignore
'../advancedsettings.css.ts'
// todo: move this someplace more global // todo: move this someplace more global
const IMAGE_DIMENSIONS = [ const IMAGE_DIMENSIONS = [
{ value: 128, label: "128 (*)" }, { value: 128, label: "128 (*)" },
@ -21,10 +23,7 @@ const IMAGE_DIMENSIONS = [
{ value: 1024, label: "1024 (*)" }, { value: 1024, label: "1024 (*)" },
]; ];
export default function PropertySettings() { export default function PropertySettings() {
const setRequestOption = useImageCreate((state) => state.setRequestOptions); const setRequestOption = useImageCreate((state) => state.setRequestOptions);
const toggleUseRandomSeed = useImageCreate( const toggleUseRandomSeed = useImageCreate(
(state) => state.toggleUseRandomSeed (state) => state.toggleUseRandomSeed
@ -56,14 +55,15 @@ export default function PropertySettings() {
<div> <div>
<button <button
type="button" type="button"
className="panel-box-toggle-btn" className={MenuButton}
onClick={togglePropertyOpen} onClick={togglePropertyOpen}
> >
<h4>Property Settings</h4> <h4>Property Settings</h4>
</button> </button>
{propertyOpen && <> {propertyOpen && (
<div> <>
<label> <div>
<label>
Seed: Seed:
<input <input
size={10} size={10}
@ -72,102 +72,104 @@ export default function PropertySettings() {
disabled={isRandomSeed} disabled={isRandomSeed}
placeholder="random" placeholder="random"
/> />
</label> </label>
<label> <label>
<input <input
type="checkbox" type="checkbox"
checked={isRandomSeed} checked={isRandomSeed}
onChange={(e) => toggleUseRandomSeed()} onChange={(e) => toggleUseRandomSeed()}
/>{" "} />{" "}
Random Image Random Image
</label> </label>
</div> </div>
<div>
<label>
Number of inference steps:{" "}
<input
value={steps}
onChange={(e) => {
setRequestOption("num_inference_steps", e.target.value);
}}
size={4}
/>
</label>
</div>
<div> <div>
<label> <label>
Guidance Scale: Number of inference steps:{" "}
<input <input
value={guidance_scale} value={steps}
onChange={(e) => setRequestOption("guidance_scale", e.target.value)} onChange={(e) => {
type="range" setRequestOption("num_inference_steps", e.target.value);
min="0" }}
max="20" size={4}
step=".1" />
/> </label>
</label> </div>
<span>{guidance_scale}</span>
</div>
<div className="mb-4"> <div>
<label> <label>
Prompt Strength:{" "} Guidance Scale:
<input <input
value={prompt_strength} value={guidance_scale}
onChange={(e) => onChange={(e) =>
// setImageOptions({ promptStrength: Number(e.target.value) }) setRequestOption("guidance_scale", e.target.value)
setRequestOption("prompt_strength", e.target.value) }
} type="range"
type="range" min="0"
min="0" max="20"
max="1" step=".1"
step=".05" />
/> </label>
</label> <span>{guidance_scale}</span>
<span>{prompt_strength}</span> </div>
</div>
<div> <div className="mb-4">
<label> <label>
Width: Prompt Strength:{" "}
<select <input
value={width} value={prompt_strength}
onChange={(e) => setRequestOption("width", e.target.value)} onChange={(e) =>
> // setImageOptions({ promptStrength: Number(e.target.value) })
{IMAGE_DIMENSIONS.map((dimension) => ( setRequestOption("prompt_strength", e.target.value)
<option }
key={"width-option_" + dimension.value} type="range"
value={dimension.value} min="0"
> max="1"
{dimension.label} step=".05"
</option> />
))} </label>
</select> <span>{prompt_strength}</span>
</label> </div>
</div>
<div> <div>
<label> <label>
Height: Width:
<select <select
value={height} value={width}
onChange={(e) => setRequestOption("height", e.target.value)} onChange={(e) => setRequestOption("width", e.target.value)}
> >
{IMAGE_DIMENSIONS.map((dimension) => ( {IMAGE_DIMENSIONS.map((dimension) => (
<option <option
key={"height-option_" + dimension.value} key={"width-option_" + dimension.value}
value={dimension.value} value={dimension.value}
> >
{dimension.label} {dimension.label}
</option> </option>
))} ))}
</select> </select>
</label> </label>
</div> </div>
</>} <div>
<label>
Height:
<select
value={height}
onChange={(e) => setRequestOption("height", e.target.value)}
>
{IMAGE_DIMENSIONS.map((dimension) => (
<option
key={"height-option_" + dimension.value}
value={dimension.value}
>
{dimension.label}
</option>
))}
</select>
</label>
</div>
</>
)}
</div> </div>
); );
} }

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

@ -1,16 +1,20 @@
import React, {useState} from "react"; import React, { useState } from "react";
import { useImageCreate } from "../../../../../store/imageCreateStore"; import { useImageCreate } from "../../../../../store/imageCreateStore";
import { MenuButton }
from //@ts-ignore
'../advancedsettings.css.ts';
export default function WorkflowSettings() { export default function WorkflowSettings() {
const num_outputs = useImageCreate((state) => const num_outputs = useImageCreate((state) =>
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 save_to_disk_path = useImageCreate((state) => const save_to_disk_path = 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);
@ -20,7 +24,6 @@ export default function WorkflowSettings() {
(state) => state.toggleSoundEnabled (state) => state.toggleSoundEnabled
); );
const [workflowOpen, setWorkflowOpen] = useState(true); const [workflowOpen, setWorkflowOpen] = useState(true);
const toggleWorkflowOpen = () => { const toggleWorkflowOpen = () => {
@ -29,72 +32,74 @@ export default function WorkflowSettings() {
return ( return (
<div> <div>
<button <button
type="button" type="button"
className="panel-box-toggle-btn" className={MenuButton}
onClick={toggleWorkflowOpen} onClick={toggleWorkflowOpen}
> >
<h4>Workflow Settings</h4> <h4>Workflow Settings</h4>
</button> </button>
{workflowOpen && <> {workflowOpen && (
<div> <>
<label> <div>
Number of images to make:{" "} <label>
<input Number of images to make:{" "}
type="number" <input
value={num_outputs} type="number"
onChange={(e) => value={num_outputs}
setRequestOption("num_outputs", parseInt(e.target.value, 10)) onChange={(e) =>
} setRequestOption("num_outputs", parseInt(e.target.value, 10))
size={4} }
/> size={4}
</label> />
</div> </label>
<div> </div>
<label> <div>
Generate in parallel: <label>
<input Generate in parallel:
type="number" <input
value={parallelCount} type="number"
onChange={(e) => setParallelCount(parseInt(e.target.value, 10))} value={parallelCount}
size={4} onChange={(e) => setParallelCount(parseInt(e.target.value, 10))}
/> size={4}
</label> />
</div> </label>
<div> </div>
<label> <div>
<input <label>
checked={isUseAutoSave} <input
onChange={(e) => toggleUseAutoSave()} checked={isUseAutoSave}
type="checkbox" onChange={(e) => toggleUseAutoSave()}
/> type="checkbox"
Automatically save to{" "} />
</label> Automatically save to{" "}
<label> </label>
<input <label>
value={save_to_disk_path} <input
onChange={(e) => value={save_to_disk_path}
setRequestOption("save_to_disk_path", e.target.value) onChange={(e) =>
} setRequestOption("save_to_disk_path", e.target.value)
size={40} }
disabled={!isUseAutoSave} size={40}
/> disabled={!isUseAutoSave}
<span className="visually-hidden"> />
Path on disk where images will be saved <span className="visually-hidden">
</span> Path on disk where images will be saved
</label> </span>
</div> </label>
<div> </div>
<label> <div>
<input <label>
checked={isSoundEnabled} <input
onChange={(e) => toggleSoundEnabled()} checked={isSoundEnabled}
type="checkbox" onChange={(e) => toggleSoundEnabled()}
/> type="checkbox"
Play sound on task completion />
</label> Play sound on task completion
</div> </label>
</>} </div>
</>
)}
</div> </div>
); );
}; }

12
ui/frontend/build_src/src/components/organisms/creationPanel/creationpane.css.ts
View File

@ -1,8 +1,8 @@
import { style } from '@vanilla-extract/css'; import { style } from "@vanilla-extract/css";
export const CreationPaneMain = style({ export const CreationPaneMain = style({
position: 'relative', position: "relative",
width: '100%', width: "100%",
height: '100%', height: "100%",
padding:'0 10px', padding: "0 10px",
}); });

4
ui/frontend/build_src/src/styles.css.ts
View File

@ -19,7 +19,9 @@ globalStyle(`*`, {
boxSizing: "border-box", boxSizing: "border-box",
}); });
globalStyle(`p`, {
/** RESET */
globalStyle(`p, h3, h4`, {
margin: 0, margin: 0,
}); });