added image to blob logic and firefly api call in drawingFillHandler

1 files changed, 48 insertions, 0 deletions

diff --git a/src/client/views/smartdraw/DrawingFillHandler.tsx b/src/client/views/smartdraw/DrawingFillHandler.tsx
index e69de29bb..508ee557d 100644
--- a/src/client/views/smartdraw/DrawingFillHandler.tsx
+++ b/src/client/views/smartdraw/DrawingFillHandler.tsx
@@ -0,0 +1,48 @@
+import { action, makeObservable } from 'mobx';
+import { observer } from 'mobx-react';
+import React from 'react';
+import { Doc } from '../../../fields/Doc';
+import { ImageCast } from '../../../fields/Types';
+import { ImageField } from '../../../fields/URLField';
+import { Docs } from '../../documents/Documents';
+import { Networking } from '../../Network';
+import { makeUserTemplateButtonOrImage } from '../../util/DropConverter';
+import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView';
+import { ImageUtility } from '../nodes/imageEditor/imageEditorUtils/ImageHandler';
+import { OpenWhere } from '../nodes/OpenWhere';
+import { ObservableReactComponent } from '../ObservableReactComponent';
+
+@observer
+export class DrawingFillHandler extends ObservableReactComponent<object> {
+    static Instance: DrawingFillHandler;
+
+    constructor(props: object) {
+        super(props);
+        makeObservable(this);
+        DrawingFillHandler.Instance = this;
+    }
+
+    @action
+    drawingToImage = async (drawing: Doc, prompt: string) => {
+        const imageField = await DocumentView.GetDocImage(drawing);
+        if (!imageField) return;
+        const image = new Image();
+        image.src = imageField.url?.href;
+        await new Promise<void>((resolve, reject) => {
+            image.onload = () => resolve();
+            image.onerror = () => reject(new Error('Error loading image'));
+        });
+
+        const canvas = document.createElement('canvas');
+        canvas.width = image.width;
+        canvas.height = image.height;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.clearRect(0, 0, image.width, image.height);
+        ctx.drawImage(image, 0, 0);
+        const blob: Blob = await ImageUtility.canvasToBlob(canvas);
+        const strength: number = 100;
+        Networking.PostToServer('/queryFireflyImage', { prompt, blob, strength }).then(img => DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(img, {}), OpenWhere.addRight));
+    };
+}