1 files changed, 17 insertions, 4 deletions

diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
index 4ff70c86c..c6ecedb6b 100644
--- a/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
@@ -12,6 +12,11 @@ export interface APIError {
 }
 
 export class ImageUtility {
+    /**
+     *
+     * @param canvas Canvas to convert
+     * @returns Blob of canvas
+     */
     static canvasToBlob = (canvas: HTMLCanvasElement): Promise<Blob> => {
         return new Promise(resolve => {
             canvas.toBlob(blob => {
@@ -45,6 +50,7 @@ export class ImageUtility {
         }
     };
 
+    // converts an image to a canvas data url
     static convertImgToCanvasUrl = async (imageSrc: string, width: number, height: number): Promise<string> => {
         return new Promise<string>((resolve, reject) => {
             const img = new Image();
@@ -62,6 +68,7 @@ export class ImageUtility {
         });
     };
 
+    // calls the openai api to get image edits
     static getEdit = async (imgBlob: Blob, maskBlob: Blob, prompt: string, n?: number): Promise<APISuccess | APIError> => {
         const apiUrl = 'https://api.openai.com/v1/images/edits';
         const fd = new FormData();
@@ -92,6 +99,7 @@ export class ImageUtility {
         }
     };
 
+    // mock api call
     static mockGetEdit = async (mockSrc: string): Promise<APISuccess | APIError> => {
         return {
             status: 'success',
@@ -99,6 +107,7 @@ export class ImageUtility {
         };
     };
 
+    // Gets the canvas rendering context of a canvas
     static getCanvasContext = (canvasRef: RefObject<HTMLCanvasElement>): CanvasRenderingContext2D | null => {
         if (!canvasRef.current) return null;
         const ctx = canvasRef.current.getContext('2d');
@@ -106,6 +115,7 @@ export class ImageUtility {
         return ctx;
     };
 
+    // Helper for downloading the canvas (for debugging)
     static downloadCanvas = (canvas: HTMLCanvasElement) => {
         const url = canvas.toDataURL();
         const downloadLink = document.createElement('a');
@@ -116,6 +126,7 @@ export class ImageUtility {
         downloadLink.remove();
     };
 
+    // Download the canvas (for debugging)
     static downloadImageCanvas = (imgUrl: string) => {
         const img = new Image();
         img.src = imgUrl;
@@ -130,12 +141,14 @@ export class ImageUtility {
         };
     };
 
+    // Clears the canvas
     static clearCanvas = (canvasRef: React.RefObject<HTMLCanvasElement>) => {
         const ctx = this.getCanvasContext(canvasRef);
         if (!ctx || !canvasRef.current) return;
         ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height);
     };
 
+    // Draws the image to the current canvas
     static drawImgToCanvas = (img: HTMLImageElement, canvasRef: React.RefObject<HTMLCanvasElement>, width: number, height: number) => {
         const drawImg = (img: HTMLImageElement) => {
             const ctx = this.getCanvasContext(canvasRef);
@@ -154,7 +167,7 @@ export class ImageUtility {
         }
     };
 
-    // The image must be loaded!
+    // Gets the image mask for the openai endpoint
     static getCanvasMask = (srcCanvas: HTMLCanvasElement, paddedCanvas: HTMLCanvasElement): HTMLCanvasElement | undefined => {
         const canvas = document.createElement('canvas');
         canvas.width = canvasSize;
@@ -162,8 +175,6 @@ export class ImageUtility {
         const ctx = canvas.getContext('2d');
         if (!ctx) return;
         ctx?.clearRect(0, 0, canvasSize, canvasSize);
-        // ctx.fillStyle = bgColor;
-        // ctx.fillRect(0, 0, canvasSize, canvasSize);
         ctx.drawImage(paddedCanvas, 0, 0);
 
         // extract and set padding data
@@ -181,6 +192,7 @@ export class ImageUtility {
         return canvas;
     };
 
+    // Fills in the blank areas of the image with an image reflection (to fill in a square-shaped canvas)
     static drawHorizontalReflection = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, xOffset: number) => {
         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
         const data = imageData.data;
@@ -209,6 +221,7 @@ export class ImageUtility {
         ctx.putImageData(imageData, 0, 0);
     };
 
+    // Fills in the blank areas of the image with an image reflection (to fill in a square-shaped canvas)
     static drawVerticalReflection = (ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, yOffset: number) => {
         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
         const data = imageData.data;
@@ -237,7 +250,7 @@ export class ImageUtility {
         ctx.putImageData(imageData, 0, 0);
     };
 
-    // The image must be loaded!
+    // Gets the unaltered (besides filling in padding) version of the image for the api call
     static getCanvasImg = (img: HTMLImageElement): HTMLCanvasElement | undefined => {
         const canvas = document.createElement('canvas');
         canvas.width = canvasSize;