Moves Loopback to app settings

frontend/src/features/options/components/ProcessButtons/ProcessButtons.tsx

@@ -1,6 +1,5 @@
 import InvokeButton from './InvokeButton';
 import CancelButton from './CancelButton';
-import LoopbackButton from './Loopback';
 
 /**
  * Buttons to start and cancel image generation.
@@ -9,7 +8,6 @@ const ProcessButtons = () => {
   return (
     <div className="process-buttons">
       <InvokeButton />
-      <LoopbackButton />
       <CancelButton />
     </div>
   );

frontend/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -32,10 +32,13 @@ import IAISwitch from 'common/components/IAISwitch';
 import IAISelect from 'common/components/IAISelect';
 import IAINumberInput from 'common/components/IAINumberInput';
 import EmptyTempFolderButtonModal from '../ClearTempFolderButtonModal';
+import { systemSelector } from 'features/system/store/systemSelectors';
+import { optionsSelector } from 'features/options/store/optionsSelectors';
+import { setShouldLoopback } from 'features/options/store/optionsSlice';
 
-const systemSelector = createSelector(
-  (state: RootState) => state.system,
-  (system: SystemState) => {
+const selector = createSelector(
+  [systemSelector, optionsSelector],
+  (system, options) => {
     const {
       shouldDisplayInProgressType,
       shouldConfirmOnDelete,
@@ -44,6 +47,9 @@ const systemSelector = createSelector(
       saveIntermediatesInterval,
       enableImageDebugging,
     } = system;
+
+    const { shouldLoopback } = options;
+
     return {
       shouldDisplayInProgressType,
       shouldConfirmOnDelete,
@@ -51,6 +57,7 @@ const systemSelector = createSelector(
       models: _.map(model_list, (_model, key) => key),
       saveIntermediatesInterval,
       enableImageDebugging,
+      shouldLoopback,
     };
   },
   {
@@ -92,7 +99,8 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
     shouldDisplayGuides,
     saveIntermediatesInterval,
     enableImageDebugging,
-  } = useAppSelector(systemSelector);
+    shouldLoopback,
+  } = useAppSelector(selector);
 
   /**
    * Resets localstorage, then opens a secondary modal informing user to
@@ -172,6 +180,14 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
                   dispatch(setShouldDisplayGuides(e.target.checked))
                 }
               />
+              <IAISwitch
+                styleClass="settings-modal-item"
+                label={'Image to Image Loopback'}
+                isChecked={shouldLoopback}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  dispatch(setShouldLoopback(e.target.checked))
+                }
+              />
             </div>
 
             <div className="settings-modal-items">

frontend/src/features/tabs/components/FloatingOptionsPanelButtons.tsx

@@ -1,5 +1,4 @@
 import { createSelector } from '@reduxjs/toolkit';
-import { IoMdOptions } from 'react-icons/io';
 import { RootState, useAppDispatch, useAppSelector } from 'app/store';
 import IAIIconButton from 'common/components/IAIIconButton';
 import {
@@ -9,8 +8,8 @@ import {
 import CancelButton from 'features/options/components/ProcessButtons/CancelButton';
 import InvokeButton from 'features/options/components/ProcessButtons/InvokeButton';
 import _ from 'lodash';
-import LoopbackButton from 'features/options/components/ProcessButtons/Loopback';
 import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
+import { FaSlidersH } from 'react-icons/fa';
 
 const canInvokeSelector = createSelector(
   (state: RootState) => state.options,
@@ -46,12 +45,11 @@ const FloatingOptionsPanelButtons = () => {
         aria-label="Show Options Panel"
         onClick={handleShowOptionsPanel}
       >
-        <IoMdOptions />
+        <FaSlidersH />
       </IAIIconButton>
       {shouldShowProcessButtons && (
         <>
           <InvokeButton iconButton />
-          <LoopbackButton />
           <CancelButton />
         </>
       )}