clean up image implementation

invokeai/app/api/routers/style_presets.py

@@ -8,6 +8,7 @@ from PIL import Image
 
 from invokeai.app.api.dependencies import ApiDependencies
 from invokeai.app.api.routers.model_manager import IMAGE_MAX_AGE
+from invokeai.app.services.style_preset_images.style_preset_images_common import StylePresetImageFileNotFoundException
 from invokeai.app.services.style_preset_records.style_preset_records_common import (
     PresetData,
     StylePresetChanges,
@@ -91,7 +92,11 @@ async def delete_style_preset(
     style_preset_id: str = Path(description="The style preset to delete"),
 ) -> None:
     """Deletes a style preset"""
+    try:
         ApiDependencies.invoker.services.style_preset_images_service.delete(style_preset_id)
+    except StylePresetImageFileNotFoundException:
+        pass
+
     ApiDependencies.invoker.services.style_preset_records.delete(style_preset_id)
 
 

invokeai/app/services/style_preset_images/style_preset_images_default.py

@@ -72,6 +72,8 @@ class StylePresetImageFileStorageDisk(StylePresetImageFileStorageBase):
 
             send2trash(path)
 
+        except StylePresetImageFileNotFoundException as e:
+            raise StylePresetImageFileNotFoundException from e
         except Exception as e:
             raise StylePresetImageFileDeleteException from e
 

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

@@ -1,12 +1,11 @@
-import { Flex, IconButton, Text } from '@invoke-ai/ui-library';
+import { Flex, IconButton, Text, Box, ButtonGroup } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { negativePromptChanged, positivePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
 import { usePresetModifiedPrompts } from 'features/stylePresets/hooks/usePresetModifiedPrompts';
 import { activeStylePresetChanged } from 'features/stylePresets/store/stylePresetSlice';
 import type { MouseEventHandler } from 'react';
 import { useCallback } from 'react';
-import { CgPushDown } from 'react-icons/cg';
+import { PiStackSimpleBold, PiXBold } from 'react-icons/pi';
-import { PiXBold } from 'react-icons/pi';
 import StylePresetImage from './StylePresetImage';
 
 export const ActiveStylePreset = () => {
@@ -34,18 +33,21 @@ export const ActiveStylePreset = () => {
   );
 
   if (!activeStylePreset) {
-    return <>Choose Preset</>;
+    return (
+      <Flex h="25px" alignItems="center">
+        <Text fontSize="sm" fontWeight="semibold" color="base.300">
+          Choose Preset
+        </Text>
+      </Flex>
+    );
   }
   return (
     <>
       <Flex justifyContent="space-between" w="full" alignItems="center">
-        <Flex gap="2">
+        <Flex gap="2" alignItems="center">
-          <StylePresetImage presetImageUrl={activeStylePreset.image} />
+          <StylePresetImage imageWidth={25} presetImageUrl={activeStylePreset.image} />
           <Flex flexDir="column">
-            <Text variant="subtext" fontSize="xs">
+            <Text fontSize="sm" fontWeight="semibold" color="base.300">
-              Prompt Style
-            </Text>
-            <Text fontSize="md" fontWeight="semibold">
               {activeStylePreset.name}
             </Text>
           </Flex>
@@ -53,15 +55,15 @@ export const ActiveStylePreset = () => {
         <Flex gap="1">
           <IconButton
             onClick={handleFlattenPrompts}
-            variant="ghost"
+            variant="outline"
-            size="md"
+            size="sm"
             aria-label="Flatten"
-            icon={<CgPushDown />}
+            icon={<PiStackSimpleBold />}
           />
           <IconButton
             onClick={handleClearActiveStylePreset}
-            variant="ghost"
+            variant="outline"
-            size="md"
+            size="sm"
             aria-label="Clear"
             icon={<PiXBold />}
           />

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

@@ -5,29 +5,29 @@ import { PiImage } from 'react-icons/pi';
 const IMAGE_THUMBNAIL_SIZE = '40px';
 const FALLBACK_ICON_SIZE = '24px';
 
-const StylePresetImage = ({ presetImageUrl }: { presetImageUrl: string | null }) => {
+const StylePresetImage = ({ presetImageUrl, imageWidth }: { presetImageUrl: string | null; imageWidth?: number }) => {
   return (
     <Image
       src={presetImageUrl || ''}
       fallbackStrategy="beforeLoadOrError"
       fallback={
         <Flex
-          height={IMAGE_THUMBNAIL_SIZE}
+          height={imageWidth || IMAGE_THUMBNAIL_SIZE}
-          minWidth={IMAGE_THUMBNAIL_SIZE}
+          minWidth={imageWidth || IMAGE_THUMBNAIL_SIZE}
           bg="base.650"
           borderRadius="base"
           alignItems="center"
           justifyContent="center"
         >
-          <Icon color="base.500" as={PiImage} boxSize={FALLBACK_ICON_SIZE} />
+          <Icon color="base.500" as={PiImage} boxSize={imageWidth ? imageWidth / 2 : FALLBACK_ICON_SIZE} />
         </Flex>
       }
       objectFit="cover"
       objectPosition="50% 50%"
-      height={IMAGE_THUMBNAIL_SIZE}
+      height={imageWidth || IMAGE_THUMBNAIL_SIZE}
-      width={IMAGE_THUMBNAIL_SIZE}
+      width={imageWidth || IMAGE_THUMBNAIL_SIZE}
-      minHeight={IMAGE_THUMBNAIL_SIZE}
+      minHeight={imageWidth || IMAGE_THUMBNAIL_SIZE}
-      minWidth={IMAGE_THUMBNAIL_SIZE}
+      minWidth={imageWidth || IMAGE_THUMBNAIL_SIZE}
       borderRadius="base"
     />
   );

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

@@ -1,4 +1,4 @@
-import { Badge, Flex, IconButton, Text } from '@invoke-ai/ui-library';
+import { Badge, ConfirmationAlertDialog, Flex, IconButton, Text, useDisclosure } from '@invoke-ai/ui-library';
 import type { MouseEvent } from 'react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ModelImage from 'features/modelManagerV2/subpanels/ModelManagerPanel/ModelImage';
@@ -14,6 +14,7 @@ export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithI
   const dispatch = useAppDispatch();
   const [deleteStylePreset] = useDeleteStylePresetMutation();
   const activeStylePreset = useAppSelector((s) => s.stylePreset.activeStylePreset);
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   const handleClickEdit = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
@@ -29,17 +30,22 @@ export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithI
     dispatch(isMenuOpenChanged(false));
   }, [dispatch, preset]);
 
-  const handleDeletePreset = useCallback(
+  const handleClickDelete = useCallback(
-    async (e: MouseEvent<HTMLButtonElement>) => {
+    (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
+      onOpen();
+    },
+    [dispatch, preset]
+  );
+
+  const handleDeletePreset = useCallback(async () => {
     try {
       await deleteStylePreset(preset.id);
     } catch (error) {}
-    },
+  }, [preset]);
-    [preset]
-  );
 
   return (
+    <>
       <Flex
         gap="4"
         onClick={handleClickApply}
@@ -69,12 +75,18 @@ export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithI
             </Flex>
 
             <Flex alignItems="center" gap="1">
-            <IconButton size="sm" variant="ghost" aria-label="Edit" onClick={handleClickEdit} icon={<PiPencilBold />} />
+              <IconButton
+                size="sm"
+                variant="ghost"
+                aria-label="Edit"
+                onClick={handleClickEdit}
+                icon={<PiPencilBold />}
+              />
               <IconButton
                 size="sm"
                 variant="ghost"
                 aria-label="Delete"
-              onClick={handleDeletePreset}
+                onClick={handleClickDelete}
                 icon={<PiTrashBold />}
               />
             </Flex>
@@ -96,5 +108,16 @@ export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithI
           </Flex>
         </Flex>
       </Flex>
+      <ConfirmationAlertDialog
+        isOpen={isOpen}
+        onClose={onClose}
+        title={'Delete preset'}
+        acceptCallback={handleDeletePreset}
+        acceptButtonText={'Delete'}
+      >
+        <p>{'Delete Preset?'}</p>
+        <br />
+      </ConfirmationAlertDialog>
+    </>
   );
 };

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

@@ -16,16 +16,18 @@ export const StylePresetMenuTrigger = () => {
 
   return (
     <Flex
+      as="button"
       onClick={handleToggle}
       backgroundColor="base.800"
       justifyContent="space-between"
       alignItems="center"
       padding="5px 10px"
       borderRadius="base"
+      gap="2"
     >
       <ActiveStylePreset />
 
-      <Icon as={PiCaretDownBold} />
+      <Icon boxSize="15px" as={PiCaretDownBold} color="base.300" />
     </Flex>
   );
 };

invokeai/frontend/web/src/features/stylePresets/hooks/useStylePresetFields.ts

@@ -24,8 +24,8 @@ export const useStylePresetFields = (preset: StylePresetRecordWithImage | null)
 
             return {
                 name: preset.name,
-                positivePrompt: preset.preset_data.positive_prompt,
+                positivePrompt: preset.preset_data.positive_prompt || "",
-                negativePrompt: preset.preset_data.negative_prompt,
+                negativePrompt: preset.preset_data.negative_prompt || "",
                 image: file
             };
         }

invokeai/frontend/web/src/features/ui/components/ParametersPanels/ParametersPanelTextToImage.tsx

@@ -1,5 +1,5 @@
 import type { ChakraProps } from '@invoke-ai/ui-library';
-import { Box, Flex, Portal,Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
+import { Box, Flex, Portal, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
 import { ControlLayersPanelContent } from 'features/controlLayers/components/ControlLayersPanelContent';
@@ -71,20 +71,20 @@ const ParametersPanelTextToImage = () => {
         <Box position="absolute" top={0} left={0} right={0} bottom={0} ref={ref}>
           <Portal containerRef={ref}>
             {isMenuOpen && (
-              <Box position="absolute" top={0} left={0} right={0} bottom={0}>
+              <Box position="absolute" top={0} left={0} right={0} bottom={0} layerStyle="second">
                 <OverlayScrollbarsComponent
                   defer
                   style={overlayScrollbarsStyles}
                   options={overlayScrollbarsParams.options}
-                  // backgroundColor="rgba(0,0,0,0.5)"
                 >
-                  <Flex gap={2} flexDirection="column" h="full" w="full" layerStyle="second">
+                  <Flex gap={2} flexDirection="column" h="full" w="full">
                     <StylePresetMenu />
                   </Flex>
                 </OverlayScrollbarsComponent>
               </Box>
             )}
           </Portal>
+          {!isMenuOpen && (
             <OverlayScrollbarsComponent defer style={overlayScrollbarsStyles} options={overlayScrollbarsParams.options}>
               <Flex gap={2} flexDirection="column" h="full" w="full">
                 <Prompts />
@@ -128,6 +128,7 @@ const ParametersPanelTextToImage = () => {
                 </Tabs>
               </Flex>
             </OverlayScrollbarsComponent>
+          )}
         </Box>
       </Flex>
     </Flex>