Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

clean up image implementation

Browse Source
This commit is contained in:
Mary Hipp 2024-08-07 10:36:38 -04:00
parent cc96dcf0ed
commit 0b0abfbe8f
8 changed files with 167 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
invokeai/app/api/routers/style_presets.py
View File

@ -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)

2
invokeai/app/services/style_preset_images/style_preset_images_default.py
View File

@ -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

32
invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx
View File

@ -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 { PiXBold } from 'react-icons/pi';
import { PiStackSimpleBold, 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">
<StylePresetImage presetImageUrl={activeStylePreset.image} />
<Flex gap="2" alignItems="center">
<StylePresetImage imageWidth={25} presetImageUrl={activeStylePreset.image} />
<Flex flexDir="column">
<Text variant="subtext" fontSize="xs">
Prompt Style
</Text>
<Text fontSize="md" fontWeight="semibold">
<Text fontSize="sm" fontWeight="semibold" color="base.300">
{activeStylePreset.name}
</Text>
</Flex>
@ -53,15 +55,15 @@ export const ActiveStylePreset = () => {
<Flex gap="1">
<IconButton
onClick={handleFlattenPrompts}
variant="ghost"
size="md"
variant="outline"
size="sm"
aria-label="Flatten"
icon={<CgPushDown />}
icon={<PiStackSimpleBold />}
/>
<IconButton
onClick={handleClearActiveStylePreset}
variant="ghost"
size="md"
variant="outline"
size="sm"
aria-label="Clear"
icon={<PiXBold />}
/>

16
invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx
View File

@ -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}
minWidth={IMAGE_THUMBNAIL_SIZE}
height={imageWidth || 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}
width={IMAGE_THUMBNAIL_SIZE}
minHeight={IMAGE_THUMBNAIL_SIZE}
minWidth={IMAGE_THUMBNAIL_SIZE}
height={imageWidth || IMAGE_THUMBNAIL_SIZE}
width={imageWidth || IMAGE_THUMBNAIL_SIZE}
minHeight={imageWidth || IMAGE_THUMBNAIL_SIZE}
minWidth={imageWidth || IMAGE_THUMBNAIL_SIZE}
borderRadius="base"
/>
);

39
invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx
View File

@ -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(
async (e: MouseEvent<HTMLButtonElement>) => {
const handleClickDelete = useCallback(
(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>
</>
);
};

4
invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx
View File

@ -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>
);
};

4
invokeai/frontend/web/src/features/stylePresets/hooks/useStylePresetFields.ts
View File

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

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

@ -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>