diff --git a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx index 82ccb7f309..cc496674f0 100644 --- a/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx +++ b/invokeai/frontend/web/src/features/modelManager/subpanels/AddModelsPanel/AddModels.tsx @@ -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 ( @@ -27,7 +27,7 @@ const AddModels = () => { {addModelMode === 'simple' && } {addModelMode === 'advanced' && } - {data?.map((model) => {model.status})} + {data?.map((model) => {model.status})} ); }; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsForm.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsForm.tsx index 722041d3d2..0b25ec560f 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsForm.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanModels/ScanModelsForm.tsx @@ -25,7 +25,7 @@ export const ScanModelsForm = () => { setErrorMessage(error.data.detail); } }); - }, [scanPath]); + }, [_scanModels, scanPath]); const handleSetScanPath: ChangeEventHandler = useCallback((e) => { setScanPath(e.target.value); diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx index 900a6a9342..9eff333f4c 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManager.tsx @@ -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(); diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx index d6cb70f4e8..93468cd418 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx @@ -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'; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelTypeFilter.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelTypeFilter.tsx index 0134ffc811..c9592d6102 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelTypeFilter.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelTypeFilter.tsx @@ -40,9 +40,8 @@ export const ModelTypeFilter = () => { All Models {Object.keys(MODEL_TYPE_LABELS).map((option) => ( {MODEL_TYPE_LABELS[option]} diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPane.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPane.tsx index 7658e741d3..b83e0e0386 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPane.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPane.tsx @@ -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'; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/BaseModelSelect.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/BaseModelSelect.tsx index da7333c2a8..bcb84c9b47 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/BaseModelSelect.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/BaseModelSelect.tsx @@ -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'; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/BooleanSelect.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/BooleanSelect.tsx index d21ee89531..48c515d1ee 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/BooleanSelect.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/BooleanSelect.tsx @@ -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 = (props: UseControllerProps) => { @@ -17,7 +17,7 @@ const BooleanSelect = (props: UseControllerProps) = const value = useMemo(() => options.find((o) => o.value === field.value), [field.value]); const onChange = useCallback( (v) => { - v?.value === 'none' ? field.onChange(undefined) : field.onChange(v?.value); + v?.value === 'none' ? field.onChange(undefined) : field.onChange(v?.value === 'true'); }, [field] ); diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelFormatSelect.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelFormatSelect.tsx index 0552789a86..0a9f0abe79 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelFormatSelect.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelFormatSelect.tsx @@ -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 = (props: UseControllerProps) => { const { field, formState } = useController(props); diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelTypeSelect.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelTypeSelect.tsx index 140bfa9fe0..e0b244baa9 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelTypeSelect.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelTypeSelect.tsx @@ -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 }, diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelVariantSelect.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelVariantSelect.tsx index 7fb74b0bd9..cde4d63ef9 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelVariantSelect.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelVariantSelect.tsx @@ -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' }, diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx index 8a6f7ddee4..6db804cccf 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx @@ -1,4 +1,5 @@ -import { useAppSelector } from '../../../../app/store/storeHooks'; +import { useAppSelector } from 'app/store/storeHooks'; + import { ModelEdit } from './ModelEdit'; import { ModelView } from './ModelView'; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx index 772de82c41..e2ff1c2a0a 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelEdit.tsx @@ -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]); diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx index bf19f9d2d6..bf320e5692 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelView.tsx @@ -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; } diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx index 9245f5c60d..d80f36bd91 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManagerTab.tsx @@ -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 (