1 files changed, 106 insertions, 124 deletions
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
index 1c726afbb..91f12f866 100644
--- a/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
@@ -1,146 +1,128 @@
-import { RefObject } from "react";
-import { OPENAI_KEY } from "../keys";
-import { canvasSize } from "./generativeFillConstants";
+import { RefObject } from 'react';
+import { canvasSize } from './generativeFillConstants';
 
 export interface APISuccess {
-  status: "success";
-  urls: string[];
+    status: 'success';
+    urls: string[];
 }
 
 export interface APIError {
-  status: "error";
-  message: string;
+    status: 'error';
+    message: string;
 }
 
 export class ImageUtility {
-  static canvasToBlob = (canvas: HTMLCanvasElement): Promise<Blob> => {
-    return new Promise((resolve) => {
-      canvas.toBlob((blob) => {
-        if (blob) {
-          resolve(blob);
-        }
-      }, "image/png");
-    });
-  };
+    static canvasToBlob = (canvas: HTMLCanvasElement): Promise<Blob> => {
+        return new Promise(resolve => {
+            canvas.toBlob(blob => {
+                if (blob) {
+                    resolve(blob);
+                }
+            }, 'image/png');
+        });
+    };
 
-  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();
-    fd.append("image", imgBlob, "image.png");
-    fd.append("mask", maskBlob, "mask.png");
-    fd.append("prompt", prompt);
-    fd.append("size", "1024x1024");
-    fd.append("n", n ? JSON.stringify(n) : "1");
-    fd.append("response_format", "b64_json");
+    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();
+        fd.append('image', imgBlob, 'image.png');
+        fd.append('mask', maskBlob, 'mask.png');
+        fd.append('prompt', prompt);
+        fd.append('size', '1024x1024');
+        fd.append('n', n ? JSON.stringify(n) : '1');
+        fd.append('response_format', 'b64_json');
 
-    try {
-      const res = await fetch(apiUrl, {
-        method: "POST",
-        headers: {
-          Authorization: `Bearer ${OPENAI_KEY}`,
-        },
-        body: fd,
-      });
-      const data = await res.json();
-      console.log(data.data);
-      return {
-        status: "success",
-        urls: (data.data as { b64_json: string }[]).map(
-          (data) => `data:image/png;base64,${data.b64_json}`
-        ),
-      };
-    } catch (err) {
-      console.log(err);
-      return { status: "error", message: "API error." };
-    }
-  };
+        try {
+            const res = await fetch(apiUrl, {
+                method: 'POST',
+                headers: {
+                    Authorization: `Bearer ${process.env.OPENAI_KEY}`,
+                },
+                body: fd,
+            });
+            const data = await res.json();
+            console.log(data.data);
+            return {
+                status: 'success',
+                urls: (data.data as { b64_json: string }[]).map(data => `data:image/png;base64,${data.b64_json}`),
+            };
+        } catch (err) {
+            console.log(err);
+            return { status: 'error', message: 'API error.' };
+        }
+    };
 
