IP adapter UI

invokeai/frontend/web/src/features/controlNet/components/ipAdapter/IPAdapterPanel.tsx

@@ -5,8 +5,23 @@ import ParamIPAdapterFeatureToggle from './ParamIPAdapterFeatureToggle';
 import ParamIPAdapterImage from './ParamIPAdapterImage';
 import ParamIPAdapterModelSelect from './ParamIPAdapterModelSelect';
 import ParamIPAdapterWeight from './ParamIPAdapterWeight';
+import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from '../../../../app/store/store';
+import { defaultSelectorOptions } from '../../../../app/store/util/defaultMemoizeOptions';
+import { useAppSelector } from '../../../../app/store/storeHooks';
+
+const selector = createSelector(
+  stateSelector,
+  (state) => {
+    const { isIPAdapterEnabled } = state.controlNet;
+
+    return { isIPAdapterEnabled };
+  },
+  defaultSelectorOptions
+);
 
 const IPAdapterPanel = () => {
+  const { isIPAdapterEnabled } = useAppSelector(selector);
   return (
     <Flex
       sx={{
@@ -14,7 +29,6 @@ const IPAdapterPanel = () => {
         gap: 3,
         paddingInline: 3,
         paddingBlock: 2,
-        paddingBottom: 5,
         borderRadius: 'base',
         position: 'relative',
         bg: 'base.250',
@@ -24,10 +38,26 @@ const IPAdapterPanel = () => {
       }}
     >
       <ParamIPAdapterFeatureToggle />
-      <ParamIPAdapterImage />
+      {isIPAdapterEnabled && (
-      <ParamIPAdapterModelSelect />
+        <>
-      <ParamIPAdapterWeight />
+          <ParamIPAdapterModelSelect />
-      <ParamIPAdapterBeginEnd />
+          <Flex gap="3">
+            <Flex
+              flexDirection="column"
+              sx={{
+                h: 28,
+                w: 'full',
+                gap: 4,
+                mb: 4,
+              }}
+            >
+              <ParamIPAdapterWeight />
+              <ParamIPAdapterBeginEnd />
+            </Flex>
+            <ParamIPAdapterImage />
+          </Flex>
+        </>
+      )}
     </Flex>
   );
 };

invokeai/frontend/web/src/features/controlNet/components/ipAdapter/ParamIPAdapterImage.tsx

@@ -66,7 +66,8 @@ const ParamIPAdapterImage = () => {
       layerStyle="second"
       sx={{
         position: 'relative',
-        w: 'full',
+        h: 28,
+        w: 28,
         alignItems: 'center',
         justifyContent: 'center',
         aspectRatio: '1/1',

invokeai/frontend/web/src/features/controlNet/components/ipAdapter/ParamIPAdapterModelSelect.tsx

@@ -6,7 +6,7 @@ import { ipAdapterModelChanged } from 'features/controlNet/store/controlNetSlice
 import { MODEL_TYPE_MAP } from 'features/parameters/types/constants';
 import { modelIdToIPAdapterModelParam } from 'features/parameters/util/modelIdToIPAdapterModelParams';
 import { forEach } from 'lodash-es';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useGetIPAdapterModelsQuery } from 'services/api/endpoints/models';
 
@@ -24,6 +24,27 @@ const ParamIPAdapterModelSelect = () => {
 
   const { data: ipAdapterModels } = useGetIPAdapterModelsQuery();
 
+  const firstModel = useMemo(() => {
+    if (!ipAdapterModels || !Object.keys(ipAdapterModels.entities).length) {
+      return undefined;
+    }
+    const firstModelId = Object.keys(ipAdapterModels.entities)[0];
+
+    if (!firstModelId) {
+      return undefined;
+    }
+
+    const firstModel = ipAdapterModels.entities[firstModelId];
+
+    return firstModel ? firstModel : undefined;
+  }, [ipAdapterModels]);
+
+  useEffect(() => {
+    if (firstModel) {
+      dispatch(ipAdapterModelChanged(firstModel));
+    }
+  }, [firstModel, dispatch]);
+
   // grab the full model entity from the RTK Query cache
   const selectedModel = useMemo(
     () =>