From 594bf6fef1e14588ed04e048b6333c8d97b228a5 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 21 Jul 2023 21:16:46 +1000
Subject: [PATCH] fix(api,ui): fix canvas saved images have extra transparent
 regions

- add `crop_visible` param to upload image & set to true only for canvas saves
---
 invokeai/app/api/routers/images.py                 |  6 ++++++
 .../listeners/canvasSavedToGallery.ts              |  1 +
 .../web/src/services/api/endpoints/images.ts       |  3 +++
 invokeai/frontend/web/src/services/api/schema.d.ts | 14 ++++++++------
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/invokeai/app/api/routers/images.py b/invokeai/app/api/routers/images.py
index 2bab7d479a..36e2e3d75d 100644
--- a/invokeai/app/api/routers/images.py
+++ b/invokeai/app/api/routers/images.py
@@ -46,6 +46,9 @@ async def upload_image(
     session_id: Optional[str] = Query(
         default=None, description="The session ID associated with this upload, if any"
     ),
+    crop_visible: Optional[bool] = Query(
+        default=False, description="Whether to crop the image"
+    ),
 ) -> ImageDTO:
     """Uploads an image"""
     if not file.content_type.startswith("image"):
@@ -55,6 +58,9 @@ async def upload_image(
 
     try:
         pil_image = Image.open(io.BytesIO(contents))
+        if crop_visible:
+            bbox = pil_image.getbbox()
+            pil_image = pil_image.crop(bbox)
     except:
         # Error opening the image
         raise HTTPException(status_code=415, detail="Failed to read image")
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasSavedToGallery.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasSavedToGallery.ts
index 0e278240ca..b8fa5ad00e 100644
--- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasSavedToGallery.ts
+++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/canvasSavedToGallery.ts
@@ -35,6 +35,7 @@ export const addCanvasSavedToGalleryListener = () => {
           image_category: 'general',
           is_intermediate: false,
           board_id: state.gallery.autoAddBoardId,
+          crop_visible: true,
           postUploadAction: {
             type: 'TOAST',
             toastOptions: { title: 'Canvas Saved to Gallery' },
diff --git a/invokeai/frontend/web/src/services/api/endpoints/images.ts b/invokeai/frontend/web/src/services/api/endpoints/images.ts
index c905ec5784..56b9e14a88 100644
--- a/invokeai/frontend/web/src/services/api/endpoints/images.ts
+++ b/invokeai/frontend/web/src/services/api/endpoints/images.ts
@@ -421,6 +421,7 @@ export const imagesApi = api.injectEndpoints({
         postUploadAction?: PostUploadAction;
         session_id?: string;
         board_id?: string;
+        crop_visible?: boolean;
       }
     >({
       query: ({
@@ -429,6 +430,7 @@ export const imagesApi = api.injectEndpoints({
         is_intermediate,
         session_id,
         board_id,
+        crop_visible,
       }) => {
         const formData = new FormData();
         formData.append('file', file);
@@ -441,6 +443,7 @@ export const imagesApi = api.injectEndpoints({
             is_intermediate,
             session_id,
             board_id,
+            crop_visible,
           },
         };
       },
diff --git a/invokeai/frontend/web/src/services/api/schema.d.ts b/invokeai/frontend/web/src/services/api/schema.d.ts
index 07b46b8400..0fce960703 100644
--- a/invokeai/frontend/web/src/services/api/schema.d.ts
+++ b/invokeai/frontend/web/src/services/api/schema.d.ts
@@ -5355,18 +5355,18 @@ export type components = {
        */
       image?: components["schemas"]["ImageField"];
     };
-    /**
-     * StableDiffusionXLModelFormat 
-     * @description An enumeration. 
-     * @enum {string}
-     */
-    StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
     /**
      * StableDiffusion2ModelFormat 
      * @description An enumeration. 
      * @enum {string}
      */
     StableDiffusion2ModelFormat: "checkpoint" | "diffusers";
+    /**
+     * StableDiffusionXLModelFormat 
+     * @description An enumeration. 
+     * @enum {string}
+     */
+    StableDiffusionXLModelFormat: "checkpoint" | "diffusers";
     /**
      * StableDiffusion1ModelFormat 
      * @description An enumeration. 
@@ -6050,6 +6050,8 @@ export type operations = {
         board_id?: string;
         /** @description The session ID associated with this upload, if any */
         session_id?: string;
+        /** @description Whether to crop the image */
+        crop_visible?: boolean;
       };
     };
     requestBody: {