1 files changed, 128 insertions, 0 deletions
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
new file mode 100644
index 000000000..45cf7196b
--- /dev/null
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
@@ -0,0 +1,128 @@
+import { RefObject } from 'react';
+import { canvasSize } from './generativeFillConstants';
+
+export interface APISuccess {
+    status: 'success';
+    urls: string[];
+}
+
+export interface APIError {
+    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 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', '512x512');
+        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 ${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 (mockSrc: string): Promise<APISuccess | APIError> => {
+        return {
+            status: 'success',
+            urls: [mockSrc, mockSrc, mockSrc],
+        };
+    };
+
+    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';
+
+        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);
+
+            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.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);
+
+        return canvas;
+    };
+}