diff options
| -rw-r--r-- | src/client/views/smartdraw/DrawingFillHandler.tsx | 48 | ||||
| -rw-r--r-- | src/server/ApiManagers/FireflyManager.ts | 90 |
2 files changed, 96 insertions, 42 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)); + }; +} diff --git a/src/server/ApiManagers/FireflyManager.ts b/src/server/ApiManagers/FireflyManager.ts index 29aed2c54..55fa1e461 100644 --- a/src/server/ApiManagers/FireflyManager.ts +++ b/src/server/ApiManagers/FireflyManager.ts @@ -14,43 +14,43 @@ export default class FireflyManager extends ApiManager { console.error('Error:', error); return ''; }); - askFirefly = (prompt: string = 'a realistic illustration of a cat coding') => { - const fetched = this.getBearerToken().then(response => - response.json().then((data: { access_token: string }) => - fetch('https://firefly-api.adobe.io/v3/images/generate', { - method: 'POST', - headers: [ - ['Content-Type', 'application/json'], - ['Accept', 'application/json'], - ['x-api-key', process.env._CLIENT_FIREFLY_CLIENT_ID ?? ''], - ['Authorization', `Bearer ${data.access_token}`], - ], - body: `{ "prompt": "${prompt}" }`, - }) - .then(response => response.json().then(json => JSON.stringify((json.outputs?.[0] as { image: { url: string } })?.image))) - .catch(error => { - console.error('Error:', error); - return ''; - }) - ) - ); - return fetched; - }; + // askFirefly = (prompt: string = 'a realistic illustration of a cat coding') => { + // const fetched = this.getBearerToken().then(response => + // response.json().then((data: { access_token: string }) => + // fetch('https://firefly-api.adobe.io/v3/images/generate', { + // method: 'POST', + // headers: [ + // ['Content-Type', 'application/json'], + // ['Accept', 'application/json'], + // ['x-api-key', process.env._CLIENT_FIREFLY_CLIENT_ID ?? ''], + // ['Authorization', `Bearer ${data.access_token}`], + // ], + // body: `{ "prompt": "${prompt}" }`, + // }) + // .then(response => response.json().then(json => JSON.stringify((json.outputs?.[0] as { image: { url: string } })?.image))) + // .catch(error => { + // console.error('Error:', error); + // return ''; + // }) + // ) + // ); + // return fetched; + // }; - askFireflyStructure = (prompt: string = 'a realistic illustration of a cat coding', strength: number, imageReference: ) => { + askFirefly = (prompt: string = 'a realistic illustration of a cat coding', uploadId: string, strength: number) => { const fetched = this.getBearerToken().then(response => response.json().then((data: { access_token: string }) => { - const body = { + const body: any = { prompt: prompt, structure: { strength: strength, imageReference: { source: { - uploadId: - } - } - } - } + uploadId: uploadId, + }, + }, + }, + }; return fetch('https://firefly-api.adobe.io/v3/images/generate', { method: 'POST', headers: [ @@ -65,13 +65,13 @@ export default class FireflyManager extends ApiManager { .catch(error => { console.error('Error:', error); return ''; - }) - }) + }); + }) ); return fetched; }; - uploadImageToFirefly = (image: File | Blob) => { + uploadImageToFirefly = (image: Blob) => { const fetched = this.getBearerToken().then(response => response.json().then((data: { access_token: string }) => fetch('https://firefly-api.adobe.io/v3/uploads', { @@ -79,29 +79,35 @@ export default class FireflyManager extends ApiManager { headers: [ ['Content-Type', image.type], ['x-api-key', process.env._CLIENT_FIREFLY_CLIENT_ID ?? ''], - ['Authorization', `Bearer ${data.access_token}`], // You can replace this with a dynamic token if needed + ['Authorization', `Bearer ${data.access_token}`], ], body: image, }) - .then(response => response.json()) - .then(data => data.uploadId) // Extract the uploadId from the response - .catch(error => { - console.error('Error uploading image:', error); - return ''; - }); + .then(response => response.json()) + .then(data => data.uploadId) // Extract the uploadId from the response + .catch(error => { + console.error('Error:', error); + return ''; + }) + ) + ); + return fetched; }; protected initialize(register: Registration): void { register({ method: Method.POST, subscription: '/queryFireflyImage', - secureHandler: ({ req, res }) => - this.askFirefly(req.body.prompt).then(fire => + secureHandler: async ({ req, res }) => { + const { prompt, imageBlob, strength = 0.5 } = req.body; + const uploadId = imageBlob ? await this.uploadImageToFirefly(imageBlob) : null; + this.askFirefly(prompt, uploadId, strength).then(fire => DashUploadUtils.UploadImage(JSON.parse(fire).url).then(info => { if (info instanceof Error) _invalid(res, info.message); else _success(res, info.accessPaths.agnostic.client); }) - ), + ); + }, }); } } |