scrapbooks with tags

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}