diff options
Diffstat (limited to 'src/client/views/collections')
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss | 29 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 98 |
2 files changed, 99 insertions, 28 deletions
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<Partial<collection } @observable private _regenInput = ''; + @observable private _drawingFillInput = ''; @observable private _canInteract = true; - @observable private _regenerateLoading = false; + @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 ( @@ -2218,49 +2230,79 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection componentAIView = () => { const showRegenerate = this.Document[DocData].ai; return ( - <div className="collectionfreeformview-aiView"> - Edit Image with AI + <div className="collectionfreeformview-aiView" onPointerDown={e => e.stopPropagation()}> + Edit Collection with AI {showRegenerate && ( <div className="collectionfreeformview-aiView-regenerate-container"> - {/* <text className="collectionfreeformview-aiView-subtitle">Regenerate AI Image</text> + <text className="collectionfreeformview-aiView-subtitle">Regenerate AI Image</text> <div className="collectionfreeformview-aiView-regenerate"> <input className="collectionfreeformview-aiView-input" aria-label="Edit instructions input" - // className="smartdraw-input" type="text" value={this._regenInput} onChange={action(e => this._canInteract && (this._regenInput = e.target.value))} - // onKeyDown={this.handleKeyPress} placeholder="Prompt (Optional)" /> <Button text="Regenerate" type={Type.SEC} - icon={this._regenerateLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />} + icon={this._regenLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />} iconPlacement="right" onClick={action(async () => { - this._regenerateLoading = true; - SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true).then(newDrawings => { - if (newDrawings[0]) { - } - }); + this._regenLoading = true; + SmartDrawHandler.Instance.CreateDrawingDoc = this.createDrawingDoc; + SmartDrawHandler.Instance.AddDrawing = this.addDrawing; + SmartDrawHandler.Instance.RemoveDrawing = this.removeDrawing; + await SmartDrawHandler.Instance.regenerate([this.Document], undefined, undefined, this._regenInput, true); + this._regenLoading = false; })} /> - <Button - // style={{ alignSelf: 'flex-end' }} - text="Get Variations" - type={Type.SEC} - // icon={this._isLoading && this._regenInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />} - iconPlacement="right" - // onClick={this.handleSendClick} - /> - </div> */} + </div> </div> )} <div className="collectionfreeformview-aiView-options-container"> - {showRegenerate && <text className="collectionfreeformview-aiView-subtitle"> Turn Drawing to Image </text>} - <div className="collectionfreeformview-aiView-options"></div> + <text className="collectionfreeformview-aiView-subtitle"> Create Image with Firefly </text> + <div className="collectionfreeformview-aiView-options"> + <input className="collectionfreeformview-aiView-prompt" placeholder="Prompt (Optional)" type="text" value={this._drawingFillInput} onChange={action(e => this._canInteract && (this._drawingFillInput = e.target.value))} /> + <div className="collectionfreeformview-aiView-strength"> + Reference Strength + <Slider + className="collectionfreeformview-aiView-slider" + sx={{ + '& .MuiSlider-track': { color: SettingsManager.userVariantColor }, + '& .MuiSlider-rail': { color: SettingsManager.userBackgroundColor }, + '& .MuiSlider-thumb': { color: SettingsManager.userVariantColor, '&.Mui-focusVisible, &:hover, &.Mui-active': { boxShadow: `0px 0px 0px 8px${SettingsManager.userColor.slice(0, 7)}10` } }, + }} + min={1} + max={100} + step={1} + size="small" + value={this._fireflyRefStrength} + onChange={action((e, val) => this._canInteract && (this._fireflyRefStrength = val as number))} + valueLabelDisplay="auto" + /> + </div> + <Button + text="Send" + type={Type.SEC} + icon={this._drawingFillLoading && this._drawingFillInput !== '' ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />} + iconPlacement="right" + onClick={undoable( + action(() => { + this._drawingFillLoading = true; + DrawingFillHandler.drawingToImage( + this.props.Document, + this._fireflyRefStrength, + this._drawingFillInput !== '' ? this._drawingFillInput : StrCast(this.props.Document.title) !== 'grouping' ? StrCast(this.props.Document.title) : '' + ); + this._drawingFillInput = ''; + this._drawingFillLoading = false; + }), + 'create image' + )} + /> + </div> </div> </div> ); |