added files

10 files changed, 746 insertions, 0 deletions

diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.scss b/src/client/views/nodes/generativeFill/GenerativeFill.scss
new file mode 100644
index 000000000..92406ba9d
--- /dev/null
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.scss
@@ -0,0 +1,96 @@
+$navHeight: 5rem;
+$canvasSize: 1024px;
+$scale: 0.5;
+
+.generativeFillContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 999;
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    .controls {
+        flex-shrink: 0;
+        height: $navHeight;
+        background-color: #ffffff;
+        z-index: 999;
+        width: 100%;
+        display: flex;
+        gap: 3rem;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #c7cdd0;
+        padding: 0 2rem;
+
+        h1 {
+            font-size: 1.5rem;
+        }
+    }
+
+    .drawingArea {
+        cursor: none;
+        touch-action: none;
+        position: relative;
+        flex-grow: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        background-color: #f0f4f6;
+
+        canvas {
+            display: block;
+            position: absolute;
+            transform-origin: 50% 50%;
+        }
+
+        .pointer {
+            pointer-events: none;
+            position: absolute;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            border: 1px solid #ffffff;
+            transform: translate(-50%, -50%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            .innerPointer {
+                width: 100%;
+                height: 100%;
+                border: 1px solid #000000;
+                border-radius: 50%;
+            }
+        }
+
+        .iconContainer {
+            position: absolute;
+            top: 2rem;
+            left: 2rem;
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+        }
+
+        .editsBox {
+            position: absolute;
+            top: 2rem;
+            right: 2rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+
+            img {
+                transition: all 0.2s ease-in-out;
+                &:hover {
+                    opacity: 0.8;
+                }
+            }
+        }
+    }
+}
diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
new file mode 100644
index 000000000..6dd80a5d1
--- /dev/null
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -0,0 +1,308 @@
+import { useEffect, useRef, useState } from 'react';
+import { APISuccess, ImageUtility } from './generativeFillUtils/ImageHandler';
+import { BrushHandler } from './generativeFillUtils/BrushHandler';
+import { IconButton, TextField } from '@mui/material';
+import { CursorData, Point } from './generativeFillUtils/generativeFillInterfaces';
+import { activeColor, canvasSize, eraserColor } from './generativeFillUtils/generativeFillConstants';
+import { PointerHandler } from './generativeFillUtils/PointerHandler';
+import { BsBrush, BsEraser } from 'react-icons/bs';
+import { AiOutlineUpload } from 'react-icons/ai';
+import { CiUndo, CiRedo } from 'react-icons/ci';
+import Buttons from './GenerativeFillButtons';
+import React from 'react';
+import './GenerativeFill.scss';
+
+/**
+ * For images not 1024x1024 fill in the rest in solid black, or a
+ * reflected version of the image.
+ */
+
+/**
+ * TODO: Look into img onload, sometimes the canvas doesn't update properly
+ */
+
+enum BrushStyle {
+    ADD,
+    SUBTRACT,
+    MARQUEE,
+}
+
+interface ImageEdit {
+    imgElement: HTMLImageElement;
+    parent: ImageEdit;
+    children: ImageEdit[];
+}
+
+const GenerativeFill = () => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const canvasBackgroundRef = useRef<HTMLCanvasElement>(null);
+    const drawingAreaRef = useRef<HTMLDivElement>(null);
+    const fileRef = useRef<HTMLInputElement>(null);
+    const [cursorData, setCursorData] = useState<CursorData>({
+        x: 0,
+        y: 0,
+        width: 150,
+    });
+    const [isBrushing, setIsBrushing] = useState(false);
+    const [canvasScale, setCanvasScale] = useState(0.5);
+    const [edits, setEdits] = useState<string[]>([]);
+    const [brushStyle, setBrushStyle] = useState<BrushStyle>(BrushStyle.ADD);
+    const [input, setInput] = useState('');
+    const [loading, setLoading] = useState(false);
+    // used to store the current image loaded to the main canvas
+    const currImg = useRef<HTMLImageElement | null>(null);
+    // ref to store history
+    const undoStack = useRef<ImageData[]>([]);
+
+    // initiate brushing
+    const handlePointerDown = (e: React.PointerEvent) => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = ImageUtility.getCanvasContext(canvasRef);
+        if (!ctx) return;
+
+        setIsBrushing(true);
+        const { x, y } = PointerHandler.getPointRelativeToElement(canvas, e, canvasScale);
+
+        BrushHandler.brushCircleOverlay(x, y, cursorData.width / 2 / canvasScale, ctx, eraserColor, brushStyle === BrushStyle.SUBTRACT);
+    };
+
+    // stop brushing, push to undo stack
+    const handlePointerUp = (e: React.PointerEvent) => {
+        const ctx = ImageUtility.getCanvasContext(canvasBackgroundRef);
+        if (!ctx) return;
+        if (!isBrushing) return;
+        setIsBrushing(false);
+    };
+
+    // handles brushing on pointer movement
+    useEffect(() => {
+        if (!isBrushing) return;
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = ImageUtility.getCanvasContext(canvasRef);
+        if (!ctx) return;
+
+        const handlePointerMove = (e: PointerEvent) => {
+            const currPoint = PointerHandler.getPointRelativeToElement(canvas, e, canvasScale);
+            const lastPoint: Point = {
+                x: currPoint.x - e.movementX / canvasScale,
+                y: currPoint.y - e.movementY / canvasScale,
+            };
+            BrushHandler.createBrushPathOverlay(lastPoint, currPoint, cursorData.width / 2 / canvasScale, ctx, eraserColor, brushStyle === BrushStyle.SUBTRACT);
+        };
+
+        drawingAreaRef.current?.addEventListener('pointermove', handlePointerMove);
+        return () => drawingAreaRef.current?.removeEventListener('pointermove', handlePointerMove);
+    }, [isBrushing]);
+
+    // first load
+    useEffect(() => {
+        const img = new Image();
+        img.src = '/assets/art.jpeg';
+        ImageUtility.drawImgToCanvas(img, canvasRef);
+        currImg.current = img;
+    }, [canvasRef]);
+
+    useEffect(() => {
+        if (!canvasBackgroundRef.current) return;
+        const ctx = ImageUtility.getCanvasContext(canvasBackgroundRef);
+        if (!ctx) return;
+    }, [canvasBackgroundRef]);
+
+    // handles brush sizing
+    useEffect(() => {
+        const handleKeyPress = (e: KeyboardEvent) => {
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                e.stopPropagation();
+                setCursorData(data => ({ ...data, width: data.width + 5 }));
+            } else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                e.stopPropagation();
+                setCursorData(data => (data.width >= 20 ? { ...data, width: data.width - 5 } : data));
+            }
+        };
+        window.addEventListener('keydown', handleKeyPress);
+        return () => window.removeEventListener('keydown', handleKeyPress);
+    }, []);
+
+    // handle pinch zoom
+    useEffect(() => {
+        const handlePinch = (e: WheelEvent) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const delta = e.deltaY;
+            const scaleFactor = delta > 0 ? 0.98 : 1.02; // Adjust the scale factor as per your requirement
+            setCanvasScale(prevScale => prevScale * scaleFactor);
+        };
+
+        drawingAreaRef.current?.addEventListener('wheel', handlePinch, {
+            passive: false,
+        });
+        return () => drawingAreaRef.current?.removeEventListener('wheel', handlePinch);
+    }, [drawingAreaRef]);
+
+    // updates the current position of the cursor
+    const updateCursorData = (e: React.PointerEvent) => {
+        const drawingArea = drawingAreaRef.current;
+        if (!drawingArea) return;
+        const { x, y } = PointerHandler.getPointRelativeToElement(drawingArea, e, 1);
+        setCursorData(data => ({
+            ...data,
+            x,
+            y,
+        }));
+    };
+
+    // File upload
+    const uploadImg = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (e.target.files) {
+            const file = e.target.files[0];
+            const image = new Image();
+            const imgUrl = URL.createObjectURL(file);
+            image.src = imgUrl;
+            ImageUtility.drawImgToCanvas(image, canvasRef);
+            currImg.current = image;
+        }
+    };
+
+    // Get AI Edit
+    const getEdit = async () => {
+        const img = currImg.current;
+        if (!img) return;
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const ctx = ImageUtility.getCanvasContext(canvasRef);
+        if (!ctx) return;
+        setLoading(true);
+        try {
+            const maskBlob = await ImageUtility.canvasToBlob(canvas);
+            const imgBlob = await ImageUtility.canvasToBlob(ImageUtility.getCanvasImg(img));
+
+            // const res = await ImageUtility.getEdit(
+            //   imgBlob,
+            //   maskBlob,
+            //   input !== ""
+            //     ? input + " in the same style"
+            //     : "Fill in the image in the same style",
+            //   1
+            // );
+
+            const res = await ImageUtility.mockGetEdit();
+            const { urls } = res as APISuccess;
+            const image = new Image();
+            image.src = urls[0];
+            setLoading(false);
+            setEdits(urls);
+            ImageUtility.drawImgToCanvas(image, canvasRef);
+            currImg.current = image;
+        } catch (err) {
+            console.log(err);
+        }
+    };
+
+    return (
+        <div className="generativeFillContainer">
+            <div className="controls">
+                <h1>Generative Fill</h1>
+                <Buttons canvasRef={canvasRef} backgroundref={canvasBackgroundRef} currImg={currImg} getEdit={getEdit} undoStack={undoStack} loading={loading} />
+            </div>
+            {/* Main canvas for editing */}
+            <div
+                className="drawingArea" // this only works if pointerevents: none is set on the custom pointer
+                ref={drawingAreaRef}
+                onPointerOver={updateCursorData}
+                onPointerMove={updateCursorData}
+                onPointerDown={handlePointerDown}
+                onPointerUp={handlePointerUp}>
+                <canvas ref={canvasRef} width={canvasSize} height={canvasSize} style={{ transform: `scale(${canvasScale})` }} />
+                <canvas ref={canvasBackgroundRef} width={canvasSize} height={canvasSize} style={{ transform: `scale(${canvasScale})` }} />
+                <div
+                    className="pointer"
+                    style={{
+                        left: cursorData.x,
+                        top: cursorData.y,
+                        width: cursorData.width,
+                        height: cursorData.width,
+                    }}>
+                    <div className="innerPointer"></div>
+                </div>
+                {/* Icons */}
+                <div className="iconContainer">
+                    <input ref={fileRef} type="file" accept="image/*" onChange={uploadImg} style={{ display: 'none' }} />
+                    <IconButton
+                        onClick={() => {
+                            if (fileRef.current) {
+                                fileRef.current.click();
+                            }
+                        }}>
+                        <AiOutlineUpload />
+                    </IconButton>
+                    <IconButton
+                        onClick={() => {
+                            setBrushStyle(BrushStyle.ADD);
+                        }}>
+                        <BsBrush color={brushStyle === BrushStyle.ADD ? activeColor : 'inherit'} />
+                    </IconButton>
+                    <IconButton
+                        onClick={() => {
+                            setBrushStyle(BrushStyle.SUBTRACT);
+                        }}>
+                        <BsEraser color={brushStyle === BrushStyle.SUBTRACT ? activeColor : 'inherit'} />
+                    </IconButton>
+                    {/* Undo and Redo */}
+                    {/* <IconButton
+                        onPointerDown={e => {
+                            e.stopPropagation();
+                            console.log(undoStack.current);
+                        }}
+                        onPointerUp={e => {
+                            e.stopPropagation();
+                        }}>
+                        <CiUndo />
+                    </IconButton>
+                    <IconButton onClick={() => {}}>
+                        <CiRedo />
+                    </IconButton> */}
+                </div>
+                {/* Edits box */}
+                <div className="editsBox">
+                    {edits.map(edit => (
+                        <img
+                            key={edit}
+                            width={100}
+                            height={100}
+                            src={edit}
+                            onClick={() => {
+                                const img = new Image();
+                                img.src = edit;
+                                ImageUtility.drawImgToCanvas(img, canvasRef);
+                                currImg.current = img;
+                            }}
+                        />
+                    ))}
+                </div>
+            </div>
+            <div>
+                <TextField
+                    value={input}
+                    onChange={e => setInput(e.target.value)}
+                    disabled={isBrushing}
+                    type="text"
+                    label="Prompt"
+                    placeholder="Prompt..."
+                    sx={{
+                        backgroundColor: '#ffffff',
+                        position: 'absolute',
+                        bottom: '1rem',
+                        transform: 'translateX(calc(50vw - 50%))',
+                        width: 'calc(100vw - 4rem)',
+                    }}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default GenerativeFill;
diff --git a/src/client/views/nodes/generativeFill/GenerativeFillButtons.scss b/src/client/views/nodes/generativeFill/GenerativeFillButtons.scss
new file mode 100644
index 000000000..0180ef904
--- /dev/null
+++ b/src/client/views/nodes/generativeFill/GenerativeFillButtons.scss
@@ -0,0 +1,4 @@
+.generativeFillBtnContainer {
+    display: flex;
+    gap: 1rem;
+}
diff --git a/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
new file mode 100644
index 000000000..348e27a16
--- /dev/null
+++ b/src/client/views/nodes/generativeFill/GenerativeFillButtons.tsx
@@ -0,0 +1,58 @@
+import { Button } from '@mui/material';
+import { ImageUtility } from './generativeFillUtils/ImageHandler';
+import { canvasSize } from './generativeFillUtils/generativeFillConstants';
+import { Oval } from 'react-loader-spinner';
+import './GenerativeFillButtons.scss';
+import React from 'react';
+
+interface ButtonContainerProps {
+    canvasRef: React.RefObject<HTMLCanvasElement>;
+    backgroundref: React.RefObject<HTMLCanvasElement>;
+    currImg: React.MutableRefObject<HTMLImageElement | null>;
+    undoStack: React.MutableRefObject<ImageData[]>;
+    getEdit: () => Promise<void>;
+    loading: boolean;
+}
+
+const Buttons = ({ canvasRef, backgroundref, currImg, undoStack, loading, getEdit }: ButtonContainerProps) => {
+    const handleReset = () => {
+        if (!canvasRef.current || !currImg.current) return;
+        const ctx = ImageUtility.getCanvasContext(canvasRef);
+        if (!ctx) return;
+        ctx.clearRect(0, 0, canvasSize, canvasSize);
+        ImageUtility.drawImgToCanvas(currImg.current, canvasRef, true);
+    };
+
+    return (
+        <div className="generativeFillBtnContainer">
+            <Button onClick={handleReset}>Reset</Button>
+            <Button
+                onClick={() => {
+                    if (!canvasRef.current) return;
+                    ImageUtility.downloadCanvas(canvasRef.current);
+                }}>
+                Download
+            </Button>
+            {/* <Button
+        onClick={() => {
+          if (!canvasRef.current) return;
+          ImageUtility.downloadImageCanvas("/assets/firefly.png");
+        }}
+      >
+        Download Original
+      </Button> */}
+            <Button
+                variant="contained"
+                onClick={() => {
+                    getEdit();
+                }}>
+                <span style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                    Get Edit
+                    {loading && <Oval height={20} width={20} color="#ffffff" visible={true} ariaLabel="oval-loading" secondaryColor="#ffffff89" strokeWidth={3} strokeWidthSecondary={3} />}
+                </span>
+            </Button>
+        </div>
+    );
+};
+
+export default Buttons;
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/BrushHandler.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/BrushHandler.ts
new file mode 100644
index 000000000..c2716e083
--- /dev/null
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/BrushHandler.ts
@@ -0,0 +1,87 @@
+import { GenerativeFillMathHelpers } from "./GenerativeFillMathHelpers";
+import { eraserColor } from "./generativeFillConstants";
+import { Point } from "./generativeFillInterfaces";
+
+export class BrushHandler {
+  static brushCircle = (
+    x: number,
+    y: number,
+    brushRadius: number,
+    ctx: CanvasRenderingContext2D
+  ) => {
+    ctx.globalCompositeOperation = "destination-out";
+    ctx.shadowColor = "#ffffffeb";
+    ctx.shadowBlur = 5;
+    ctx.beginPath();
+    ctx.arc(x, y, brushRadius, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.closePath();
+  };
+
+  static brushCircleOverlay = (
+    x: number,
+    y: number,
+    brushRadius: number,
+    ctx: CanvasRenderingContext2D,
+    fillColor: string,
+    erase: boolean
+  ) => {
+    ctx.globalCompositeOperation = "destination-out";
+    // ctx.globalCompositeOperation = erase ? "destination-out" : "source-over";
+    ctx.fillStyle = fillColor;
+    ctx.shadowColor = eraserColor;
+    ctx.shadowBlur = 5;
+    ctx.beginPath();
+    ctx.arc(x, y, brushRadius, 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.closePath();
+  };
+
+  static createBrushPath = (
+    startPoint: Point,
+    endPoint: Point,
+    brushRadius: number,
+    ctx: CanvasRenderingContext2D
+  ) => {
+    const dist = GenerativeFillMathHelpers.distanceBetween(
+      startPoint,
+      endPoint
+    );
+
+    for (let i = 0; i < dist; i += 5) {
+      const s = i / dist;
+      BrushHandler.brushCircle(
+        startPoint.x * (1 - s) + endPoint.x * s,
+        startPoint.y * (1 - s) + endPoint.y * s,
+        brushRadius,
+        ctx
+      );
+    }
+  };
+
+  static createBrushPathOverlay = (
+    startPoint: Point,
+    endPoint: Point,
+    brushRadius: number,
+    ctx: CanvasRenderingContext2D,
+    fillColor: string,
+    erase: boolean
+  ) => {
+    const dist = GenerativeFillMathHelpers.distanceBetween(
+      startPoint,
+      endPoint
+    );
+
+    for (let i = 0; i < dist; i += 5) {
+      const s = i / dist;
+      BrushHandler.brushCircleOverlay(
+        startPoint.x * (1 - s) + endPoint.x * s,
+        startPoint.y * (1 - s) + endPoint.y * s,
+        brushRadius,
+        ctx,
+        fillColor,
+        erase
+      );
+    }
+  };
+}
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/GenerativeFillMathHelpers.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/GenerativeFillMathHelpers.ts
new file mode 100644
index 000000000..027b99a52
--- /dev/null
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/GenerativeFillMathHelpers.ts
@@ -0,0 +1,11 @@
+import { Point } from "./generativeFillInterfaces";
+
+export class GenerativeFillMathHelpers {
+  // math helpers
+  static distanceBetween = (p1: Point, p2: Point) => {
+    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
+  };
+  static angleBetween = (p1: Point, p2: Point) => {
+    return Math.atan2(p2.x - p1.x, p2.y - p1.y);
+  };
+}
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..1c726afbb
--- /dev/null
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
@@ -0,0 +1,146 @@
+import { RefObject } from "react";
+import { OPENAI_KEY } from "../keys";
+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", "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." };
+    }
+  };
+
+  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 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.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);
+      };
+    }
+  };
+
+  // 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;
+  };
+}
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/PointerHandler.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/PointerHandler.ts
new file mode 100644
index 000000000..9e620ad11
--- /dev/null
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/PointerHandler.ts
@@ -0,0 +1,15 @@
+import { Point } from "./generativeFillInterfaces";
+
+export class PointerHandler {
+  static getPointRelativeToElement = (
+    element: HTMLElement,
+    e: React.PointerEvent | PointerEvent,
+    scale: number
+  ): Point => {
+    const boundingBox = element.getBoundingClientRect();
+    return {
+      x: (e.clientX - boundingBox.x) / scale,
+      y: (e.clientY - boundingBox.y) / scale,
+    };
+  };
+}
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillConstants.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillConstants.ts
new file mode 100644
index 000000000..78903b9aa
--- /dev/null
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillConstants.ts
@@ -0,0 +1,5 @@
+// constants
+export const canvasSize = 1024;
+
+export const activeColor = "#1976d2";
+export const eraserColor = "#e1e9ec";
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillInterfaces.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillInterfaces.ts
new file mode 100644
index 000000000..9b9b9d3c2
--- /dev/null
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/generativeFillInterfaces.ts
@@ -0,0 +1,16 @@
+// interfaces
+export interface CursorData {
+  x: number;
+  y: number;
+  width: number;
+}
+
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export enum BrushMode {
+  ADD,
+  SUBTRACT,
+}