refactor(ui): ref images (WIP)

2026-04-23 03:00:31 -04:00 · 2025-06-13 13:08:03 +10:00
parent 5a2f5c105d
commit 48e2e7e4a1
29 changed files with 235 additions and 237 deletions
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasAddEntityButtons.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasAddEntityButtons.tsx
@@ -5,7 +5,7 @@ import {
  useAddInpaintMask,
  useAddRasterLayer,
  useAddRegionalGuidance,
-  useAddRegionalReferenceImage,
+  useAddNewRegionalGuidanceWithARefImage,
 } from 'features/controlLayers/hooks/addLayerHooks';
 import { useIsEntityTypeEnabled } from 'features/controlLayers/hooks/useIsEntityTypeEnabled';
 import { memo } from 'react';
@@ -18,7 +18,7 @@ export const CanvasAddEntityButtons = memo(() => {
  const addRegionalGuidance = useAddRegionalGuidance();
  const addRasterLayer = useAddRasterLayer();
  const addControlLayer = useAddControlLayer();
-  const addRegionalReferenceImage = useAddRegionalReferenceImage();
+  const addRegionalReferenceImage = useAddNewRegionalGuidanceWithARefImage();
  const isRegionalGuidanceEnabled = useIsEntityTypeEnabled('regional_guidance');
  const isControlLayerEnabled = useIsEntityTypeEnabled('control_layer');
  const isInpaintLayerEnabled = useIsEntityTypeEnabled('inpaint_mask');
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasContextMenu/CanvasContextMenuSelectedEntityMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasContextMenu/CanvasContextMenuSelectedEntityMenuItems.tsx
@@ -2,7 +2,7 @@ import { MenuGroup } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import { ControlLayerMenuItems } from 'features/controlLayers/components/ControlLayer/ControlLayerMenuItems';
 import { InpaintMaskMenuItems } from 'features/controlLayers/components/InpaintMask/InpaintMaskMenuItems';
-import { IPAdapterMenuItems } from 'features/controlLayers/components/IPAdapter/IPAdapterMenuItems';
+import { IPAdapterMenuItems } from 'features/controlLayers/components/RefImage/IPAdapterMenuItems';
 import { RasterLayerMenuItems } from 'features/controlLayers/components/RasterLayer/RasterLayerMenuItems';
 import { RegionalGuidanceMenuItems } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItems';
 import { CanvasEntityStateGate } from 'features/controlLayers/contexts/CanvasEntityStateGate';
--- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListGlobalActionBarAddLayerMenu.tsx
@@ -4,7 +4,7 @@ import {
  useAddInpaintMask,
  useAddRasterLayer,
  useAddRegionalGuidance,
-  useAddRegionalReferenceImage,
+  useAddNewRegionalGuidanceWithARefImage,
 } from 'features/controlLayers/hooks/addLayerHooks';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { useIsEntityTypeEnabled } from 'features/controlLayers/hooks/useIsEntityTypeEnabled';
@@ -17,7 +17,7 @@ export const EntityListGlobalActionBarAddLayerMenu = memo(() => {
  const isBusy = useCanvasIsBusy();
  const addInpaintMask = useAddInpaintMask();
  const addRegionalGuidance = useAddRegionalGuidance();
-  const addRegionalReferenceImage = useAddRegionalReferenceImage();
+  const addRegionalReferenceImage = useAddNewRegionalGuidanceWithARefImage();
  const addRasterLayer = useAddRasterLayer();
  const addControlLayer = useAddControlLayer();
  const isRegionalGuidanceEnabled = useIsEntityTypeEnabled('regional_guidance');
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx
@@ -1,29 +0,0 @@
-import { Spacer } from '@invoke-ai/ui-library';
-import { CanvasEntityContainer } from 'features/controlLayers/components/CanvasEntityList/CanvasEntityContainer';
-import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
-import { CanvasEntityHeaderCommonActions } from 'features/controlLayers/components/common/CanvasEntityHeaderCommonActions';
-import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit';
-import { IPAdapterSettings } from 'features/controlLayers/components/IPAdapter/IPAdapterSettings';
-import { RefImageIdContext } from 'features/controlLayers/contexts/RefImageIdContext';
-import { memo } from 'react';
-
-type Props = {
-  id: string;
-};
-
-export const IPAdapter = memo(({ id }: Props) => {
-  return (
-    <RefImageIdContext.Provider value={id}>
-      <CanvasEntityContainer>
-        <CanvasEntityHeader ps={4} py={5}>
-          <CanvasEntityEditableTitle />
-          <Spacer />
-          <CanvasEntityHeaderCommonActions />
-        </CanvasEntityHeader>
-        <IPAdapterSettings />
-      </CanvasEntityContainer>
-    </RefImageIdContext.Provider>
-  );
-});
-
-IPAdapter.displayName = 'IPAdapter';
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterList.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterList.tsx
@@ -2,7 +2,7 @@
 import type { FlexProps, SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { RefImagePreview } from 'features/controlLayers/components/IPAdapter/IPAdapterPreview';
+import { RefImage } from 'features/controlLayers/components/RefImage/RefImage';
 import { RefImageIdContext } from 'features/controlLayers/contexts/RefImageIdContext';
 import { selectRefImageEntityIds } from 'features/controlLayers/store/refImagesSlice';
 import { memo } from 'react';
@@ -27,7 +27,7 @@ export const RefImageList = memo((props: FlexProps) => {
    <Flex gap={2} {...props}>
      {ids.map((id) => (
        <RefImageIdContext.Provider key={id} value={id}>
-          <RefImagePreview />
+          <RefImage />
        </RefImageIdContext.Provider>
      ))}
    </Flex>
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMenuItemPullBbox.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMenuItemPullBbox.tsx
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMenuItems.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMenuItems.tsx
@@ -3,7 +3,7 @@ import { IconMenuItemGroup } from 'common/components/IconMenuItem';
 import { CanvasEntityMenuItemsArrange } from 'features/controlLayers/components/common/CanvasEntityMenuItemsArrange';
 import { CanvasEntityMenuItemsDelete } from 'features/controlLayers/components/common/CanvasEntityMenuItemsDelete';
 import { CanvasEntityMenuItemsDuplicate } from 'features/controlLayers/components/common/CanvasEntityMenuItemsDuplicate';
-import { IPAdapterMenuItemPullBbox } from 'features/controlLayers/components/IPAdapter/IPAdapterMenuItemPullBbox';
+import { IPAdapterMenuItemPullBbox } from 'features/controlLayers/components/RefImage/IPAdapterMenuItemPullBbox';
 import { memo } from 'react';

 export const IPAdapterMenuItems = memo(() => {
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMethod.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMethod.tsx
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterSettings.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterSettings.tsx
@@ -2,12 +2,12 @@ import { Flex } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { BeginEndStepPct } from 'features/controlLayers/components/common/BeginEndStepPct';
-import { CLIPVisionModel } from 'features/controlLayers/components/common/CLIPVisionModel';
 import { FLUXReduxImageInfluence } from 'features/controlLayers/components/common/FLUXReduxImageInfluence';
+import { IPAdapterCLIPVisionModel } from 'features/controlLayers/components/common/IPAdapterCLIPVisionModel';
 import { Weight } from 'features/controlLayers/components/common/Weight';
-import { GlobalReferenceImageModel } from 'features/controlLayers/components/IPAdapter/GlobalReferenceImageModel';
-import { IPAdapterMethod } from 'features/controlLayers/components/IPAdapter/IPAdapterMethod';
-import { IPAdapterSettingsEmptyState } from 'features/controlLayers/components/IPAdapter/IPAdapterSettingsEmptyState';
+import { IPAdapterMethod } from 'features/controlLayers/components/RefImage/IPAdapterMethod';
+import { RefImageModel } from 'features/controlLayers/components/RefImage/RefImageModel';
+import { RefImageNoImageState } from 'features/controlLayers/components/RefImage/RefImageNoImageState';
 import { useRefImageIdContext } from 'features/controlLayers/contexts/RefImageIdContext';
 import { selectIsFLUX } from 'features/controlLayers/store/paramsSlice';
 import {
@@ -22,10 +22,12 @@ import {
  selectRefImageEntityOrThrow,
  selectRefImagesSlice,
 } from 'features/controlLayers/store/refImagesSlice';
-import type {
-  CLIPVisionModelV2,
-  FLUXReduxImageInfluence as FLUXReduxImageInfluenceType,
-  IPMethodV2,
+import {
+  type CLIPVisionModelV2,
+  type FLUXReduxImageInfluence as FLUXReduxImageInfluenceType,
+  type IPMethodV2,
+  isFLUXReduxConfig,
+  isIPAdapterConfig,
 } from 'features/controlLayers/store/types';
 import type { SetGlobalReferenceImageDndTargetData } from 'features/dnd/dnd';
 import { setGlobalReferenceImageDndTarget } from 'features/dnd/dnd';
@@ -33,7 +35,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { ApiModelConfig, FLUXReduxModelConfig, ImageDTO, IPAdapterModelConfig } from 'services/api/types';

-import { IPAdapterImagePreview } from './IPAdapterImagePreview';
+import { RefImageImage } from './RefImageImage';

 const buildSelectConfig = (id: string) =>
  createSelector(
@@ -45,8 +47,8 @@ const IPAdapterSettingsContent = memo(() => {
  const { t } = useTranslation();
  const dispatch = useAppDispatch();
  const id = useRefImageIdContext();
-  const selectIPAdapter = useMemo(() => buildSelectConfig(id), [id]);
-  const ipAdapter = useAppSelector(selectIPAdapter);
+  const selectConfig = useMemo(() => buildSelectConfig(id), [id]);
+  const config = useAppSelector(selectConfig);

  const onChangeBeginEndStepPct = useCallback(
    (beginEndStepPct: [number, number]) => {
@@ -98,8 +100,8 @@ const IPAdapterSettingsContent = memo(() => {
  );

  const dndTargetData = useMemo<SetGlobalReferenceImageDndTargetData>(
-    () => setGlobalReferenceImageDndTarget.getData({ id }, ipAdapter.image?.image_name),
-    [id, ipAdapter.image?.image_name]
+    () => setGlobalReferenceImageDndTarget.getData({ id }, config.image?.image_name),
+    [id, config.image?.image_name]
  );
  // const pullBboxIntoIPAdapter = usePullBboxIntoGlobalReferenceImage(id);
  // const isBusy = useCanvasIsBusy();
@@ -109,9 +111,9 @@ const IPAdapterSettingsContent = memo(() => {
  return (
    <Flex flexDir="column" gap={2} position="relative" w="full">
      <Flex gap={2} alignItems="center" w="full">
-        <GlobalReferenceImageModel modelKey={ipAdapter.model?.key ?? null} onChangeModel={onChangeModel} />
-        {ipAdapter.type === 'ip_adapter' && (
-          <CLIPVisionModel model={ipAdapter.clipVisionModel} onChange={onChangeCLIPVisionModel} />
+        <RefImageModel modelKey={config.model?.key ?? null} onChangeModel={onChangeModel} />
+        {isIPAdapterConfig(config) && (
+          <IPAdapterCLIPVisionModel model={config.clipVisionModel} onChange={onChangeCLIPVisionModel} />
        )}
        {/* <IconButton
            onClick={pullBboxIntoIPAdapter}
@@ -123,24 +125,24 @@ const IPAdapterSettingsContent = memo(() => {
          /> */}
      </Flex>
      <Flex gap={2} w="full">
-        {ipAdapter.type === 'ip_adapter' && (
+        {isIPAdapterConfig(config) && (
          <Flex flexDir="column" gap={2} w="full">
-            {!isFLUX && <IPAdapterMethod method={ipAdapter.method} onChange={onChangeIPMethod} />}
-            <Weight weight={ipAdapter.weight} onChange={onChangeWeight} />
-            <BeginEndStepPct beginEndStepPct={ipAdapter.beginEndStepPct} onChange={onChangeBeginEndStepPct} />
+            {!isFLUX && <IPAdapterMethod method={config.method} onChange={onChangeIPMethod} />}
+            <Weight weight={config.weight} onChange={onChangeWeight} />
+            <BeginEndStepPct beginEndStepPct={config.beginEndStepPct} onChange={onChangeBeginEndStepPct} />
          </Flex>
        )}
-        {ipAdapter.type === 'flux_redux' && (
+        {isFLUXReduxConfig(config) && (
          <Flex flexDir="column" gap={2} w="full" alignItems="flex-start">
            <FLUXReduxImageInfluence
-              imageInfluence={ipAdapter.imageInfluence ?? 'lowest'}
+              imageInfluence={config.imageInfluence ?? 'lowest'}
              onChange={onChangeFLUXReduxImageInfluence}
            />
          </Flex>
        )}
        <Flex alignItems="center" justifyContent="center" h={32} w={32} aspectRatio="1/1" flexGrow={1}>
-          <IPAdapterImagePreview
-            image={ipAdapter.image}
+          <RefImageImage
+            image={config.image}
            onChangeImage={onChangeImage}
            dndTarget={setGlobalReferenceImageDndTarget}
            dndTargetData={dndTargetData}
@@ -166,7 +168,7 @@ export const IPAdapterSettings = memo(() => {
  const hasImage = useAppSelector(selectIPAdapterHasImage);

  if (!hasImage) {
-    return <IPAdapterSettingsEmptyState />;
+    return <RefImageNoImageState />;
  }

  return <IPAdapterSettingsContent />;
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterPreview.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterPreview.tsx
@@ -14,7 +14,7 @@ import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useDisclosure } from 'common/hooks/useBoolean';
 import { useFilterableOutsideClick } from 'common/hooks/useFilterableOutsideClick';
-import { IPAdapterSettings } from 'features/controlLayers/components/IPAdapter/IPAdapterSettings';
+import { IPAdapterSettings } from 'features/controlLayers/components/RefImage/IPAdapterSettings';
 import { useRefImageIdContext } from 'features/controlLayers/contexts/RefImageIdContext';
 import { selectRefImageEntityOrThrow, selectRefImagesSlice } from 'features/controlLayers/store/refImagesSlice';
 import type { ImageWithDims } from 'features/controlLayers/store/types';
@@ -34,15 +34,12 @@ const sx: SystemStyleObject = {
  transitionDuration: '0.2s',
 };

-export const RefImagePreview = memo(() => {
+export const RefImage = memo(() => {
  const id = useRefImageIdContext();
  const ref = useRef<HTMLDivElement>(null);
  const disclosure = useDisclosure(false);
  const selectEntity = useMemo(
-    () =>
-      createSelector(selectRefImagesSlice, (refImages) =>
-        selectRefImageEntityOrThrow(refImages, id, 'RefImagePreview')
-      ),
+    () => createSelector(selectRefImagesSlice, (refImages) => selectRefImageEntityOrThrow(refImages, id, 'RefImage')),
    [id]
  );
  const entity = useAppSelector(selectEntity);
@@ -66,7 +63,7 @@ export const RefImagePreview = memo(() => {
    </Popover>
  );
 });
-RefImagePreview.displayName = 'RefImagePreview';
+RefImage.displayName = 'RefImage';

 const Thumbnail = memo(({ image }: { image: ImageWithDims | null }) => {
  const { data: imageDTO } = useGetImageDTOQuery(image?.image_name ?? skipToken);
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterImagePreview.tsx
@@ -21,7 +21,7 @@ type Props<T extends typeof setGlobalReferenceImageDndTarget | typeof setRegiona
  dndTargetData: ReturnType<T['getData']>;
 };

-export const IPAdapterImagePreview = memo(
+export const RefImageImage = memo(
  <T extends typeof setGlobalReferenceImageDndTarget | typeof setRegionalGuidanceReferenceImageDndTarget>({
    image,
    onChangeImage,
@@ -77,4 +77,4 @@ export const IPAdapterImagePreview = memo(
  }
 );

-IPAdapterImagePreview.displayName = 'IPAdapterImagePreview';
+RefImageImage.displayName = 'RefImageImage';
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/GlobalReferenceImageModel.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/GlobalReferenceImageModel.tsx
@@ -12,7 +12,7 @@ type Props = {
  onChangeModel: (modelConfig: IPAdapterModelConfig | FLUXReduxModelConfig | ApiModelConfig) => void;
 };

-export const GlobalReferenceImageModel = memo(({ modelKey, onChangeModel }: Props) => {
+export const RefImageModel = memo(({ modelKey, onChangeModel }: Props) => {
  const { t } = useTranslation();
  const currentBaseModel = useAppSelector(selectBase);
  const [modelConfigs, { isLoading }] = useGlobalReferenceImageModels();
@@ -60,4 +60,4 @@ export const GlobalReferenceImageModel = memo(({ modelKey, onChangeModel }: Prop
  );
 });

-GlobalReferenceImageModel.displayName = 'GlobalReferenceImageModel';
+RefImageModel.displayName = 'RefImageModel';
--- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterSettingsEmptyState.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterSettingsEmptyState.tsx
@@ -13,7 +13,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import type { ImageDTO } from 'services/api/types';

-export const IPAdapterSettingsEmptyState = memo(() => {
+export const RefImageNoImageState = memo(() => {
  const { t } = useTranslation();
  const id = useRefImageIdContext();
  const dispatch = useAppDispatch();
@@ -66,4 +66,4 @@ export const IPAdapterSettingsEmptyState = memo(() => {
  );
 });

-IPAdapterSettingsEmptyState.displayName = 'IPAdapterSettingsEmptyState';
+RefImageNoImageState.displayName = 'RefImageNoImageState';
--- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceAddPromptsIPAdapterButtons.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceAddPromptsIPAdapterButtons.tsx
@@ -3,9 +3,9 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import {
  buildSelectValidRegionalGuidanceActions,
-  useAddRegionalGuidanceIPAdapter,
-  useAddRegionalGuidanceNegativePrompt,
-  useAddRegionalGuidancePositivePrompt,
+  useAddRefImageToExistingRegionalGuidance,
+  useAddNegativePromptToExistingRegionalGuidance,
+  useAddPositivePromptToExistingRegionalGuidance,
 } from 'features/controlLayers/hooks/addLayerHooks';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -14,9 +14,9 @@ import { PiPlusBold } from 'react-icons/pi';
 export const RegionalGuidanceAddPromptsIPAdapterButtons = () => {
  const entityIdentifier = useEntityIdentifierContext('regional_guidance');
  const { t } = useTranslation();
-  const addRegionalGuidanceIPAdapter = useAddRegionalGuidanceIPAdapter(entityIdentifier);
-  const addRegionalGuidancePositivePrompt = useAddRegionalGuidancePositivePrompt(entityIdentifier);
-  const addRegionalGuidanceNegativePrompt = useAddRegionalGuidanceNegativePrompt(entityIdentifier);
+  const addRegionalGuidanceIPAdapter = useAddRefImageToExistingRegionalGuidance(entityIdentifier);
+  const addRegionalGuidancePositivePrompt = useAddPositivePromptToExistingRegionalGuidance(entityIdentifier);
+  const addRegionalGuidanceNegativePrompt = useAddNegativePromptToExistingRegionalGuidance(entityIdentifier);

  const selectValidActions = useMemo(
    () => buildSelectValidRegionalGuidanceActions(entityIdentifier),
--- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapterSettings.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapterSettings.tsx
@@ -2,11 +2,11 @@ import { Flex, IconButton, Spacer, Text } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { BeginEndStepPct } from 'features/controlLayers/components/common/BeginEndStepPct';
-import { CLIPVisionModel } from 'features/controlLayers/components/common/CLIPVisionModel';
+import { IPAdapterCLIPVisionModel } from 'features/controlLayers/components/common/IPAdapterCLIPVisionModel';
 import { FLUXReduxImageInfluence } from 'features/controlLayers/components/common/FLUXReduxImageInfluence';
 import { Weight } from 'features/controlLayers/components/common/Weight';
-import { IPAdapterImagePreview } from 'features/controlLayers/components/IPAdapter/IPAdapterImagePreview';
-import { IPAdapterMethod } from 'features/controlLayers/components/IPAdapter/IPAdapterMethod';
+import { RefImageImage } from 'features/controlLayers/components/RefImage/RefImageImage';
+import { IPAdapterMethod } from 'features/controlLayers/components/RefImage/IPAdapterMethod';
 import { RegionalGuidanceIPAdapterSettingsEmptyState } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapterSettingsEmptyState';
 import { RegionalReferenceImageModel } from 'features/controlLayers/components/RegionalGuidance/RegionalReferenceImageModel';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
@@ -142,7 +142,7 @@ const RegionalGuidanceIPAdapterSettingsContent = memo(({ referenceImageId }: Pro
        <Flex gap={2} alignItems="center" w="full">
          <RegionalReferenceImageModel modelKey={config.model?.key ?? null} onChangeModel={onChangeModel} />
          {config.type === 'ip_adapter' && (
-            <CLIPVisionModel model={config.clipVisionModel} onChange={onChangeCLIPVisionModel} />
+            <IPAdapterCLIPVisionModel model={config.clipVisionModel} onChange={onChangeCLIPVisionModel} />
          )}
          <IconButton
            onClick={pullBboxIntoIPAdapter}
@@ -170,7 +170,7 @@ const RegionalGuidanceIPAdapterSettingsContent = memo(({ referenceImageId }: Pro
            </Flex>
          )}
          <Flex alignItems="center" justifyContent="center" h={32} w={32} aspectRatio="1/1" flexGrow={1}>
-            <IPAdapterImagePreview
+            <RefImageImage
              image={config.image}
              onChangeImage={onChangeImage}
              dndTarget={setRegionalGuidanceReferenceImageDndTarget}
--- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAddPromptsAndIPAdapter.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAddPromptsAndIPAdapter.tsx
@@ -3,9 +3,9 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import {
  buildSelectValidRegionalGuidanceActions,
-  useAddRegionalGuidanceIPAdapter,
-  useAddRegionalGuidanceNegativePrompt,
-  useAddRegionalGuidancePositivePrompt,
+  useAddRefImageToExistingRegionalGuidance,
+  useAddNegativePromptToExistingRegionalGuidance,
+  useAddPositivePromptToExistingRegionalGuidance,
 } from 'features/controlLayers/hooks/addLayerHooks';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { memo, useMemo } from 'react';
@@ -15,9 +15,9 @@ export const RegionalGuidanceMenuItemsAddPromptsAndIPAdapter = memo(() => {
  const entityIdentifier = useEntityIdentifierContext('regional_guidance');
  const { t } = useTranslation();
  const isBusy = useCanvasIsBusy();
-  const addRegionalGuidanceIPAdapter = useAddRegionalGuidanceIPAdapter(entityIdentifier);
-  const addRegionalGuidancePositivePrompt = useAddRegionalGuidancePositivePrompt(entityIdentifier);
-  const addRegionalGuidanceNegativePrompt = useAddRegionalGuidanceNegativePrompt(entityIdentifier);
+  const addRegionalGuidanceIPAdapter = useAddRefImageToExistingRegionalGuidance(entityIdentifier);
+  const addRegionalGuidancePositivePrompt = useAddPositivePromptToExistingRegionalGuidance(entityIdentifier);
+  const addRegionalGuidanceNegativePrompt = useAddNegativePromptToExistingRegionalGuidance(entityIdentifier);
  const selectValidActions = useMemo(
    () => buildSelectValidRegionalGuidanceActions(entityIdentifier),
    [entityIdentifier]
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx
@@ -2,7 +2,7 @@ import type { FlexProps } from '@invoke-ai/ui-library';
 import { ContextMenu, Flex, MenuList } from '@invoke-ai/ui-library';
 import { ControlLayerMenuItems } from 'features/controlLayers/components/ControlLayer/ControlLayerMenuItems';
 import { InpaintMaskMenuItems } from 'features/controlLayers/components/InpaintMask/InpaintMaskMenuItems';
-import { IPAdapterMenuItems } from 'features/controlLayers/components/IPAdapter/IPAdapterMenuItems';
+import { IPAdapterMenuItems } from 'features/controlLayers/components/RefImage/IPAdapterMenuItems';
 import { RasterLayerMenuItems } from 'features/controlLayers/components/RasterLayer/RasterLayerMenuItems';
 import { RegionalGuidanceMenuItems } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItems';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
--- a/invokeai/frontend/web/src/features/controlLayers/components/common/IPAdapterCLIPVisionModel.tsx
+++ b/invokeai/frontend/web/src/features/controlLayers/components/common/IPAdapterCLIPVisionModel.tsx
@@ -22,7 +22,7 @@ type Props = {
  onChange: (clipVisionModel: CLIPVisionModelV2) => void;
 };

-export const CLIPVisionModel = memo(({ model, onChange }: Props) => {
+export const IPAdapterCLIPVisionModel = memo(({ model, onChange }: Props) => {
  const { t } = useTranslation();

  const _onChangeCLIPVisionModel = useCallback<ComboboxOnChange>(
@@ -58,4 +58,4 @@ export const CLIPVisionModel = memo(({ model, onChange }: Props) => {
  );
 });

-CLIPVisionModel.displayName = 'CLIPVisionModel';
+IPAdapterCLIPVisionModel.displayName = 'IPAdapterCLIPVisionModel';
--- a/invokeai/frontend/web/src/features/controlLayers/hooks/addLayerHooks.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/hooks/addLayerHooks.ts
@@ -1,6 +1,8 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppStore } from 'app/store/nanostores/store';
+import type { AppGetState } from 'app/store/store';
+import { useAppDispatch } from 'app/store/storeHooks';
 import { deepClone } from 'common/util/deepClone';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import {
@@ -20,10 +22,11 @@ import { selectCanvasSlice, selectEntity } from 'features/controlLayers/store/se
 import type {
  CanvasEntityIdentifier,
  CanvasRegionalGuidanceState,
+  ChatGPT4oReferenceImageConfig,
  ControlLoRAConfig,
  ControlNetConfig,
+  FluxKontextReferenceImageConfig,
  IPAdapterConfig,
-  RefImageState,
  T2IAdapterConfig,
 } from 'features/controlLayers/store/types';
 import {
@@ -36,13 +39,9 @@ import {
 import { zModelIdentifierField } from 'features/nodes/types/common';
 import { useCallback } from 'react';
 import { modelConfigsAdapterSelectors, selectModelConfigsQuery } from 'services/api/endpoints/models';
-import type {
-  ControlLoRAModelConfig,
-  ControlNetModelConfig,
-  IPAdapterModelConfig,
-  T2IAdapterModelConfig,
-} from 'services/api/types';
-import { isControlLayerModelConfig, isIPAdapterModelConfig } from 'services/api/types';
+import { selectIPAdapterModels } from 'services/api/hooks/modelsByType';
+import type { ControlLoRAModelConfig, ControlNetModelConfig, T2IAdapterModelConfig } from 'services/api/types';
+import { isControlLayerModelConfig } from 'services/api/types';

 /**
 * Selects the default control adapter configuration based on the model configurations and the base.
@@ -73,67 +72,69 @@ export const selectDefaultControlAdapter = createSelector(
  }
 );

-export const selectDefaultRefImageConfig = createSelector(
-  selectMainModelConfig,
-  selectModelConfigsQuery,
-  selectBase,
-  (selectedMainModel, query, base): RefImageState['config'] => {
-    if (selectedMainModel?.base === 'chatgpt-4o') {
-      const referenceImage = deepClone(initialChatGPT4oReferenceImage);
-      referenceImage.model = zModelIdentifierField.parse(selectedMainModel);
-      return referenceImage;
-    }
+export const getDefaultRefImageConfig = (
+  getState: AppGetState
+): IPAdapterConfig | ChatGPT4oReferenceImageConfig | FluxKontextReferenceImageConfig => {
+  const state = getState();

-    if (selectedMainModel?.base === 'flux-kontext') {
-      const referenceImage = deepClone(initialFluxKontextReferenceImage);
-      referenceImage.model = zModelIdentifierField.parse(selectedMainModel);
-      return referenceImage;
-    }
+  const mainModelConfig = selectMainModelConfig(state);
+  const ipAdapterModelConfigs = selectIPAdapterModels(state);

-    const { data } = query;
-    let model: IPAdapterModelConfig | null = null;
-    if (data) {
-      const modelConfigs = modelConfigsAdapterSelectors.selectAll(data).filter(isIPAdapterModelConfig);
-      const compatibleModels = modelConfigs.filter((m) => (base ? m.base === base : true));
-      model = compatibleModels[0] ?? modelConfigs[0] ?? null;
-    }
-    const ipAdapter = deepClone(initialIPAdapter);
-    if (model) {
-      ipAdapter.model = zModelIdentifierField.parse(model);
-      if (model.base === 'flux') {
-        ipAdapter.clipVisionModel = 'ViT-L';
-      }
-    }
-    return ipAdapter;
+  const base = mainModelConfig?.base;
+
+  // For ChatGPT-4o, the ref image model is the model itself.
+  if (base === 'chatgpt-4o') {
+    const config = deepClone(initialChatGPT4oReferenceImage);
+    config.model = zModelIdentifierField.parse(mainModelConfig);
+    return config;
  }
-);

-/**
- * Selects the default IP adapter configuration based on the model configurations and the base.
- *
- * Be sure to clone the output of this selector before modifying it!
- */
-export const selectDefaultIPAdapter = createSelector(
-  selectModelConfigsQuery,
-  selectBase,
-  (query, base): IPAdapterConfig => {
-    const { data } = query;
-    let model: IPAdapterModelConfig | null = null;
-    if (data) {
-      const modelConfigs = modelConfigsAdapterSelectors.selectAll(data).filter(isIPAdapterModelConfig);
-      const compatibleModels = modelConfigs.filter((m) => (base ? m.base === base : true));
-      model = compatibleModels[0] ?? modelConfigs[0] ?? null;
-    }
-    const ipAdapter = deepClone(initialIPAdapter);
-    if (model) {
-      ipAdapter.model = zModelIdentifierField.parse(model);
-      if (model.base === 'flux') {
-        ipAdapter.clipVisionModel = 'ViT-L';
-      }
-    }
-    return ipAdapter;
+  if (base === 'flux-kontext') {
+    const config = deepClone(initialFluxKontextReferenceImage);
+    config.model = zModelIdentifierField.parse(mainModelConfig);
+    return config;
  }
-);
+
+  // Otherwise, find the first compatible IP Adapter model.
+  const modelConfig = ipAdapterModelConfigs.find((m) => m.base === base);
+
+  // Clone the initial IP Adapter config and set the model if available.
+  const config = deepClone(initialIPAdapter);
+
+  if (modelConfig) {
+    config.model = zModelIdentifierField.parse(modelConfig);
+    // FLUX models use a different vision model.
+    if (modelConfig.base === 'flux') {
+      config.clipVisionModel = 'ViT-L';
+    }
+  }
+  return config;
+};
+
+export const getDefaultRegionalGuidanceRefImageConfig = (getState: AppGetState): IPAdapterConfig => {
+  // Regional guidance ref images do not support ChatGPT-4o, so we always return the IP Adapter config.
+  const state = getState();
+
+  const mainModelConfig = selectMainModelConfig(state);
+  const ipAdapterModelConfigs = selectIPAdapterModels(state);
+
+  const base = mainModelConfig?.base;
+
+  // Find the first compatible IP Adapter model.
+  const modelConfig = ipAdapterModelConfigs.find((m) => m.base === base);
+
+  // Clone the initial IP Adapter config and set the model if available.
+  const config = deepClone(initialIPAdapter);
+
+  if (modelConfig) {
+    config.model = zModelIdentifierField.parse(modelConfig);
+    // FLUX models use a different vision model.
+    if (modelConfig.base === 'flux') {
+      config.clipVisionModel = 'ViT-L';
+    }
+  }
+  return config;
+};

 export const useAddControlLayer = () => {
  const dispatch = useAppDispatch();
@@ -172,44 +173,46 @@ export const useAddRegionalGuidance = () => {
  return func;
 };

-export const useAddRegionalReferenceImage = () => {
-  const dispatch = useAppDispatch();
-  const defaultIPAdapter = useAppSelector(selectDefaultIPAdapter);
+export const useAddNewRegionalGuidanceWithARefImage = () => {
+  const { dispatch, getState } = useAppStore();

  const func = useCallback(() => {
+    const config = getDefaultRegionalGuidanceRefImageConfig(getState);
    const overrides: Partial<CanvasRegionalGuidanceState> = {
-      referenceImages: [
-        { id: getPrefixedId('regional_guidance_reference_image'), config: deepClone(defaultIPAdapter) },
-      ],
+      referenceImages: [{ id: getPrefixedId('regional_guidance_reference_image'), config }],
    };
    dispatch(rgAdded({ isSelected: true, overrides }));
-  }, [defaultIPAdapter, dispatch]);
+  }, [dispatch, getState]);

  return func;
 };

 export const useAddGlobalReferenceImage = () => {
-  const dispatch = useAppDispatch();
-  const defaultRefImage = useAppSelector(selectDefaultRefImageConfig);
+  const { dispatch, getState } = useAppStore();
  const func = useCallback(() => {
-    const overrides = { config: deepClone(defaultRefImage) };
+    const config = getDefaultRefImageConfig(getState);
+    const overrides = { config };
    dispatch(refImageAdded({ isSelected: true, overrides }));
-  }, [defaultRefImage, dispatch]);
+  }, [dispatch, getState]);

  return func;
 };

-export const useAddRegionalGuidanceIPAdapter = (entityIdentifier: CanvasEntityIdentifier<'regional_guidance'>) => {
-  const dispatch = useAppDispatch();
-  const defaultIPAdapter = useAppSelector(selectDefaultIPAdapter);
+export const useAddRefImageToExistingRegionalGuidance = (
+  entityIdentifier: CanvasEntityIdentifier<'regional_guidance'>
+) => {
+  const { dispatch, getState } = useAppStore();
  const func = useCallback(() => {
-    dispatch(rgRefImageAdded({ entityIdentifier, overrides: { config: deepClone(defaultIPAdapter) } }));
-  }, [defaultIPAdapter, dispatch, entityIdentifier]);
+    const config = getDefaultRegionalGuidanceRefImageConfig(getState);
+    dispatch(rgRefImageAdded({ entityIdentifier, overrides: { config } }));
+  }, [dispatch, entityIdentifier, getState]);

  return func;
 };

-export const useAddRegionalGuidancePositivePrompt = (entityIdentifier: CanvasEntityIdentifier<'regional_guidance'>) => {
+export const useAddPositivePromptToExistingRegionalGuidance = (
+  entityIdentifier: CanvasEntityIdentifier<'regional_guidance'>
+) => {
  const dispatch = useAppDispatch();
  const func = useCallback(() => {
    dispatch(rgPositivePromptChanged({ entityIdentifier, prompt: '' }));
@@ -218,7 +221,9 @@ export const useAddRegionalGuidancePositivePrompt = (entityIdentifier: CanvasEnt
  return func;
 };

-export const useAddRegionalGuidanceNegativePrompt = (entityIdentifier: CanvasEntityIdentifier<'regional_guidance'>) => {
+export const useAddNegativePromptToExistingRegionalGuidance = (
+  entityIdentifier: CanvasEntityIdentifier<'regional_guidance'>
+) => {
  const dispatch = useAppDispatch();
  const runc = useCallback(() => {
    dispatch(rgNegativePromptChanged({ entityIdentifier, prompt: '' }));
--- a/invokeai/frontend/web/src/features/controlLayers/hooks/saveCanvasHooks.ts
+++ b/invokeai/frontend/web/src/features/controlLayers/hooks/saveCanvasHooks.ts
@@ -1,9 +1,12 @@
 import { logger } from 'app/logging/logger';
-import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
+import { useAppDispatch, useAppStore } from 'app/store/storeHooks';
 import { deepClone } from 'common/util/deepClone';
 import { withResultAsync } from 'common/util/result';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { selectDefaultIPAdapter, selectDefaultRefImageConfig } from 'features/controlLayers/hooks/addLayerHooks';
+import {
+  getDefaultRefImageConfig,
+  getDefaultRegionalGuidanceRefImageConfig,
+} from 'features/controlLayers/hooks/addLayerHooks';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import {
  controlLayerAdded,
@@ -18,7 +21,7 @@ import {
  selectPositivePrompt,
  selectSeed,
 } from 'features/controlLayers/store/paramsSlice';
-import { refImageAdded,refImageImageChanged } from 'features/controlLayers/store/refImagesSlice';
+import { refImageAdded, refImageImageChanged } from 'features/controlLayers/store/refImagesSlice';
 import { selectCanvasMetadata } from 'features/controlLayers/store/selectors';
 import type {
  CanvasControlLayerState,
@@ -167,15 +170,14 @@ export const useSaveBboxToGallery = () => {

 export const useNewRegionalReferenceImageFromBbox = () => {
  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const defaultIPAdapter = useAppSelector(selectDefaultIPAdapter);
+  const { dispatch, getState } = useAppStore();

  const arg = useMemo<UseSaveCanvasArg>(() => {
    const onSave = (imageDTO: ImageDTO) => {
      const ipAdapter: RegionalGuidanceRefImageState = {
        id: getPrefixedId('regional_guidance_reference_image'),
        config: {
-          ...deepClone(defaultIPAdapter),
+          ...getDefaultRegionalGuidanceRefImageConfig(getState),
          image: imageDTOToImageWithDims(imageDTO),
        },
      };
@@ -193,21 +195,20 @@ export const useNewRegionalReferenceImageFromBbox = () => {
      toastOk: t('controlLayers.newRegionalReferenceImageOk'),
      toastError: t('controlLayers.newRegionalReferenceImageError'),
    };
-  }, [defaultIPAdapter, dispatch, t]);
+  }, [dispatch, getState, t]);
  const func = useSaveCanvas(arg);
  return func;
 };

 export const useNewGlobalReferenceImageFromBbox = () => {
  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const defaultIPAdapter = useAppSelector(selectDefaultRefImageConfig);
+  const { dispatch, getState } = useAppStore();

  const arg = useMemo<UseSaveCanvasArg>(() => {
    const onSave = (imageDTO: ImageDTO) => {
      const overrides: Partial<RefImageState> = {
        config: {
-          ...deepClone(defaultIPAdapter),
+          ...getDefaultRefImageConfig(getState),
          image: imageDTOToImageWithDims(imageDTO),
        },
      };
@@ -221,7 +222,7 @@ export const useNewGlobalReferenceImageFromBbox = () => {
      toastOk: t('controlLayers.newGlobalReferenceImageOk'),
      toastError: t('controlLayers.newGlobalReferenceImageError'),
    };
-  }, [defaultIPAdapter, dispatch, t]);
+  }, [dispatch, getState, t]);
  const func = useSaveCanvas(arg);
  return func;
 };