WIP workflow thumbnails - how to add to redux state?

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

@@ -1,6 +1,7 @@
 import type { paths } from 'services/api/schema';
 
 import { api, buildV1Url, LIST_TAG } from '..';
+import { Workflow, WorkflowWithoutID } from '../types';
 
 /**
  * Builds an endpoint URL for the workflows router
@@ -41,13 +42,22 @@ export const workflowsApi = api.injectEndpoints({
     }),
     createWorkflow: build.mutation<
       paths['/api/v1/workflows/']['post']['responses']['200']['content']['application/json'],
-      paths['/api/v1/workflows/']['post']['requestBody']['content']['application/json']['workflow']
+      { workflow: WorkflowWithoutID; image: File | null }
     >({
-      query: (workflow) => ({
-        url: buildWorkflowsUrl(),
-        method: 'POST',
-        body: { workflow },
-      }),
+      query: ({ workflow, image }) => {
+        const formData = new FormData();
+        if (image) {
+          formData.append('image', image);
+        }
+
+        formData.append('workflow', JSON.stringify(workflow));
+
+        return {
+          url: buildWorkflowsUrl(),
+          method: 'POST',
+          body: formData,
+        };
+      },
       invalidatesTags: [
         { type: 'Workflow', id: LIST_TAG },
         { type: 'WorkflowsRecent', id: LIST_TAG },
@@ -55,14 +65,22 @@ export const workflowsApi = api.injectEndpoints({
     }),
     updateWorkflow: build.mutation<
       paths['/api/v1/workflows/i/{workflow_id}']['patch']['responses']['200']['content']['application/json'],
-      paths['/api/v1/workflows/i/{workflow_id}']['patch']['requestBody']['content']['application/json']['workflow']
+      { workflow: Workflow; image: File | null }
     >({
-      query: (workflow) => ({
-        url: buildWorkflowsUrl(`i/${workflow.id}`),
-        method: 'PATCH',
-        body: { workflow },
-      }),
-      invalidatesTags: (response, error, workflow) => [
+      query: ({ workflow, image }) => {
+        const formData = new FormData();
+        if (image) {
+          formData.append('image', image);
+        }
+        formData.append('workflow', JSON.stringify(workflow));
+
+        return {
+          url: buildWorkflowsUrl(`i/${workflow.id}`),
+          method: 'PATCH',
+          body: formData,
+        };
+      },
+      invalidatesTags: (response, error, { workflow }) => [
         { type: 'WorkflowsRecent', id: LIST_TAG },
         { type: 'Workflow', id: LIST_TAG },
         { type: 'Workflow', id: workflow.id },

invokeai/frontend/web/src/services/api/schema.ts

@@ -1410,6 +1410,46 @@ export type paths = {
         patch?: never;
         trace?: never;
     };
+    "/api/v1/workflows/{workflow_id}/thumbnail": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Upload Workflow Thumbnail
+         * @description Uploads a thumbnail for a workflow
+         */
+        post: operations["upload_workflow_thumbnail"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/workflowsi/{workflow_id}/thumbnail": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Workflow Thumbnail
+         * @description Gets the thumbnail for a workflow
+         */
+        get: operations["get_workflow_thumbnail"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/v1/style_presets/i/{style_preset_id}": {
         parameters: {
             query?: never;
@@ -2211,8 +2251,16 @@ export type components = {
         };
         /** Body_create_workflow */
         Body_create_workflow: {
-            /** @description The workflow to create */
-            workflow: components["schemas"]["WorkflowWithoutID"];
+            /**
+             * Workflow
+             * @description The workflow to create
+             */
+            workflow: string;
+            /**
+             * Image
+             * @description The image file to upload
+             */
+            image?: Blob | null;
         };
         /** Body_delete_images_from_list */
         Body_delete_images_from_list: {
@@ -2368,8 +2416,16 @@ export type components = {
         };
         /** Body_update_workflow */
         Body_update_workflow: {
-            /** @description The updated workflow */
-            workflow: components["schemas"]["Workflow"];
+            /**
+             * Workflow
+             * @description The updated workflow
+             */
+            workflow: string;
+            /**
+             * Image
+             * @description The image file to upload
+             */
+            image?: Blob | null;
         };
         /** Body_upload_image */
         Body_upload_image: {
@@ -2381,6 +2437,15 @@ export type components = {
             /** @description The metadata to associate with the image */
             metadata?: components["schemas"]["JsonValue"] | null;
         };
+        /** Body_upload_workflow_thumbnail */
+        Body_upload_workflow_thumbnail: {
+            /**
+             * File
+             * Format: binary
+             * @description The image file to upload
+             */
+            file: Blob;
+        };
         /**
          * Boolean Collection Primitive
          * @description A collection of boolean primitive values
@@ -21087,6 +21152,11 @@ export type components = {
              * @description The opened timestamp of the workflow.
              */
             opened_at: string;
+            /**
+             * Thumbnail Url
+             * @description The URL of the workflow thumbnail.
+             */
+            thumbnail_url?: string | null;
             /** @description The workflow. */
             workflow: components["schemas"]["Workflow"];
         };
@@ -21117,6 +21187,11 @@ export type components = {
              * @description The opened timestamp of the workflow.
              */
             opened_at: string;
+            /**
+             * Thumbnail Url
+             * @description The URL of the workflow thumbnail.
+             */
+            thumbnail_url?: string | null;
             /**
              * Description
              * @description The description of the workflow.
@@ -24143,7 +24218,7 @@ export interface operations {
         };
         requestBody: {
             content: {
-                "application/json": components["schemas"]["Body_update_workflow"];
+                "multipart/form-data": components["schemas"]["Body_update_workflow"];
             };
         };
         responses: {
@@ -24218,7 +24293,7 @@ export interface operations {
         };
         requestBody: {
             content: {
-                "application/json": components["schemas"]["Body_create_workflow"];
+                "multipart/form-data": components["schemas"]["Body_create_workflow"];
             };
         };
         responses: {
@@ -24242,6 +24317,86 @@ export interface operations {
             };
         };
     };
+    upload_workflow_thumbnail: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                workflow_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "multipart/form-data": components["schemas"]["Body_upload_workflow_thumbnail"];
+            };
+        };
+        responses: {
+            /** @description Thumbnail uploaded successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": unknown;
+                };
+            };
+            /** @description Invalid image format */
+            415: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
+    get_workflow_thumbnail: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                workflow_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Thumbnail retrieved successfully */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": unknown;
+                };
+            };
+            /** @description Thumbnail not found */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
     get_style_preset: {
         parameters: {
             query?: never;

invokeai/frontend/web/src/services/api/types.ts

@@ -20,6 +20,9 @@ export type UpdateBoardArg = paths['/api/v1/boards/{board_id}']['patch']['parame
 export type GraphAndWorkflowResponse =
   paths['/api/v1/images/i/{image_name}/workflow']['get']['responses']['200']['content']['application/json'];
 
+export type WorkflowWithoutID = S['WorkflowWithoutID'];
+export type Workflow = S['Workflow'];
+
 export type BatchConfig =
   paths['/api/v1/queue/{queue_id}/enqueue_batch']['post']['requestBody']['content']['application/json'];