convert progress display to a drop-down

This commit is contained in:
damian0815 2022-11-01 13:19:20 +01:00 committed by Lincoln Stein
parent 4929ae6c1d
commit 15fa246ccf
7 changed files with 587 additions and 53 deletions

517
frontend/dist/assets/index.cc049b93.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>InvokeAI - A Stable Diffusion Toolkit</title>
<link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" />
<script type="module" crossorigin src="./assets/index.1fc0290b.js"></script>
<link rel="stylesheet" href="./assets/index.40a72c80.css">
<script type="module" crossorigin src="./assets/index.cc049b93.js"></script>
<link rel="stylesheet" href="./assets/index.52c8231e.css">
</head>
<body>
@ -15,4 +15,4 @@
</body>
</html>
</html>

View File

@ -42,6 +42,6 @@ export const FACETOOL_TYPES = ['gfpgan', 'codeformer'] as const;
export const IN_PROGRESS_IMAGE_TYPES: Array<{ key: string; value: string }> = [
{ key: "None", value: 'none'},
{ key: "Fast", value: 'latents' },
{ key: "Accurate", value: 'full-res' }
{ key: "Full-res (slow)", value: 'full-res' },
{ key: "Latents (fast)", value: 'latents' }
];

View File

@ -62,8 +62,7 @@ export const frontendToBackendParameters = (
shouldRandomizeSeed,
} = optionsState;
const { shouldDisplayInProgressType, saveIntermediatesInterval } =
systemState;
const { shouldDisplayInProgressType } = systemState;
const generationParameters: { [k: string]: any } = {
prompt,
@ -78,8 +77,7 @@ export const frontendToBackendParameters = (
sampler_name: sampler,
seed,
progress_images: shouldDisplayInProgressType === 'full-res',
progress_latents: shouldDisplayInProgressType === 'latents',
save_intermediates: saveIntermediatesInterval,
progress_latents: shouldDisplayInProgressType === 'latents'
};
generationParameters.seed = shouldRandomizeSeed

View File

@ -26,10 +26,8 @@ import {
SystemState,
} from '../systemSlice';
import ModelList from './ModelList';
import { SettingsModalItem, SettingsModalSelectItem } from './SettingsModalItem';
import { IN_PROGRESS_IMAGE_TYPES } from '../../../app/constants';
import IAISwitch from '../../../common/components/IAISwitch';
import IAISelect from '../../../common/components/IAISelect';
import IAINumberInput from '../../../common/components/IAINumberInput';
const systemSelector = createSelector(
(state: RootState) => state.system,
@ -120,41 +118,15 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
<ModalCloseButton />
<ModalBody className="settings-modal-content">
<div className="settings-modal-items">
<div className="settings-modal-item">
<ModelList />
</div>
<div
className="settings-modal-item"
style={{ gridAutoFlow: 'row', rowGap: '0.5rem' }}
>
<IAISelect
label={'Display In-Progress Images'}
validValues={IN_PROGRESS_IMAGE_TYPES}
value={shouldDisplayInProgressType}
onChange={(e: ChangeEvent<HTMLSelectElement>) =>
dispatch(
setShouldDisplayInProgressType(
e.target.value as InProgressImageType
)
)
}
/>
{shouldDisplayInProgressType === 'full-res' && (
<IAINumberInput
label="Save images every n steps"
min={1}
max={steps}
step={1}
onChange={handleChangeIntermediateSteps}
value={saveIntermediatesInterval}
width="auto"
textAlign="center"
/>
)}
</div>
<IAISwitch
styleClass="settings-modal-item"
label={'Confirm on Delete'}
<SettingsModalSelectItem
settingTitle="Display In-Progress Images"
validValues={IN_PROGRESS_IMAGE_TYPES}
defaultValue={shouldDisplayInProgressType}
dispatcher={setShouldDisplayInProgressType}
/>
<SettingsModalItem
settingTitle="Confirm on Delete"
isChecked={shouldConfirmOnDelete}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldConfirmOnDelete(e.target.checked))

View File

@ -0,0 +1,50 @@
import { useAppDispatch } from '../../../app/store';
import IAISelect from '../../../common/components/IAISelect';
import IAISwitch from '../../../common/components/IAISwitch';
export function SettingsModalItem({
settingTitle,
isChecked,
dispatcher,
}: {
settingTitle: string;
isChecked: boolean;
dispatcher: any;
}) {
const dispatch = useAppDispatch();
return (
<IAISwitch
styleClass="settings-modal-item"
label={settingTitle}
isChecked={isChecked}
onChange={(e) => dispatch(dispatcher(e.target.checked))}
/>
);
}
export function SettingsModalSelectItem({
settingTitle,
validValues,
defaultValue,
dispatcher,
}: {
settingTitle: string;
validValues:
Array<number | string>
| Array<{ key: string; value: string | number }>;
defaultValue: string;
dispatcher: any;
}) {
const dispatch = useAppDispatch();
return (
<IAISelect
styleClass="settings-modal-item"
label={settingTitle}
validValues={validValues}
defaultValue={defaultValue}
onChange={(e) => dispatch(dispatcher(e.target.value))}
/>
);
}

View File

@ -25,7 +25,7 @@ export type InProgressImageType = 'none' | 'full-res' | 'latents';
export interface SystemState
extends InvokeAI.SystemStatus,
InvokeAI.SystemConfig {
shouldDisplayInProgressType: InProgressImageType;
shouldDisplayInProgressType: string;
log: Array<LogEntry>;
shouldShowLogViewer: boolean;
isGFPGANAvailable: boolean;
@ -51,7 +51,7 @@ const initialSystemState: SystemState = {
isProcessing: false,
log: [],
shouldShowLogViewer: false,
shouldDisplayInProgressType: 'latents',
shouldDisplayInProgressType: "none",
shouldDisplayGuides: true,
isGFPGANAvailable: true,
isESRGANAvailable: true,
@ -80,10 +80,7 @@ export const systemSlice = createSlice({
name: 'system',
initialState: initialSystemState,
reducers: {
setShouldDisplayInProgressType: (
state,
action: PayloadAction<InProgressImageType>
) => {
setShouldDisplayInProgressType: (state, action: PayloadAction<string>) => {
state.shouldDisplayInProgressType = action.payload;
},
setIsProcessing: (state, action: PayloadAction<boolean>) => {