Merge branch 'development' into development

frontend/src/features/options/OptionsAccordion.tsx

@@ -31,6 +31,9 @@ import OutputOptions from './OutputOptions';
 import ImageToImageOptions from './ImageToImageOptions';
 import { ChangeEvent } from 'react';
 
+import GuideIcon from '../../common/components/GuideIcon';
+import { Feature } from '../../app/features';
+
 const optionsSelector = createSelector(
   (state: RootState) => state.options,
   (options: OptionsState) => {
@@ -108,6 +111,7 @@ const OptionsAccordion = () => {
             <Box flex="1" textAlign="left">
               Seed & Variation
             </Box>
+            <GuideIcon feature={Feature.SEED_AND_VARIATION} />
             <AccordionIcon />
           </AccordionButton>
         </h2>
@@ -121,6 +125,7 @@ const OptionsAccordion = () => {
             <Box flex="1" textAlign="left">
               Sampler
             </Box>
+            <GuideIcon feature={Feature.SAMPLER} />
             <AccordionIcon />
           </AccordionButton>
         </h2>
@@ -144,6 +149,7 @@ const OptionsAccordion = () => {
                 onChange={handleChangeShouldRunESRGAN}
               />
             </Flex>
+            <GuideIcon feature={Feature.ESRGAN} />
             <AccordionIcon />
           </AccordionButton>
         </h2>
@@ -160,13 +166,14 @@ const OptionsAccordion = () => {
               width={'100%'}
               mr={2}
             >
-              <Text>Fix Faces (GFPGAN)</Text>
+              <Text>Face Correction</Text>
               <Switch
                 isDisabled={!isGFPGANAvailable}
                 isChecked={shouldRunGFPGAN}
                 onChange={handleChangeShouldRunGFPGAN}
               />
             </Flex>
+            <GuideIcon feature={Feature.FACE_CORRECTION} />
             <AccordionIcon />
           </AccordionButton>
         </h2>
@@ -190,6 +197,7 @@ const OptionsAccordion = () => {
                 onChange={handleChangeShouldUseInitImage}
               />
             </Flex>
+            <GuideIcon feature={Feature.IMAGE_TO_IMAGE} />
             <AccordionIcon />
           </AccordionButton>
         </h2>
@@ -203,6 +211,7 @@ const OptionsAccordion = () => {
             <Box flex="1" textAlign="left">
               Output
             </Box>
+            <GuideIcon feature={Feature.OUTPUT} />
             <AccordionIcon />
           </AccordionButton>
         </h2>

frontend/src/features/system/SettingsModal.tsx

@@ -20,6 +20,7 @@ import { useAppDispatch, useAppSelector } from '../../app/store';
 import {
   setShouldConfirmOnDelete,
   setShouldDisplayInProgress,
+  setShouldDisplayGuides,
   SystemState,
 } from './systemSlice';
 import { RootState } from '../../app/store';
@@ -31,8 +32,8 @@ import { cloneElement, ReactElement } from 'react';
 const systemSelector = createSelector(
   (state: RootState) => state.system,
   (system: SystemState) => {
-    const { shouldDisplayInProgress, shouldConfirmOnDelete } = system;
-    return { shouldDisplayInProgress, shouldConfirmOnDelete };
+    const { shouldDisplayInProgress, shouldConfirmOnDelete, shouldDisplayGuides } = system;
+    return { shouldDisplayInProgress, shouldConfirmOnDelete, shouldDisplayGuides };
   },
   {
     memoizeOptions: { resultEqualityCheck: isEqual },
@@ -63,7 +64,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
     onClose: onRefreshModalClose,
   } = useDisclosure();
 
-  const { shouldDisplayInProgress, shouldConfirmOnDelete } =
+  const { shouldDisplayInProgress, shouldConfirmOnDelete, shouldDisplayGuides } =
     useAppSelector(systemSelector);
 
   const dispatch = useAppDispatch();
@@ -116,6 +117,19 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
                   />
                 </HStack>
               </FormControl>
+              <FormControl>
+                <HStack>
+                  <FormLabel marginBottom={1}>
+                    Display help guides in configuration menus
+                  </FormLabel>
+                  <Switch
+                    isChecked={shouldDisplayGuides}
+                    onChange={(e) =>
+                      dispatch(setShouldDisplayGuides(e.target.checked))
+                    }
+                  />
+                </HStack>
+              </FormControl>
 
               <Heading size={'md'}>Reset Web UI</Heading>
               <Text>

frontend/src/features/system/systemSlice.ts

@@ -31,6 +31,8 @@ export interface SystemState extends InvokeAI.SystemStatus, InvokeAI.SystemConfi
   totalIterations: number;
   currentStatus: string;
   currentStatusHasSteps: boolean;
+  
+  shouldDisplayGuides: boolean;
 }
 
 const initialSystemState = {
@@ -39,6 +41,7 @@ const initialSystemState = {
   log: [],
   shouldShowLogViewer: false,
   shouldDisplayInProgress: false,
+  shouldDisplayGuides: true,
   isGFPGANAvailable: true,
   isESRGANAvailable: true,
   socketId: '',
@@ -117,6 +120,9 @@ export const systemSlice = createSlice({
     setSystemConfig: (state, action: PayloadAction<InvokeAI.SystemConfig>) => {
       return { ...state, ...action.payload };
     },
+    setShouldDisplayGuides: (state, action: PayloadAction<boolean>) => {
+      state.shouldDisplayGuides = action.payload;
+    },
   },
 });
 
@@ -132,6 +138,7 @@ export const {
   setSystemStatus,
   setCurrentStatus,
   setSystemConfig,
+  setShouldDisplayGuides,
 } = systemSlice.actions;
 
 export default systemSlice.reducer;