wip: Improve the IP Adapter UI

invokeai/frontend/web/public/locales/en.json

@@ -193,7 +193,9 @@
         "w": "W",
         "weight": "Weight",
         "enableIPAdapter": "Enable IP Adapter",
-        "ipAdapterModel": "Adapter Model"
+        "ipAdapterModel": "Adapter Model",
+        "resetIPAdapterImage": "Reset IP Adapter Image",
+        "ipAdapterImageFallback": "No IP Adapter Image Selected"
     },
     "embedding": {
         "addEmbedding": "Add Embedding",

invokeai/frontend/web/src/app/store/store.ts

@@ -86,7 +86,10 @@ export const store = configureStore({
       .concat(autoBatchEnhancer());
   },
   middleware: (getDefaultMiddleware) =>
-    getDefaultMiddleware({ immutableCheck: false })
+    getDefaultMiddleware({
+      serializableCheck: false,
+      immutableCheck: false,
+    })
       .concat(api.middleware)
       .concat(dynamicMiddlewares)
       .prepend(listenerMiddleware.middleware),

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

@@ -13,7 +13,7 @@ const IPAdapterPanel = () => {
         gap: 3,
         paddingInline: 3,
         paddingBlock: 2,
-        paddingBottom: 6,
+        paddingBottom: 5,
         borderRadius: 'base',
         position: 'relative',
         bg: 'base.250',

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

@@ -1,14 +1,18 @@
 import { Flex } from '@chakra-ui/react';
 import { skipToken } from '@reduxjs/toolkit/dist/query';
 import { RootState } from 'app/store/store';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDndImage from 'common/components/IAIDndImage';
+import IAIIconButton from 'common/components/IAIIconButton';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import { ipAdapterImageChanged } from 'features/controlNet/store/controlNetSlice';
 import {
   TypesafeDraggableData,
   TypesafeDroppableData,
 } from 'features/dnd/types';
 import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaUndo } from 'react-icons/fa';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 
 const ParamIPAdapterImage = () => {
@@ -20,6 +24,9 @@ const ParamIPAdapterImage = () => {
     (state: RootState) => state.controlNet.isIPAdapterEnabled
   );
 
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+
   const { currentData: imageDTO } = useGetImageDTOQuery(
     ipAdapterInfo.adapterImage?.image_name ?? skipToken
   );
@@ -56,12 +63,28 @@ const ParamIPAdapterImage = () => {
         droppableData={droppableData}
         draggableData={draggableData}
         isUploadDisabled={!isIPAdapterEnabled}
-        fitContainer
-        // dropLabel="Set as Initial Image"
+        dropLabel={t('toast.setIPAdapterImage')}
         noContentFallback={
-          <IAINoContentFallback label="No IP Adapter Image Selected" />
+          <IAINoContentFallback
+            label={t('controlnet.ipAdapterImageFallback')}
+          />
         }
       />
+
+      {ipAdapterInfo.adapterImage && (
+        <IAIIconButton
+          tooltip={t('controlnet.resetIPAdapterImage')}
+          aria-label={t('controlnet.resetIPAdapterImage')}
+          icon={<FaUndo />}
+          onClick={() => dispatch(ipAdapterImageChanged(null))}
+          isDisabled={!imageDTO}
+          sx={{
+            position: 'absolute',
+            top: 3,
+            right: 3,
+          }}
+        />
+      )}
     </Flex>
   );
 };

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

@@ -22,6 +22,10 @@ const ParamIPAdapterWeight = () => {
     [dispatch]
   );
 
+  const handleWeightReset = useCallback(() => {
+    dispatch(ipAdapterWeightChanged(1));
+  }, [dispatch]);
+
   return (
     <IAISlider
       isDisabled={!isIpAdapterEnabled}
@@ -33,6 +37,8 @@ const ParamIPAdapterWeight = () => {
       step={0.01}
       withSliderMarks
       sliderMarks={[0, 1, 2]}
+      withReset
+      handleReset={handleWeightReset}
     />
   );
 };