ui: improve the clip vision model picker layout

This commit is contained in:
blessedcoolant 2024-03-27 22:05:53 +05:30
parent 91a70c8d07
commit 4a0dfc3b2d
2 changed files with 38 additions and 23 deletions

View File

@ -9,16 +9,23 @@ from picklescan.scanner import scan_file_path
import invokeai.backend.util.logging as logger import invokeai.backend.util.logging as logger
from invokeai.app.util.misc import uuid_string from invokeai.app.util.misc import uuid_string
from invokeai.backend.model_hash.model_hash import (HASHING_ALGORITHMS, from invokeai.backend.model_hash.model_hash import HASHING_ALGORITHMS, ModelHash
ModelHash)
from invokeai.backend.util.util import SilenceWarnings from invokeai.backend.util.util import SilenceWarnings
from .config import (AnyModelConfig, BaseModelType, from .config import (
AnyModelConfig,
BaseModelType,
ControlAdapterDefaultSettings, ControlAdapterDefaultSettings,
InvalidModelConfigException, MainModelDefaultSettings, InvalidModelConfigException,
ModelConfigFactory, ModelFormat, ModelRepoVariant, MainModelDefaultSettings,
ModelSourceType, ModelType, ModelVariantType, ModelConfigFactory,
SchedulerPredictionType) ModelFormat,
ModelRepoVariant,
ModelSourceType,
ModelType,
ModelVariantType,
SchedulerPredictionType,
)
from .util.model_util import lora_token_vector_length, read_checkpoint_meta from .util.model_util import lora_token_vector_length, read_checkpoint_meta
CkptType = Dict[str | int, Any] CkptType = Dict[str | int, Any]

View File

@ -102,9 +102,13 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
); );
return ( return (
<Flex sx={{ gap: 2 }}>
<Tooltip label={value?.description}> <Tooltip label={value?.description}>
<Flex flexDirection="row" gap={2}> <FormControl
<FormControl isDisabled={!isEnabled} isInvalid={!value || mainModel?.base !== modelConfig?.base}> isDisabled={!isEnabled}
isInvalid={!value || mainModel?.base !== modelConfig?.base}
sx={{ width: '100%' }}
>
<Combobox <Combobox
options={options} options={options}
placeholder={t('controlnet.selectModel')} placeholder={t('controlnet.selectModel')}
@ -113,8 +117,13 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
noOptionsMessage={noOptionsMessage} noOptionsMessage={noOptionsMessage}
/> />
</FormControl> </FormControl>
</Tooltip>
{modelConfig?.type === 'ip_adapter' && modelConfig.format === 'checkpoint' && ( {modelConfig?.type === 'ip_adapter' && modelConfig.format === 'checkpoint' && (
<FormControl isDisabled={!isEnabled} isInvalid={!value || mainModel?.base !== modelConfig?.base}> <FormControl
isDisabled={!isEnabled}
isInvalid={!value || mainModel?.base !== modelConfig?.base}
sx={{ width: 'max-content', minWidth: 28 }}
>
<Combobox <Combobox
options={clipVisionOptions} options={clipVisionOptions}
placeholder={t('controlnet.selectCLIPVisionModel')} placeholder={t('controlnet.selectCLIPVisionModel')}
@ -124,7 +133,6 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
</FormControl> </FormControl>
)} )}
</Flex> </Flex>
</Tooltip>
); );
}; };