diff --git a/frontend/src/features/options/components/ProcessButtons/ProcessButtons.tsx b/frontend/src/features/options/components/ProcessButtons/ProcessButtons.tsx
index b27e8fe7bb..e4d07a0224 100644
--- a/frontend/src/features/options/components/ProcessButtons/ProcessButtons.tsx
+++ b/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 (
-
);
diff --git a/frontend/src/features/system/components/SettingsModal/SettingsModal.tsx b/frontend/src/features/system/components/SettingsModal/SettingsModal.tsx
index 6cb3bda431..800ebf221d 100644
--- a/frontend/src/features/system/components/SettingsModal/SettingsModal.tsx
+++ b/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))
}
/>
+ ) =>
+ dispatch(setShouldLoopback(e.target.checked))
+ }
+ />
diff --git a/frontend/src/features/tabs/components/FloatingOptionsPanelButtons.tsx b/frontend/src/features/tabs/components/FloatingOptionsPanelButtons.tsx
index 596b63074f..5473284da1 100644
--- a/frontend/src/features/tabs/components/FloatingOptionsPanelButtons.tsx
+++ b/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}
>
-
+
{shouldShowProcessButtons && (
<>
-
>
)}