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 Ryan Dick
parent 7aa6534960
commit 01d86f3a78
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": {
"addLora": "Add LoRA",
"allLoRAsAdded": "All LoRAs added",
"concepts": "Concepts",
"loraAlreadyAdded": "LoRA already added",
"esrganModel": "ESRGAN Model",
"loading": "loading",

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

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

68
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 {
Expander,
Flex,
FormControlGroup,
StandaloneAccordion,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
} from '@invoke-ai/ui-library';
import { Box, Expander, Flex, FormControlGroup, StandaloneAccordion } from '@invoke-ai/ui-library';
import { EMPTY_ARRAY } from 'app/store/constants';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks';
@ -39,11 +29,11 @@ export const GenerationSettingsAccordion = memo(() => {
() =>
createMemoizedSelector(selectLoraSlice, (lora) => {
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;
return { loraTabBadges, accordionBadges };
}),
[modelConfig]
[modelConfig, t]
);
const { loraTabBadges, accordionBadges } = useAppSelector(selectBadges);
const { isOpen: isOpenExpander, onToggle: onToggleExpander } = useExpanderToggle({
@ -58,39 +48,31 @@ export const GenerationSettingsAccordion = memo(() => {
return (
<StandaloneAccordion
label={t('accordions.generation.title')}
badges={accordionBadges}
badges={[...accordionBadges, ...loraTabBadges]}
isOpen={isOpenAccordion}
onToggle={onToggleAccordion}
>
<Tabs variant="collapse">
<TabList>
<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">
<ParamMainModelSelect />
<SyncModelsIconButton />
</Flex>
<Expander isOpen={isOpenExpander} onToggle={onToggleExpander}>
<Flex gap={4} flexDir="column" pb={4}>
<FormControlGroup formLabelProps={formLabelProps}>
<ParamScheduler />
<ParamSteps />
<ParamCFGScale />
</FormControlGroup>
</Flex>
</Expander>
</TabPanel>
<TabPanel>
<Flex gap={4} p={4} flexDir="column">
<LoRASelect />
<LoRAList />
</Flex>
</TabPanel>
</TabPanels>
</Tabs>
<Box px={4} pt={4}>
<Flex gap={4} flexDir="column">
<Flex gap={4} alignItems="center">
<ParamMainModelSelect />
<SyncModelsIconButton />
</Flex>
<Flex gap={4} flexDir="column">
<LoRASelect />
<LoRAList />
</Flex>
</Flex>
<Expander isOpen={isOpenExpander} onToggle={onToggleExpander}>
<Flex gap={4} flexDir="column" pb={4}>
<FormControlGroup formLabelProps={formLabelProps}>
<ParamScheduler />
<ParamSteps />
<ParamCFGScale />
</FormControlGroup>
</Flex>
</Expander>
</Box>
</StandaloneAccordion>
);
});