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

fix(ui): misc MM cleanup

Browse Source
This commit is contained in:
psychedelicious 2024-02-24 00:36:41 +11:00
parent 2a2a5eb775
commit 98be81354a
15 changed files with 85 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx
View File

@ -11,7 +11,7 @@ const AddModels = () => {
const [addModelMode, setAddModelMode] = useState<'simple' | 'advanced'>('simple');
const handleAddModelSimple = useCallback(() => setAddModelMode('simple'), []);
const handleAddModelAdvanced = useCallback(() => setAddModelMode('advanced'), []);
const { data } = useGetModelImportsQuery({});
const { data } = useGetModelImportsQuery();
console.log({ data });
return (
<Flex flexDirection="column" width="100%" overflow="scroll" maxHeight={window.innerHeight - 250} gap={4}>
@ -27,7 +27,7 @@ const AddModels = () => {
{addModelMode === 'simple' && <SimpleAddModels />}
{addModelMode === 'advanced' && <AdvancedAddModels />}
</Flex>
<Flex>{data?.map((model) => <Text>{model.status}</Text>)}</Flex>
<Flex>{data?.map((model) => <Text key={model.id}>{model.status}</Text>)}</Flex>
</Flex>
);
};

2
invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsForm.tsx
View File

@ -25,7 +25,7 @@ export const ScanModelsForm = () => {
setErrorMessage(error.data.detail);
}
});
}, [scanPath]);
}, [_scanModels, scanPath]);
const handleSetScanPath: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
setScanPath(e.target.value);

6
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx
View File

