diff options
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 95 |
1 files changed, 50 insertions, 45 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 6e9e503f4..b45409a75 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1,4 +1,4 @@ -import { Button, Colors, Type } from '@dash/components'; +import { Button, Colors, NumberDropdown, Size, Type } from '@dash/components'; import { Slider } from '@mui/material'; import { Bezier } from 'bezier-js'; import { Property } from 'csstype'; @@ -2162,58 +2162,63 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection ); } + @observable private _regenerateLoading = false; @observable private _regenInput = ''; + @observable private _canInteract = true; @observable private _drawingFillInput = ''; @observable private _regenLoading = false; @observable private _drawingFillLoading = false; - @observable private _fireflyRefStrength = 50; + @observable private _fireflyRefStrength = 0; componentAIView = () => { return ( - <div className="collectionfreeformview-aiView" onPointerDown={e => e.stopPropagation()}> - <div className="collectionfreeformview-aiView-options-container"> - <span className="collectionfreeformview-aiView-subtitle">Firefly:</span> - <div className="collectionfreeformview-aiView-options"> - <input - className="collectionfreeformview-aiView-prompt" - placeholder={this._drawingFillInput || StrCast(this.Document.title) || 'Describe image'} - type="text" - value={this._drawingFillInput} - onChange={action(e => (this._drawingFillInput = e.target.value))} + <div className="imageBox-aiView"> + <div className="imageBox-aiView-regenerate"> + <input + style={{ color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }} + className="imageBox-aiView-input" + aria-label="Edit instructions input" + type="text" + value={this._regenInput || StrCast(this.Document.title)} + onChange={action(e => this._canInteract && (this._regenInput = e.target.value))} + placeholder={this._regenInput || StrCast(this.Document.title)} + /> + <div className="imageBox-aiView-regenerate-createBtn"> + <Button + text="Create" + type={Type.TERT} + size={Size.XSMALL} + color={SnappingManager.userColor} + background={SnappingManager.userBackgroundColor} + // style={{ alignSelf: 'flex-end' }} + icon={this._regenerateLoading ? <ReactLoading type="spin" color={SettingsManager.userVariantColor} width={16} height={20} /> : <AiOutlineSend />} + iconPlacement="right" + onClick={action(() => { + this._regenerateLoading = true; + DrawingFillHandler.drawingToImage(this.Document, this._fireflyRefStrength, this._regenInput || StrCast(this.Document.title))?.then(action(() => (this._regenerateLoading = false))); + })} + /> + </div> + <div> + <NumberDropdown + color={SnappingManager.userColor} + background={SnappingManager.userBackgroundColor} + numberDropdownType="slider" + showPlusMinus={false} + formLabel="similarity" + tooltip="structure similarity of created images to current image" + type={Type.PRIM} + width={75} + min={0} + max={100} + number={this._fireflyRefStrength} + size={Size.XXSMALL} + setNumber={undoable( + action(val => this._canInteract && (this._fireflyRefStrength = val as number)), + `${this.Document.title} button set from list` + )} + fillWidth /> - <div className="collectionFreeFormView-aiView-strength"> - <span className="collectionFreeFormView-aiView-similarity">Similarity</span> - <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._fireflyRefStrength = val as number))} - valueLabelDisplay="auto" - /> - </div> - <div className="collectionFreeFormView-aiView-send"> - <Button - text="Send" - type={Type.SEC} - icon={this._drawingFillLoading ? <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 || StrCast(this.Document.title))?.then(action(() => (this._drawingFillLoading = false))); - }), - 'create image' - )} - /> - </div> </div> </div> </div> |