add the rest of default style presets, update image service to return default images correctly by name, add tooltip popover to images in UI

invokeai/app/services/style_preset_images/style_preset_images_disk.py

@@ -10,6 +10,7 @@ from invokeai.app.services.style_preset_images.style_preset_images_common import
     StylePresetImageFileNotFoundException,
     StylePresetImageFileSaveException,
 )
+from invokeai.app.services.style_preset_records.style_preset_records_common import PresetType
 from invokeai.app.util.misc import uuid_string
 from invokeai.app.util.thumbnails import make_thumbnail
 
@@ -43,7 +44,12 @@ class StylePresetImageFileStorageDisk(StylePresetImageFileStorageBase):
             raise StylePresetImageFileSaveException from e
 
     def get_path(self, style_preset_id: str) -> Path:
-        path = self._style_preset_images_folder / (style_preset_id + ".webp")
+        style_preset = self._invoker.services.style_preset_records.get(style_preset_id)
+        if style_preset.type is PresetType.Default:
+            default_images_dir = Path(__file__).parent / Path("default_style_preset_images")
+            path = default_images_dir / (style_preset.name + ".png")
+        else:
+            path = self._style_preset_images_folder / (style_preset_id + ".webp")
 
         return path
 

invokeai/app/services/style_preset_records/default_style_presets.json

@@ -1,16 +1,128 @@
 [
   {
-    "name": "Concept Art (Painterly)",
+    "name": "Photography (General)",
     "preset_data": {
-      "positive_prompt": "{prompt} (digital painting)++, (textured 2d media)+++, depth and (painterly artwork)+++, intricate linework and brushwork, brush collection, highlights and shading, detail",
-      "negative_prompt": "photo++++ negative, faded, distorted, sketch, , flat+. anime, smooth+++"
+      "positive_prompt": "[prompt]. photography. f/2.8 macro photo, bokeh, photorealism",
+      "negative_prompt": "painting, digital art. sketch, blurry"
+    }
+  },
+  {
+    "name": "Photography (Studio Lighting)",
+    "preset_data": {
+      "positive_prompt": "[prompt], photography. f/8 photo. centered subject, studio lighting.",
+      "negative_prompt": "painting, digital art. sketch, blurry"
+    }
+  },
+  {
+    "name": "Photography (Landscape)",
+    "preset_data": {
+      "positive_prompt": "[prompt], landscape photograph, f/12, lifelike,  highly detailed.",
+      "negative_prompt": "painting, digital art. sketch, blurry"
+    }
+  },
+  {
+    "name": "Photography (Portrait)",
+    "preset_data": {
+      "positive_prompt": "[prompt]. photography. portraiture. catch light in eyes. one flash. rembrandt lighting. Soft box. dark shadows. High contrast. 80mm lens. F2.8.",
+      "negative_prompt": "painting, digital art. sketch, blurry"
     }
   },
   {
     "name": "Photography (Black and White)",
     "preset_data": {
-      "positive_prompt": "(minimalist black and white photo)+++, (strong contrast)++, (clean textures)++, natural light, sharp focus, high detail, stark, dramatic, serene, simple composition, atmospheric, moody, refined, shadow play, 50mm lens, f/4",
-      "negative_prompt": "negative, blurry, faded, distorted, sketch, flat+. anime"
+      "positive_prompt": "[prompt] photography. natural light.  80mm lens. F1.4. strong contrast, hard light. dark contrast. blurred background. black and white",
+      "negative_prompt": "painting, digital art. sketch, colour+"
+    }
+  },
+  {
+    "name": "Architectural Visualization",
+    "preset_data": {
+      "positive_prompt": "[prompt]. architectural photography, f/12, luxury, aesthetically pleasing form and function.",
+      "negative_prompt": "painting, digital art. sketch, blurry"
+    }
+  },
+  {
+    "name": "Concept Art (Fantasy)",
+    "preset_data": {
+      "positive_prompt": "concept artwork of a [prompt]. (digital painterly art style)++, mythological, (textured 2d dry media brushpack)++, glazed brushstrokes, otherworldly. painting+, illustration+, ",
+      "negative_prompt": "photo. distorted, blurry, out of focus. sketch. (cgi, 3d.)++"
+    }
+  },
+  {
+    "name": "Concept Art (Sci-Fi)",
+    "preset_data": {
+      "positive_prompt": "(concept art)++, [prompt], (sleek futurism)++, (textured 2d dry media)++, metallic highlights, digital painting style",
+      "negative_prompt": "photo. distorted, blurry, out of focus. sketch. (cgi, 3d.)++"
+    }
+  },
+  {
+    "name": "Concept Art (Character)",
+    "preset_data": {
+      "positive_prompt": "(character concept art)++, stylized painterly digital painting of [prompt], (painterly, impasto. Dry brush.)++",
+      "negative_prompt": "photo. distorted, blurry, out of focus. sketch. (cgi, 3d.)++"
+    }
+  },
+  {
+    "name": "Concept Art (Painterly)",
+    "preset_data": {
+      "positive_prompt": "[prompt] Oil painting. high contrast. impasto. sfumato. chiaroscuro. Palette knife.",
+      "negative_prompt": "photo. smooth. border. frame"
+    }
+  },
+  {
+    "name": "Environment Art",
+    "preset_data": {
+      "positive_prompt": "[prompt] environment artwork, hyper-realistic digital painting style with cinematic composition, atmospheric, depth and detail, voluminous. textured dry brush 2d media",
+      "negative_prompt": "photo, distorted, blurry, out of focus. sketch. "
+    }
+  },
+  {
+    "name": "Interior Design (Visualization)",
+    "preset_data": {
+      "positive_prompt": "[prompt] interior design photo, gentle shadows, light mid-tones, dimension, mix of smooth and textured surfaces, focus on negative space and clean lines, focus",
+      "negative_prompt": "photo, distorted. sketch."
+    }
+  },
+  {
+    "name": "Product Rendering",
+    "preset_data": {
+      "positive_prompt": "[prompt] high quality product photography, 3d rendering with key lighting, shallow depth of field, simple plain background, studio lighting.",
+      "negative_prompt": "blurry, sketch, messy, dirty. unfinished."
+    }
+  },
+  {
+    "name": "Sketch",
+    "preset_data": {
+      "positive_prompt": "[prompt] black and white pencil drawing, off-center composition, cross-hatching for shadows, bold strokes, textured paper. sketch+++",
+      "negative_prompt": "blurry, photo, painting, color. messy, dirty. unfinished. frame, borders."
+    }
+  },
+  {
+    "name": "Line Art",
+    "preset_data": {
+      "positive_prompt": "[prompt] Line art. bold outline. simplistic. white background. 2d",
+      "negative_prompt": "photo. digital art. greyscale. solid black. painting "
+    }
+  },
+  {
+    "name": "Anime",
+    "preset_data": {
+      "positive_prompt": "[prompt] anime++, bold outline, cel-shaded coloring, shounen, seinen",
+      "negative_prompt": "(photo)+++. greyscale. solid black. painting "
+    }
+  },
+  {
+    "name": "Illustration",
+    "preset_data": {
+      "positive_prompt": "[prompt] illustration, bold linework, illustrative details, vector art style, flat coloring,",
+      "negative_prompt": "(photo)+++.  greyscale. painting, black and white. "
+    }
+  },
+  {
+    "name": "Vehicles",
+    "preset_data": {
+      "positive_prompt": "A weird futuristic normal auto, [prompt] elegant design , nice color , nice wheels",
+      "negative_prompt": "sketch. digital art. greyscale. painting "
     }
   }
 ]

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

