diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 32 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.scss | 3 | ||||
| -rw-r--r-- | src/client/views/nodes/FieldView.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/ImageBox.scss | 9 | ||||
| -rw-r--r-- | src/client/views/nodes/ImageBox.tsx | 20 | ||||
| -rw-r--r-- | src/client/views/smartdraw/DrawingFillHandler.tsx | 21 |
6 files changed, 47 insertions, 39 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 5b4f81379..0d593f97f 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -2194,38 +2194,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @observable private _regenInput = ''; @observable private _drawingFillInput = ''; - @observable private _canInteract = true; @observable private _regenLoading = false; @observable private _drawingFillLoading = false; @observable private _fireflyRefStrength = 50; - // _oldDrag: HTMLElement | null = null; - - // onPassiveDrag = (e: PointerEvent) => 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 ( - <div className="imageBox-aiView-history"> - {/* {this._prevImgs.map(img => ( - <img - className="imageBox-aiView-img" - src={img.href} - onClick={() => { - this.dataDoc[this.fieldKey] = new ImageField(img.pathname); - this.dataDoc.ai_firefly_prompt = img.prompt; - this.dataDoc.ai_firefly_seed = img.seed; - }} - /> - ))} */} - </div> - ); - }; componentAIView = () => { return ( @@ -2254,9 +2225,10 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection step={1} size="small" value={this._fireflyRefStrength} - onChange={action((e, val) => this._canInteract && (this._fireflyRefStrength = val as number))} + onChange={action((e, val) => (this._fireflyRefStrength = val as number))} valueLabelDisplay="auto" /> + Reference Strength </div> <Button text="Send" diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss index 8e7307d23..e71f391c6 100644 --- a/src/client/views/nodes/DocumentView.scss +++ b/src/client/views/nodes/DocumentView.scss @@ -276,10 +276,13 @@ right: 0; top: 0; overflow-y: scroll; + scrollbar-width: thin; } .documentView-editorView { width: 100%; + overflow-y: scroll; + scrollbar-width: thin; justify-items: center; background-color: rgb(223, 223, 223); diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index 02d4d9adb..2e40f39ed 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -68,6 +68,7 @@ export interface FieldViewSharedProps { isGroupActive?: () => string | undefined; // is this document part of a group that is active // eslint-disable-next-line no-use-before-define setContentViewBox?: (view: ViewBoxInterface<FieldViewProps>) => void; // called by rendered field's viewBox so that DocumentView can make direct calls to the viewBox + PanelWidth: () => number; PanelHeight: () => number; isDocumentActive?: () => boolean | undefined; // whether a document should handle pointer events diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index a50320f5e..29b24b774 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -145,22 +145,25 @@ display: flex; flex-direction: column; align-items: center; - padding: 5 0 0 5; - gap: 5px; + text-align: center; .imageBox-aiView-img { width: 100%; + padding: 5px; &:hover { filter: brightness(0.8); } } + + .imageBox-aiView-caption { + font-size: 7px; + } } .imageBox-aiView { text-align: center; font-weight: bold; - width: 100%; .imageBox-aiView-subtitle { position: relative; diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 9223fc180..ec6ce8c2a 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -536,7 +536,17 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { ); } + protected _btnWidth = 50; + protected _inputWidth = 50; + protected _sideBtnMaxPanelPct = 0.12; + @observable _filterFunc: ((doc: Doc) => boolean) | undefined = undefined; + @computed get contentScaling() { return this.ScreenToLocalBoxXf().Scale; } // prettier-ignore + @computed get maxWidgetSize() { return Math.min(this._btnWidth * this.contentScaling, (this._props.fitWidth?.(this.Document) && this._props.PanelWidth() > NumCast(this.layoutDoc._width) ? 1 : this._sideBtnMaxPanelPct) * NumCast(this.layoutDoc.width, 1)); } // prettier-ignore + @computed get uiBtnScaling() { return this.maxWidgetSize / this._btnWidth; } // prettier-ignore + @computed get uiInputScaling() { return this.maxWidgetSize / this._inputWidth; } // prettier-ignore + componentAIViewHistory = () => { + const imgs: FireflyImageData[] = this.dataDoc.ai_firefly_history ? JSON.parse(StrCast(this.dataDoc.ai_firefly_history)) : []; return ( <div className="imageBox-aiView-history"> <Button text="Clear History" type={Type.SEC} size={Size.XSMALL} /> @@ -630,7 +640,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { <div className="imageBox-aiView-options-container"> <span className="imageBox-aiView-subtitle"> More Options: </span> <div className="imageBox-aiView-options"> + {showRegenerate && ( + <text className="imageBox-aiView-subtitle" style={{ transform: `scale(${this.uiBtnScaling})` }}> + More Options: + </text> + )} <Button + style={{ transform: `scale(${this.uiBtnScaling})` }} type={Type.TERT} text="Get Text" icon={<FontAwesomeIcon icon="font" />} @@ -646,11 +662,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { }} /> <Button + style={{ transform: `scale(${this.uiBtnScaling})` }} type={Type.TERT} text="Generative Fill" icon={<FontAwesomeIcon icon="fill" />} color={SettingsManager.userBackgroundColor} - // icon={this._isLoading && this._regenInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />} iconPlacement="right" onClick={action(() => { ImageEditorData.Open = true; @@ -660,11 +676,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { })} /> <Button + style={{ transform: `scale(${this.uiBtnScaling})` }} type={Type.TERT} text="Expand" icon={<FontAwesomeIcon icon="expand" />} color={SettingsManager.userBackgroundColor} - // icon={this._isLoading && this._regenInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />} iconPlacement="right" onClick={() => { Networking.PostToServer('/expandImage', { diff --git a/src/client/views/smartdraw/DrawingFillHandler.tsx b/src/client/views/smartdraw/DrawingFillHandler.tsx index d9a01c436..bc8f6c5e0 100644 --- a/src/client/views/smartdraw/DrawingFillHandler.tsx +++ b/src/client/views/smartdraw/DrawingFillHandler.tsx @@ -1,7 +1,7 @@ import { imageUrlToBase64 } from '../../../ClientUtils'; import { Doc } from '../../../fields/Doc'; import { DocData } from '../../../fields/DocSymbols'; -import { ImageCast } from '../../../fields/Types'; +import { DocCast, ImageCast } from '../../../fields/Types'; import { Upload } from '../../../server/SharedMediaTypes'; import { gptDescribeImage } from '../../apis/gpt/GPT'; import { Docs } from '../../documents/Documents'; @@ -11,11 +11,24 @@ import { OpenWhere } from '../nodes/OpenWhere'; import { AspectRatioLimits, FireflyDimensionsMap, FireflyImageDimensions, FireflyStylePresets } from './FireflyConstants'; export class DrawingFillHandler { - static drawingToImage = (drawing: Doc, strength: number, user_prompt: string) => { + static drawingToImage = async (drawing: Doc, strength: number, user_prompt: string) => { const docData = drawing[DocData]; const tags: string[] = ((docData?.tags as unknown as string[]) ?? []).map(tag => tag.slice(1)) ?? []; const styles = tags.filter(tag => FireflyStylePresets.has(tag)); - return DocumentView.GetDocImage(drawing)?.then(imageField => { + const styleDocs = Doc.Links(drawing) + .map(link => Doc.getOppositeAnchor(link, drawing)) + .map(anchor => anchor && DocCast(anchor.embedContainer)); + const styleRef = styleDocs.filter(doc => doc !== undefined && doc.type === 'image').lastElement(); + let styleUrl: string | undefined; + if (styleRef) { + const styleImg = await DocumentView.GetDocImage(styleRef); + if (styleImg) { + const { href } = ImageCast(styleImg).url; + const hrefParts = href.split('.'); + styleUrl = `${hrefParts.slice(0, -1).join('.')}_o.${hrefParts.lastElement()}`; + } + } + DocumentView.GetDocImage(drawing)?.then(imageField => { if (imageField) { const aspectRatio = (drawing.width as number) / (drawing.height as number); let dims: { width: number; height: number }; @@ -35,7 +48,7 @@ export class DrawingFillHandler { .then(gptDescribeImage) .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, structure: structureUrl, strength: strength, presets: styles, styleUrl: styleUrl}) .then((info: Upload.ImageInformation) => DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(info.accessPaths.agnostic.client, { ai: 'firefly', title: user_prompt || prompt, ai_firefly_prompt: user_prompt || prompt, _width: 500, data_nativeWidth: info.nativeWidth, data_nativeHeight: info.nativeHeight }), OpenWhere.addRight) |
