original

2 files changed, 35 insertions, 4 deletions

diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
index d2d6a83f3..ab7e3dfef 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -70,6 +70,8 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
     const undoStack = useRef<string[]>([]);
     // stores redo stack
     const redoStack = useRef<string[]>([]);
+    // will change later, for now, stores an array [<col (generation)>, <row (edit in generation)>]
+    const freeformPosition = useRef<number[]>([0, 0]);
 
     // Undo and Redo
     const handleUndo = () => {
@@ -235,9 +237,9 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
             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', 2);
+            // const res = await ImageUtility.getEdit(imgBlob, maskBlob, input !== '' ? input + ' in the same style' : 'Fill in the image in the same style', 2);
 
-            // const res = await ImageUtility.mockGetEdit();
+            const res = await ImageUtility.mockGetEdit(img.src);
             const { urls } = res as APISuccess;
             const image = new Image();
             image.src = urls[0];
@@ -373,6 +375,35 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD
                             }}
                         />
                     ))}
+                    {edits.length > 0 && (
+                        <div style={{ position: 'relative' }}>
+                            <label
+                                style={{
+                                    position: 'absolute',
+                                    bottom: 10,
+                                    left: 10,
+                                    color: '#ffffff',
+                                    fontSize: '0.8rem',
+                                    letterSpacing: '1px',
+                                    textTransform: 'uppercase',
+                                }}>
+                                Original
+                            </label>
+                            <img
+                                width={100}
+                                height={100}
+                                src={originalImg.current?.src}
+                                style={{ cursor: 'pointer' }}
+                                onClick={() => {
+                                    if (!originalImg.current) return;
+                                    const img = new Image();
+                                    img.src = originalImg.current.src;
+                                    ImageUtility.drawImgToCanvas(img, canvasRef);
+                                    currImg.current = img;
+                                }}
+                            />
+                        </div>
+                    )}
                 </div>
             </div>
             <div>
diff --git a/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
index 91f12f866..48055903c 100644
--- a/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
+++ b/src/client/views/nodes/generativeFill/generativeFillUtils/ImageHandler.ts
@@ -52,10 +52,10 @@ export class ImageUtility {
         }
     };
 
-    static mockGetEdit = async (): Promise<APISuccess | APIError> => {
+    static mockGetEdit = async (mockSrc: string): Promise<APISuccess | APIError> => {
         return {
             status: 'success',
-            urls: ['/assets/shiba.png', '/assets/souffle-dalle.png', '/assets/firefly.png'],
+            urls: [mockSrc, mockSrc, mockSrc],
         };
     };