From 208286e97ac03f6952e42a718fa1af0a0090803b Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Sat, 16 Sep 2023 12:14:04 +1200
Subject: [PATCH] wip: Improve the IP Adapter UI

---
 invokeai/frontend/web/public/locales/en.json  |  4 ++-
 invokeai/frontend/web/src/app/store/store.ts  |  5 ++-
 .../components/ipAdapter/IPAdapterPanel.tsx   |  2 +-
 .../ipAdapter/ParamIPAdapterImage.tsx         | 31 ++++++++++++++++---
 .../ipAdapter/ParamIPAdapterWeight.tsx        |  6 ++++
 5 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 5bb7c73227..d20fae0f1f 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/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",
diff --git a/invokeai/frontend/web/src/app/store/store.ts b/invokeai/frontend/web/src/app/store/store.ts
index f84f3dd9c7..d45ae35cdb 100644
--- a/invokeai/frontend/web/src/app/store/store.ts
+++ b/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),
diff --git a/invokeai/frontend/web/src/features/controlNet/components/ipAdapter/IPAdapterPanel.tsx b/invokeai/frontend/web/src/features/controlNet/components/ipAdapter/IPAdapterPanel.tsx
index 58603c2b1d..9dbd7e2ffa 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/ipAdapter/IPAdapterPanel.tsx
+++ b/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',
diff --git a/invokeai/frontend/web/src/features/controlNet/components/ipAdapter/ParamIPAdapterImage.tsx b/invokeai/frontend/web/src/features/controlNet/components/ipAdapter/ParamIPAdapterImage.tsx
index c7c03a95fc..77f088cf7a 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/ipAdapter/ParamIPAdapterImage.tsx
+++ b/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>
   );
 };
diff --git a/invokeai/frontend/web/src/features/controlNet/components/ipAdapter/ParamIPAdapterWeight.tsx b/invokeai/frontend/web/src/features/controlNet/components/ipAdapter/ParamIPAdapterWeight.tsx
index d324953bac..df5a9a36a3 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/ipAdapter/ParamIPAdapterWeight.tsx
+++ b/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}
     />
   );
 };