diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPane.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPane.tsx index 32cca86ea3..5f1a70e0fe 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPane.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPane.tsx @@ -7,7 +7,7 @@ import { Model } from './ModelPanel/Model'; export const ModelPane = () => { const selectedModelKey = useAppSelector((s) => s.modelmanagerV2.selectedModelKey); return ( - + {selectedModelKey ? : } ); diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx index dc7da624c0..b2b6cbfa8f 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx @@ -1,4 +1,4 @@ -import { Box, Button, IconButton, Image } from '@invoke-ai/ui-library'; +import { Box, Button, Flex, Icon, IconButton, Image, Tooltip } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; import { typedMemo } from 'common/util/typedMemo'; import { addToast } from 'features/system/store/systemSlice'; @@ -95,7 +95,7 @@ const ModelImageUpload = ({ model_key, model_image }: Props) => { if (image) { return ( - + { /> } - size="sm" - variant="link" - _hover={{ color: 'base.100' }} + icon={} + size="md" + variant="ghost" /> ); @@ -123,9 +122,21 @@ const ModelImageUpload = ({ model_key, model_image }: Props) => { return ( <> - + + + + + ); 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 9778f0fa97..6e88da0aa1 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx @@ -1,12 +1,12 @@ -import { Box, Flex, Heading, Tab, TabList, TabPanel, TabPanels, Tabs, Text } from '@invoke-ai/ui-library'; +import { Flex, Heading, Text } from '@invoke-ai/ui-library'; import { skipToken } from '@reduxjs/toolkit/query'; import { useAppSelector } from 'app/store/storeHooks'; +import { ModelConvertButton } from 'features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton'; +import { ModelEditButton } from 'features/modelManagerV2/subpanels/ModelPanel/ModelEditButton'; import { useTranslation } from 'react-i18next'; import { useGetModelConfigQuery } from 'services/api/endpoints/models'; import ModelImageUpload from './Fields/ModelImageUpload'; -import { ModelMetadata } from './Metadata/ModelMetadata'; -import { ModelAttrView } from './ModelAttrView'; import { ModelEdit } from './ModelEdit'; import { ModelView } from './ModelView'; @@ -25,38 +25,28 @@ export const Model = () => { } return ( - <> - - - - {data.name} - - + + + + + + + {data.name} + + + + + + {data.source && ( {t('modelManager.source')}: {data?.source} )} - - - + {data.description} - - - - - {t('modelManager.settings')} - {t('modelManager.metadata')} - - - - {selectedModelMode === 'view' ? : } - - - - - - + {selectedModelMode === 'view' ? : } + ); }; diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelConvert.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton.tsx similarity index 78% rename from invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelConvert.tsx rename to invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton.tsx index de64e295f0..53977434d9 100644 --- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelConvert.tsx +++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton.tsx @@ -8,42 +8,47 @@ import { UnorderedList, useDisclosure, } from '@invoke-ai/ui-library'; +import { skipToken } from '@reduxjs/toolkit/query'; import { useAppDispatch } from 'app/store/storeHooks'; import { addToast } from 'features/system/store/systemSlice'; import { makeToast } from 'features/system/util/makeToast'; import { useCallback } from 'react'; import { useTranslation } from 'react-i18next'; -import { useConvertModelMutation } from 'services/api/endpoints/models'; -import type { CheckpointModelConfig } from 'services/api/types'; +import { useConvertModelMutation, useGetModelConfigQuery } from 'services/api/endpoints/models'; interface ModelConvertProps { - model: CheckpointModelConfig; + modelKey: string | null; } -export const ModelConvert = (props: ModelConvertProps) => { - const { model } = props; +export const ModelConvertButton = (props: ModelConvertProps) => { + const { modelKey } = props; const dispatch = useAppDispatch(); const { t } = useTranslation(); + const { data } = useGetModelConfigQuery(modelKey ?? skipToken); const [convertModel, { isLoading }] = useConvertModelMutation(); const { isOpen, onOpen, onClose } = useDisclosure(); const modelConvertHandler = useCallback(() => { + if (!data || isLoading) { + return; + } + dispatch( addToast( makeToast({ - title: `${t('modelManager.convertingModelBegin')}: ${model.name}`, + title: `${t('modelManager.convertingModelBegin')}: ${data?.name}`, status: 'info', }) ) ); - convertModel(model.key) + convertModel(data?.key) .unwrap() .then(() => { dispatch( addToast( makeToast({ - title: `${t('modelManager.modelConverted')}: ${model.name}`, + title: `${t('modelManager.modelConverted')}: ${data?.name}`, status: 'success', }) ) @@ -53,13 +58,13 @@ export const ModelConvert = (props: ModelConvertProps) => { dispatch( addToast( makeToast({ - title: `${t('modelManager.modelConversionFailed')}: ${model.name}`, + title: `${t('modelManager.modelConversionFailed')}: ${data?.name}`, status: 'error', }) ) ); }); - }, [convertModel, dispatch, model.key, model.name, t]); + }, [data, isLoading, dispatch, t, convertModel]); return ( <> @@ -69,11 +74,12 @@ export const ModelConvert = (props: ModelConvertProps) => { aria-label={t('modelManager.convertToDiffusers')} className=" modal-close-btn" isLoading={isLoading} + flexShrink={0} > 🧨 {t('modelManager.convertToDiffusers')} {
- + {t('modelManager.modelName')} (value && value.trim().length > 3) || 'Must be at least 3 characters', @@ -132,7 +132,7 @@ export const ModelEdit = () => { {t('modelManager.description')} -