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

tidy(ui): clearer component names for ip adapter

Browse Source
This commit is contained in:
psychedelicious 2024-08-07 17:52:55 +10:00
parent 594da60f2f
commit b170fc232e
8 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx
View File

@ -3,7 +3,7 @@ import { Flex } from '@invoke-ai/ui-library';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import { ControlAdapterList } from 'features/controlLayers/components/ControlAdapter/ControlAdapterList';
import { InpaintMask } from 'features/controlLayers/components/InpaintMask/InpaintMask';
import { IPAEntityList } from 'features/controlLayers/components/IPAdapter/IPAEntityList';
import { IPAdapterList } from 'features/controlLayers/components/IPAdapter/IPAdapterList';
import { LayerEntityList } from 'features/controlLayers/components/Layer/LayerEntityList';
import { RGEntityList } from 'features/controlLayers/components/RegionalGuidance/RGEntityList';
import { memo } from 'react';
@ -15,7 +15,7 @@ export const CanvasEntityList = memo(() => {
<InpaintMask />
<RGEntityList />
<ControlAdapterList />
<IPAEntityList />
<IPAdapterList />
<LayerEntityList />
</Flex>
</ScrollableContent>

8
invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPA.tsx → invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx
View File

@ -4,7 +4,7 @@ import { CanvasEntityDeleteButton } from 'features/controlLayers/components/comm
import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle';
import { IPASettings } from 'features/controlLayers/components/IPAdapter/IPASettings';
import { IPAdapterSettings } from 'features/controlLayers/components/IPAdapter/IPAdapterSettings';
import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
import { memo, useMemo } from 'react';
@ -13,7 +13,7 @@ type Props = {
id: string;
};
export const IPA = memo(({ id }: Props) => {
export const IPAdapter = memo(({ id }: Props) => {
const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id, type: 'ip_adapter' }), [id]);
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: true });
@ -26,10 +26,10 @@ export const IPA = memo(({ id }: Props) => {
<Spacer />
<CanvasEntityDeleteButton />
</CanvasEntityHeader>
{isOpen && <IPASettings />}
{isOpen && <IPAdapterSettings />}
</CanvasEntityContainer>
</EntityIdentifierContext.Provider>
);
});
IPA.displayName = 'IPA';
IPAdapter.displayName = 'IPAdapter';

4
invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAImagePreview.tsx → invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterImagePreview.tsx
View File

