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

feat: Port IAISelect's to IAIMantineSelect's

Browse Source 
Ported everything except Model Manager selects and the Canvas Layer Select (this needs tooltip support)
This commit is contained in:
blessedcoolant 2023-06-13 00:11:30 +12:00 committed by psychedelicious
parent 14cdc800c3
commit 9a77bd9140
10 changed files with 75 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/app/constants.ts
View File

@ -22,9 +22,9 @@ export const SCHEDULERS = [
export type Scheduler = (typeof SCHEDULERS)[number];
// Valid upscaling levels
export const UPSCALING_LEVELS: Array<{ key: string; value: number }> = [
{ key: '2x', value: 2 },
{ key: '4x', value: 4 },
export const UPSCALING_LEVELS: Array<{ label: string; value: string }> = [
{ label: '2x', value: '2' },
{ label: '4x', value: '4' },
];
export const NUMPY_RAND_MIN = 0;

1
invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx
View File

@ -9,7 +9,6 @@ const IAIMantineSelect = (props: IAISelectProps) => {
<Select
searchable={searchable}
styles={() => ({
root: {},
label: {
color: 'var(--invokeai-colors-base-300)',
fontWeight: 'normal',

6
invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts
View File

@ -13,9 +13,9 @@ export const LAYER_NAMES = ['base', 'mask'] as const;
export type CanvasLayer = (typeof LAYER_NAMES)[number];
export const BOUNDING_BOX_SCALES_DICT = [
{ key: 'Auto', value: 'auto' },
{ key: 'Manual', value: 'manual' },
{ key: 'None', value: 'none' },
{ label: 'Auto', value: 'auto' },
{ label: 'Manual', value: 'manual' },
{ label: 'None', value: 'none' },
];
export const BOUNDING_BOX_SCALES = ['none', 'auto', 'manual'] as const;

34
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx
View File

@ -5,6 +5,7 @@ import IAICustomSelect, {
} from 'common/components/IAICustomSelect';
import IAISelect from 'common/components/IAISelect';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import {
CONTROLNET_MODELS,
ControlNetModelName,
@ -26,11 +27,11 @@ const selector = createSelector(configSelector, (config) => {
})).filter((d) => !config.sd.disabledControlNetModels.includes(d.value));
});
// const DATA: IAICustomSelectOption[] = map(CONTROLNET_MODELS, (m) => ({
// value: m.type,
// label: m.label,
// tooltip: m.type,
// }));
const DATA = map(CONTROLNET_MODELS, (m) => ({
value: m.type,
label: m.label,
tooltip: m.type,
}));
const ParamControlNetModel = (props: ParamControlNetModelProps) => {
const { controlNetId, model } = props;
@ -39,33 +40,20 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => {
const isReady = useIsReadyToInvoke();
const handleModelChanged = useCallback(
(e: ChangeEvent<HTMLSelectElement>) => {
(val: string | null) => {
// TODO: do not cast
const model = e.target.value as ControlNetModelName;
const model = val as ControlNetModelName;
dispatch(controlNetModelChanged({ controlNetId, model }));
},
[controlNetId, dispatch]
);
// const handleModelChanged = useCallback(
// (val: string | null | undefined) => {
// // TODO: do not cast
// const model = val as ControlNetModelName;
// dispatch(controlNetModelChanged({ controlNetId, model }));
// },
// [controlNetId, dispatch]
// );
return (
<IAISelect
tooltip={model}
tooltipProps={{ placement: 'top', hasArrow: true }}
validValues={controlNetModels}
<IAIMantineSelect
data={DATA}
value={model}
onChange={handleModelChanged}
isDisabled={!isReady}
// ellipsisPosition="start"
// withCheckIcon
disabled={!isReady}
/>
);
// return (

46
invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx
View File

@ -1,17 +1,15 @@
import IAICustomSelect, {
IAICustomSelectOption,
} from 'common/components/IAICustomSelect';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { IAICustomSelectOption } from 'common/components/IAICustomSelect';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { map } from 'lodash-es';
import { ChangeEvent, memo, useCallback } from 'react';
import { CONTROLNET_PROCESSORS } from '../../store/constants';
import { controlNetProcessorTypeChanged } from '../../store/controlNetSlice';
import {
ControlNetProcessorNode,
ControlNetProcessorType,
} from '../../store/types';
import { controlNetProcessorTypeChanged } from '../../store/controlNetSlice';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { CONTROLNET_PROCESSORS } from '../../store/constants';
import { map } from 'lodash-es';
import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
import IAISelect from 'common/components/IAISelect';
import { createSelector } from '@reduxjs/toolkit';
import { configSelector } from 'features/system/store/configSelectors';
@ -68,36 +66,36 @@ const ParamControlNetProcessorSelect = (
const isReady = useIsReadyToInvoke();
const controlNetProcessors = useAppSelector(selector);
const handleProcessorTypeChanged = useCallback(
(e: ChangeEvent<HTMLSelectElement>) => {
dispatch(
controlNetProcessorTypeChanged({
controlNetId,
processorType: e.target.value as ControlNetProcessorType,
})
);
},
[controlNetId, dispatch]
);
// const handleProcessorTypeChanged = useCallback(
// (v: string | null | undefined) => {
// (e: ChangeEvent<HTMLSelectElement>) => {
// dispatch(
// controlNetProcessorTypeChanged({
// controlNetId,
// processorType: v as ControlNetProcessorType,
// processorType: e.target.value as ControlNetProcessorType,
// })
// );
// },
// [controlNetId, dispatch]
// );
const handleProcessorTypeChanged = useCallback(
(v: string | null) => {
dispatch(
controlNetProcessorTypeChanged({
controlNetId,
processorType: v as ControlNetProcessorType,
})
);
},
[controlNetId, dispatch]
);
return (
<IAISelect
<IAIMantineSelect
label="Processor"
value={processorNode.type ?? 'canny_image_processor'}
validValues={controlNetProcessors}
data={controlNetProcessors}
onChange={handleProcessorTypeChanged}
isDisabled={!isReady}
disabled={!isReady}
/>
);
// return (

12
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillMethod.tsx
View File

@ -1,12 +1,12 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISelect from 'common/components/IAISelect';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { generationSelector } from 'features/parameters/store/generationSelectors';
import { setInfillMethod } from 'features/parameters/store/generationSlice';
import { systemSelector } from 'features/system/store/systemSelectors';
import { ChangeEvent, memo, useCallback } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
@ -30,17 +30,17 @@ const ParamInfillMethod = () => {
const { t } = useTranslation();
const handleChange = useCallback(
(e: ChangeEvent<HTMLSelectElement>) => {
dispatch(setInfillMethod(e.target.value));
(v: string) => {
dispatch(setInfillMethod(v));
},
[dispatch]
);
return (
<IAISelect
<IAIMantineSelect
label={t('parameters.infillMethod')}
value={infillMethod}
validValues={infillMethods}
data={infillMethods}
onChange={handleChange}
/>
);

16
invokeai/frontend/web/src/features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamScaleBeforeProcessing.tsx
View File

@ -1,15 +1,15 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import IAISelect from 'common/components/IAISelect';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { setBoundingBoxScaleMethod } from 'features/canvas/store/canvasSlice';
import {
BoundingBoxScale,
BOUNDING_BOX_SCALES_DICT,
BoundingBoxScale,
} from 'features/canvas/store/canvasTypes';
import { ChangeEvent, memo } from 'react';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const selector = createSelector(
@ -30,16 +30,14 @@ const ParamScaleBeforeProcessing = () => {
const { t } = useTranslation();
const handleChangeBoundingBoxScaleMethod = (
e: ChangeEvent<HTMLSelectElement>
) => {
dispatch(setBoundingBoxScaleMethod(e.target.value as BoundingBoxScale));
const handleChangeBoundingBoxScaleMethod = (v: string) => {
dispatch(setBoundingBoxScaleMethod(v as BoundingBoxScale));
};
return (
<IAISelect
<IAIMantineSelect
label={t('parameters.scaleBeforeProcessing')}
validValues={BOUNDING_BOX_SCALES_DICT}
data={BOUNDING_BOX_SCALES_DICT}
value={boundingBoxScale}
onChange={handleChangeBoundingBoxScaleMethod}
/>

11
invokeai/frontend/web/src/features/parameters/components/Parameters/FaceRestore/FaceRestoreType.tsx
View File

@ -1,12 +1,11 @@
import { FACETOOL_TYPES } from 'app/constants';
import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAISelect from 'common/components/IAISelect';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import {
FacetoolType,
setFacetoolType,
} from 'features/parameters/store/postprocessingSlice';
import { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
export default function FaceRestoreType() {
@ -17,13 +16,13 @@ export default function FaceRestoreType() {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const handleChangeFacetoolType = (e: ChangeEvent<HTMLSelectElement>) =>
dispatch(setFacetoolType(e.target.value as FacetoolType));
const handleChangeFacetoolType = (v: string) =>
dispatch(setFacetoolType(v as FacetoolType));
return (
<IAISelect
<IAIMantineSelect
label={t('parameters.type')}
validValues={FACETOOL_TYPES.concat()}
data={FACETOOL_TYPES.concat()}
value={facetoolType}
onChange={handleChangeFacetoolType}
/>

17
invokeai/frontend/web/src/features/parameters/components/Parameters/Upscale/UpscaleScale.tsx
View File

@ -1,12 +1,11 @@
import { UPSCALING_LEVELS } from 'app/constants';
import type { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAISelect from 'common/components/IAISelect';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import {
setUpscalingLevel,
UpscalingLevel,
setUpscalingLevel,
} from 'features/parameters/store/postprocessingSlice';
import type { ChangeEvent } from 'react';
import { useTranslation } from 'react-i18next';
export default function UpscaleScale() {
@ -21,16 +20,16 @@ export default function UpscaleScale() {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const handleChangeLevel = (e: ChangeEvent<HTMLSelectElement>) =>
dispatch(setUpscalingLevel(Number(e.target.value) as UpscalingLevel));
const handleChangeLevel = (v: string) =>
dispatch(setUpscalingLevel(Number(v) as UpscalingLevel));
return (
<IAISelect
isDisabled={!isESRGANAvailable}
<IAIMantineSelect
disabled={!isESRGANAvailable}
label={t('parameters.scale')}
value={upscalingLevel}
value={String(upscalingLevel)}
onChange={handleChangeLevel}
validValues={UPSCALING_LEVELS}
data={UPSCALING_LEVELS}
/>
);
}

22
invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx
View File

@ -13,19 +13,21 @@ import {
useDisclosure,
} from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { VALID_LOG_LEVELS } from 'app/logging/useLogger';
import { LOCALSTORAGE_KEYS, LOCALSTORAGE_PREFIX } from 'app/store/constants';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton';
import IAISelect from 'common/components/IAISelect';
import IAIMantineSelect from 'common/components/IAIMantineSelect';
import IAISwitch from 'common/components/IAISwitch';
import { systemSelector } from 'features/system/store/systemSelectors';
import {
SystemState,
consoleLogLevelChanged,
setEnableImageDebugging,
setShouldConfirmOnDelete,
setShouldDisplayGuides,
shouldAntialiasProgressImageChanged,
shouldLogToConsoleChanged,
SystemState,
} from 'features/system/store/systemSlice';
import { uiSelector } from 'features/ui/store/uiSelectors';
import {
@ -37,15 +39,13 @@ import { UIState } from 'features/ui/store/uiTypes';
import { isEqual } from 'lodash-es';
import {
ChangeEvent,
cloneElement,
ReactElement,
cloneElement,
useCallback,
useEffect,
} from 'react';
import { useTranslation } from 'react-i18next';
import { VALID_LOG_LEVELS } from 'app/logging/useLogger';
import { LogLevelName } from 'roarr';
import { LOCALSTORAGE_KEYS, LOCALSTORAGE_PREFIX } from 'app/store/constants';
import SettingsSchedulers from './SettingsSchedulers';
const selector = createSelector(
@ -157,8 +157,8 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
}, [onSettingsModalClose, onRefreshModalOpen]);
const handleLogLevelChanged = useCallback(
(e: ChangeEvent<HTMLSelectElement>) => {
dispatch(consoleLogLevelChanged(e.target.value as LogLevelName));
(v: string) => {
dispatch(consoleLogLevelChanged(v as LogLevelName));
},
[dispatch]
);
@ -255,14 +255,12 @@ const SettingsModal = ({ children, config }: SettingsModalProps) => {
isChecked={shouldLogToConsole}
onChange={handleLogToConsoleChanged}
/>
<IAISelect
horizontal
spaceEvenly
isDisabled={!shouldLogToConsole}
<IAIMantineSelect
disabled={!shouldLogToConsole}
label={t('settings.consoleLogLevel')}
onChange={handleLogLevelChanged}
value={consoleLogLevel}
validValues={VALID_LOG_LEVELS.concat()}
data={VALID_LOG_LEVELS.concat()}
/>
<IAISwitch
label={t('settings.enableImageDebugging')}