Add toggle for showing/hiding style preset prompt previews

Co-authored-by: kent <kent@invoke.ai>

Author: 2 people

invokeai/frontend/web/public/locales/en.json

@@ -2400,7 +2400,9 @@
         "uploadImage": "Upload Image",
         "useForTemplate": "Use For Prompt Template",
         "viewList": "View Template List",
-        "viewModeTooltip": "This is how your prompt will look with your currently selected template. To edit your prompt, click anywhere in the text box."
+        "viewModeTooltip": "This is how your prompt will look with your currently selected template. To edit your prompt, click anywhere in the text box.",
+        "showPromptPreviews": "Show Prompt Previews",
+        "hidePromptPreviews": "Hide Prompt Previews"
     },
     "upsell": {
         "inviteTeammates": "Invite Teammates",

invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx

@@ -5,6 +5,7 @@ import { $stylePresetModalState } from 'features/stylePresets/store/stylePresetM
 import {
   $isStylePresetsMenuOpen,
   activeStylePresetIdChanged,
+  selectShowPromptPreviews,
   selectStylePresetActivePresetId,
 } from 'features/stylePresets/store/stylePresetSlice';
 import type { MouseEvent } from 'react';
@@ -18,6 +19,7 @@ import StylePresetImage from './StylePresetImage';
 export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithImage }) => {
   const dispatch = useAppDispatch();
   const activeStylePresetId = useAppSelector(selectStylePresetActivePresetId);
+  const showPromptPreviews = useAppSelector(selectShowPromptPreviews);
   const { t } = useTranslation();
   const deleteStylePreset = useDeleteStylePreset();
 
@@ -138,20 +140,22 @@ export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithI
           </Flex>
         </Flex>
 
-        <Flex flexDir="column" gap={1}>
-          <Text fontSize="xs">
-            <Text as="span" fontWeight="semibold">
-              {t('stylePresets.positivePrompt')}:
-            </Text>{' '}
-            {preset.preset_data.positive_prompt}
-          </Text>
-          <Text fontSize="xs">
-            <Text as="span" fontWeight="semibold">
-              {t('stylePresets.negativePrompt')}:
-            </Text>{' '}
-            {preset.preset_data.negative_prompt}
-          </Text>
-        </Flex>
+        {showPromptPreviews && (
+          <Flex flexDir="column" gap={1}>
+            <Text fontSize="xs">
+              <Text as="span" fontWeight="semibold">
+                {t('stylePresets.positivePrompt')}:
+              </Text>{' '}
+              {preset.preset_data.positive_prompt}
+            </Text>
+            <Text fontSize="xs">
+              <Text as="span" fontWeight="semibold">
+                {t('stylePresets.negativePrompt')}:
+              </Text>{' '}
+              {preset.preset_data.negative_prompt}
+            </Text>
+          </Flex>
+        )}
       </Flex>
     </Flex>
   );

invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenu.tsx

@@ -3,6 +3,7 @@ import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppSelector } from 'app/store/storeHooks';
 import { StylePresetExportButton } from 'features/stylePresets/components/StylePresetExportButton';
 import { StylePresetImportButton } from 'features/stylePresets/components/StylePresetImportButton';
+import { StylePresetPromptPreviewToggle } from 'features/stylePresets/components/StylePresetPromptPreviewToggle';
 import { selectStylePresetSearchTerm } from 'features/stylePresets/store/stylePresetSlice';
 import { selectAllowPrivateStylePresets } from 'features/system/store/configSlice';
 import { useTranslation } from 'react-i18next';