-  static mockGetEdit = async (): Promise<APISuccess | APIError> => {
-    return {
-      status: "success",
-      urls: [
-        "/assets/shiba.png",
-        "/assets/souffle-dalle.png",
-        "/assets/firefly.png",
-      ],
+    static mockGetEdit = async (): Promise<APISuccess | APIError> => {
+        return {
+            status: 'success',
+            urls: ['/assets/shiba.png', '/assets/souffle-dalle.png', '/assets/firefly.png'],
+        };
     };
-  };
 
-  static getCanvasContext = (
-    canvasRef: RefObject<HTMLCanvasElement>
-  ): CanvasRenderingContext2D | null => {
-    if (!canvasRef.current) return null;
-    const ctx = canvasRef.current.getContext("2d");
-    if (!ctx) return null;
-    return ctx;
-  };
+    static getCanvasContext = (canvasRef: RefObject<HTMLCanvasElement>): CanvasRenderingContext2D | null => {
+        if (!canvasRef.current) return null;
+        const ctx = canvasRef.current.getContext('2d');
+        if (!ctx) return null;
+        return ctx;
+    };
 
-  static downloadCanvas = (canvas: HTMLCanvasElement) => {
-    const url = canvas.toDataURL();
-    const downloadLink = document.createElement("a");
-    downloadLink.href = url;
-    downloadLink.download = "canvas";
+    static downloadCanvas = (canvas: HTMLCanvasElement) => {
+        const url = canvas.toDataURL();
+        const downloadLink = document.createElement('a');
+        downloadLink.href = url;
+        downloadLink.download = 'canvas';
 
-    downloadLink.click();
-    downloadLink.remove();
-  };
+        downloadLink.click();
+        downloadLink.remove();
+    };
 
-  static downloadImageCanvas = (imgUrl: string) => {
-    const img = new Image();
-    img.src = imgUrl;
-    img.onload = () => {
-      const canvas = document.createElement("canvas");
-      canvas.width = canvasSize;
-      canvas.height = canvasSize;
-      const ctx = canvas.getContext("2d");
-      ctx?.drawImage(img, 0, 0, canvasSize, canvasSize);
+    static downloadImageCanvas = (imgUrl: string) => {
+        const img = new Image();
+        img.src = imgUrl;
+        img.onload = () => {
+            const canvas = document.createElement('canvas');
+            canvas.width = canvasSize;
+            canvas.height = canvasSize;
+            const ctx = canvas.getContext('2d');
+            ctx?.drawImage(img, 0, 0, canvasSize, canvasSize);
 
-      this.downloadCanvas(canvas);
+            this.downloadCanvas(canvas);
+        };
     };
-  };
 
-  static drawImgToCanvas = (
-    img: HTMLImageElement,
-    canvasRef: React.RefObject<HTMLCanvasElement>,
-    loaded?: boolean
-  ) => {
-    if (loaded) {
-      const ctx = this.getCanvasContext(canvasRef);
-      if (!ctx) return;
-      ctx.globalCompositeOperation = "source-over";
-      const scale = Math.min(canvasSize / img.width, canvasSize / img.height);
-      const width = img.width * scale;
-      const height = img.height * scale;
-      ctx.clearRect(0, 0, canvasSize, canvasSize);
-      ctx.drawImage(img, 0, 0, width, height);
-    } else {
-      img.onload = () => {
-        const ctx = this.getCanvasContext(canvasRef);
-        if (!ctx) return;
-        ctx.globalCompositeOperation = "source-over";
-        const scale = Math.min(canvasSize / img.width, canvasSize / img.height);
-        const width = img.width * scale;
-        const height = img.height * scale;
-        ctx.clearRect(0, 0, canvasSize, canvasSize);
-        ctx.drawImage(img, 0, 0, width, height);
-      };
-    }
-  };
+    static drawImgToCanvas = (img: HTMLImageElement, canvasRef: React.RefObject<HTMLCanvasElement>, loaded?: boolean) => {
+        if (loaded) {
+            const ctx = this.getCanvasContext(canvasRef);
+            if (!ctx) return;
+            ctx.globalCompositeOperation = 'source-over';
+            const scale = Math.max(canvasSize / img.width, canvasSize / img.height);
+            const width = img.width * scale;
+            const height = img.height * scale;
+            ctx.clearRect(0, 0, canvasSize, canvasSize);
+            ctx.drawImage(img, 0, 0, width, height);
+        } else {
+            img.onload = () => {
+                const ctx = this.getCanvasContext(canvasRef);
+                if (!ctx) return;
+                ctx.globalCompositeOperation = 'source-over';
+                const scale = Math.max(canvasSize / img.width, canvasSize / img.height);
+                const width = img.width * scale;
+                const height = img.height * scale;
+                ctx.clearRect(0, 0, canvasSize, canvasSize);
+                ctx.drawImage(img, 0, 0, width, height);
+            };
+        }
+    };
 
-  // The image must be loaded!
-  static getCanvasImg = (img: HTMLImageElement): HTMLCanvasElement => {
-    const canvas = document.createElement("canvas");
-    canvas.width = canvasSize;
-    canvas.height = canvasSize;
-    const ctx = canvas.getContext("2d");
-    ctx?.clearRect(0, 0, canvasSize, canvasSize);
-    ctx?.drawImage(img, 0, 0, canvasSize, canvasSize);
+    // The image must be loaded!
+    static getCanvasImg = (img: HTMLImageElement): HTMLCanvasElement => {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvasSize;
+        canvas.height = canvasSize;
+        const ctx = canvas.getContext('2d');
+        ctx?.clearRect(0, 0, canvasSize, canvasSize);
+        ctx?.drawImage(img, 0, 0, canvasSize, canvasSize);
 
-    return canvas;
-  };
+        return canvas;
+    };
 }