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

feat: Add base model label to Model Item

Browse Source
This commit is contained in:
blessedcoolant 2023-07-18 20:00:22 +12:00
parent 64d676219b
commit d17450bbe6
2 changed files with 84 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx
View File

@ -3,7 +3,7 @@ import { EntityState } from '@reduxjs/toolkit';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import IAIInput from 'common/components/IAIInput'; import IAIInput from 'common/components/IAIInput';
import { forEach } from 'lodash-es'; import { forEach } from 'lodash-es';
import type { ChangeEvent } from 'react'; import type { ChangeEvent, PropsWithChildren } from 'react';
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { import {
@ -44,13 +44,7 @@ const ModelList = (props: ModelListProps) => {
return ( return (
<Flex flexDirection="column" rowGap={4} width="50%" minWidth="50%"> <Flex flexDirection="column" rowGap={4} width="50%" minWidth="50%">
<Flex <Flex flexDirection="column" gap={4} paddingInlineEnd={4}>
flexDirection="column"
gap={4}
maxHeight={window.innerHeight - 240}
overflow="scroll"
paddingInlineEnd={4}
>
<ButtonGroup isAttached> <ButtonGroup isAttached>
<IAIButton <IAIButton
onClick={() => setModelFormatFilter('all')} onClick={() => setModelFormatFilter('all')}
@ -83,35 +77,39 @@ const ModelList = (props: ModelListProps) => {
{['all', 'diffusers'].includes(modelFormatFilter) && {['all', 'diffusers'].includes(modelFormatFilter) &&
filteredDiffusersModels.length > 0 && ( filteredDiffusersModels.length > 0 && (
<Flex sx={{ gap: 2, flexDir: 'column' }}> <StyledModelContainer>
<Text variant="subtext" fontSize="sm"> <Flex sx={{ gap: 2, flexDir: 'column' }}>
Diffusers <Text variant="subtext" fontSize="sm">
</Text> Diffusers
{filteredDiffusersModels.map((model) => ( </Text>
<ModelListItem {filteredDiffusersModels.map((model) => (
key={model.id} <ModelListItem
model={model} key={model.id}
isSelected={selectedModelId === model.id} model={model}
setSelectedModelId={setSelectedModelId} isSelected={selectedModelId === model.id}
/> setSelectedModelId={setSelectedModelId}
))} />
</Flex> ))}
</Flex>
</StyledModelContainer>
)} )}
{['all', 'checkpoint'].includes(modelFormatFilter) && {['all', 'checkpoint'].includes(modelFormatFilter) &&
filteredCheckpointModels.length > 0 && ( filteredCheckpointModels.length > 0 && (
<Flex sx={{ gap: 2, flexDir: 'column' }}> <StyledModelContainer>
<Text variant="subtext" fontSize="sm"> <Flex sx={{ gap: 2, flexDir: 'column' }}>
Checkpoint <Text variant="subtext" fontSize="sm">
</Text> Checkpoint
{filteredCheckpointModels.map((model) => ( </Text>
<ModelListItem {filteredCheckpointModels.map((model) => (
key={model.id} <ModelListItem
model={model} key={model.id}
isSelected={selectedModelId === model.id} model={model}
setSelectedModelId={setSelectedModelId} isSelected={selectedModelId === model.id}
/> setSelectedModelId={setSelectedModelId}
))} />
</Flex> ))}
</Flex>
</StyledModelContainer>
)} )}
</Flex> </Flex>
</Flex> </Flex>
@ -143,3 +141,24 @@ const modelsFilter = (
}); });
return filteredModels; return filteredModels;
}; };
const StyledModelContainer = (props: PropsWithChildren) => {
return (
<Flex
flexDirection="column"
maxHeight={window.innerHeight - 280}
overflow="scroll"
gap={4}
borderRadius={4}
p={4}
sx={{
bg: 'base.200',
_dark: {
bg: 'base.800',
},
}}
>
{props.children}
</Flex>
);
};

36
invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelListItem.tsx
View File

@ -20,6 +20,13 @@ type ModelListItemProps = {
setSelectedModelId: (v: string | undefined) => void; setSelectedModelId: (v: string | undefined) => void;
}; };
const modelBaseTypeMap = {
'sd-1': 'SD1',
'sd-2': 'SD2',
sdxl: 'SDXL',
'sdxl-refiner': 'SDXLR',
};
export default function ModelListItem(props: ModelListItemProps) { export default function ModelListItem(props: ModelListItemProps) {
const isBusy = useAppSelector(selectIsBusy); const isBusy = useAppSelector(selectIsBusy);
const { t } = useTranslation(); const { t } = useTranslation();
@ -76,7 +83,7 @@ export default function ModelListItem(props: ModelListItemProps) {
bg: isSelected ? 'accent.400' : 'base.100', bg: isSelected ? 'accent.400' : 'base.100',
color: isSelected ? 'base.50' : 'base.800', color: isSelected ? 'base.50' : 'base.800',
_hover: { _hover: {
bg: isSelected ? 'accent.500' : 'base.200', bg: isSelected ? 'accent.500' : 'base.300',
color: isSelected ? 'base.50' : 'base.800', color: isSelected ? 'base.50' : 'base.800',
}, },
_dark: { _dark: {
@ -84,15 +91,34 @@ export default function ModelListItem(props: ModelListItemProps) {
bg: isSelected ? 'accent.600' : 'base.850', bg: isSelected ? 'accent.600' : 'base.850',
_hover: { _hover: {
color: isSelected ? 'base.50' : 'base.100', color: isSelected ? 'base.50' : 'base.100',
bg: isSelected ? 'accent.550' : 'base.800', bg: isSelected ? 'accent.550' : 'base.700',
}, },
}, },
}} }}
onClick={handleSelectModel} onClick={handleSelectModel}
> >
<Tooltip label={model.description} hasArrow placement="bottom"> <Flex gap={4} alignItems="center">
<Text sx={{ fontWeight: 500 }}>{model.model_name}</Text> <Text
</Tooltip> fontSize="xs"
p={1}
borderRadius={2}
minWidth={14}
sx={{
bg: 'accent.350',
color: 'base.100',
_dark: { bg: 'accent.500' },
}}
>
{
modelBaseTypeMap[
model.base_model as keyof typeof modelBaseTypeMap
]
}
</Text>
<Tooltip label={model.description} hasArrow placement="bottom">
<Text sx={{ fontWeight: 500 }}>{model.model_name}</Text>
</Tooltip>
</Flex>
</Flex> </Flex>
<IAIAlertDialog <IAIAlertDialog
title={t('modelManager.deleteModel')} title={t('modelManager.deleteModel')}