diff options
5 files changed, 70 insertions, 71 deletions
diff --git a/src/client/views/nodes/imageEditor/ImageEditor.tsx b/src/client/views/nodes/imageEditor/ImageEditor.tsx index a742673e0..a39878924 100644 --- a/src/client/views/nodes/imageEditor/ImageEditor.tsx +++ b/src/client/views/nodes/imageEditor/ImageEditor.tsx @@ -28,9 +28,6 @@ import { PointerHandler } from './imageEditorUtils/PointerHandler'; import { activeColor, bgColor, brushWidthOffset, canvasSize, eraserColor, freeformRenderSize, newCollectionSize, offsetDistanceY, offsetX } from './imageEditorUtils/imageEditorConstants'; import { CutMode, CursorData, ImageDimensions, ImageEditTool, ImageToolType, Point } from './imageEditorUtils/imageEditorInterfaces'; import { DocumentView } from '../DocumentView'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { ImageField } from '../../../../fields/URLField'; -import { resolve } from 'url'; import { DocData } from '../../../../fields/DocSymbols'; import { SettingsManager } from '../../../util/SettingsManager'; @@ -43,6 +40,13 @@ interface GenerativeFillProps { // Added field on image doc: gen_fill_children: List of children Docs +/** + * The image editor interface can be accessed by opening a document's context menu, then going to Options --> Open Image Editor. + * The image editor supports various operations on images. Currently, there is a Generative Fill feature that allows users to erase + * part of an image, add an optional prompt, and send this to GPT. GPT then returns a newly generated image that replaces the erased + * portion based on the optional prompt. There is also an image cutting tool that allows users to cut images in different ways to + * reshape the images, take out portions of images, and overall use them more creatively (see the header comment for cutImage() for more information). + */ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc }: GenerativeFillProps) => { const canvasRef = useRef<HTMLCanvasElement>(null); const canvasBackgroundRef = useRef<HTMLCanvasElement>(null); diff --git a/src/client/views/nodes/imageEditor/imageEditorUtils/BrushHandler.ts b/src/client/views/nodes/imageEditor/imageEditorUtils/BrushHandler.ts index a9fe02d4f..ed39375e0 100644 --- a/src/client/views/nodes/imageEditor/imageEditorUtils/BrushHandler.ts +++ b/src/client/views/nodes/imageEditor/imageEditorUtils/BrushHandler.ts @@ -1,12 +1,6 @@ import { GenerativeFillMathHelpers } from './GenerativeFillMathHelpers'; import { eraserColor } from './imageEditorConstants'; import { Point } from './imageEditorInterfaces'; -import { points } from '@turf/turf'; - -export enum BrushType { - GEN_FILL, - CUT, -} export class BrushHandler { static brushCircleOverlay = (x: number, y: number, brushRadius: number, ctx: CanvasRenderingContext2D, fillColor: string /* , erase: boolean */) => { @@ -20,7 +14,7 @@ export class BrushHandler { ctx.closePath(); }; - static createBrushPathOverlay = (startPoint: Point, endPoint: Point, brushRadius: number, ctx: CanvasRenderingContext2D, fillColor: string, brushType: BrushType) => { + static createBrushPathOverlay = (startPoint: Point, endPoint: Point, brushRadius: number, ctx: CanvasRenderingContext2D, fillColor: string) => { const dist = GenerativeFillMathHelpers.distanceBetween(startPoint, endPoint); const pts: Point[] = []; for (let i = 0; i < dist; i += 5) { diff --git a/src/client/views/nodes/imageEditor/imageEditorUtils/imageEditorConstants.ts b/src/client/views/nodes/imageEditor/imageEditorUtils/imageEditorConstants.ts index 4772304bc..594d6d9fc 100644 --- a/src/client/views/nodes/imageEditor/imageEditorUtils/imageEditorConstants.ts +++ b/src/client/views/nodes/imageEditor/imageEditorUtils/imageEditorConstants.ts @@ -3,6 +3,7 @@ export const freeformRenderSize = 300; export const offsetDistanceY = freeformRenderSize + 400; export const offsetX = 200; export const newCollectionSize = 500; +export const brushWidthOffset = 10; export const activeColor = '#1976d2'; export const eraserColor = '#e1e9ec'; diff --git a/src/client/views/smartdraw/DrawingFillHandler.tsx b/src/client/views/smartdraw/DrawingFillHandler.tsx index c3c762181..8f71b150d 100644 --- a/src/client/views/smartdraw/DrawingFillHandler.tsx +++ b/src/client/views/smartdraw/DrawingFillHandler.tsx @@ -1,50 +1,50 @@ -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'; +// 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'; -export class DrawingFillHandler { - static drawingToImage = async (drawing: Doc, prompt: string) => { - const imageField = await DocumentView.GetDocImage(drawing); - if (!imageField) return; - const { href } = ImageCast(imageField).url; - const hrefParts = href.split('.'); - const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`; - try { - const response = await fetch(hrefComplete); - const blob: Blob = await response.blob(); - const strength: number = 100; - const img = await Networking.PostToServer('/queryFireflyImage', { prompt, blob, strength }); - DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(img, {}), OpenWhere.addRight); - // Networking.PostToServer('/queryFireflyImage', { prompt, blob, strength }).then(img => DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(img, {}), OpenWhere.addRight)); - } catch (error) { - console.error('Error fetching image:', error); - return; - } +// export class DrawingFillHandler { +// static drawingToImage = async (drawing: Doc, prompt: string) => { +// const imageField = await DocumentView.GetDocImage(drawing); +// if (!imageField) return; +// const { href } = ImageCast(imageField).url; +// const hrefParts = href.split('.'); +// const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`; +// try { +// const response = await fetch(hrefComplete); +// const blob: Blob = await response.blob(); +// const strength: number = 100; +// const img = await Networking.PostToServer('/queryFireflyImage', { prompt, blob, strength }); +// DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(img, {}), OpenWhere.addRight); +// // Networking.PostToServer('/queryFireflyImage', { prompt, blob, strength }).then(img => DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(img, {}), OpenWhere.addRight)); +// } catch (error) { +// console.error('Error fetching image:', error); +// return; +// } - // const image = new Image(); - // image.src = imageField.url?.href; - // // image.onload = async () => { - // 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)); - // }; - }; -} +// // const image = new Image(); +// // image.src = imageField.url?.href; +// // // image.onload = async () => { +// // 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/client/views/smartdraw/StickerPalette.tsx b/src/client/views/smartdraw/StickerPalette.tsx index 468d0fd13..d56878f10 100644 --- a/src/client/views/smartdraw/StickerPalette.tsx +++ b/src/client/views/smartdraw/StickerPalette.tsx @@ -56,6 +56,10 @@ export class StickerPalette extends ObservableReactComponent<StickerPaletteProps makeObservable(this); } + componentWillUnmount() { + this.resetPalette(true); + } + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(StickerPalette, fieldKey); } @@ -145,19 +149,15 @@ export class StickerPalette extends ObservableReactComponent<StickerPaletteProps generateDrawings = action(async () => { this._isLoading = true; this._props.Document[DocData].data = undefined; - for (let i = 0; i < 3; i++) { - try { - SmartDrawHandler.Instance.AddDrawing = this.addDrawing; - this._canInteract = false; - if (this._showRegenerate) { - await SmartDrawHandler.Instance.regenerate(this._opts, this._gptRes[i], this._userInput); - } else { - await SmartDrawHandler.Instance.drawWithGPT({ X: 0, Y: 0 }, this._userInput, this._opts.complexity, this._opts.size, this._opts.autoColor); - } - } catch (e) { - console.log('Error generating drawing', e); - } - } + SmartDrawHandler.Instance.AddDrawing = this.addDrawing; + this._canInteract = false; + await Promise.all( + Array.from({ length: 3 }).map((_, i) => { + return this._showRegenerate + ? SmartDrawHandler.Instance.regenerate(this._opts, this._gptRes[i], this._userInput) + : SmartDrawHandler.Instance.drawWithGPT({ X: 0, Y: 0 }, this._userInput, this._opts.complexity, this._opts.size, this._opts.autoColor); + }) + ); this._opts.text !== '' ? (this._opts.text = `${this._opts.text} ~~~ ${this._userInput}`) : (this._opts.text = this._userInput); this._userInput = ''; this._isLoading = false; |