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(ui): spruce up control adapter ui

Browse Source
This commit is contained in:
psychedelicious 2023-10-06 19:10:50 +11:00
parent 3e93159bce
commit 1a9d2f1701
3 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -131,6 +131,10 @@
"upload": "Upload" "upload": "Upload"
}, },
"controlnet": { "controlnet": {
"controlAdapter": "Control Adapter",
"controlnet": "$t(controlnet.controlAdapter) #{{number}} (Control Net)",
"ip_adapter": "$t(controlnet.controlAdapter) #{{number}} (IP Adapter)",
"t2i_adapter": "$t(controlnet.controlAdapter) #{{number}} (T2I Adapter)",
"amult": "a_mult", "amult": "a_mult",
"autoConfigure": "Auto configure processor", "autoConfigure": "Auto configure processor",
"balanced": "Balanced", "balanced": "Balanced",

14
invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterConfig.tsx
View File

@ -27,8 +27,8 @@ import ParamControlAdapterControlMode from './parameters/ParamControlAdapterCont
import ParamControlAdapterProcessorSelect from './parameters/ParamControlAdapterProcessorSelect'; import ParamControlAdapterProcessorSelect from './parameters/ParamControlAdapterProcessorSelect';
import ParamControlAdapterResizeMode from './parameters/ParamControlAdapterResizeMode'; import ParamControlAdapterResizeMode from './parameters/ParamControlAdapterResizeMode';
const ControlAdapterConfig = (props: { id: string }) => { const ControlAdapterConfig = (props: { id: string; number: number }) => {
const { id } = props; const { id, number } = props;
const controlAdapterType = useControlAdapterType(id); const controlAdapterType = useControlAdapterType(id);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
@ -75,13 +75,19 @@ const ControlAdapterConfig = (props: { id: string }) => {
}, },
}} }}
> >
<Flex sx={{ gap: 2, alignItems: 'center' }}> <Flex
sx={{ gap: 2, alignItems: 'center', justifyContent: 'space-between' }}
>
<IAISwitch <IAISwitch
tooltip={t('controlnet.toggleControlNet')} label={t(`controlnet.${controlAdapterType}`, { number })}
aria-label={t('controlnet.toggleControlNet')} aria-label={t('controlnet.toggleControlNet')}
isChecked={isEnabled} isChecked={isEnabled}
onChange={handleToggleIsEnabled} onChange={handleToggleIsEnabled}
formControlProps={{ w: 'full' }}
formLabelProps={{ fontWeight: 600 }}
/> />
</Flex>
<Flex sx={{ gap: 2, alignItems: 'center' }}>
<Box <Box
sx={{ sx={{
w: 'full', w: 'full',

5
invokeai/frontend/web/src/features/parameters/components/Parameters/ControlAdapters/ParamControlAdaptersCollapse.tsx
View File

@ -90,11 +90,10 @@ const ParamControlAdaptersCollapse = () => {
T2I Adapter T2I Adapter
</IAIButton> </IAIButton>
</ButtonGroup> </ButtonGroup>
<Divider />
{controlAdapterIds.map((id, i) => ( {controlAdapterIds.map((id, i) => (
<Fragment key={id}> <Fragment key={id}>
{i > 0 && <Divider />} <Divider />
<ControlAdapterConfig id={id} /> <ControlAdapterConfig id={id} number={i + 1} />
</Fragment> </Fragment>
))} ))}
</Flex> </Flex>