diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/views/nodes/ImageBox.tsx | 7 | ||||
| -rw-r--r-- | src/client/views/nodes/scrapbook/ScrapbookBox.tsx | 66 |
2 files changed, 66 insertions, 7 deletions
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 89fa9942d..bd612d04f 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -137,7 +137,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { base64, `Classify this image as PERSON or LANDSCAPE. You may only respond with one of these two options. Then provide five additional descriptive tags to describe the image for a total of 6 words outputted, - delimited by spaces and commas. Then add one final summary tag (separated by underscores) + delimited by spaces. For example: "LANDSCAPE BUNNY NATURE FOREST PEACEFUL OUTDOORS". Then add one final lengthier summary tag (separated by underscores) that describes the image.` ); @@ -148,8 +148,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { // 5) stash it on the Doc // overwrite any old tags so re-runs still work + const tokens = label.split(/\s+/); this.Document.$tags_chat = new List<string>(); - (this.Document.$tags_chat as List<string>).push(label); + tokens.forEach(tok => { + (this.Document.$tags_chat as List<string>).push(tok)}); + //!!! changed may 11 (this.Document.$tags_chat as List<string>).push(label); // 6) flip on “show tags” in the layout // (same flag that ImageLabelBox.toggleDisplayInformation uses) diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx index ad3bfa7ad..9ffc13e6e 100644 --- a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx +++ b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx @@ -23,6 +23,8 @@ import { IReactionDisposer } from 'mobx'; import { observer } from 'mobx-react'; import { ImageField } from '../../../../fields/URLField'; import { runInAction } from 'mobx'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faRedoAlt } from '@fortawesome/free-solid-svg-icons'; enum ScrapbookPresetType { Classic = 'Classic', @@ -429,10 +431,12 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() } - async generateAiImageCorrect() { + async generateAiImageCorrect(prompt? : string) { this.loading = true; - - const prompt = 'A serene mountain landscape at sunrise, ultra-wide, pastel sky, abstract, scrapbook background'; + + if(!prompt){ + prompt = 'A serene mountain landscape at sunrise, ultra-wide, pastel sky, abstract, scrapbook background'; + } const dimensions = FireflyImageDimensions.Square; SmartDrawHandler.CreateWithFirefly(prompt, dimensions) @@ -538,8 +542,31 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() return false; }; + render() { + /*const internalTags = DocListCast(this.dataDoc[this.fieldKey]) + .flatMap(ph => StrListCast(ph.$tags_chat)) + .join(' ');*/ + const slots = DocListCast(this.dataDoc[this.fieldKey]); + + // 2) recursive unwrap: + const unwrap = (items: Doc[]): Doc[] => + items.flatMap(d => + d.$type === DocumentType.COL + ? unwrap(DocListCast(d[Doc.LayoutDataKey(d)])) + : [d] + ); + + // 3) produce a flat list of every doc, unwrapping any number of nested COLs + const allDocs: Doc[] = unwrap(slots); + const internalTags = '' + + const regenPrompt = internalTags + ? `Create a new background using these tags: ${internalTags}` + : 'A serene mountain landscape at sunrise, ultra-wide, pastel sky, abstract, scrapbook background'; + + return ( <div style={{ background: 'beige', width: '100%', height: '100%' }}> @@ -564,8 +591,37 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {...this._props} Document={this.imgDoc} fieldKey="data" - /> - )} <CollectionView + />)} + + {this._props.isContentActive() && ( + <div + className="scrapbookBox-ui" + style={{ + position: 'absolute', + top: 8, + right: 8, + zIndex: 20, + }} + onPointerDown={e => e.stopPropagation()} + > + <button + type="button" + title="Regenerate Background" + onClick={() => this.generateAiImageCorrect(regenPrompt)} + style={{ + background: 'white', + border: '1px solid #ccc', + borderRadius: 4, + padding: '4px 8px', + cursor: 'pointer', + }} + > + <FontAwesomeIcon icon={faRedoAlt} /> Regenerate + </button> + </div> + )} + + <CollectionView {...this._props} // setContentViewBox={emptyFunction} rejectDrop={this.rejectDrop} |