@ -22,7 +22,7 @@ type Props = {
postUploadAction: PostUploadAction;
};
export const IPAImagePreview = memo(({ image, onChangeImage, ipAdapterId, droppableData, postUploadAction }: Props) => {
export const IPAdapterImagePreview = memo(({ image, onChangeImage, ipAdapterId, droppableData, postUploadAction }: Props) => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const isConnected = useAppSelector((s) => s.system.isConnected);
@ -97,4 +97,4 @@ export const IPAImagePreview = memo(({ image, onChangeImage, ipAdapterId, droppa
);
});
IPAImagePreview.displayName = 'IPAImagePreview';
IPAdapterImagePreview.displayName = 'IPAdapterImagePreview';

8
invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx → invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterList.tsx
View File

@ -2,7 +2,7 @@
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks';
import { CanvasEntityGroupTitle } from 'features/controlLayers/components/common/CanvasEntityGroupTitle';
import { IPA } from 'features/controlLayers/components/IPAdapter/IPA';
import { IPAdapter } from 'features/controlLayers/components/IPAdapter/IPAdapter';
import { mapId } from 'features/controlLayers/konva/util';
import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
import { memo } from 'react';
@ -12,7 +12,7 @@ const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) =
return canvasV2.ipAdapters.entities.map(mapId).reverse();
});
export const IPAEntityList = memo(() => {
export const IPAdapterList = memo(() => {
const { t } = useTranslation();
const isSelected = useAppSelector((s) => Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'ip_adapter'));
const ipaIds = useAppSelector(selectEntityIds);
@ -29,11 +29,11 @@ export const IPAEntityList = memo(() => {
isSelected={isSelected}
/>
{ipaIds.map((id) => (
<IPA key={id} id={id} />
<IPAdapter key={id} id={id} />
))}
</>
);
}
});
IPAEntityList.displayName = 'IPAEntityList';
IPAdapterList.displayName = 'IPAdapterList';

4
invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAMethod.tsx → invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMethod.tsx
View File

@ -12,7 +12,7 @@ type Props = {
onChange: (method: IPMethodV2) => void;
};
export const IPAMethod = memo(({ method, onChange }: Props) => {
export const IPAdapterMethod = memo(({ method, onChange }: Props) => {
const { t } = useTranslation();
const options: { label: string; value: IPMethodV2 }[] = useMemo(
() => [
@ -41,4 +41,4 @@ export const IPAMethod = memo(({ method, onChange }: Props) => {
);
});
IPAMethod.displayName = 'IPAMethod';
IPAdapterMethod.displayName = 'IPAdapterMethod';

4
invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAModelCombobox.tsx → invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterModel.tsx
View File

@ -22,7 +22,7 @@ type Props = {
onChangeCLIPVisionModel: (clipVisionModel: CLIPVisionModelV2) => void;
};
export const IPAModelCombobox = memo(({ modelKey, onChangeModel, clipVisionModel, onChangeCLIPVisionModel }: Props) => {
export const IPAdapterModel = memo(({ modelKey, onChangeModel, clipVisionModel, onChangeCLIPVisionModel }: Props) => {
const { t } = useTranslation();
const currentBaseModel = useAppSelector((s) => s.canvasV2.params.model?.base);
const [modelConfigs, { isLoading }] = useIPAdapterModels();
@ -95,4 +95,4 @@ export const IPAModelCombobox = memo(({ modelKey, onChangeModel, clipVisionModel
);
});
IPAModelCombobox.displayName = 'IPAModelCombobox';
IPAdapterModel.displayName = 'IPAdapterModel';

16
invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPASettings.tsx → invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterSettings.tsx
View File

@ -3,7 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { BeginEndStepPct } from 'features/controlLayers/components/common/BeginEndStepPct';
import { CanvasEntitySettings } from 'features/controlLayers/components/common/CanvasEntitySettings';
import { Weight } from 'features/controlLayers/components/common/Weight';
import { IPAMethod } from 'features/controlLayers/components/IPAdapter/IPAMethod';
import { IPAdapterMethod } from 'features/controlLayers/components/IPAdapter/IPAdapterMethod';
import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import {
ipaBeginEndStepPctChanged,
@ -19,10 +19,10 @@ import type { IPAImageDropData } from 'features/dnd/types';
import { memo, useCallback, useMemo } from 'react';
import type { ImageDTO, IPAdapterModelConfig, IPALayerImagePostUploadAction } from 'services/api/types';
import { IPAImagePreview } from './IPAImagePreview';
import { IPAModelCombobox } from './IPAModelCombobox';
import { IPAdapterImagePreview } from './IPAdapterImagePreview';
import { IPAdapterModel } from './IPAdapterModel';
export const IPASettings = memo(() => {
export const IPAdapterSettings = memo(() => {
const dispatch = useAppDispatch();
const { id } = useEntityIdentifierContext();
const ipAdapter = useAppSelector((s) => selectIPAOrThrow(s.canvasV2, id));
@ -77,7 +77,7 @@ export const IPASettings = memo(() => {
<Flex flexDir="column" gap={4} position="relative" w="full">
<Flex gap={3} alignItems="center" w="full">
<Box minW={0} w="full" transitionProperty="common" transitionDuration="0.1s">
<IPAModelCombobox
<IPAdapterModel
modelKey={ipAdapter.model?.key ?? null}
onChangeModel={onChangeModel}
clipVisionModel={ipAdapter.clipVisionModel}
@ -87,12 +87,12 @@ export const IPASettings = memo(() => {
</Flex>
<Flex gap={4} w="full" alignItems="center">
<Flex flexDir="column" gap={3} w="full">
<IPAMethod method={ipAdapter.method} onChange={onChangeIPMethod} />
<IPAdapterMethod method={ipAdapter.method} onChange={onChangeIPMethod} />
<Weight weight={ipAdapter.weight} onChange={onChangeWeight} />
<BeginEndStepPct beginEndStepPct={ipAdapter.beginEndStepPct} onChange={onChangeBeginEndStepPct} />
</Flex>
<Flex alignItems="center" justifyContent="center" h={36} w={36} aspectRatio="1/1">
<IPAImagePreview
<IPAdapterImagePreview
image={ipAdapter.imageObject?.image ?? null}
onChangeImage={onChangeImage}
ipAdapterId={ipAdapter.id}
@ -106,4 +106,4 @@ export const IPASettings = memo(() => {
);
});
IPASettings.displayName = 'IPASettings';
IPAdapterSettings.displayName = 'IPAdapterSettings';

12
invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGIPAdapterSettings.tsx
View File

@ -2,9 +2,9 @@ import { Box, Flex, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { BeginEndStepPct } from 'features/controlLayers/components/common/BeginEndStepPct';
import { Weight } from 'features/controlLayers/components/common/Weight';
import { IPAImagePreview } from 'features/controlLayers/components/IPAdapter/IPAImagePreview';
import { IPAMethod } from 'features/controlLayers/components/IPAdapter/IPAMethod';
import { IPAModelCombobox } from 'features/controlLayers/components/IPAdapter/IPAModelCombobox';
import { IPAdapterImagePreview } from 'features/controlLayers/components/IPAdapter/IPAdapterImagePreview';
import { IPAdapterMethod } from 'features/controlLayers/components/IPAdapter/IPAdapterMethod';
import { IPAdapterModel } from 'features/controlLayers/components/IPAdapter/IPAdapterModel';
import {
rgIPAdapterBeginEndStepPctChanged,
rgIPAdapterCLIPVisionModelChanged,
@ -107,7 +107,7 @@ export const RGIPAdapterSettings = memo(({ id, ipAdapterId, ipAdapterNumber }: P
<Flex flexDir="column" gap={4} position="relative" w="full">
<Flex gap={3} alignItems="center" w="full">
<Box minW={0} w="full" transitionProperty="common" transitionDuration="0.1s">
<IPAModelCombobox
<IPAdapterModel
modelKey={ipAdapter.model?.key ?? null}
onChangeModel={onChangeModel}
clipVisionModel={ipAdapter.clipVisionModel}
@ -117,12 +117,12 @@ export const RGIPAdapterSettings = memo(({ id, ipAdapterId, ipAdapterNumber }: P
</Flex>
<Flex gap={4} w="full" alignItems="center">
<Flex flexDir="column" gap={3} w="full">
<IPAMethod method={ipAdapter.method} onChange={onChangeIPMethod} />
<IPAdapterMethod method={ipAdapter.method} onChange={onChangeIPMethod} />
<Weight weight={ipAdapter.weight} onChange={onChangeWeight} />
<BeginEndStepPct beginEndStepPct={ipAdapter.beginEndStepPct} onChange={onChangeBeginEndStepPct} />
</Flex>
<Flex alignItems="center" justifyContent="center" h={36} w={36} aspectRatio="1/1">
<IPAImagePreview
<IPAdapterImagePreview
image={ipAdapter.imageObject?.image ?? null}
onChangeImage={onChangeImage}
ipAdapterId={ipAdapter.id}