@@ -1,4 +1,4 @@
-import { Flex, Icon, Image } from '@invoke-ai/ui-library';
+import { Flex, Icon, Image, Tooltip } from '@invoke-ai/ui-library';
 import { typedMemo } from 'common/util/typedMemo';
 import { PiImage } from 'react-icons/pi';
 
@@ -7,29 +7,45 @@ const FALLBACK_ICON_SIZE = '24px';
 
 const StylePresetImage = ({ presetImageUrl, imageWidth }: { presetImageUrl: string | null; imageWidth?: number }) => {
   return (
-    <Image
-      src={presetImageUrl || ''}
-      fallbackStrategy="beforeLoadOrError"
-      fallback={
-        <Flex
-          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={imageWidth ? imageWidth / 2 : FALLBACK_ICON_SIZE} />
-        </Flex>
+    <Tooltip
+      label={
+        presetImageUrl && (
+          <Image
+            src={presetImageUrl}
+            draggable={false}
+            objectFit="cover"
+            maxW={150}
+            aspectRatio="1/1"
+            borderRadius="base"
+            borderBottomRadius="lg"
+          />
+        )
       }
-      objectFit="cover"
-      objectPosition="50% 50%"
-      height={imageWidth || IMAGE_THUMBNAIL_SIZE}
-      width={imageWidth || IMAGE_THUMBNAIL_SIZE}
-      minHeight={imageWidth || IMAGE_THUMBNAIL_SIZE}
-      minWidth={imageWidth || IMAGE_THUMBNAIL_SIZE}
-      borderRadius="base"
-    />
+    >
+      <Image
+        src={presetImageUrl || ''}
+        fallbackStrategy="beforeLoadOrError"
+        fallback={
+          <Flex
+            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={imageWidth ? imageWidth / 2 : FALLBACK_ICON_SIZE} />
+          </Flex>
+        }
+        objectFit="cover"
+        objectPosition="50% 50%"
+        height={imageWidth || IMAGE_THUMBNAIL_SIZE}
+        width={imageWidth || IMAGE_THUMBNAIL_SIZE}
+        minHeight={imageWidth || IMAGE_THUMBNAIL_SIZE}
+        minWidth={imageWidth || IMAGE_THUMBNAIL_SIZE}
+        borderRadius="base"
+      />
+    </Tooltip>
   );
 };
 

invokeai/frontend/web/src/features/stylePresets/util/getViewModeChunks.tsx

@@ -5,7 +5,7 @@ export const getViewModeChunks = (currentPrompt: string, presetPrompt?: string):
   }
   const [firstPart, ...remainingParts] = presetPrompt.split(PRESET_PLACEHOLDER);
   const chunks = [firstPart, remainingParts.join(PRESET_PLACEHOLDER)];
-  if (chunks.length === 1) {
+  if (chunks.filter((chunk) => chunk !== '').length === 1) {
     return ['', currentPrompt, chunks[0] ?? ''];
   } else {
     return [chunks[0] ?? '', currentPrompt, chunks[1] ?? ''];