From 9eba6acb7f6cba87be65bf695bfdaf823731ab5d Mon Sep 17 00:00:00 2001
From: Kent Keirsey <31807370+hipsterusername@users.noreply.github.com>
Date: Sat, 24 Dec 2022 10:56:40 -0500
Subject: [PATCH] Fix of Hires Fix on Img2Img tab (#2096)

* Fix of Hires Fix on Img2Img tab

Fixed linting issues

* Attempting to fix prettier workflow issues

* More Prettier Attempts

* Finally Fixed Prettier Issues

* Fix of Hires Fix on Img2Img tab

Fixed linting issues

* Attempting to fix prettier workflow issues

* More Prettier Attempts

* Finally Fixed Prettier Issues

* updated with useEffect

* Update to fix Prettier

* Update useEffect dependencies

* Fix dispatch dependency error from prettier

Co-authored-by: Lincoln Stein <lincoln.stein@gmail.com>
---
 .../Output/ImageToImageOutputOptions.tsx      | 12 ++++++++++++
 .../ImageToImage/ImageToImagePanel.tsx        | 19 +++++++++++++++++--
 2 files changed, 29 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/features/options/components/AdvancedOptions/Output/ImageToImageOutputOptions.tsx

diff --git a/frontend/src/features/options/components/AdvancedOptions/Output/ImageToImageOutputOptions.tsx b/frontend/src/features/options/components/AdvancedOptions/Output/ImageToImageOutputOptions.tsx
new file mode 100644
index 0000000000..ad18e5550a
--- /dev/null
+++ b/frontend/src/features/options/components/AdvancedOptions/Output/ImageToImageOutputOptions.tsx
@@ -0,0 +1,12 @@
+import { Flex } from '@chakra-ui/react';
+import SeamlessOptions from './SeamlessOptions';
+
+const ImageToImageOutputOptions = () => {
+  return (
+    <Flex gap={2} direction={'column'}>
+      <SeamlessOptions />
+    </Flex>
+  );
+};
+
+export default ImageToImageOutputOptions;
diff --git a/frontend/src/features/tabs/components/ImageToImage/ImageToImagePanel.tsx b/frontend/src/features/tabs/components/ImageToImage/ImageToImagePanel.tsx
index 3b85b1fbee..771a1c7118 100644
--- a/frontend/src/features/tabs/components/ImageToImage/ImageToImagePanel.tsx
+++ b/frontend/src/features/tabs/components/ImageToImage/ImageToImagePanel.tsx
@@ -1,9 +1,10 @@
+import { useEffect } from 'react';
 import { Feature } from 'app/features';
 import FaceRestoreOptions from 'features/options/components/AdvancedOptions/FaceRestore/FaceRestoreOptions';
 import FaceRestoreToggle from 'features/options/components/AdvancedOptions/FaceRestore/FaceRestoreToggle';
 import ImageFit from 'features/options/components/AdvancedOptions/ImageToImage/ImageFit';
 import ImageToImageStrength from 'features/options/components/AdvancedOptions/ImageToImage/ImageToImageStrength';
-import OutputOptions from 'features/options/components/AdvancedOptions/Output/OutputOptions';
+import ImageToImageOutputOptions from 'features/options/components/AdvancedOptions/Output/ImageToImageOutputOptions';
 import SeedOptions from 'features/options/components/AdvancedOptions/Seed/SeedOptions';
 import UpscaleOptions from 'features/options/components/AdvancedOptions/Upscale/UpscaleOptions';
 import UpscaleToggle from 'features/options/components/AdvancedOptions/Upscale/UpscaleToggle';
@@ -13,7 +14,10 @@ import MainOptions from 'features/options/components/MainOptions/MainOptions';
 import OptionsAccordion from 'features/options/components/OptionsAccordion';
 import ProcessButtons from 'features/options/components/ProcessButtons/ProcessButtons';
 import PromptInput from 'features/options/components/PromptInput/PromptInput';
+import { setHiresFix } from 'features/options/store/optionsSlice';
+import { useAppDispatch, useAppSelector } from 'app/storeHooks';
 import InvokeOptionsPanel from 'features/tabs/components/InvokeOptionsPanel';
+import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
 
 export default function ImageToImagePanel() {
   const imageToImageAccordions = {
@@ -43,10 +47,21 @@ export default function ImageToImagePanel() {
     other: {
       header: 'Other Options',
       feature: Feature.OTHER,
-      content: <OutputOptions />,
+      content: <ImageToImageOutputOptions />,
     },
   };
 
+  const dispatch = useAppDispatch();
+
+  const activeTabName = useAppSelector(activeTabNameSelector);
+
+  useEffect(() => {
+    if (activeTabName === 'img2img') {
+      const handleChangeHiresFix = () => dispatch(setHiresFix(false));
+      handleChangeHiresFix();
+    }
+  }, [activeTabName, dispatch]);
+
   return (
     <InvokeOptionsPanel>
       <PromptInput />