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

View File

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

View File

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

View File

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

View File

@ -22,27 +22,26 @@ import {
setSaveIntermediatesInterval,
setShouldConfirmOnDelete,
setShouldDisplayGuides,
setShouldDisplayInProgress,
setShouldDisplayInProgressLatents,
setShouldDisplayInProgressType,
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,
(system: SystemState) => {
const {
shouldDisplayInProgress,
shouldDisplayInProgressLatents,
shouldDisplayInProgressType,
shouldConfirmOnDelete,
shouldDisplayGuides,
model_list,
} = system;
return {
shouldDisplayInProgress,
shouldDisplayInProgressLatents,
shouldDisplayInProgressType,
shouldConfirmOnDelete,
shouldDisplayGuides,
models: _.map(model_list, (_model, key) => key),
@ -86,8 +85,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
} = useDisclosure();
const {
shouldDisplayInProgress,
shouldDisplayInProgressLatents,
shouldDisplayInProgressType,
shouldConfirmOnDelete,
shouldDisplayGuides,
} = useAppSelector(systemSelector);
@ -122,21 +120,41 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
<ModalCloseButton />
<ModalBody className="settings-modal-content">
<div className="settings-modal-items">
<SettingsModalSelectItem
settingTitle="Display In-Progress Images"
<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}
defaultValue={shouldDisplayInProgressType}
dispatcher={setShouldDisplayInProgressType}
value={shouldDisplayInProgressType}
onChange={(e: ChangeEvent<HTMLSelectElement>) =>
dispatch(
setShouldDisplayInProgressType(
e.target.value as InProgressImageType
)
)
}
/>
<SettingsModalItem
settingTitle="Display In-Progress Latents (quick; lo-res)"
isChecked={shouldDisplayInProgressLatents}
dispatcher={setShouldDisplayInProgressLatents}
{shouldDisplayInProgressType === 'full-res' && (
<IAINumberInput
label="Save images every n steps"
min={1}
max={steps}
step={1}
onChange={handleChangeIntermediateSteps}
value={saveIntermediatesInterval}
width="auto"
textAlign="center"
/>
<SettingsModalItem
settingTitle="Confirm on Delete"
)}
</div>
<IAISwitch
styleClass="settings-modal-item"
label={'Confirm on Delete'}
isChecked={shouldConfirmOnDelete}
onChange={(e: ChangeEvent<HTMLInputElement>) =>
dispatch(setShouldConfirmOnDelete(e.target.checked))

View File

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

File diff suppressed because it is too large Load Diff