fix(ui): more prompt template follow-ups

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<Blob | null>((resolve) => {
+  new Promise<Blob | null>((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<Blob | null>((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;
   });

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 (
-    <Flex justifyContent="space-between" w="full" alignItems="center">
-      <Flex gap={2} alignItems="center">
-        <StylePresetImage imageWidth={25} presetImageUrl={activeStylePreset.image} />
-        <Flex flexDir="column">
-          <Badge colorScheme="invokeBlue" variant="subtle">
-            {activeStylePreset.name}
-          </Badge>
-        </Flex>
-      </Flex>
-      <Flex gap={1}>
-        <Tooltip label={t('stylePresets.toggleViewMode')}>
-          <IconButton
-            onClick={handleToggleViewMode}
-            variant="outline"
-            size="sm"
-            aria-label={t('stylePresets.toggleViewMode')}
-            colorScheme={viewMode ? 'invokeBlue' : 'base'}
-            icon={<PiEyeBold />}
-          />
-        </Tooltip>
-        <Tooltip label={t('stylePresets.flatten')}>
-          <IconButton
-            onClick={handleFlattenPrompts}
-            variant="outline"
-            size="sm"
-            aria-label={t('stylePresets.flatten')}
-            icon={<PiStackSimpleBold />}
-          />
-        </Tooltip>
-        <Tooltip label={t('stylePresets.clearTemplateSelection')}>
-          <IconButton
-            onClick={handleClearActiveStylePreset}
-            variant="outline"
-            size="sm"
-            aria-label={t('stylePresets.clearTemplateSelection')}
-            icon={<PiXBold />}
-          />
-        </Tooltip>
-      </Flex>
+    <Flex w="full" alignItems="center" gap={2} minW={0}>
+      <StylePresetImage imageWidth={25} presetImageUrl={activeStylePreset.image} />
+      <Badge colorScheme="invokeBlue" variant="subtle" justifySelf="flex-start">
+        {activeStylePreset.name}
+      </Badge>
+      <Spacer />
+      <Tooltip label={t('stylePresets.toggleViewMode')}>
+        <IconButton
+          onClick={handleToggleViewMode}
+          variant="outline"
+          size="sm"
+          aria-label={t('stylePresets.toggleViewMode')}
+          colorScheme={viewMode ? 'invokeBlue' : 'base'}
+          icon={<PiEyeBold />}
+        />
+      </Tooltip>
+      <Tooltip label={t('stylePresets.flatten')}>
+        <IconButton
+          onClick={handleFlattenPrompts}
+          variant="outline"
+          size="sm"
+          aria-label={t('stylePresets.flatten')}
+          icon={<PiStackSimpleBold />}
+        />
+      </Tooltip>
+      <Tooltip label={t('stylePresets.clearTemplateSelection')}>
+        <IconButton
+          onClick={handleClearActiveStylePreset}
+          variant="outline"
+          size="sm"
+          aria-label={t('stylePresets.clearTemplateSelection')}
+          icon={<PiXBold />}
+        />
+      </Tooltip>
     </Flex>
   );
 };

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 = ({
 
       <Flex justifyContent="space-between" alignItems="flex-end" gap={10}>
         {allowPrivateStylePresets ? <StylePresetTypeField control={control} name="type" /> : <Spacer />}
-        <Button onClick={handleSubmit(handleClickSave)} isDisabled={!formState.isValid}>
+        <Button
+          onClick={handleSubmit(handleClickSave)}
+          isDisabled={!formState.isValid}
+          isLoading={isCreating || isUpdating}
+        >
           {t('common.save')}
         </Button>
       </Flex>

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({

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

@@ -21,6 +21,7 @@ const StylePresetImage = ({ presetImageUrl, imageWidth }: { presetImageUrl: stri
           />
         )
       }
+      p={2}
     >
       <Image
         src={presetImageUrl || ''}

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

@@ -29,14 +29,14 @@ export const StylePresetMenuTrigger = () => {
       py={2}
       px={3}
       borderRadius="base"
-      gap={1}
+      gap={2}
       role="button"
       _hover={_hover}
       transitionProperty="background-color"
       transitionDuration="normal"
+      w="full"
     >
       <ActiveStylePreset />
-
       <IconButton aria-label={t('stylePresets.viewList')} variant="ghost" icon={<PiCaretDownBold />} size="sm" />
     </Flex>
   );

invokeai/frontend/web/src/services/api/endpoints/stylePresets.ts

@@ -94,7 +94,7 @@ export const stylePresetsApi = api.injectEndpoints({
     }),
     exportStylePresets: build.query<string, void>({
       query: () => ({
-        url: buildStylePresetsUrl('/export'),
+        url: buildStylePresetsUrl('export'),
         responseHandler: (response) => response.text(),
       }),
       providesTags: ['FetchOnReconnect', { type: 'StylePreset', id: LIST_TAG }],