feat(ui): Make HuggingFace Concepts display optional

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

@@ -31,6 +31,7 @@ import {
 } from 'features/system/store/systemSlice';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import {
+  setShouldShowHuggingFaceConcepts,
   setShouldUseCanvasBetaLayout,
   setShouldUseSliders,
 } from 'features/ui/store/uiSlice';
@@ -52,7 +53,11 @@ const selector = createSelector(
       enableImageDebugging,
     } = system;
 
-    const { shouldUseCanvasBetaLayout, shouldUseSliders } = ui;
+    const {
+      shouldUseCanvasBetaLayout,
+      shouldUseSliders,
+      shouldShowHuggingFaceConcepts,
+    } = ui;
 
     return {
       shouldDisplayInProgressType,
@@ -63,6 +68,7 @@ const selector = createSelector(
       enableImageDebugging,
       shouldUseCanvasBetaLayout,
       shouldUseSliders,
+      shouldShowHuggingFaceConcepts,
     };
   },
   {
@@ -107,6 +113,7 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
     enableImageDebugging,
     shouldUseCanvasBetaLayout,
     shouldUseSliders,
+    shouldShowHuggingFaceConcepts,
   } = useAppSelector(selector);
 
   /**
@@ -206,6 +213,14 @@ const SettingsModal = ({ children }: SettingsModalProps) => {
                   dispatch(setShouldUseSliders(e.target.checked))
                 }
               />
+              <IAISwitch
+                styleClass="settings-modal-item"
+                label={t('settings.showHuggingFaceConcepts')}
+                isChecked={shouldShowHuggingFaceConcepts}
+                onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                  dispatch(setShouldShowHuggingFaceConcepts(e.target.checked))
+                }
+              />
             </div>
 
             <div className="settings-modal-items">

invokeai/frontend/src/features/ui/store/uiSlice.ts

@@ -15,6 +15,7 @@ const initialtabsState: UIState = {
   shouldUseCanvasBetaLayout: false,
   shouldShowExistingModelsInSearch: false,
   shouldUseSliders: false,
+  shouldShowHuggingFaceConcepts: false,
   addNewModelUIOption: null,
 };
 
@@ -70,6 +71,12 @@ export const uiSlice = createSlice({
     setShouldUseSliders: (state, action: PayloadAction<boolean>) => {
       state.shouldUseSliders = action.payload;
     },
+    setShouldShowHuggingFaceConcepts: (
+      state,
+      action: PayloadAction<boolean>
+    ) => {
+      state.shouldShowHuggingFaceConcepts = action.payload;
+    },
     setAddNewModelUIOption: (state, action: PayloadAction<AddNewModelType>) => {
       state.addNewModelUIOption = action.payload;
     },
@@ -88,6 +95,7 @@ export const {
   setShouldUseCanvasBetaLayout,
   setShouldShowExistingModelsInSearch,
   setShouldUseSliders,
+  setShouldShowHuggingFaceConcepts,
   setAddNewModelUIOption,
 } = uiSlice.actions;
 

invokeai/frontend/src/features/ui/store/uiTypes.ts

@@ -12,5 +12,6 @@ export interface UIState {
   shouldUseCanvasBetaLayout: boolean;
   shouldShowExistingModelsInSearch: boolean;
   shouldUseSliders: boolean;
+  shouldShowHuggingFaceConcepts: boolean;
   addNewModelUIOption: AddNewModelType;
 }