diff options
| -rw-r--r-- | src/client/views/nodes/scrapbook/ScrapbookBox.tsx | 81 |
1 files changed, 47 insertions, 34 deletions
diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx index 9ffc13e6e..593c0ac63 100644 --- a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx +++ b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx @@ -1,4 +1,4 @@ -import { action, makeObservable, observable, reaction } from 'mobx'; +import { action, makeObservable, observable, reaction, computed } from 'mobx'; import * as React from 'react'; import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc'; import { List } from '../../../../fields/List'; @@ -438,7 +438,6 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() prompt = 'A serene mountain landscape at sunrise, ultra-wide, pastel sky, abstract, scrapbook background'; } const dimensions = FireflyImageDimensions.Square; - SmartDrawHandler.CreateWithFirefly(prompt, dimensions) .then(action(doc => { if (doc instanceof Doc) { @@ -542,31 +541,37 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() return false; }; + @computed get regenPrompt() { + const slots = DocListCast(this.dataDoc[this.fieldKey]); + + const unwrap = (items: Doc[]): Doc[] => + items.flatMap(d => + d.$type === DocumentType.COL + ? unwrap(DocListCast(d[Doc.LayoutDataKey(d)])) + : [d] + ); + + const allDocs: Doc[] = unwrap(slots); + const internalTagsSet = new Set<string>(); + + allDocs.forEach(doc => { + const tags = StrListCast(doc.$tags_chat ?? new List<string>()); + tags.forEach(tag => internalTagsSet.add(tag)); + }); + + const internalTags = Array.from(internalTagsSet).join(', '); + + return internalTags + ? `Create a new scrapbook background featuring: ${internalTags}` + : 'A serene mountain landscape at sunrise, ultra-wide, pastel sky, abstract, scrapbook background'; + } 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%' }}> @@ -604,20 +609,28 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() }} 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> + <button + type="button" + title="Regenerate Background" + onClick={() => this.generateAiImageCorrect(this.regenPrompt)} + style={{ + color: 'black', + background: 'white', + border: '1px solid #ccc', + borderRadius: 4, + padding: '4px 8px', + cursor: 'pointer', + display: 'flex', + alignItems: 'center', + gap: '6px', + whiteSpace: 'nowrap', + overflow: 'visible', // important + fontSize: '14px', + }} + > + <FontAwesomeIcon icon={faRedoAlt} /> + <span>Regenerate Background</span> + </button> </div> )} |