@ -1,11 +1,11 @@
import { Box, Button, Flex, Heading } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks';
import { SyncModelsIconButton } from 'features/modelManager/components/SyncModels/SyncModelsIconButton';
import { setSelectedModelKey } from 'features/modelManagerV2/store/modelManagerV2Slice';
import { useCallback } from 'react';
import ModelList from './ModelManagerPanel/ModelList';
import { ModelListNavigation } from './ModelManagerPanel/ModelListNavigation';
import { useCallback } from 'react';
import { useAppDispatch } from '../../../app/store/storeHooks';
import { setSelectedModelKey } from '../store/modelManagerV2Slice';
export const ModelManager = () => {
const dispatch = useAppDispatch();

2
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx
View File

@ -1,5 +1,6 @@
import {
Badge,
Box,
Button,
ConfirmationAlertDialog,
Flex,
@ -8,7 +9,6 @@ import {
Text,
Tooltip,
useDisclosure,
Box,
} from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { setSelectedModelKey } from 'features/modelManagerV2/store/modelManagerV2Slice';

5
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelTypeFilter.tsx
View File

@ -40,9 +40,8 @@ export const ModelTypeFilter = () => {
<MenuItem onClick={clearModelType}>All Models</MenuItem>
{Object.keys(MODEL_TYPE_LABELS).map((option) => (
<MenuItem
sx={{
backgroundColor: filteredModelType === option ? 'base.700' : 'transparent',
}}
key={option}
bg={filteredModelType === option ? 'base.700' : 'transparent'}
onClick={selectModelType.bind(null, option)}
>
{MODEL_TYPE_LABELS[option]}

3
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPane.tsx
View File

@ -1,5 +1,6 @@
import { Box } from '@invoke-ai/ui-library';
import { useAppSelector } from '../../../app/store/storeHooks';
import { useAppSelector } from 'app/store/storeHooks';
import { ImportModels } from './ImportModels';
import { Model } from './ModelPanel/Model';

2
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/BaseModelSelect.tsx
View File

@ -1,5 +1,5 @@
import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { Combobox } from '@invoke-ai/ui-library';
import { typedMemo } from 'common/util/typedMemo';
import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { useCallback, useMemo } from 'react';

6
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/BooleanSelect.tsx
View File

@ -8,8 +8,8 @@ import type { AnyModelConfig } from 'services/api/types';
const options: ComboboxOption[] = [
{ value: 'none', label: '-' },
{ value: true as any, label: 'True' },
{ value: false as any, label: 'False' },
{ value: 'true', label: 'True' },
{ value: 'false', label: 'False' },
];
const BooleanSelect = <T extends AnyModelConfig>(props: UseControllerProps<T>) => {
@ -17,7 +17,7 @@ const BooleanSelect = <T extends AnyModelConfig>(props: UseControllerProps<T>) =
const value = useMemo(() => options.find((o) => o.value === field.value), [field.value]);
const onChange = useCallback<ComboboxOnChange>(
(v) => {
v?.value === 'none' ? field.onChange(undefined) : field.onChange(v?.value);
v?.value === 'none' ? field.onChange(undefined) : field.onChange(v?.value === 'true');
},
[field]
);

11
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelFormatSelect.tsx
View File

@ -1,19 +1,12 @@
import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { Combobox } from '@invoke-ai/ui-library';
import { typedMemo } from 'common/util/typedMemo';
import { LORA_MODEL_FORMAT_MAP, MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { LORA_MODEL_FORMAT_MAP } from 'features/parameters/types/constants';
import { useCallback, useMemo } from 'react';
import type { UseControllerProps } from 'react-hook-form';
import { useController } from 'react-hook-form';
import type { AnyModelConfig } from 'services/api/types';
const options: ComboboxOption[] = [
{ value: 'sd-1', label: MODEL_TYPE_MAP['sd-1'] },
{ value: 'sd-2', label: MODEL_TYPE_MAP['sd-2'] },
{ value: 'sdxl', label: MODEL_TYPE_MAP['sdxl'] },
{ value: 'sdxl-refiner', label: MODEL_TYPE_MAP['sdxl-refiner'] },
];
const ModelFormatSelect = <T extends AnyModelConfig>(props: UseControllerProps<T>) => {
const { field, formState } = useController(props);

5
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelTypeSelect.tsx
View File

@ -1,12 +1,11 @@
import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { Combobox } from '@invoke-ai/ui-library';
import { typedMemo } from 'common/util/typedMemo';
import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
import { MODEL_TYPE_LABELS } from 'features/modelManagerV2/subpanels/ModelManagerPanel/ModelTypeFilter';
import { useCallback, useMemo } from 'react';
import type { UseControllerProps } from 'react-hook-form';
import { useController } from 'react-hook-form';
import type { AnyModelConfig } from 'services/api/types';
import { MODEL_TYPE_LABELS } from '../../ModelManagerPanel/ModelTypeFilter';
const options: ComboboxOption[] = [
{ value: 'main', label: MODEL_TYPE_LABELS['main'] as string },

4
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelVariantSelect.tsx
View File

@ -1,10 +1,10 @@
import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { Combobox } from '@invoke-ai/ui-library';
import { typedMemo } from 'common/util/typedMemo';
import { useCallback, useMemo } from 'react';
import type { UseControllerProps } from 'react-hook-form';
import { useController } from 'react-hook-form';
import type { AnyModelConfig, CheckpointModelConfig, DiffusersModelConfig } from 'services/api/types';
import type { AnyModelConfig } from 'services/api/types';
const options: ComboboxOption[] = [
{ value: 'normal', label: 'Normal' },

3
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx
View File

@ -1,4 +1,5 @@
import { useAppSelector } from '../../../../app/store/storeHooks';
import { useAppSelector } from 'app/store/storeHooks';
import { ModelEdit } from './ModelEdit';
import { ModelView } from './ModelView';

68
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx
View File

@ -1,41 +1,43 @@
import { skipToken } from '@reduxjs/toolkit/query';
import { useAppDispatch, useAppSelector } from '../../../../app/store/storeHooks';
import { useGetModelConfigQuery, useUpdateModelsMutation } from '../../../../services/api/endpoints/models';
import {
Flex,
Text,
Heading,
Button,
Input,
Flex,
FormControl,
FormLabel,
Textarea,
FormErrorMessage,
FormLabel,
Heading,
Input,
Text,
Textarea,
} from '@invoke-ai/ui-library';
import { skipToken } from '@reduxjs/toolkit/query';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { setSelectedModelMode } from 'features/modelManagerV2/store/modelManagerV2Slice';
import { addToast } from 'features/system/store/systemSlice';
import { makeToast } from 'features/system/util/makeToast';
import { useCallback, useMemo } from 'react';
import {
import type { SubmitHandler } from 'react-hook-form';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { useGetModelConfigQuery, useUpdateModelsMutation } from 'services/api/endpoints/models';
import type {
AnyModelConfig,
CheckpointModelConfig,
ControlNetConfig,
ControlNetModelConfig,
DiffusersModelConfig,
IPAdapterConfig,
LoRAConfig,
T2IAdapterConfig,
TextualInversionConfig,
VAEConfig,
} from '../../../../services/api/types';
import { setSelectedModelMode } from '../../store/modelManagerV2Slice';
IPAdapterModelConfig,
LoRAModelConfig,
T2IAdapterModelConfig,
TextualInversionModelConfig,
VAEModelConfig,
} from 'services/api/types';
import BaseModelSelect from './Fields/BaseModelSelect';
import { SubmitHandler, useForm } from 'react-hook-form';
import ModelTypeSelect from './Fields/ModelTypeSelect';
import ModelVariantSelect from './Fields/ModelVariantSelect';
import RepoVariantSelect from './Fields/RepoVariantSelect';
import PredictionTypeSelect from './Fields/PredictionTypeSelect';
import BooleanSelect from './Fields/BooleanSelect';
import ModelFormatSelect from './Fields/ModelFormatSelect';
import { useTranslation } from 'react-i18next';
import { addToast } from '../../../system/store/systemSlice';
import { makeToast } from '../../../system/util/makeToast';
import ModelTypeSelect from './Fields/ModelTypeSelect';
import ModelVariantSelect from './Fields/ModelVariantSelect';
import PredictionTypeSelect from './Fields/PredictionTypeSelect';
import RepoVariantSelect from './Fields/RepoVariantSelect';
export const ModelEdit = () => {
const dispatch = useAppDispatch();
@ -63,19 +65,19 @@ export const ModelEdit = () => {
switch (modelType) {
case 'lora':
return data as LoRAConfig;
return data as LoRAModelConfig;
case 'embedding':
return data as TextualInversionConfig;
return data as TextualInversionModelConfig;
case 't2i_adapter':
return data as T2IAdapterConfig;
return data as T2IAdapterModelConfig;
case 'ip_adapter':
return data as IPAdapterConfig;
return data as IPAdapterModelConfig;
case 'controlnet':
return data as ControlNetConfig;
return data as ControlNetModelConfig;
case 'vae':
return data as VAEConfig;
return data as VAEModelConfig;
default:
return data as DiffusersModelConfig;
return null;
}
}, [data]);

45
invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx
View File

@ -1,22 +1,23 @@
import { Box,Button, Flex, Heading, Text } from '@invoke-ai/ui-library';
import { skipToken } from '@reduxjs/toolkit/query';
import { useAppDispatch, useAppSelector } from '../../../../app/store/storeHooks';
import { useGetModelMetadataQuery, useGetModelConfigQuery } from '../../../../services/api/endpoints/models';
import { Flex, Text, Heading, Button, Box } from '@invoke-ai/ui-library';
import DataViewer from '../../../gallery/components/ImageMetadataViewer/DataViewer';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import DataViewer from 'features/gallery/components/ImageMetadataViewer/DataViewer';
import { setSelectedModelMode } from 'features/modelManagerV2/store/modelManagerV2Slice';
import { useCallback, useMemo } from 'react';
import {
CheckpointModelConfig,
ControlNetConfig,
DiffusersModelConfig,
IPAdapterConfig,
LoRAConfig,
T2IAdapterConfig,
TextualInversionConfig,
VAEConfig,
} from '../../../../services/api/types';
import { ModelAttrView } from './ModelAttrView';
import { IoPencil } from 'react-icons/io5';
import { setSelectedModelMode } from '../../store/modelManagerV2Slice';
import { useGetModelConfigQuery,useGetModelMetadataQuery } from 'services/api/endpoints/models';
import type {
CheckpointModelConfig,
ControlNetModelConfig,
DiffusersModelConfig,
IPAdapterModelConfig,
LoRAModelConfig,
T2IAdapterModelConfig,
TextualInversionModelConfig,
VAEModelConfig,
} from 'services/api/types';
import { ModelAttrView } from './ModelAttrView';
export const ModelView = () => {
const dispatch = useAppDispatch();
@ -41,17 +42,17 @@ export const ModelView = () => {
switch (modelType) {
case 'lora':
return data as LoRAConfig;
return data as LoRAModelConfig;
case 'embedding':
return data as TextualInversionConfig;
return data as TextualInversionModelConfig;
case 't2i_adapter':
return data as T2IAdapterConfig;
return data as T2IAdapterModelConfig;
case 'ip_adapter':
return data as IPAdapterConfig;
return data as IPAdapterModelConfig;
case 'controlnet':
return data as ControlNetConfig;
return data as ControlNetModelConfig;
case 'vae':
return data as VAEConfig;
return data as VAEModelConfig;
default:
return null;
}

19
invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx
View File

@ -1,20 +1,9 @@
import { Flex, Heading, Tab, TabList, TabPanel, TabPanels, Tabs, Box, Button } from '@invoke-ai/ui-library';
import ImportModelsPanel from 'features/modelManager/subpanels/ImportModelsPanel';
import MergeModelsPanel from 'features/modelManager/subpanels/MergeModelsPanel';
import ModelManagerPanel from 'features/modelManager/subpanels/ModelManagerPanel';
import ModelManagerSettingsPanel from 'features/modelManager/subpanels/ModelManagerSettingsPanel';
import type { ReactNode } from 'react';
import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { SyncModelsIconButton } from '../../../modelManager/components/SyncModels/SyncModelsIconButton';
import { ModelManager } from '../../../modelManagerV2/subpanels/ModelManager';
import { ModelPane } from '../../../modelManagerV2/subpanels/ModelPane';
type ModelManagerTabName = 'modelManager' | 'importModels' | 'mergeModels' | 'settings';
import { Flex } from '@invoke-ai/ui-library';
import { ModelManager } from 'features/modelManagerV2/subpanels/ModelManager';
import { ModelPane } from 'features/modelManagerV2/subpanels/ModelPane';
import { memo } from 'react';
const ModelManagerTab = () => {
const { t } = useTranslation();
return (
<Flex w="full" h="full" gap="2">
<ModelManager />