Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

convert progress display to a drop-down

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

4
frontend/dist/index.html vendored
View File

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

4
frontend/src/app/constants.ts
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 }> = [ export const IN_PROGRESS_IMAGE_TYPES: Array<{ key: string; value: string }> = [
{ key: "None", value: 'none'}, { key: "None", value: 'none'},
{ key: "Fast", value: 'latents' }, { key: "Full-res (slow)", value: 'full-res' },
{ key: "Accurate", value: 'full-res' } { key: "Latents (fast)", value: 'latents' }
]; ];

6
frontend/src/common/util/parameterTranslation.ts
View File

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

48
frontend/src/features/system/SettingsModal/SettingsModal.tsx
View File

@ -26,10 +26,8 @@ import {
SystemState, SystemState,
} from '../systemSlice'; } from '../systemSlice';
import ModelList from './ModelList'; import ModelList from './ModelList';
import { SettingsModalItem, SettingsModalSelectItem } from './SettingsModalItem';
import { IN_PROGRESS_IMAGE_TYPES } from '../../../app/constants'; 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( const systemSelector = createSelector(
(state: RootState) => state.system, (state: RootState) => state.system,
@ -120,41 +118,15 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
<ModalCloseButton /> <ModalCloseButton />
<ModalBody className="settings-modal-content"> <ModalBody className="settings-modal-content">
<div className="settings-modal-items"> <div className="settings-modal-items">
<div className="settings-modal-item"> <SettingsModalSelectItem
<ModelList /> settingTitle="Display In-Progress Images"
</div> validValues={IN_PROGRESS_IMAGE_TYPES}
<div defaultValue={shouldDisplayInProgressType}
className="settings-modal-item" dispatcher={setShouldDisplayInProgressType}
style={{ gridAutoFlow: 'row', rowGap: '0.5rem' }} />
>
<IAISelect <SettingsModalItem
label={'Display In-Progress Images'} settingTitle="Confirm on Delete"
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'}
isChecked={shouldConfirmOnDelete} isChecked={shouldConfirmOnDelete}
onChange={(e: ChangeEvent<HTMLInputElement>) => onChange={(e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldConfirmOnDelete(e.target.checked)) dispatch(setShouldConfirmOnDelete(e.target.checked))

50
frontend/src/features/system/SettingsModal/SettingsModalItem.tsx Normal file
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))}
/>
);
}

9
frontend/src/features/system/systemSlice.ts
View File

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