@@ -54,9 +55,12 @@ export const StylePresetMenu = () => {
     <Flex flexDir="column" gap={2} padding={3} layerStyle="second" borderRadius="base">
       <Flex alignItems="center" gap={2} w="full" justifyContent="space-between">
         <StylePresetSearch />
-        <StylePresetCreateButton />
-        <StylePresetImportButton />
-        <StylePresetExportButton />
+        <Flex alignItems="center" gap={1}>
+          <StylePresetPromptPreviewToggle />
+          <StylePresetCreateButton />
+          <StylePresetImportButton />
+          <StylePresetExportButton />
+        </Flex>
       </Flex>
 
       <StylePresetList title={t('stylePresets.myTemplates')} data={data.presets} />

invokeai/frontend/web/src/features/stylePresets/components/StylePresetPromptPreviewToggle.tsx

@@ -0,0 +1,28 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { selectShowPromptPreviews, showPromptPreviewsChanged } from 'features/stylePresets/store/stylePresetSlice';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiEyeBold, PiEyeSlashBold } from 'react-icons/pi';
+
+export const StylePresetPromptPreviewToggle = () => {
+  const dispatch = useAppDispatch();
+  const showPromptPreviews = useAppSelector(selectShowPromptPreviews);
+  const { t } = useTranslation();
+
+  const handleToggle = useCallback(() => {
+    dispatch(showPromptPreviewsChanged(!showPromptPreviews));
+  }, [dispatch, showPromptPreviews]);
+
+  return (
+    <IconButton
+      size="sm"
+      variant="ghost"
+      aria-label={showPromptPreviews ? t('stylePresets.hidePromptPreviews') : t('stylePresets.showPromptPreviews')}
+      tooltip={showPromptPreviews ? t('stylePresets.hidePromptPreviews') : t('stylePresets.showPromptPreviews')}
+      onClick={handleToggle}
+      icon={showPromptPreviews ? <PiEyeBold /> : <PiEyeSlashBold />}
+      colorScheme={showPromptPreviews ? 'invokeBlue' : 'base'}
+    />
+  );
+};

invokeai/frontend/web/src/features/stylePresets/store/stylePresetSlice.ts

@@ -12,6 +12,7 @@ const initialState: StylePresetState = {
   activeStylePresetId: null,
   searchTerm: '',
   viewMode: false,
+  showPromptPreviews: false,
 };
 
 export const stylePresetSlice = createSlice({
@@ -27,6 +28,9 @@ export const stylePresetSlice = createSlice({
     viewModeChanged: (state, action: PayloadAction<boolean>) => {
       state.viewMode = action.payload;
     },
+    showPromptPreviewsChanged: (state, action: PayloadAction<boolean>) => {
+      state.showPromptPreviews = action.payload;
+    },
   },
   extraReducers(builder) {
     builder.addCase(paramsReset, () => {
@@ -53,13 +57,16 @@ export const stylePresetSlice = createSlice({
   },
 });
 
-export const { activeStylePresetIdChanged, searchTermChanged, viewModeChanged } = stylePresetSlice.actions;
+export const { activeStylePresetIdChanged, searchTermChanged, viewModeChanged, showPromptPreviewsChanged } = stylePresetSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 const migrateStylePresetState = (state: any): any => {
   if (!('_version' in state)) {
     state._version = 1;
   }
+  if (!('showPromptPreviews' in state)) {
+    state.showPromptPreviews = false;
+  }
   return state;
 };
 
@@ -79,6 +86,7 @@ export const selectStylePresetActivePresetId = createStylePresetSelector(
 );
 export const selectStylePresetViewMode = createStylePresetSelector((stylePreset) => stylePreset.viewMode);
 export const selectStylePresetSearchTerm = createStylePresetSelector((stylePreset) => stylePreset.searchTerm);
+export const selectShowPromptPreviews = createStylePresetSelector((stylePreset) => stylePreset.showPromptPreviews);
 
 /**
  * Tracks whether or not the style preset menu is open.

invokeai/frontend/web/src/features/stylePresets/store/types.ts

@@ -2,4 +2,5 @@ export type StylePresetState = {
   activeStylePresetId: string | null;
   searchTerm: string;
   viewMode: boolean;
+  showPromptPreviews: boolean;
 };