copy dev frontend code over again

This commit is contained in:
Lincoln Stein
2022-11-02 17:56:30 -04:00
parent d85cd99f17
commit 76249b3d4e
7 changed files with 1224 additions and 1082 deletions

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.4488003f.js"></script> <script type="module" crossorigin src="./assets/index.1fc0290b.js"></script>
<link rel="stylesheet" href="./assets/index.52c8231e.css"> <link rel="stylesheet" href="./assets/index.40a72c80.css">
</head> </head>
<body> <body>

View File

@ -40,8 +40,11 @@ export const NUMPY_RAND_MAX = 4294967295;
export const FACETOOL_TYPES = ['gfpgan', 'codeformer'] as const; 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: "None", value: 'none'}, key: string;
{ key: "Full-res (slow)", value: 'full-res' }, value: InProgressImageType;
{ key: "Latents (fast)", value: 'latents' } }> = [
{ key: 'None', value: 'none' },
{ key: 'Fast', value: 'latents' },
{ key: 'Accurate', value: 'full-res' },
]; ];

View File

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

View File

@ -61,11 +61,7 @@ const systemSelector = createSelector(
const { upscalingLevel, facetoolStrength, shouldShowImageDetails } = const { upscalingLevel, facetoolStrength, shouldShowImageDetails } =
options; options;
<<<<<<< HEAD
const { intermediateImage, currentImage } = gallery; const { intermediateImage, currentImage } = gallery;
=======
const { intermediateImage } = gallery;
>>>>>>> 4013e8a... Fixes b64 image sending and displaying
return { return {
isProcessing, isProcessing,

View File

@ -22,27 +22,26 @@ import {
setSaveIntermediatesInterval, setSaveIntermediatesInterval,
setShouldConfirmOnDelete, setShouldConfirmOnDelete,
setShouldDisplayGuides, setShouldDisplayGuides,
setShouldDisplayInProgress, setShouldDisplayInProgressType,
setShouldDisplayInProgressLatents,
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,
(system: SystemState) => { (system: SystemState) => {
const { const {
shouldDisplayInProgress, shouldDisplayInProgressType,
shouldDisplayInProgressLatents,
shouldConfirmOnDelete, shouldConfirmOnDelete,
shouldDisplayGuides, shouldDisplayGuides,
model_list, model_list,
} = system; } = system;
return { return {
shouldDisplayInProgress, shouldDisplayInProgressType,
shouldDisplayInProgressLatents,
shouldConfirmOnDelete, shouldConfirmOnDelete,
shouldDisplayGuides, shouldDisplayGuides,
models: _.map(model_list, (_model, key) => key), models: _.map(model_list, (_model, key) => key),
@ -86,8 +85,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
} = useDisclosure(); } = useDisclosure();
const { const {
shouldDisplayInProgress, shouldDisplayInProgressType,
shouldDisplayInProgressLatents,
shouldConfirmOnDelete, shouldConfirmOnDelete,
shouldDisplayGuides, shouldDisplayGuides,
} = useAppSelector(systemSelector); } = useAppSelector(systemSelector);
@ -122,21 +120,41 @@ 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">
<SettingsModalSelectItem <div className="settings-modal-item">
settingTitle="Display In-Progress Images" <ModelList />
validValues={IN_PROGRESS_IMAGE_TYPES} </div>
defaultValue={shouldDisplayInProgressType} <div
dispatcher={setShouldDisplayInProgressType} className="settings-modal-item"
/> style={{ gridAutoFlow: 'row', rowGap: '0.5rem' }}
>
<SettingsModalItem <IAISelect
settingTitle="Display In-Progress Latents (quick; lo-res)" label={'Display In-Progress Images'}
isChecked={shouldDisplayInProgressLatents} validValues={IN_PROGRESS_IMAGE_TYPES}
dispatcher={setShouldDisplayInProgressLatents} value={shouldDisplayInProgressType}
/> onChange={(e: ChangeEvent<HTMLSelectElement>) =>
dispatch(
<SettingsModalItem setShouldDisplayInProgressType(
settingTitle="Confirm on Delete" 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))

View File

@ -25,8 +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 {
shouldDisplayInProgress: boolean; shouldDisplayInProgressType: InProgressImageType;
shouldDisplayInProgressLatents: boolean;
log: Array<LogEntry>; log: Array<LogEntry>;
shouldShowLogViewer: boolean; shouldShowLogViewer: boolean;
isGFPGANAvailable: boolean; isGFPGANAvailable: boolean;
@ -52,8 +51,7 @@ const initialSystemState: SystemState = {
isProcessing: false, isProcessing: false,
log: [], log: [],
shouldShowLogViewer: false, shouldShowLogViewer: false,
shouldDisplayInProgress: false, shouldDisplayInProgressType: 'latents',
shouldDisplayInProgressLatents: false,
shouldDisplayGuides: true, shouldDisplayGuides: true,
isGFPGANAvailable: true, isGFPGANAvailable: true,
isESRGANAvailable: true, isESRGANAvailable: true,
@ -82,12 +80,12 @@ export const systemSlice = createSlice({
name: 'system', name: 'system',
initialState: initialSystemState, initialState: initialSystemState,
reducers: { reducers: {
setShouldDisplayInProgressType: (state, action: PayloadAction<string>) => { setShouldDisplayInProgressType: (
state,
action: PayloadAction<InProgressImageType>
) => {
state.shouldDisplayInProgressType = action.payload; state.shouldDisplayInProgressType = action.payload;
}, },
setShouldDisplayInProgressLatents: (state, action: PayloadAction<boolean>) => {
state.shouldDisplayInProgressLatents = action.payload;
},
setIsProcessing: (state, action: PayloadAction<boolean>) => { setIsProcessing: (state, action: PayloadAction<boolean>) => {
state.isProcessing = action.payload; state.isProcessing = action.payload;
}, },
@ -197,8 +195,7 @@ export const systemSlice = createSlice({
}); });
export const { export const {
setShouldDisplayInProgress, setShouldDisplayInProgressType,
setShouldDisplayInProgressLatents,
setIsProcessing, setIsProcessing,
addLogEntry, addLogEntry,
setShouldShowLogViewer, setShouldShowLogViewer,

File diff suppressed because it is too large Load Diff