From 8bc5d1c6c1ed9e952709cbbe10acbac63d80101e Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Tue, 20 Aug 2024 11:41:16 -0400 Subject: [PATCH 1/5] fix(ui): add loading state to button when creating or updating a style preset --- .../components/StylePresetForm/StylePresetForm.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetForm.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetForm.tsx index 674c179edd3..2fd703103e1 100644 --- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetForm.tsx +++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetForm.tsx @@ -30,8 +30,8 @@ export const StylePresetForm = ({ updatingStylePresetId: string | null; formData: StylePresetFormData | null; }) => { - const [createStylePreset] = useCreateStylePresetMutation(); - const [updateStylePreset] = useUpdateStylePresetMutation(); + const [createStylePreset, { isLoading: isCreating }] = useCreateStylePresetMutation(); + const [updateStylePreset, { isLoading: isUpdating }] = useUpdateStylePresetMutation(); const { t } = useTranslation(); const allowPrivateStylePresets = useAppSelector((s) => s.config.allowPrivateStylePresets); @@ -109,7 +109,11 @@ export const StylePresetForm = ({ {allowPrivateStylePresets ? : } - From c7e75d49cde3318c6e8f11e17e01be0649a4f018 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Tue, 20 Aug 2024 12:00:48 -0400 Subject: [PATCH 2/5] fix(ui): handle badge styling when template name is long --- .../stylePresets/components/ActiveStylePreset.tsx | 8 ++++---- .../stylePresets/components/StylePresetMenuTrigger.tsx | 1 + 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx b/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx index d72df6434eb..776ffe6a4df 100644 --- a/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx +++ b/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx @@ -69,10 +69,10 @@ export const ActiveStylePreset = () => { ); } return ( - - - - + + + + {activeStylePreset.name} diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx index bb1c494d884..a204effbd64 100644 --- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx +++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetMenuTrigger.tsx @@ -34,6 +34,7 @@ export const StylePresetMenuTrigger = () => { _hover={_hover} transitionProperty="background-color" transitionDuration="normal" + w="full" > From 6649b8346af7569f504400f040028fa929b52c74 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Tue, 20 Aug 2024 12:10:56 -0400 Subject: [PATCH 3/5] remove extra slash in exports path --- .../frontend/web/src/services/api/endpoints/stylePresets.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/invokeai/frontend/web/src/services/api/endpoints/stylePresets.ts b/invokeai/frontend/web/src/services/api/endpoints/stylePresets.ts index 2bc945f86e3..44023b59d16 100644 --- a/invokeai/frontend/web/src/services/api/endpoints/stylePresets.ts +++ b/invokeai/frontend/web/src/services/api/endpoints/stylePresets.ts @@ -94,7 +94,7 @@ export const stylePresetsApi = api.injectEndpoints({ }), exportStylePresets: build.query({ query: () => ({ - url: buildStylePresetsUrl('/export'), + url: buildStylePresetsUrl('export'), responseHandler: (response) => response.text(), }), providesTags: ['FetchOnReconnect', { type: 'StylePreset', id: LIST_TAG }], From ba955ccd9f4a32bc64dc6f325f486f72e6dc6d43 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Tue, 20 Aug 2024 13:02:25 -0400 Subject: [PATCH 4/5] fix(ui): error handling if unable to convert image URL to blob --- .../src/common/util/convertImageUrlToBlob.ts | 22 ++++++++++++------- .../StylePresetForm/StylePresetModal.tsx | 10 ++++++--- 2 files changed, 21 insertions(+), 11 deletions(-) diff --git a/invokeai/frontend/web/src/common/util/convertImageUrlToBlob.ts b/invokeai/frontend/web/src/common/util/convertImageUrlToBlob.ts index 42fdd466093..44062fa025b 100644 --- a/invokeai/frontend/web/src/common/util/convertImageUrlToBlob.ts +++ b/invokeai/frontend/web/src/common/util/convertImageUrlToBlob.ts @@ -8,7 +8,7 @@ import { $authToken } from 'app/store/nanostores/authToken'; */ export const convertImageUrlToBlob = async (url: string) => - new Promise((resolve) => { + new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { const canvas = document.createElement('canvas'); @@ -17,17 +17,23 @@ export const convertImageUrlToBlob = async (url: string) => const context = canvas.getContext('2d'); if (!context) { + reject(new Error('Failed to get canvas context')); return; } context.drawImage(img, 0, 0); - resolve( - new Promise((resolve) => { - canvas.toBlob(function (blob) { - resolve(blob); - }, 'image/png'); - }) - ); + canvas.toBlob((blob) => { + if (blob) { + resolve(blob); + } else { + reject(new Error('Failed to convert image to blob')); + } + }, 'image/png'); }; + + img.onerror = () => { + reject(new Error('Image failed to load. The URL may be invalid or the object may not exist.')); + }; + img.crossOrigin = $authToken.get() ? 'use-credentials' : 'anonymous'; img.src = url; }); diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetModal.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetModal.tsx index cccae93c186..5ae1db7af92 100644 --- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetModal.tsx +++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetModal.tsx @@ -48,9 +48,13 @@ export const StylePresetModal = () => { } else { let file = null; if (data.imageUrl) { - const blob = await convertImageUrlToBlob(data.imageUrl); - if (blob) { - file = new File([blob], 'style_preset.png', { type: 'image/png' }); + try { + const blob = await convertImageUrlToBlob(data.imageUrl); + if (blob) { + file = new File([blob], 'style_preset.png', { type: 'image/png' }); + } + } catch (error) { + // do nothing } } setFormData({ From 0df44c94d3062693f3b221c2fdb40e28ce774e48 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Wed, 21 Aug 2024 09:03:22 +1000 Subject: [PATCH 5/5] tidy(ui): clean up ActiveStylePreset markup --- .../components/ActiveStylePreset.tsx | 73 +++++++++---------- .../components/StylePresetImage.tsx | 1 + .../components/StylePresetMenuTrigger.tsx | 3 +- 3 files changed, 36 insertions(+), 41 deletions(-) diff --git a/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx b/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx index 776ffe6a4df..8a68ce63960 100644 --- a/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx +++ b/invokeai/frontend/web/src/features/stylePresets/components/ActiveStylePreset.tsx @@ -1,4 +1,4 @@ -import { Badge, Flex, IconButton, Text, Tooltip } from '@invoke-ai/ui-library'; +import { Badge, Flex, IconButton, Spacer, Text, Tooltip } 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'; @@ -69,45 +69,40 @@ export const ActiveStylePreset = () => { ); } return ( - + - - - - {activeStylePreset.name} - - - - - - } - /> - - - } - /> - - - } - /> - - + + {activeStylePreset.name} + + + + } + /> + + + } + /> + + + } + /> + ); }; diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx index c32dfcf3a5e..b0a2a38bcf0 100644 --- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx +++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetImage.tsx @@ -21,6 +21,7 @@ const StylePresetImage = ({ presetImageUrl, imageWidth }: { presetImageUrl: stri /> ) } + p={2} > { py={2} px={3} borderRadius="base" - gap={1} + gap={2} role="button" _hover={_hover} transitionProperty="background-color" @@ -37,7 +37,6 @@ export const StylePresetMenuTrigger = () => { w="full" > - } size="sm" /> );