feat(ui, api): prompt template export (#6745)

## Summary

Adds option to download all prompt templates to a CSV

## Related Issues / Discussions

<!--WHEN APPLICABLE: List any related issues or discussions on github or
discord. If this PR closes an issue, please use the "Closes #1234"
format, so that the issue will be automatically closed when the PR
merges.-->

## QA Instructions

<!--WHEN APPLICABLE: Describe how you have tested the changes in this
PR. Provide enough detail that a reviewer can reproduce your tests.-->

## Merge Plan

<!--WHEN APPLICABLE: Large PRs, or PRs that touch sensitive things like
DB schemas, may need some care when merging. For example, a careful
rebase by the change author, timing to not interfere with a pending
release, or a message to contributors on discord after merging.-->

## Checklist

- [ ] _The PR has a short but descriptive title, suitable for a
changelog_
- [ ] _Tests added / updated (if applicable)_
- [ ] _Documentation added / updated (if applicable)_

Author: psychedelicious

invokeai/app/api/routers/style_presets.py

@@ -1,10 +1,11 @@
+import csv
 import io
 import json
 import traceback
 from typing import Optional
 
 import pydantic
-from fastapi import APIRouter, File, Form, HTTPException, Path, UploadFile
+from fastapi import APIRouter, File, Form, HTTPException, Path, Response, UploadFile
 from fastapi.responses import FileResponse
 from PIL import Image
 from pydantic import BaseModel, Field
@@ -230,6 +231,35 @@ async def get_style_preset_image(
         raise HTTPException(status_code=404)
 
 
+@style_presets_router.get(
+    "/export",
+    operation_id="export_style_presets",
+    responses={200: {"content": {"text/csv": {}}, "description": "A CSV file with the requested data."}},
+    status_code=200,
+)
+async def export_style_presets():
+    # Create an in-memory stream to store the CSV data
+    output = io.StringIO()
+    writer = csv.writer(output)
+
+    # Write the header
+    writer.writerow(["name", "prompt", "negative_prompt"])
+
+    style_presets = ApiDependencies.invoker.services.style_preset_records.get_many(type=PresetType.User)
+
+    for preset in style_presets:
+        writer.writerow([preset.name, preset.preset_data.positive_prompt, preset.preset_data.negative_prompt])
+
+    csv_data = output.getvalue()
+    output.close()
+
+    return Response(
+        content=csv_data,
+        media_type="text/csv",
+        headers={"Content-Disposition": "attachment; filename=prompt_templates.csv"},
+    )
+
+
 @style_presets_router.post(
     "/import",
     operation_id="import_style_presets",

invokeai/app/services/style_preset_records/style_preset_records_base.py

@@ -1,6 +1,7 @@
 from abc import ABC, abstractmethod
 
 from invokeai.app.services.style_preset_records.style_preset_records_common import (
+    PresetType,
     StylePresetChanges,
     StylePresetRecordDTO,
     StylePresetWithoutId,
@@ -36,6 +37,6 @@ def delete(self, style_preset_id: str) -> None:
         pass
 
     @abstractmethod
-    def get_many(self) -> list[StylePresetRecordDTO]:
+    def get_many(self, type: PresetType | None = None) -> list[StylePresetRecordDTO]:
         """Gets many workflows."""
         pass

invokeai/app/services/style_preset_records/style_preset_records_common.py

@@ -128,9 +128,9 @@ async def parse_presets_from_file(file: UploadFile) -> list[StylePresetWithoutId
             style_presets.append(style_preset)
     except pydantic.ValidationError as e:
         if file.content_type == "text/csv":
-            msg = "Invalid CSV format: must include columns 'name', 'prompt', and 'negative_prompt'"
+            msg = "Invalid CSV format: must include columns 'name', 'prompt', and 'negative_prompt' and name cannot be blank"
         else:  # file.content_type == "application/json":
-            msg = "Invalid JSON format: must be a list of objects with keys 'name', 'prompt', and 'negative_prompt'"
+            msg = "Invalid JSON format: must be a list of objects with keys 'name', 'prompt', and 'negative_prompt' and name cannot be blank"
         raise InvalidPresetImportDataError(msg) from e
     finally:
         file.file.close()

invokeai/app/services/style_preset_records/style_preset_records_sqlite.py

@@ -5,6 +5,7 @@
 from invokeai.app.services.shared.sqlite.sqlite_database import SqliteDatabase
 from invokeai.app.services.style_preset_records.style_preset_records_base import StylePresetRecordsStorageBase
 from invokeai.app.services.style_preset_records.style_preset_records_common import (
+    PresetType,
     StylePresetChanges,
     StylePresetNotFoundError,
     StylePresetRecordDTO,
@@ -159,19 +160,25 @@ def delete(self, style_preset_id: str) -> None:
             self._lock.release()
         return None
 
-    def get_many(
-        self,
-    ) -> list[StylePresetRecordDTO]:
+    def get_many(self, type: PresetType | None = None) -> list[StylePresetRecordDTO]:
         try:
             self._lock.acquire()
             main_query = """
                 SELECT
                     *
                 FROM style_presets
-                ORDER BY LOWER(name) ASC
                 """
 
-            self._cursor.execute(main_query)
+            if type is not None:
+                main_query += "WHERE type = ? "
+
+            main_query += "ORDER BY LOWER(name) ASC"
+
+            if type is not None:
+                self._cursor.execute(main_query, (type,))
+            else:
+                self._cursor.execute(main_query)
+
             rows = self._cursor.fetchall()
             style_presets = [StylePresetRecordDTO.from_dict(dict(row)) for row in rows]
 

invokeai/frontend/web/public/locales/en.json

@@ -1701,14 +1701,21 @@
         "deleteImage": "Delete Image",
         "deleteTemplate": "Delete Template",
         "deleteTemplate2": "Are you sure you want to delete this template? This cannot be undone.",
+        "exportPromptTemplates": "Export My Prompt Templates (CSV)",
         "editTemplate": "Edit Template",
+        "exportDownloaded": "Export Downloaded",
+        "exportFailed": "Unable to generate and download CSV",
         "flatten": "Flatten selected template into current prompt",
-        "importTemplates": "Import Prompt Templates",
-        "importTemplatesDesc": "Format must be either a CSV with columns: 'name', 'prompt' or 'positive_prompt', and 'negative_prompt' included, or a JSON file with keys 'name', 'prompt' or 'positive_prompt', and 'negative_prompt",
+        "importTemplates": "Import Prompt Templates (CSV/JSON)",
+        "acceptedColumnsKeys": "Accepted columns/keys:",
+        "nameColumn": "'name'",
+        "positivePromptColumn": "'prompt' or 'positive_prompt'",
+        "negativePromptColumn": "'negative_prompt'",
         "insertPlaceholder": "Insert placeholder",
         "myTemplates": "My Templates",
         "name": "Name",
         "negativePrompt": "Negative Prompt",
+        "noTemplates": "No templates",
         "noMatchingTemplates": "No matching templates",
         "promptTemplatesDesc1": "Prompt templates add text to the prompts you write in the prompt box.",
         "promptTemplatesDesc2": "Use the placeholder string <Pre>{{placeholder}}</Pre> to specify where your prompt should be included in the template.",
@@ -1719,6 +1726,7 @@
         "searchByName": "Search by name",
         "shared": "Shared",
         "sharedTemplates": "Shared Templates",
+        "templateActions": "Template Actions",
         "templateDeleted": "Prompt template deleted",
         "toggleViewMode": "Toggle View Mode",
         "type": "Type",

invokeai/frontend/web/src/common/components/IAIImageFallback.tsx

@@ -47,6 +47,7 @@ export const IAINoContentFallback = memo((props: IAINoImageFallbackProps) => {
       userSelect: 'none',
       opacity: 0.7,
       color: 'base.500',
+      fontSize: 'md',
       ...sx,
     }),
     [sx]
@@ -55,11 +56,7 @@ export const IAINoContentFallback = memo((props: IAINoImageFallbackProps) => {
   return (
     <Flex sx={styles} {...rest}>
       {icon && <Icon as={icon} boxSize={boxSize} opacity={0.7} />}
-      {props.label && (
-        <Text textAlign="center" fontSize="md">
-          {props.label}
-        </Text>
-      )}
+      {props.label && <Text textAlign="center">{props.label}</Text>}
     </Flex>
   );
 });

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

@@ -0,0 +1,30 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { $stylePresetModalState } from 'features/stylePresets/store/stylePresetModal';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiPlusBold } from 'react-icons/pi';
+
+export const StylePresetCreateButton = () => {
+  const handleClickAddNew = useCallback(() => {
+    $stylePresetModalState.set({
+      prefilledFormData: null,
+      updatingStylePresetId: null,
+      isModalOpen: true,
+    });
+  }, []);
+
+  const { t } = useTranslation();
+
+  return (
+    <IconButton
+      icon={<PiPlusBold />}
+      tooltip={t('stylePresets.createPromptTemplate')}
+      aria-label={t('stylePresets.createPromptTemplate')}
+      onClick={handleClickAddNew}
+      size="md"
+      variant="ghost"
+      w={8}
+      h={8}
+    />
+  );
+};

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

@@ -0,0 +1,68 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import { IconButton, spinAnimation } from '@invoke-ai/ui-library';
+import { EMPTY_ARRAY } from 'app/store/constants';
+import { toast } from 'features/toast/toast';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiDownloadSimpleBold, PiSpinner } from 'react-icons/pi';
+import { useLazyExportStylePresetsQuery, useListStylePresetsQuery } from 'services/api/endpoints/stylePresets';
+
+const loadingStyles: SystemStyleObject = {
+  svg: { animation: spinAnimation },
+};
+
+export const StylePresetExportButton = () => {
+  const [exportStylePresets, { isLoading }] = useLazyExportStylePresetsQuery();
+  const { t } = useTranslation();
+  const { presetCount } = useListStylePresetsQuery(undefined, {
+    selectFromResult: ({ data }) => {
+      const userPresets = data?.filter((preset) => preset.type === 'user') ?? EMPTY_ARRAY;
+      return {
+        presetCount: userPresets.length,
+      };
+    },
+  });
+  const handleClickDownloadCsv = useCallback(async () => {
+    let blob;
+    try {
+      const response = await exportStylePresets().unwrap();
+      blob = new Blob([response], { type: 'text/csv' });
+    } catch (error) {
+      toast({
+        status: 'error',
+        title: t('stylePresets.exportFailed'),
+      });
+      return;
+    }
+
+    if (blob) {
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = 'data.csv';
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+      toast({
+        status: 'success',
+        title: t('stylePresets.exportDownloaded'),
+      });
+    }
+  }, [exportStylePresets, t]);
+
+  return (
+    <IconButton
+      onClick={handleClickDownloadCsv}
+      icon={!isLoading ? <PiDownloadSimpleBold /> : <PiSpinner />}
+      tooltip={t('stylePresets.exportPromptTemplates')}
+      aria-label={t('stylePresets.exportPromptTemplates')}
+      size="md"
+      variant="link"
+      w={8}
+      h={8}
+      sx={isLoading ? loadingStyles : undefined}
+      isDisabled={isLoading || presetCount === 0}
+    />
+  );
+};

invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm/StylePresetPromptField.tsx

@@ -39,6 +39,8 @@ export const StylePresetPromptField = (props: Props) => {
     } else {
       field.onChange(value + PRESET_PLACEHOLDER);
     }
+
+    textareaRef.current?.focus();
   }, [value, field, textareaRef]);
 
   const isPromptPresent = useMemo(() => value?.includes(PRESET_PLACEHOLDER), [value]);