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 (
ControlAdapterDefaultSettings, AnyModelConfig,
InvalidModelConfigException, MainModelDefaultSettings, BaseModelType,
ModelConfigFactory, ModelFormat, ModelRepoVariant, ControlAdapterDefaultSettings,
ModelSourceType, ModelType, ModelVariantType, InvalidModelConfigException,
SchedulerPredictionType) MainModelDefaultSettings,
ModelConfigFactory,
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 (
<Tooltip label={value?.description}> <Flex sx={{ gap: 2 }}>
<Flex flexDirection="row" gap={2}> <Tooltip label={value?.description}>
<FormControl isDisabled={!isEnabled} isInvalid={!value || mainModel?.base !== modelConfig?.base}> <FormControl
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,18 +117,22 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
noOptionsMessage={noOptionsMessage} noOptionsMessage={noOptionsMessage}
/> />
</FormControl> </FormControl>
{modelConfig?.type === 'ip_adapter' && modelConfig.format === 'checkpoint' && ( </Tooltip>
<FormControl isDisabled={!isEnabled} isInvalid={!value || mainModel?.base !== modelConfig?.base}> {modelConfig?.type === 'ip_adapter' && modelConfig.format === 'checkpoint' && (
<Combobox <FormControl
options={clipVisionOptions} isDisabled={!isEnabled}
placeholder={t('controlnet.selectCLIPVisionModel')} isInvalid={!value || mainModel?.base !== modelConfig?.base}
value={clipVisionModel} sx={{ width: 'max-content', minWidth: 28 }}
onChange={onCLIPVisionModelChange} >
/> <Combobox
</FormControl> options={clipVisionOptions}
)} placeholder={t('controlnet.selectCLIPVisionModel')}
</Flex> value={clipVisionModel}
</Tooltip> onChange={onCLIPVisionModelChange}
/>
</FormControl>
)}
</Flex>
); );
}; };