Add selectedStylePreset to app parameters

invokeai/app/api/routers/style_presets.py

@@ -55,6 +55,21 @@ async def get_style_preset(
         raise HTTPException(status_code=404, detail="Style preset not found")
 
 
+@style_presets_router.post(
+    "/i/{style_preset_id}",
+    operation_id="set_style_preset",
+    responses={
+        200: {"model": StylePresetRecordWithImage},
+    },
+)
+async def select_style_preset(
+    style_preset_id: str = Path(description="The style preset to select"),
+) -> None:
+    """Selects a style preset, this will be used for saving recently used style presets"""
+
+    return
+
+
 @style_presets_router.patch(
     "/i/{style_preset_id}",
     operation_id="update_style_preset",

invokeai/frontend/web/src/app/components/App.tsx

@@ -14,6 +14,7 @@ import DeleteImageModal from 'features/deleteImageModal/components/DeleteImageMo
 import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal';
 import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterModelsToast';
 import { StylePresetModal } from 'features/stylePresets/components/StylePresetForm/StylePresetModal';
+import { activeStylePresetIdChanged } from 'features/stylePresets/store/stylePresetSlice';
 import { configChanged } from 'features/system/store/configSlice';
 import { languageSelector } from 'features/system/store/systemSelectors';
 import InvokeTabs from 'features/ui/components/InvokeTabs';
@@ -39,10 +40,17 @@ interface Props {
     action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
   };
   selectedWorkflowId?: string;
+  selectedStylePresetId?: string;
   destination?: InvokeTabName | undefined;
 }
 
-const App = ({ config = DEFAULT_CONFIG, selectedImage, selectedWorkflowId, destination }: Props) => {
+const App = ({
+  config = DEFAULT_CONFIG,
+  selectedImage,
+  selectedWorkflowId,
+  selectedStylePresetId,
+  destination,
+}: Props) => {
   const language = useAppSelector(languageSelector);
   const logger = useLogger('system');
   const dispatch = useAppDispatch();
@@ -81,6 +89,12 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage, selectedWorkflowId, desti
     }
   }, [selectedWorkflowId, getAndLoadWorkflow]);
 
+  useEffect(() => {
+    if (selectedStylePresetId) {
+      dispatch(activeStylePresetIdChanged(selectedStylePresetId));
+    }
+  }, [dispatch, selectedStylePresetId]);
+
   useEffect(() => {
     if (destination) {
       dispatch(setActiveTab(destination));

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -45,6 +45,7 @@ interface Props extends PropsWithChildren {
     action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
   };
   selectedWorkflowId?: string;
+  selectedStylePresetId?: string;
   destination?: InvokeTabName;
   customStarUi?: CustomStarUi;
   socketOptions?: Partial<ManagerOptions & SocketOptions>;
@@ -66,6 +67,7 @@ const InvokeAIUI = ({
   queueId,
   selectedImage,
   selectedWorkflowId,
+  selectedStylePresetId,
   destination,
   customStarUi,
   socketOptions,
@@ -227,6 +229,7 @@ const InvokeAIUI = ({
                 config={config}
                 selectedImage={selectedImage}
                 selectedWorkflowId={selectedWorkflowId}
+                selectedStylePresetId={selectedStylePresetId}
                 destination={destination}
               />
             </AppDndContext>

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -53,6 +53,7 @@ import type { AppDispatch, RootState } from 'app/store/store';
 
 import { addArchivedOrDeletedBoardListener } from './listeners/addArchivedOrDeletedBoardListener';
 import { addEnqueueRequestedUpscale } from './listeners/enqueueRequestedUpscale';
+import { addStylePresetSelectedListener } from './listeners/stylePresetSelected';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -123,6 +124,9 @@ addImageRemovedFromBoardFulfilledListener(startAppListening);
 addBoardIdSelectedListener(startAppListening);
 addArchivedOrDeletedBoardListener(startAppListening);
 
+// Style Presets
+addStylePresetSelectedListener(startAppListening);
+
 // Node schemas
 addGetOpenAPISchemaListener(startAppListening);
 

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/stylePresetSelected.ts

@@ -0,0 +1,15 @@
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { activeStylePresetIdChanged } from 'features/stylePresets/store/stylePresetSlice';
+import { stylePresetsApi } from 'services/api/endpoints/stylePresets';
+
+export const addStylePresetSelectedListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: activeStylePresetIdChanged,
+    effect: async (action, { dispatch }) => {
+      if (!action.payload) {
+        return;
+      }
+      dispatch(stylePresetsApi.endpoints.selectStylePreset.initiate(action.payload));
+    },
+  });
+};

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

@@ -18,15 +18,11 @@ const buildStylePresetsUrl = (path: string = '') => buildV1Url(`style_presets/${
 
 export const stylePresetsApi = api.injectEndpoints({
   endpoints: (build) => ({
-    getStylePreset: build.query<
-      paths['/api/v1/style_presets/i/{style_preset_id}']['get']['responses']['200']['content']['application/json'],
-      string
-    >({
-      query: (style_preset_id) => buildStylePresetsUrl(`i/${style_preset_id}`),
-      providesTags: (result, error, style_preset_id) => [
-        { type: 'StylePreset', id: style_preset_id },
-        'FetchOnReconnect',
-      ],
+    selectStylePreset: build.mutation<void, string>({
+      query: (style_preset_id) => ({
+        url: buildStylePresetsUrl(`i/${style_preset_id}`),
+        method: 'POST',
+      }),
     }),
     deleteStylePreset: build.mutation<void, string>({
       query: (style_preset_id) => ({