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

consolidate tabs for main model and concepts in generation panel

Browse Source
This commit is contained in:
Mary Hipp 2024-03-01 10:37:30 -05:00 committed by Mary Hipp Rogers
parent ef958568ac
commit 02dc1a8780
3 changed files with 27 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
invokeai/frontend/web/public/locales/en.json
View File

@ -860,6 +860,7 @@
"models": { "models": {
"addLora": "Add LoRA", "addLora": "Add LoRA",
"allLoRAsAdded": "All LoRAs added", "allLoRAsAdded": "All LoRAs added",
"concepts": "Concepts",
"loraAlreadyAdded": "LoRA already added", "loraAlreadyAdded": "LoRA already added",
"esrganModel": "ESRGAN Model", "esrganModel": "ESRGAN Model",
"loading": "loading", "loading": "loading",

2
invokeai/frontend/web/src/features/lora/components/LoRASelect.tsx
View File

@ -59,7 +59,7 @@ const LoRASelect = () => {
return ( return (
<FormControl isDisabled={!options.length}> <FormControl isDisabled={!options.length}>
<InformationalPopover feature="lora"> <InformationalPopover feature="lora">
<FormLabel>{t('models.lora')} </FormLabel> <FormLabel>{t('models.concepts')} </FormLabel>
</InformationalPopover> </InformationalPopover>
<Combobox <Combobox
placeholder={placeholder} placeholder={placeholder}

42
invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
View File

@ -1,15 +1,5 @@
import type { FormLabelProps } from '@invoke-ai/ui-library'; import type { FormLabelProps } from '@invoke-ai/ui-library';
import { import { Box, Expander, Flex, FormControlGroup, StandaloneAccordion } from '@invoke-ai/ui-library';
Expander,
Flex,
FormControlGroup,
StandaloneAccordion,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
} from '@invoke-ai/ui-library';
import { EMPTY_ARRAY } from 'app/store/constants'; import { EMPTY_ARRAY } from 'app/store/constants';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
@ -39,11 +29,11 @@ export const GenerationSettingsAccordion = memo(() => {
() => () =>
createMemoizedSelector(selectLoraSlice, (lora) => { createMemoizedSelector(selectLoraSlice, (lora) => {
const enabledLoRAsCount = filter(lora.loras, (l) => !!l.isEnabled).length; const enabledLoRAsCount = filter(lora.loras, (l) => !!l.isEnabled).length;
const loraTabBadges = enabledLoRAsCount ? [enabledLoRAsCount] : EMPTY_ARRAY; const loraTabBadges = enabledLoRAsCount ? [`${enabledLoRAsCount} ${t('models.concepts')}`] : EMPTY_ARRAY;
const accordionBadges = modelConfig ? [modelConfig.name, modelConfig.base] : EMPTY_ARRAY; const accordionBadges = modelConfig ? [modelConfig.name, modelConfig.base] : EMPTY_ARRAY;
return { loraTabBadges, accordionBadges }; return { loraTabBadges, accordionBadges };
}), }),
[modelConfig] [modelConfig, t]
); );
const { loraTabBadges, accordionBadges } = useAppSelector(selectBadges); const { loraTabBadges, accordionBadges } = useAppSelector(selectBadges);
const { isOpen: isOpenExpander, onToggle: onToggleExpander } = useExpanderToggle({ const { isOpen: isOpenExpander, onToggle: onToggleExpander } = useExpanderToggle({
@ -58,21 +48,21 @@ export const GenerationSettingsAccordion = memo(() => {
return ( return (
<StandaloneAccordion <StandaloneAccordion
label={t('accordions.generation.title')} label={t('accordions.generation.title')}
badges={accordionBadges} badges={[...accordionBadges, ...loraTabBadges]}
isOpen={isOpenAccordion} isOpen={isOpenAccordion}
onToggle={onToggleAccordion} onToggle={onToggleAccordion}
> >
<Tabs variant="collapse"> <Box px={4} pt={4}>
<TabList> <Flex gap={4} flexDir="column">
<Tab>{t('accordions.generation.modelTab')}</Tab>
<Tab badges={loraTabBadges}>{t('accordions.generation.conceptsTab')}</Tab>
</TabList>
<TabPanels>
<TabPanel overflow="visible" px={4} pt={4}>
<Flex gap={4} alignItems="center"> <Flex gap={4} alignItems="center">
<ParamMainModelSelect /> <ParamMainModelSelect />
<SyncModelsIconButton /> <SyncModelsIconButton />
</Flex> </Flex>
<Flex gap={4} flexDir="column">
<LoRASelect />
<LoRAList />
</Flex>
</Flex>
<Expander isOpen={isOpenExpander} onToggle={onToggleExpander}> <Expander isOpen={isOpenExpander} onToggle={onToggleExpander}>
<Flex gap={4} flexDir="column" pb={4}> <Flex gap={4} flexDir="column" pb={4}>
<FormControlGroup formLabelProps={formLabelProps}> <FormControlGroup formLabelProps={formLabelProps}>
@ -82,15 +72,7 @@ export const GenerationSettingsAccordion = memo(() => {
</FormControlGroup> </FormControlGroup>
</Flex> </Flex>
</Expander> </Expander>
</TabPanel> </Box>
<TabPanel>
<Flex gap={4} p={4} flexDir="column">
<LoRASelect />
<LoRAList />
</Flex>
</TabPanel>
</TabPanels>
</Tabs>
</StandaloneAccordion> </StandaloneAccordion>
); );
}); });