From f273c97121300eb9b242f7272cc1cc56c396ca8b Mon Sep 17 00:00:00 2001 From: eleanor-park Date: Mon, 6 Jan 2025 18:21:02 -0500 Subject: started a previous images display --- src/client/views/nodes/DocumentView.scss | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) (limited to 'src/client/views/nodes/DocumentView.scss') diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 7568e3b57..9490be98c 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -242,7 +242,7 @@ .contentFittingDocumentView * { ::-webkit-scrollbar-track { - background: none; + background: none; } } @@ -270,3 +270,18 @@ position: relative; } } + +.documentView-editorView-history { + position: absolute; + left: 0; + top: 0; +} + +.documentView-editorView { + width: 100%; + overflow-y: scroll; + + .documentView-editorView-resizer { + height: 5px; + } +} -- cgit v1.2.3-70-g09d2 From f5ee4974ab41af5b473aa94332ccdd6449db074f Mon Sep 17 00:00:00 2001 From: eleanor-park Date: Tue, 7 Jan 2025 20:31:56 -0500 Subject: imagebox now has basic ai functionalities --- src/client/views/nodes/DocumentView.scss | 3 ++- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/ImageBox.scss | 8 +++++--- src/client/views/nodes/ImageBox.tsx | 21 +++++++++++++++------ 4 files changed, 23 insertions(+), 11 deletions(-) (limited to 'src/client/views/nodes/DocumentView.scss') diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 9490be98c..82195b9c1 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -273,8 +273,9 @@ .documentView-editorView-history { position: absolute; - left: 0; + right: 0; top: 0; + overflow-y: scroll; } .documentView-editorView { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index f79eadde8..622eccc4f 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -750,7 +750,7 @@ export class DocumentViewInternal extends DocComponent {this._showAIEditor && ( -
+
{this._componentView?.componentAIViewHistory?.() ?? null}
)} diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index 9f1ac11ef..e083f52b4 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -144,17 +144,19 @@ display: flex; flex-direction: column; align-items: center; - padding: 5px; + padding: 5 0 0 5; gap: 5px; - overflow-y: scroll; .imageBox-aiView-img { width: 100%; + + &:hover { + filter: brightness(0.8); + } } } .imageBox-aiView { - overflow-y: scroll; text-align: center; font-weight: bold; align-content: center; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index fc8b7bc27..09daea6bb 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -533,20 +533,26 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { @observable private _regenInput = ''; @observable private _canInteract = true; @observable private _regenerateLoading = false; - @observable private _prevImgUrls: string[] = []; + @observable private _prevImgs: { href: string; pathname: string }[] = []; componentAIViewHistory = () => { return (
- {this._prevImgUrls.map((url: string) => ( - (this.dataDoc[this.fieldKey] = new ImageField(url))} /> + {this._prevImgs.map(img => ( + { + this.dataDoc[this.fieldKey] = new ImageField(img.pathname); + }} + /> ))}
); }; componentAIView = () => { - const field = Cast(this.dataDoc[this.fieldKey], ImageField); + const field = this.dataDoc[this.fieldKey] instanceof ImageField ? Cast(this.dataDoc[this.fieldKey], ImageField, null) : new ImageField(String(this.dataDoc[this.fieldKey])); const showRegenerate = this.Document[DocData].ai; return (
@@ -575,8 +581,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { action(async () => { this._regenerateLoading = true; SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true).then(newDocs => { - this._prevImgUrls.push(this.paths.lastElement()); - this.dataDoc[this.fieldKey] = new ImageField(newDocs[0]); + const url = newDocs[0]; + const imgField = new ImageField(url); + this._prevImgs.length === 0 && this._prevImgs.push({ href: this.paths.lastElement(), pathname: field.url.pathname }); + this.dataDoc[this.fieldKey] = imgField; + this._prevImgs.unshift({ href: this.paths.lastElement(), pathname: url }); this._regenerateLoading = false; this._regenInput = ''; }); -- cgit v1.2.3-70-g09d2 From 51a9f85b4ddc38ac825efcefc0c6db23f3b9914e Mon Sep 17 00:00:00 2001 From: eleanor-park Date: Thu, 9 Jan 2025 11:19:31 -0500 Subject: added ai editor to collections --- src/client/apis/gpt/GPT.ts | 2 +- src/client/documents/Documents.ts | 1 + .../collectionFreeForm/CollectionFreeFormView.scss | 29 +++++++ .../collectionFreeForm/CollectionFreeFormView.tsx | 98 +++++++++++++++------- src/client/views/nodes/DocumentView.scss | 2 + src/client/views/nodes/DocumentView.tsx | 4 +- src/client/views/nodes/ImageBox.scss | 2 - src/client/views/nodes/ImageBox.tsx | 73 +++++++++------- src/client/views/smartdraw/DrawingFillHandler.tsx | 2 +- src/client/views/smartdraw/SmartDrawHandler.tsx | 2 +- 10 files changed, 151 insertions(+), 64 deletions(-) (limited to 'src/client/views/nodes/DocumentView.scss') diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts index 4b0d58cc1..cf3a28a8e 100644 --- a/src/client/apis/gpt/GPT.ts +++ b/src/client/apis/gpt/GPT.ts @@ -260,7 +260,7 @@ const gptDescribeImage = async (image: string): Promise => { content: [ { type: 'text', - text: `Briefly identify what this drawing is, naming all the drawing elements and their location within the image. Do not include anything about the drawing style.`, + text: `Very briefly identify what this drawing is and list all the drawing elements and their location within the image. Do not include anything about the drawing style.`, }, { type: 'image_url', diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 7f1387ff8..0bff74ac1 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -19,6 +19,7 @@ import { DocServer } from '../DocServer'; import { dropActionType } from '../util/DropActionTypes'; import { CollectionViewType, DocumentType } from './DocumentTypes'; import { Id } from '../../fields/FieldSymbols'; +import { FireflyImageData } from '../views/smartdraw/FireflyConstants'; class EmptyBox { public static LayoutString() { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 2c94446fb..dff2cb282 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -304,3 +304,32 @@ display: none; } } + +.collectionFreeformView-aiView { + text-align: center; + font-weight: bold; + width: 100%; + + .collectionfreeformview-aiView-prompt { + height: 25px; + } + + .collectionFreeFormView-aiView-strength { + text-align: center; + } + + .collectionFreeformView-aiView-options-container, + .collectionFreeFormView-aiView-regenerate-container { + text-align: start; + font-weight: normal; + padding: 5px; + } + .collectionFreeformView-aiView-options, + .collectionFreeFormView-aiView-regenerate { + display: flex; + flex-direction: row; + gap: 10px; + justify-content: center; + align-items: center; + } +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 7834eb352..112bfd178 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1,9 +1,5 @@ import { Bezier } from 'bezier-js'; -<<<<<<< HEAD -import { Button, Colors, Type } from 'browndash-components'; -======= -import { Colors } from '@dash/components'; ->>>>>>> 2f7d1f0073943e1eb9e0f34c4459bc0176377697 +import { Button, Colors, Type } from '@dash/components'; import { Property } from 'csstype'; import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; @@ -73,6 +69,9 @@ import './CollectionFreeFormView.scss'; import { MarqueeView } from './MarqueeView'; import ReactLoading from 'react-loading'; import { SettingsManager } from '../../../util/SettingsManager'; +import { Slider } from '@mui/material'; +import { AiOutlineSend } from 'react-icons/ai'; +import { DrawingFillHandler } from '../../smartdraw/DrawingFillHandler'; @observer class CollectionFreeFormOverlayView extends React.Component<{ elements: () => ViewDefResult[] }> { @@ -2194,8 +2193,21 @@ export class CollectionFreeFormView extends CollectionSubView e.stopPropagation(); + // protected createDashEventsTarget = (ele: HTMLDivElement | null) => { + // // this._dropDisposer?.(); + // this._oldDrag?.removeEventListener('pointerdown', this.onPassiveDrag); + // this._oldDrag = ele; + // // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling + // ele?.addEventListener('pointerdown', this.onPassiveDrag, { passive: false }); + // }; componentAIViewHistory = () => { return ( @@ -2218,49 +2230,79 @@ export class CollectionFreeFormView extends CollectionSubView { const showRegenerate = this.Document[DocData].ai; return ( -
- Edit Image with AI +
e.stopPropagation()}> + Edit Collection with AI {showRegenerate && (
- {/* Regenerate AI Image + Regenerate AI Image
this._canInteract && (this._regenInput = e.target.value))} - // onKeyDown={this.handleKeyPress} placeholder="Prompt (Optional)" />
*/} +
)}
- {showRegenerate && Turn Drawing to Image } -
+ Create Image with Firefly +
+ this._canInteract && (this._drawingFillInput = e.target.value))} /> +
+ Reference Strength + this._canInteract && (this._fireflyRefStrength = val as number))} + valueLabelDisplay="auto" + /> +
+
); diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 82195b9c1..a3d47290a 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -281,6 +281,8 @@ .documentView-editorView { width: 100%; overflow-y: scroll; + justify-items: center; + background-color: rgb(223, 223, 223); .documentView-editorView-resizer { height: 5px; diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 622eccc4f..d656bcf50 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -716,8 +716,8 @@ export class DocumentViewInternal extends DocComponent this._props.PanelWidth() * 0.6; - rph = () => this.panelHeight() * 0.6; + rpw = () => this._props.PanelWidth() / 2; + rph = () => this.panelHeight() / 2; @computed get viewBoxContents() { TraceMobx(); const isInk = this.layoutDoc._layout_isSvg && !this._props.LayoutTemplateString; diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index e083f52b4..9532f4ad3 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -159,8 +159,6 @@ .imageBox-aiView { text-align: center; font-weight: bold; - align-content: center; - height: 100%; .imageBox-aiView-subtitle { position: relative; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index fe069eacc..db8bb2c6e 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -1,7 +1,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Tooltip } from '@mui/material'; import axios from 'axios'; -import { Colors, Button, Type } from '@dash/components'; +import { Colors, Button, Type, Size } from '@dash/components'; import { action, computed, IReactionDisposer, makeObservable, observable, ObservableMap, reaction } from 'mobx'; import { observer } from 'mobx-react'; import { extname } from 'path'; @@ -76,6 +76,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { return FieldView.LayoutString(ImageBox, fieldKey); } _ffref = React.createRef(); + _oldWheel: HTMLElement | null = null; private _ignoreScroll = false; private _forcedScroll = false; private _dropDisposer?: DragManager.DragDropDisposer; @@ -94,6 +95,12 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { @observable private _error = ''; @observable private _isHovering = false; // flag to switch between primary and alternate images on hover + // variables for AI Image Editor + @observable private _regenInput = ''; + @observable private _canInteract = true; + @observable private _regenerateLoading = false; + @observable private _prevImgs: FireflyImageData[] = []; + constructor(props: FieldViewProps) { super(props); makeObservable(this); @@ -529,25 +536,34 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { ); } - @observable private _regenInput = ''; - @observable private _canInteract = true; - @observable private _regenerateLoading = false; - @observable private _prevImgs: FireflyImageData[] = []; + onPassiveWheel = (e: WheelEvent) => e.stopPropagation(); + + protected createDashEventsTarget = (ele: HTMLDivElement | null) => { + // this._dropDisposer?.(); + this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); + this._oldWheel = ele; + // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling + ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); + }; componentAIViewHistory = () => { return ( -
+
+
); @@ -557,7 +573,14 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { const field = this.dataDoc[this.fieldKey] instanceof ImageField ? Cast(this.dataDoc[this.fieldKey], ImageField, null) : new ImageField(String(this.dataDoc[this.fieldKey])); const showRegenerate = this.Document[DocData].ai; return ( -
+
{ + this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel); + this._oldWheel = ele; + // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling + ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false }); + }}> Edit Image with AI {showRegenerate && (
@@ -566,11 +589,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { this._canInteract && (this._regenInput = e.target.value))} - // onKeyDown={this.handleKeyPress} placeholder="Prompt (Optional)" />
)} @@ -704,8 +719,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { const { nativeWidth: width, nativeHeight: height } = await Networking.PostToServer('/inspectImage', { source: this.paths[0] }); return { width, height }; }; - savedAnnotations = () => this._savedAnnotations; + render() { TraceMobx(); const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding) as string; diff --git a/src/client/views/smartdraw/DrawingFillHandler.tsx b/src/client/views/smartdraw/DrawingFillHandler.tsx index fea4acb67..43d16df89 100644 --- a/src/client/views/smartdraw/DrawingFillHandler.tsx +++ b/src/client/views/smartdraw/DrawingFillHandler.tsx @@ -35,7 +35,7 @@ export class DrawingFillHandler { .then((hrefBase64: string) => gptDescribeImage(hrefBase64)) .then(prompt => { Networking.PostToServer('/queryFireflyImageFromStructure', - { prompt: user_prompt || prompt, width: dims.width, height: dims.height, structureUrl, strength, styles }) + { prompt: `${user_prompt}, ${prompt}`, width: dims.width, height: dims.height, structureUrl, strength, styles }) .then((info: Upload.ImageInformation) => DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(info.accessPaths.agnostic.client, { ai: 'firefly', ai_firefly_prompt: user_prompt || prompt, nativeWidth: dims.width, nativeHeight: dims.height }), OpenWhere.addRight) diff --git a/src/client/views/smartdraw/SmartDrawHandler.tsx b/src/client/views/smartdraw/SmartDrawHandler.tsx index 9248cbee3..4052ea852 100644 --- a/src/client/views/smartdraw/SmartDrawHandler.tsx +++ b/src/client/views/smartdraw/SmartDrawHandler.tsx @@ -279,7 +279,7 @@ export class SmartDrawHandler extends ObservableReactComponent { nativeWidth: dims.width, nativeHeight: dims.height, ai: 'firefly', - ai_firefly_seed: aiseed, + ai_firefly_seed: seed, ai_firefly_prompt: input, }); DocumentViewInternal.addDocTabFunc(imgDoc, OpenWhere.addRight); -- cgit v1.2.3-70-g09d2 From fd922d7898ed7a405ed47a7e48b85c582d787c07 Mon Sep 17 00:00:00 2001 From: eleanor-park Date: Fri, 10 Jan 2025 15:07:42 -0500 Subject: working on merge conflicts --- .../collectionFreeForm/CollectionFreeFormView.tsx | 9 ++-- src/client/views/nodes/DocumentView.scss | 2 + src/client/views/nodes/ImageBox.scss | 8 +++- src/client/views/nodes/ImageBox.tsx | 49 ++++++++++++++-------- src/client/views/smartdraw/DrawingFillHandler.tsx | 19 +++++++-- src/server/ApiManagers/FireflyManager.ts | 41 ++++++++++++------ 6 files changed, 89 insertions(+), 39 deletions(-) (limited to 'src/client/views/nodes/DocumentView.scss') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 112bfd178..e1144f21a 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -2266,7 +2266,6 @@ export class CollectionFreeFormView extends CollectionSubView this._canInteract && (this._drawingFillInput = e.target.value))} />
- Reference Strength this._canInteract && (this._fireflyRefStrength = val as number))} valueLabelDisplay="auto" /> + Reference Strength