From ae14adec2a87657c99ee8d20550984349a8aa565 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Wed, 7 Jun 2023 15:43:11 +1000
Subject: [PATCH] feat(ui): add reset button for control image

---
 .../components/ControlNetImagePreview.tsx     | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx b/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
index cb74ea9f5e..b8d8896dad 100644
--- a/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
+++ b/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
@@ -51,6 +51,9 @@ const ControlNetImagePreview = (props: Props) => {
     [controlImage, controlNetId, dispatch]
   );
 
+  const handleResetControlImage = useCallback(() => {
+    dispatch(controlNetImageChanged({ controlNetId, controlImage: null }));
+  }, [controlNetId, dispatch]);
   const handleMouseEnter = useCallback(() => {
     setIsMouseOverImage(true);
   }, []);
@@ -150,6 +153,22 @@ const ControlNetImagePreview = (props: Props) => {
           <IAIImageFallback />
         </Box>
       )}
+      {controlImage && (
+        <Flex sx={{ position: 'absolute', top: 0, insetInlineEnd: 0 }}>
+          <IAIIconButton
+            aria-label="Reset Control Image"
+            tooltip="Reset Control Image"
+            size="sm"
+            onClick={handleResetControlImage}
+            icon={<FaUndo />}
+            variant="link"
+            sx={{
+              p: 2,
+              color: 'base.50',
+            }}
+          />
+        </Flex>
+      )}
     </Box>
   );
 };