diff options
Diffstat (limited to 'src/client/views/nodes/ImageBox.tsx')
| -rw-r--r-- | src/client/views/nodes/ImageBox.tsx | 62 |
1 files changed, 38 insertions, 24 deletions
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 8a7fb99b1..3a9086777 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -96,8 +96,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { // variables for AI Image Editor @observable private _regenInput = ''; - @observable private _canInteract = true; - @observable private _regenerateLoading = false; + @observable private _regenLoading = false; @observable private _prevImgs: FireflyImageData[] = []; constructor(props: FieldViewProps) { @@ -535,20 +534,31 @@ 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" ref={this.createDashEventsTarget}> - <Button - text="Clear History" - type={Type.SEC} - style={{ marginTop: '5px' }} - size={Size.XSMALL} - onClick={action(() => { - this._prevImgs = []; - this.dataDoc.ai_firefly_history = undefined; - })} - /> + <div className="imageBox-aiView-history"> + {imgs.length >= 2 && ( + <Button + text="Clear History" + type={Type.SEC} + style={{ marginTop: '5px' }} + size={Size.XSMALL} + onClick={action(() => { + this._prevImgs = []; + this.dataDoc.ai_firefly_history = undefined; + })} + /> + )} {imgs.length >= 2 && imgs.map(img => ( <div> @@ -574,26 +584,25 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { const showRegenerate = this.Document[DocData].ai; return ( <div className="imageBox-aiView"> - Edit Image with AI + <text>Edit Image with AI </text> {showRegenerate && ( <div className="imageBox-aiView-regenerate-container"> <div className="imageBox-aiView-regenerate"> <input + style={{ transform: `scale(${this.uiInputScaling})` }} className="imageBox-aiView-input" aria-label="Edit instructions input" type="text" value={this._regenInput} - onChange={action(e => this._canInteract && (this._regenInput = e.target.value))} + onChange={action(e => (this._regenInput = e.target.value))} placeholder="Prompt (Optional)" /> <Button + style={{ transform: `scale(${this.uiBtnScaling})` }} text="Regenerate Image" type={Type.SEC} - // style={{ alignSelf: 'flex-end' }} - icon={this._regenerateLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />} - iconPlacement="right" onClick={action(async () => { - this._regenerateLoading = true; + this._regenLoading = true; SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true).then(newImgs => { if (newImgs[0]) { const url = newImgs[0].pathname; @@ -603,20 +612,25 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { this.dataDoc[this.fieldKey] = imgField; this._prevImgs.unshift({ prompt: newImgs[0].prompt, seed: newImgs[0].seed, href: this.paths.lastElement(), pathname: url }); this.dataDoc.ai_firefly_history = JSON.stringify(this._prevImgs); - this._regenerateLoading = false; + this._regenLoading = false; this._regenInput = ''; } }); })} /> - <Button text="Get Variations" type={Type.SEC} iconPlacement="right" /> + <Button style={{ transform: `scale(${this.uiBtnScaling})` }} text="Get Variations" type={Type.SEC} iconPlacement="right" /> </div> </div> )} <div className="imageBox-aiView-options-container"> - {showRegenerate && <text className="imageBox-aiView-subtitle"> More Options: </text>} <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" />} @@ -632,11 +646,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; @@ -646,11 +660,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', { |