From 6900008b1bb89cca1eab7b95f17ee33fa335282f Mon Sep 17 00:00:00 2001
From: sharkiecodes <lanyi_stroud@brown.edu>
Date: Mon, 28 Apr 2025 20:18:26 -0400
Subject: adding autotagging

---
 src/client/views/nodes/ImageBox.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 999d7089b..38f0390db 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -119,6 +119,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._dropDisposer?.();
         ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.Document));
     };
+
+    autoTag = () => {
+        //Doc.getDescription(this.Document).then(desc => this.desc = desc)
+    }
+
+
+
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
         const visibleAnchor = this._getAnchor?.(this._savedAnnotations, true); // use marquee anchor, otherwise, save zoom/pan as anchor
         const anchor =
-- 
cgit v1.2.3-70-g09d2


From 2a36216359054532084be24ab9034cd08c1c8798 Mon Sep 17 00:00:00 2001
From: sharkiecodes <lanyi_stroud@brown.edu>
Date: Mon, 28 Apr 2025 21:13:31 -0400
Subject: working on autotagging

---
 src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx | 6 ++++--
 src/client/views/nodes/ImageBox.tsx                               | 6 +++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
index 28d3ccd48..bf674c025 100644
--- a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
@@ -158,12 +158,14 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this._currentLabel = e.target.value;
     });
 
-    classifyImagesInBox = async (prompt? : string) => {
+    classifyImagesInBox = async (selectedImages? : Doc[], prompt? : string) => {
         this.startLoading();
 
+        selectedImages ??= this._selectedImages;
+
         // Converts the images into a Base64 format, afterwhich the information is sent to GPT to label them.
 
-        const imageInfos = this._selectedImages.map(async doc => {
+        const imageInfos = selectedImages.map(async doc => {
             if (!doc.$tags_chat) {
                 const url = ImageCastWithSuffix(doc[Doc.LayoutDataKey(doc)], '_o') ?? '';
                 return imageUrlToBase64(url).then(hrefBase64 =>
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 87168d17d..6e6ca3f73 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -46,6 +46,7 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { FocusViewOptions } from './FocusViewOptions';
 import './ImageBox.scss';
 import { OpenWhere } from './OpenWhere';
+import { ImageLabelBox } from '../collections/collectionFreeForm/ImageLabelBox';
 
 const DefaultPath = '/assets/unknown-file-icon-hi.png';
 export class ImageEditorData {
@@ -120,7 +121,10 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.Document));
     };
 
-    autoTag = () => {
+    autoTag = async () => {
+       ImageLabelBox.Instance.classifyImagesInBox([this.Document], "Classify this image as a PERSON or LANDSCAPE. You may only respond with one of these two options");
+        
+
         //Doc.getDescription(this.Document).then(desc => this.desc = desc)
     }
 
-- 
cgit v1.2.3-70-g09d2


From 609ec6d37b5abf94f3ab84784544ebe47804cdf5 Mon Sep 17 00:00:00 2001
From: sharkiecodes <lanyi_stroud@brown.edu>
Date: Tue, 29 Apr 2025 23:01:11 -0400
Subject: Autotag

---
 src/client/apis/gpt/GPT.ts                         | 35 +++++++++++----
 .../collectionFreeForm/ImageLabelBox.tsx           |  2 +-
 src/client/views/nodes/ImageBox.tsx                | 48 ++++++++++++++++++---
 .../views/nodes/formattedText/FormattedTextBox.tsx | 18 ++++++++
 src/client/views/nodes/scrapbook/ScrapbookBox.tsx  | 50 ++++++++++++++++++++--
 src/client/views/search/FaceRecognitionHandler.tsx |  4 +-
 6 files changed, 137 insertions(+), 20 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 9cb47995c..1956fef0c 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -11,6 +11,10 @@ export enum GPTDocCommand {
 
 export const DescriptionSeperator = '======';
 export const DocSeperator = '------';
+export enum TextClassifications {
+    Title = 'title', //a few words 
+    Caption = 'caption', //few sentences
+    LengthyDescription = 'lengthy description' }
 
 enum GPTCallType {
     SUMMARY = 'summary',
@@ -36,6 +40,7 @@ enum GPTCallType {
     SUBSETDOCS = 'subset_docs', // select a subset of documents based on their descriptions
     DOCINFO = 'doc_info', // provide information about a document
     SORTDOCS = 'sort_docs',
+    CLASSIFYTEXT = 'classify_text', // classify text into one of the three categories: title, caption, lengthy description
 }
 
 type GPTCallOpts = {
@@ -48,6 +53,23 @@ type GPTCallOpts = {
 const callTypeMap: { [type in GPTCallType]: GPTCallOpts } = {
     // newest model: gpt-4
     summary: { model: 'gpt-4-turbo', maxTokens: 256, temp: 0.5, prompt: 'Summarize the text given in simpler terms.' },
+    
+    
+    sort_docs: {
+        model: 'gpt-4o',
+        maxTokens: 2048,
+        temp: 0.25,
+        prompt: 
+            `The user is going to give you a list of descriptions. 
+                Each one is separated by '${DescriptionSeperator}' on either side. 
+                Descriptions will vary in length, so make sure to only separate when you see '${DescriptionSeperator}'. 
+                Sort them by the user's specifications. 
+                Make sure each description is only in the list once. Each item should be separated by '${DescriptionSeperator}'. 
+                Immediately afterward, surrounded by '${DocSeperator}' on BOTH SIDES, provide some insight into your reasoning for the way you sorted (and mention nothing about the formatting details given in this description). 
+                It is VERY important that you format it exactly as described, ensuring the proper number of '${DescriptionSeperator[0]}' and '${DocSeperator[0]}' (${DescriptionSeperator.length} of each) and NO commas`,
+    },
+
+    
     edit: { model: 'gpt-4-turbo', maxTokens: 256, temp: 0.5, prompt: 'Reword the text.' },
     stack: {
         model: 'gpt-4o',
@@ -69,17 +91,14 @@ const callTypeMap: { [type in GPTCallType]: GPTCallOpts } = {
         temp: 0.5,
         prompt: "You are a helpful resarch assistant. Analyze the user's data to find meaningful patterns and/or correlation. Please only return a JSON with a correlation column 1 propert, a correlation column 2 property, and an analysis property. ",
     },
-    sort_docs: {
+    //new
+    classify_text: {
         model: 'gpt-4o',
         maxTokens: 2048,
         temp: 0.25,
-        prompt: `The user is going to give you a list of descriptions. 
-                Each one is separated by '${DescriptionSeperator}' on either side. 
-                Descriptions will vary in length, so make sure to only separate when you see '${DescriptionSeperator}'. 
-                Sort them by the user's specifications. 
-                Make sure each description is only in the list once. Each item should be separated by '${DescriptionSeperator}'. 
-                Immediately afterward, surrounded by '${DocSeperator}' on BOTH SIDES, provide some insight into your reasoning for the way you sorted (and mention nothing about the formatting details given in this description). 
-                It is VERY important that you format it exactly as described, ensuring the proper number of '${DescriptionSeperator[0]}' and '${DocSeperator[0]}' (${DescriptionSeperator.length} of each) and NO commas`,
+        prompt: `Based on the content of the the text, classify it into the  
+                most appropriate category: '${TextClassifications.Title}', '${TextClassifications.Caption}', or '${TextClassifications.LengthyDescription}'. Output exclusively the classification in your response.
+                `
     },
     describe: { model: 'gpt-4-vision-preview', maxTokens: 2048, temp: 0, prompt: 'Describe these images in 3-5 words' },
     flashcard: {
diff --git a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
index bf674c025..038b1c6f9 100644
--- a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
@@ -160,7 +160,7 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     classifyImagesInBox = async (selectedImages? : Doc[], prompt? : string) => {
         this.startLoading();
-
+        alert('Classifying images...');
         selectedImages ??= this._selectedImages;
 
         // Converts the images into a Base64 format, afterwhich the information is sent to GPT to label them.
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 6e6ca3f73..0b6814c01 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -7,8 +7,9 @@ import { observer } from 'mobx-react';
 import { extname } from 'path';
 import * as React from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
+import { ImageLabelBoxData } from '../collections/collectionFreeForm/ImageLabelBox';
 import ReactLoading from 'react-loading';
-import { ClientUtils, DashColor, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../ClientUtils';
+import { ClientUtils, imageUrlToBase64, DashColor, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../ClientUtils';
 import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
@@ -16,7 +17,7 @@ import { InkTool } from '../../../fields/InkField';
 import { List } from '../../../fields/List';
 import { ObjectField } from '../../../fields/ObjectField';
 import { ComputedField } from '../../../fields/ScriptField';
-import { Cast, DocCast, ImageCast, NumCast, RTFCast, StrCast } from '../../../fields/Types';
+import { Cast, DocCast, ImageCast, NumCast, RTFCast, StrCast, ImageCastWithSuffix } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
 import { TraceMobx } from '../../../fields/util';
 import { emptyFunction } from '../../../Utils';
@@ -46,6 +47,7 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { FocusViewOptions } from './FocusViewOptions';
 import './ImageBox.scss';
 import { OpenWhere } from './OpenWhere';
+import { gptImageLabel } from '../../apis/gpt/GPT';
 import { ImageLabelBox } from '../collections/collectionFreeForm/ImageLabelBox';
 
 const DefaultPath = '/assets/unknown-file-icon-hi.png';
@@ -122,11 +124,47 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     autoTag = async () => {
-       ImageLabelBox.Instance.classifyImagesInBox([this.Document], "Classify this image as a PERSON or LANDSCAPE. You may only respond with one of these two options");
-        
 
-        //Doc.getDescription(this.Document).then(desc => this.desc = desc)
+    try {
+      // 1) grab the full-size URL
+      const layoutKey = Doc.LayoutDataKey(this.Document);
+      const url = ImageCastWithSuffix(this.Document[layoutKey], '_o') ?? '';
+      if (!url) throw new Error('No image URL found');
+
+      // 2) convert to base64
+      const base64 = await imageUrlToBase64(url);
+      if (!base64) throw new Error('Failed to load image data');
+
+      // 3) ask GPT for exactly one label: PERSON or LANDSCAPE
+      const raw = await gptImageLabel(
+        base64,
+        'Classify this image as PERSON or LANDSCAPE.  You may only respond with one of these two options.'
+      );
+
+      // 4) normalize and prefix
+      const label = raw
+        .trim()
+        .toUpperCase()
+
+      // 5) stash it on the Doc
+      //    overwrite any old tags so re-runs still work
+      this.Document.$tags_chat = new List<string>();
+      (this.Document.$tags_chat as List<string>).push(label);
+
+      // 6) flip on “show tags” in the layout 
+      //    (same flag that ImageLabelBox.toggleDisplayInformation uses)
+      //note to self: What if i used my own field (ex: Document.$auto_description or something
+      //Would i still have to toggle it on for it to show in the metadata? 
+      this.Document._layout_showTags = true;
+
+    } catch (err) {
+      console.error('autoTag failed:', err);
+    } finally {
     }
+  };
+      
+        //Doc.getDescription(this.Document).then(desc => this.desc = desc)
+    
 
 
 
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 98e461a52..f4cbbcc9e 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -64,6 +64,7 @@ import { removeMarkWithAttrs } from './prosemirrorPatches';
 import { RichTextMenu, RichTextMenuPlugin } from './RichTextMenu';
 import { RichTextRules } from './RichTextRules';
 import { schema } from './schema_rts';
+import { tickStep } from 'd3';
 // import * as applyDevTools from 'prosemirror-dev-tools';
 
 export interface FormattedTextBoxProps extends FieldViewProps {
@@ -304,6 +305,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         }
     };
 
+    autoTag = async () => {
+        this.Document.$tags_chat = new List<string>();
+        gptAPICall(RTFCast(this.Document[Doc.LayoutDataKey(this.Document)])?.Text ?? StrCast(this.Document[Doc.LayoutDataKey(this.Document)]),
+        GPTCallType.CLASSIFYTEXT).then(desc => (this.Document.$tags_chat as List<string>).push(desc));
+        this.Document._layout_showTags = true;
+                //or... then(desc => this.Document.$tags_chat = desc);
+    }
+
     leafText = (node: Node) => {
         if (node.type === this.EditorView?.state.schema.nodes.dashField) {
             const refDoc = !node.attrs.docId ? this.rootDoc : (DocServer.GetCachedRefField(node.attrs.docId as string) as Doc);
@@ -1236,6 +1245,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             },
             { fireImmediately: true }
         );
+        
 
         this._disposers.search = reaction(
             () => Doc.IsSearchMatch(this.Document),
@@ -1269,6 +1279,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             { fireImmediately: true }
         );
 
+        this._disposers.tagger = reaction(
+            () => ({ title: this.Document.title, sel: this.props.isSelected() }),
+            action(() => {
+                this.autoTag();
+            }),
+            { fireImmediately: true }
+        );
+    
         if (!this._props.dontRegisterView) {
             this._disposers.record = reaction(
                 () => this.recordingDictation,
diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
index 55d0df585..39729a1c5 100644
--- a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
+++ b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
@@ -1,6 +1,6 @@
 import { action, makeObservable, observable } from 'mobx';
 import * as React from 'react';
-import { Doc, DocListCast } from '../../../../fields/Doc';
+import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
 import { emptyFunction } from '../../../../Utils';
 import { Docs } from '../../../documents/Documents';
@@ -100,20 +100,62 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     };
 
     filterAddDocument = (docIn: Doc | Doc[]) => {
-        const docs = toList(docIn);
+        const docs = toList(docIn); //The docs being added to the scrapbook
+
+        // 1) Grab all template slots:
+        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);
+     
+
         if (docs?.length === 1) {
-            const placeholder = DocListCast(this.dataDoc[this.fieldKey]).find(d =>
+            const placeholder = allDocs.filter(d =>
+
                  (d.accepts_docType === docs[0].$type ||   // match fields based on type, or by analyzing content .. simple example of matching text in placeholder to dropped doc's type
                   RTFCast(d[Doc.LayoutDataKey(d)])?.Text.includes(StrCast(docs[0].$type)))
             ); // prettier-ignore
 
+            //DocListCast(this.Document.items).map(doc => DocListCast(doc[Doc.LayoutDataKey(doc)])
+
             if (placeholder) {
+                /**Look at the autotags and see what matches*RTFCast(d[Doc.LayoutDataKey(d)])?.Text*/
                 // ugh.  we have to tell the underlying view not to add the Doc so that we can add it where we want it.
                 // However, returning 'false' triggers an undo. so this settimeout is needed to make the assignment happen after the undo.
                 setTimeout(
                     undoable(() => {
+
+                        const slotTagsList: Set<string>[] = placeholder.map(doc =>
+                            new Set<string>(StrListCast(doc.$tags_chat))
+                          );
+                          // turn docs[0].$tags_chat into a Set
+                        const targetTags = new Set(StrListCast(docs[0].$tags_chat));
+
                         //StrListCast(placeholder.overrideFields).map(field => (docs[0][field] = placeholder[field])); // // shouldn't need to do this for layout fields since the placeholder already overrides its protos
-                        placeholder.proto = docs[0];
+                        
+                            // find the first placeholder that shares *any* tag
+                        const match = placeholder.find(ph =>
+                            StrListCast(ph.$tags_chat).some(tag => targetTags.has(tag))
+                        );
+                        if (match) {
+                            match.proto = docs[0];
+                          }
+
+                        /*const chosenPlaceholder = placeholder.find(d => 
+                            pl = new Set<string>(StrListCast(d.$tags_chat)
+                            
+                            d.$tags_chat && d.$tags_chat[0].equals(docs[0].$tags_chat)); //why [0]
+                        if (chosenPlaceholder){
+                            chosenPlaceholder.proto = docs[0];}*/
+                         //excess if statement??   
                     }, 'Scrapbook add')
                 );
                 return false;
diff --git a/src/client/views/search/FaceRecognitionHandler.tsx b/src/client/views/search/FaceRecognitionHandler.tsx
index 60744588f..256e68afd 100644
--- a/src/client/views/search/FaceRecognitionHandler.tsx
+++ b/src/client/views/search/FaceRecognitionHandler.tsx
@@ -210,8 +210,8 @@ export class FaceRecognitionHandler {
         } else if (imgDoc.type === DocumentType.LOADING && !imgDoc.loadingError) {
             setTimeout(() => this.classifyFacesInImage(imgDocView), 1000);
         } else {
-            reaction(() => ({sel:imgDocView.isSelected()}), ({sel}) => !sel && imgDoc.type == 'text'
-            && imgDocView.ComponentView?.autoTag?.(), {fireImmediately: true} 
+            reaction(() => ({sel:imgDocView.isSelected()}), ({sel}) => !sel &&
+             imgDocView.ComponentView?.autoTag?.(), {fireImmediately: true} 
         )
             const imgUrl = ImageCast(imgDoc[Doc.LayoutDataKey(imgDoc)]);
             if (imgUrl && !DocListCast(Doc.MyFaceCollection?.examinedFaceDocs).includes(imgDoc[DocData])) {
-- 
cgit v1.2.3-70-g09d2


From 64a9a1a982ec3f11adfed68cc0f18eb61059aff8 Mon Sep 17 00:00:00 2001
From: sharkiecodes <lanyi_stroud@brown.edu>
Date: Sun, 11 May 2025 22:58:07 -0400
Subject: integrated outpainting with scrapbooks

---
 src/client/views/DocumentDecorations.tsx          |   7 +-
 src/client/views/nodes/ImageBox.tsx               |   1 -
 src/client/views/nodes/scrapbook/ScrapbookBox.tsx | 136 ++++++++++++++++++----
 3 files changed, 118 insertions(+), 26 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index ab665e984..94e5e662c 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -36,6 +36,7 @@ import { ImageBox } from './nodes/ImageBox';
 import { OpenWhere, OpenWhereMod } from './nodes/OpenWhere';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
 import { TagsView } from './TagsView';
+import { ScrapbookBox } from './nodes/scrapbook/ScrapbookBox';
 
 interface DocumentDecorationsProps {
     PanelWidth: number;
@@ -446,7 +447,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
     onPointerDown = (e: React.PointerEvent): void => {
         SnappingManager.SetIsResizing(DocumentView.Selected().lastElement()?.Document[Id]); // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them
         DocumentView.Selected()
-            .filter(dv => e.shiftKey && dv.ComponentView instanceof ImageBox)
+            .filter(dv => e.shiftKey && dv.ComponentView instanceof ImageBox || dv.ComponentView instanceof ScrapbookBox)
             .forEach(dv => {
                 dv.Document[dv.ComponentView!.fieldKey + '_outpaintOriginalWidth'] = NumCast(dv.Document._width);
                 dv.Document[dv.ComponentView!.fieldKey + '_outpaintOriginalHeight'] = NumCast(dv.Document._height);
@@ -502,7 +503,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
                 this._interactionLock = true;
                 this._snapPt = thisPt;
 
-                const outpainted = e.shiftKey ? DocumentView.Selected().filter(dv => dv.ComponentView instanceof ImageBox) : [];
+                const outpainted = e.shiftKey ? DocumentView.Selected().filter(dv => dv.ComponentView instanceof ImageBox || dv.ComponentView instanceof ScrapbookBox) : [];
                 const notOutpainted = e.shiftKey ? DocumentView.Selected().filter(dv => !outpainted.includes(dv)) : DocumentView.Selected();
 
                 // Special handling for shift-drag resize (outpainting of Images by resizing without scaling content - fill in with firefly GAI)
@@ -765,7 +766,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
         const rotation = DocumentView.Selected().length === 1 ? seldocview.screenToContentsTransform().inverse().RotateDeg : 0;
 
         // Radius constants
-        const useRounding = seldocview.ComponentView instanceof ImageBox || seldocview.ComponentView instanceof FormattedTextBox || seldocview.ComponentView instanceof CollectionFreeFormView;
+        const useRounding = seldocview.ComponentView instanceof ImageBox || seldocview.ComponentView instanceof ScrapbookBox || seldocview.ComponentView instanceof FormattedTextBox || seldocview.ComponentView instanceof CollectionFreeFormView;
         const borderRadius = numberValue(Cast(seldocview.Document.layout_borderRounding, 'string', null));
         const docMax = Math.min(NumCast(seldocview.Document._width) / 2, NumCast(seldocview.Document._height) / 2);
         const maxDist = Math.min((this.Bounds.r - this.Bounds.x) / 2, (this.Bounds.b - this.Bounds.y) / 2);
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 9d459d7eb..0eb74740f 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -7,7 +7,6 @@ import { observer } from 'mobx-react';
 import { extname } from 'path';
 import * as React from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
-import { ImageLabelBoxData } from '../collections/collectionFreeForm/ImageLabelBox';
 import ReactLoading from 'react-loading';
 import { ClientUtils, imageUrlToBase64, DashColor, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../ClientUtils';
 import { Doc, DocListCast, Opt } from '../../../fields/Doc';
diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
index ced2df6c5..ad3bfa7ad 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 } from 'mobx';
+import { action, makeObservable, observable, reaction } from 'mobx';
 import * as React from 'react';
 import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
@@ -18,7 +18,11 @@ import { ImageBox } from '../ImageBox';
 import { FireflyImageDimensions } from '../../smartdraw/FireflyConstants';
 import { SmartDrawHandler } from '../../smartdraw/SmartDrawHandler';
 import { ImageCast } from '../../../../fields/Types';
-import { lengthToDegrees } from '@turf/turf';
+import { SnappingManager } from '../../../util/SnappingManager';
+import { IReactionDisposer } from 'mobx';
+import { observer } from 'mobx-react';
+import { ImageField } from '../../../../fields/URLField';
+import { runInAction } from 'mobx';
 
 enum ScrapbookPresetType {
     Classic = 'Classic',
@@ -28,16 +32,17 @@ enum ScrapbookPresetType {
 }
 
 // Scrapbook view: a container that lays out its child items in a grid/template
+@observer
 export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
 
-    state = {
-        loading: false,
-        src: '',
-      };
-
-
     @observable createdDate: string;
+    @observable loading = false;
+    @observable src = '';
+    @observable imgDoc: Doc | undefined;
+    private _disposers: { [name: string]: IReactionDisposer } = {};
+    private imageBoxRef = React.createRef<ImageBox>();
+
     // @observable configs : ScrapbookItemConfig[]
 
     constructor(props: FieldViewProps) {
@@ -337,7 +342,7 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
           
         }
     }
-    
+
     async generateAiImage() {
         this.setState({ loading: true });
     
@@ -365,10 +370,98 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     componentDidMount() {
         //this.initScrapbook(ScrapbookPresetType.Default);
         this.setTitle();
-        this.generateAiImage();
+        this.generateAiImageCorrect();
+
+        this._disposers.propagateResize = reaction(
+            () => ({ w: this.layoutDoc._width, h: this.layoutDoc._height }),
+            (dims, prev) => {
+              // prev is undefined on the first run, so bail early
+              if (!prev || !SnappingManager.ShiftKey || !this.imgDoc) return;
+          
+              // either guard the ref…
+              const imageBox = this.imageBoxRef.current;
+              if (!imageBox) return;
+          
+              // …or just hard-code the fieldKey if you know it’s always `"data"`
+              const key = imageBox.props.fieldKey;
+          
+              runInAction(() => {
+                if(!this.imgDoc){
+                    return
+                }
+                // use prev.w/h (the *old* size) as your orig dims
+                this.imgDoc[key + '_outpaintOriginalWidth']  = prev.w;
+                this.imgDoc[key + '_outpaintOriginalHeight'] = prev.h;
+                ;(this.imageBoxRef.current as any).layoutDoc._width  = dims.w
+                ;(this.imageBoxRef.current as any).layoutDoc._height = dims.h
+          
+                // tell the imageDoc to resize itself to the *new* scrapbook size
+                //this.imgDoc._width  = dims.w;
+                //this.imgDoc._height = dims.h;
+                //Doc.SetNativeWidth(this.imgDoc,  dims.w);
+                //Doc.SetNativeHeight(this.imgDoc, dims.h);
+              });
+            }
+        );
+        /*
+        this._disposers.propagateResize = reaction(
+            () => ({ w: this.layoutDoc._width, h: this.layoutDoc._height }),
+            ({ w, h }, prev) => {
+              // only when shift is held (i.e. outpaint mode)
+              if (SnappingManager.ShiftKey && this.imgDoc) {
+                const key = this.imageBoxRef.current!.props.fieldKey; // “data”
+                // record original size on the *image* doc:
+                this.imgDoc[key + '_outpaintOriginalWidth']  = this.imgDoc._width;
+                this.imgDoc[key + '_outpaintOriginalHeight'] = this.imgDoc._height;
+              }
+            }
+          );*/
+        
+
+        //   this._disposers.outpaint = reaction(
+        //     () => this.imgDoc?.[this.imgDoc.fieldKey + '_outpaintOriginalWidth'],
+        //     originalWidth => {
+        //         if (originalWidth !== undefined && !SnappingManager.ShiftKey) {
+        //             this.imageBoxRef.current?.openOutpaintPrompt(); // ✅ CORRECT!
+        //         }
+        //     }
+        // );
         
     }
 
+    async generateAiImageCorrect() {
+        this.loading = true;
+      
+        const 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) {
+              const imgField = ImageCast(doc.data);
+              if (imgField?.url.href) {
+                this.src = imgField.url.href;
+                const url = new ImageField(this.src);
+                this.imgDoc = Docs.Create.ImageDocument(url, { title: 'Generated Background', _width: 1792, _height: 2304,
+                    _nativeWidth: 1792, _nativeHeight: 1792
+                 }, );
+              } else {
+                alert('Image URL missing.');
+                this.src = '';
+              }
+              
+            } else {
+              alert('Failed to generate document.');
+            }
+          }))
+          .catch(e => {
+            alert(`Generation error: ${e}`);
+          })
+          .finally(action(() => {
+            this.loading = false;
+          }));
+      }
+      
     childRejectDrop = (de: DragManager.DropEvent, subView?: DocumentView) => {
         return true; // disable dropping documents onto any child of the scrapbook.
     };
@@ -446,18 +539,18 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     };
 
     render() {
-        const { loading, src } = this.state;
+
         
         return (
         <div style={{ background: 'beige', width: '100%', height: '100%' }}>
-          {loading && (
+          {this.loading && (
           <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', 
                         display: 'flex', justifyContent: 'center', alignItems: 'center',
                         background: 'rgba(255,255,255,0.8)' }}>
             <ReactLoading type="spin" width={50} height={50} />
           </div>
         )}
-          {loading && (
+          {this.loading && (
                 <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', 
                               display: 'flex', justifyContent: 'center', alignItems: 'center',
                               background: 'rgba(255,255,255,0.8)', zIndex: 10 }}>
@@ -465,15 +558,14 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 </div>
             )}
             {/* Render AI-generated background */}
-            {src && (
-                <ImageBox
-                    {...this._props}
-                    Document={Docs.Create.ImageDocument(src, { title: 'Generated Background' })}
-                    fieldKey="data"
-                />
-            )}
-
-                <CollectionView
+            {this.src && this.imgDoc && (
+        <ImageBox
+        ref={this.imageBoxRef}
+          {...this._props}
+          Document={this.imgDoc}
+          fieldKey="data"
+        />
+      )}                <CollectionView
                     {...this._props} //
                     setContentViewBox={emptyFunction}
                     rejectDrop={this.rejectDrop}
-- 
cgit v1.2.3-70-g09d2


From f2642f08d49b787c462a2f34166ab545d0a5110a Mon Sep 17 00:00:00 2001
From: sharkiecodes <lanyi_stroud@brown.edu>
Date: Sun, 11 May 2025 23:28:12 -0400
Subject: outpainting scrapbooks

---
 src/client/views/nodes/ImageBox.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 0eb74740f..89fa9942d 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -135,7 +135,10 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
       // 3) ask GPT for exactly one label: PERSON or LANDSCAPE
       const raw = await gptImageLabel(
         base64,
-        'Classify this image as PERSON or LANDSCAPE.  You may only respond with one of these two options.'
+        `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)
+        that describes the image.`
       );
 
       // 4) normalize and prefix
-- 
cgit v1.2.3-70-g09d2


From a5744b79733654cdaa4ed732b48e2d86f570e31d Mon Sep 17 00:00:00 2001
From: sharkiecodes <lanyi_stroud@brown.edu>
Date: Mon, 12 May 2025 00:43:44 -0400
Subject: scrapbooks with tags

---
 src/client/views/nodes/ImageBox.tsx               |  7 ++-
 src/client/views/nodes/scrapbook/ScrapbookBox.tsx | 66 +++++++++++++++++++++--
 2 files changed, 66 insertions(+), 7 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

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}
-- 
cgit v1.2.3-70-g09d2


From 7626527799c0606fa9c4fd4d26a19189dc7e7a0e Mon Sep 17 00:00:00 2001
From: sharkiecodes <lanyi_stroud@brown.edu>
Date: Sun, 1 Jun 2025 20:24:04 -0400
Subject: reactive backgrounds, tagging of pdfs, group-select and suggested
 templates, text box content influences backgrounds

---
 src/client/apis/gpt/GPT.ts                         |  41 +++-
 .../collections/collectionFreeForm/MarqueeView.tsx |  70 ++++--
 src/client/views/nodes/ImageBox.tsx                |   2 +-
 src/client/views/nodes/PDFBox.tsx                  |  44 ++++
 src/client/views/nodes/VideoBox.tsx                |  51 ++++
 .../views/nodes/formattedText/FormattedTextBox.tsx |  52 +++-
 .../views/nodes/scrapbook/AIPresetGenerator.ts     |  31 +++
 src/client/views/nodes/scrapbook/ScrapbookBox.tsx  | 264 ++++++---------------
 .../views/nodes/scrapbook/ScrapbookPreset.tsx      |   8 +-
 .../nodes/scrapbook/ScrapbookPresetRegistry.ts     |   3 +
 10 files changed, 347 insertions(+), 219 deletions(-)
 create mode 100644 src/client/views/nodes/scrapbook/AIPresetGenerator.ts

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 4dd30f8b3..03fce21f7 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -30,7 +30,6 @@ enum GPTCallType {
     DRAW = 'draw',
     COLOR = 'color',
     TEMPLATE = 'template',
-    SCRAPBOOK = 'scrapbook',
     VIZSUM = 'vizsum',
     VIZSUM2 = 'vizsum2',
     FILL = 'fill',
@@ -41,7 +40,9 @@ enum GPTCallType {
     SUBSETDOCS = 'subset_docs', // select a subset of documents based on their descriptions
     DOCINFO = 'doc_info', // provide information about a document
     SORTDOCS = 'sort_docs',
-    CLASSIFYTEXT = 'classify_text', // classify text into one of the three categories: title, caption, lengthy description
+    CLASSIFYTEXTMINIMAL = 'classify_text_minimal', // classify text into one of the three categories: title, caption, lengthy description
+    CLASSIFYTEXTFULL = 'classify_text_full', //tags pdf content
+    GENERATESCRAPBOOK = 'generate_scrapbook'
 }
 
 type GPTCallOpts = {
@@ -93,7 +94,7 @@ const callTypeMap: { [type in GPTCallType]: GPTCallOpts } = {
         prompt: "You are a helpful resarch assistant. Analyze the user's data to find meaningful patterns and/or correlation. Please only return a JSON with a correlation column 1 propert, a correlation column 2 property, and an analysis property. ",
     },
     //new
-    classify_text: {
+    classify_text_minimal: {
         model: 'gpt-4o',
         maxTokens: 2048,
         temp: 0.25,
@@ -101,6 +102,13 @@ const callTypeMap: { [type in GPTCallType]: GPTCallOpts } = {
                 most appropriate category: '${TextClassifications.Title}', '${TextClassifications.Caption}', or '${TextClassifications.LengthyDescription}'. Output exclusively the classification in your response.
                 `
     },
+    classify_text_full: {
+        model: 'gpt-4o',
+        maxTokens: 2048,
+        temp: 0.25,
+        prompt: `Based on the content of the text, provide six descriptive tags (single words) separated by spaces. 
+            Finally, include a seventh more detailed summary phrase using underscores.`
+    },
     describe: { model: 'gpt-4-vision-preview', maxTokens: 2048, temp: 0, prompt: 'Describe these images in 3-5 words' },
     flashcard: {
         model: 'gpt-4-turbo',
@@ -160,12 +168,29 @@ const callTypeMap: { [type in GPTCallType]: GPTCallOpts } = {
         prompt: 'You will be coloring drawings. You will be given what the drawing is, then a list of descriptions for parts of the drawing. Based on each description, respond with the stroke and fill color that it should be. Follow the rules: 1. Avoid using black for stroke color 2. Make the stroke color 1-3 shades darker than the fill color 3. Use the same colors when possible. Format as {#abcdef #abcdef}, making sure theres a color for each description, and do not include any additional text.',
     },
 
-    scrapbook: {
-        model: 'gpt-4-turbo',
-        maxTokens: 512,
+    generate_scrapbook: {
+        model: 'gpt-4o',
+        maxTokens: 2048,
         temp: 0.5,
-        prompt: 'You will be given a list of field descriptions for one or more templates in the format {field #0: “description”}{field #1: “description”}{...}, and a list of column descriptions in the format {“title”: “description”}{...}. Your job is to match columns with fields based on their descriptions. Your output should be in the following JSON format: {“template_title”:{“#”: “title”, “#”: “title”, “#”: “title” …}, “template_title”:{“#”: “title”, “#”: “title”, “#”: “title” …}} where “template_title” is the templates title as specified in the description provided,  # represents the field # and “title” the title of the column assigned to it. A filled out example might look like {“fivefield2”:{“0”:”Name”, “1”:”Image”, “2”:”Caption”, “3”:”Position”, “4”:”Stats”}, “fivefield3”:{0:”Image”, 1:”Name”, 2:”Caption”, 3:”Stats”, 4:”Position”}. Include one object for each template. IT IS VERY IMPORTANT THAT YOU ONLY INCLUDE TEXT IN THE FORMAT ABOVE, WITH NO ADDITIONS WHATSOEVER. Do not include extraneous ‘#’ characters, ‘column’ for columns, or ‘template’ for templates: ONLY THE TITLES AND NUMBERS. There should never be one column assigned to more than one field (ie. if the “name” column is assigned to field 1, it can’t be assigned to any other fields) . Do this for each template whose fields are described. The descriptions are as follows:',
-    },
+         prompt: `Generate an aesthetically pleasing scrapbook layout preset based on these items.
+    Return your response as JSON in the format:
+    [{
+        "type": DocumentType.RTF or DocumentType.IMG or DocumentType.PDF
+        "tag": a singular tag summarizing the document
+        "x": number,
+        "y": number,
+        "width": number,
+        "height": number
+    }, ...]
+    If there are mutliple documents, you may include 
+    "children": [
+                    { type: 
+                      tag: 
+                      x: , y: , width: , height:
+                    }
+                  ] `
+
+      },
 
     command_type: {
         model: 'gpt-4-turbo',
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index f5e699d3e..0b91d628b 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -28,6 +28,8 @@ import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
 import { SubCollectionViewProps } from '../CollectionSubView';
 import { ImageLabelBoxData } from './ImageLabelBox';
 import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
+import { StrListCast } from '../../../../fields/Doc';
+import { requestAiGeneratedPreset, DocumentDescriptor } from '../../nodes/scrapbook/AIPresetGenerator';
 import './MarqueeView.scss';
 
 interface MarqueeViewProps {
@@ -519,35 +521,71 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
     });
 
 
+   
+    
+    generateScrapbook = action(async () => {
+   
+        const selectedDocs = this.marqueeSelect(false);
+        if (!selectedDocs.length) return;
 
-    @undoBatch
-    generateScrapbook = action(() => {
-        let docs = new Array<Doc>();
+       const descriptors: DocumentDescriptor[] = selectedDocs.map(doc => ({
+            type: typeof doc.$type === 'string' ? doc.$type : 'UNKNOWN',
+            tags: (() => {
+                const internalTagsSet = new Set<string>();
+                StrListCast(doc.$tags_chat ?? new List<string>()).forEach(tag => {
+                internalTagsSet.add(tag);
+                });
+                return Array.from(internalTagsSet);
+            })()
+            }));
+
+
+        const aiPreset = await requestAiGeneratedPreset(descriptors);
+        if (!aiPreset.length) {
+            alert("Failed to generate preset");
+            return;
+        }
+
+        const scrapbookPlaceholders: Doc[] = aiPreset.map(cfg => {
+            const placeholderDoc = Docs.Create.TextDocument(cfg.tag);
+            placeholderDoc.accepts_docType = cfg.type as DocumentType;
+            placeholderDoc.accepts_tagType = cfg.acceptTag ?? cfg.tag;
+
+            const placeholder = new Doc();
+            placeholder.proto = placeholderDoc;
+            placeholder.original = placeholderDoc;
+            placeholder.x = cfg.x;
+            placeholder.y = cfg.y;
+            if (cfg.width != null) placeholder._width = cfg.width;
+            if (cfg.height != null) placeholder._height = cfg.height;
+
+            return placeholder;
+        });
+
+        const scrapbook = Docs.Create.ScrapbookDocument(scrapbookPlaceholders, {
+            backgroundColor: '#e2ad32',
+            x: this.Bounds.left,
+            y: this.Bounds.top,
+            _width: 500,
+            _height: 500,
+            title: 'AI-generated Scrapbook'
+        });
         const selected = this.marqueeSelect(false).map(d => {
             this._props.removeDocument?.(d);
             d.x = NumCast(d.x) - this.Bounds.left;
             d.y = NumCast(d.y) - this.Bounds.top;
-            docs.push(d);
             return d;
         });
-        const scrapbook = Docs.Create.ScrapbookDocument(docs, {
-            backgroundColor: '#e2ad32',
-            x: this.Bounds.left,
-            y: this.Bounds.top,
-            followLinkToggle: true,
-            _width: 200,
-            _height: 200,
-            _layout_showSidebar: true,
-            title: 'overview',
-        });
+
+        this._props.addDocument?.(scrapbook);
+        selectedDocs.forEach(doc => this._props.removeDocument?.(doc));
         const portal = Docs.Create.FreeformDocument(selected, { title: 'summarized documents', x: this.Bounds.left + 200, y: this.Bounds.top, isGroup: true, backgroundColor: 'transparent' });
         DocUtils.MakeLink(scrapbook, portal, { link_relationship: 'summary of:summarized by' });
 
         portal.hidden = true;
         this._props.addDocument?.(portal);
-        //this._props.addLiveTextDocument(summary);
-        this._props.addDocument?.(scrapbook);
         MarqueeOptionsMenu.Instance.fadeOut(true);
+        this.hideMarquee();
     });
 
 
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index bd612d04f..9067f7e0c 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -132,7 +132,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
       const base64 = await imageUrlToBase64(url);
       if (!base64) throw new Error('Failed to load image data');
 
-      // 3) ask GPT for exactly one label: PERSON or LANDSCAPE
+      // 3) ask GPT for labels one label: PERSON or LANDSCAPE
       const raw = await gptImageLabel(
         base64,
         `Classify this image as PERSON or LANDSCAPE.  You may only respond with one of these two options. Then
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 55e6d5596..282b06215 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -34,6 +34,9 @@ import { ImageBox } from './ImageBox';
 import { OpenWhere } from './OpenWhere';
 import './PDFBox.scss';
 import { CreateImage } from './WebBoxRenderer';
+import { gptAPICall } from '../../apis/gpt/GPT';
+import { List } from '../../../fields/List';
+import { GPTCallType } from '../../apis/gpt/GPT';
 
 @observer
 export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@@ -76,6 +79,47 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     }
 
+     autoTag = async () => {
+     try {
+        if (!this._pdf) {
+            throw new Error('PDF not loaded');
+        }
+
+        // 1) Extract text from the first few pages (e.g., first 2 pages)
+        const maxPages = Math.min(2, this._pdf.numPages);
+        let textContent = '';
+        for (let pageNum = 1; pageNum <= maxPages; pageNum++) {
+            const page = await this._pdf.getPage(pageNum);
+            const text = await page.getTextContent();
+            const pageText = text.items.map(item => ('str' in item ? item.str : '')).join(' ');
+            textContent += ` ${pageText}`;
+        }
+
+        if (!textContent.trim()) {
+            throw new Error('No text found in PDF');
+        }
+
+        // 2) Ask GPT to classify and provide descriptive tags
+        const raw = await gptAPICall(
+            `"${textContent.trim().slice(0, 2000)}"`, 
+            GPTCallType.CLASSIFYTEXTFULL
+        );
+
+        // 3) Normalize and store the labels
+        const label = raw.trim().toUpperCase();
+
+        const tokens = label.split(/\s+/);
+        this.Document.$tags_chat = new List<string>();
+        tokens.forEach(tok => (this.Document.$tags_chat as List<string>).push(tok));
+
+        // 4) Show tags in layout
+        this.Document._layout_showTags = true;
+
+    } catch (err) {
+        console.error('PDF autoTag failed:', err);
+    }
+};
+
     replaceCanvases = (oldDiv: HTMLElement, newDiv: HTMLElement) => {
         if (oldDiv.childNodes) {
             for (let i = 0; i < oldDiv.childNodes.length; i++) {
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index fa099178c..0e7afbab1 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -30,6 +30,7 @@ import { StyleProp } from '../StyleProp';
 import { DocumentView } from './DocumentView';
 import { FieldView, FieldViewProps } from './FieldView';
 import { FocusViewOptions } from './FocusViewOptions';
+import { gptImageLabel } from '../../apis/gpt/GPT';
 import './VideoBox.scss';
 
 /**
@@ -109,6 +110,56 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return this._videoRef;
     }
 
+
+     autoTag = async () => {
+    try {
+        if (!this.player) throw new Error('Video element not available.');
+
+        // 1) Extract a frame at the video's midpoint
+        const videoDuration = this.player.duration;
+        const snapshotTime = videoDuration / 2;
+
+        // Seek the video element to the midpoint
+        await new Promise<void>((resolve, reject) => {
+            const onSeeked = () => {
+                this.player!.removeEventListener('seeked', onSeeked);
+                resolve();
+            };
+            this.player!.addEventListener('seeked', onSeeked);
+            this.player!.currentTime = snapshotTime;
+        });
+
+        // 2) Draw the frame onto a canvas and get a base64 representation
+        const canvas = document.createElement('canvas');
+        canvas.width = this.player.videoWidth;
+        canvas.height = this.player.videoHeight;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) throw new Error('Failed to create canvas context.');
+        ctx.drawImage(this.player, 0, 0, canvas.width, canvas.height);
+        const base64Image = canvas.toDataURL('image/png');
+
+        // 3) Send the image data to GPT for classification and descriptive tags
+        const raw = await gptImageLabel(
+            base64Image,
+            `Classify this video frame as either a PERSON or LANDSCAPE.
+            Then provide five additional descriptive tags (single words) separated by spaces.
+            Finally, add one detailed summary phrase using underscores.`
+        );
+
+        // 4) Normalize and store labels in the Document's tags
+        const label = raw.trim().toUpperCase();
+        const tokens = label.split(/\s+/);
+        this.Document.$tags_chat = new List<string>();
+        tokens.forEach(tok => (this.Document.$tags_chat as List<string>).push(tok));
+
+        // 5) Turn on tag display in layout
+        this.Document._layout_showTags = true;
+
+    } catch (err) {
+        console.error('Video autoTag failed:', err);
+    }
+};
+
     componentDidMount() {
         this.unmounting = false;
         this._props.setContentViewBox?.(this); // this tells the DocumentView that this VideoBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the VideoBox when making a link.
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 10becc00b..04a14a15f 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -8,6 +8,7 @@ import { baseKeymap, selectAll, splitBlock } from 'prosemirror-commands';
 import { history } from 'prosemirror-history';
 import { inputRules } from 'prosemirror-inputrules';
 import { keymap } from 'prosemirror-keymap';
+import { runInAction } from 'mobx';
 import { Fragment, Mark, Node, Slice } from 'prosemirror-model';
 import { EditorState, NodeSelection, Plugin, Selection, TextSelection, Transaction } from 'prosemirror-state';
 import { EditorView, NodeViewConstructor } from 'prosemirror-view';
@@ -305,12 +306,53 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         }
     };
 
-    autoTag = async () => {
+  autoTag = async () => {
+
+    const layoutKey = Doc.LayoutDataKey(this.Document);
+    const rawText = RTFCast(this.Document[layoutKey])?.Text ?? StrCast(this.Document[layoutKey]);
+
+    const callType = rawText.includes("[placeholder]")
+        ? GPTCallType.CLASSIFYTEXTMINIMAL
+        : GPTCallType.CLASSIFYTEXTFULL;
+
+    gptAPICall(rawText, callType).then(desc => {
+        runInAction(() => {
+            // Clear existing tags
+            this.Document.$tags_chat = new List<string>();
+
+            // Split GPT response into tokens and push individually
+            const tokens = desc.trim().split(/\s+/);
+            tokens.forEach(tok => {
+                (this.Document.$tags_chat as List<string>).push(tok);
+            });
+
+            this.Document._layout_showTags = true;
+        });
+    });
+        /*this.Document.$tags_chat = new List<string>();
+        gptAPICall(RTFCast(this.Document[Doc.LayoutDataKey(this.Document)])?.Text ?? StrCast(this.Document[Doc.LayoutDataKey(this.Document)]), GPTCallType.CLASSIFYTEXTMINIMAL).then(desc => (this.Document.$tags_chat as List<string>).push(desc));
+        this.Document._layout_showTags = true;*/
+
+
+    // 2) grab whatever’s actually in the field (either RTF or plain string)
+/*
+    const rawText = RTFCast(this.Document[Doc.LayoutDataKey(this.Document)])?.Text ?? StrCast(this.Document[Doc.LayoutDataKey(this.Document)])
+
+    // 3) pick minimal vs. full classification based on "[placeholder]" substring
+    if (rawText.includes("[placeholder]")) {
         this.Document.$tags_chat = new List<string>();
-        gptAPICall(RTFCast(this.Document[Doc.LayoutDataKey(this.Document)])?.Text ?? StrCast(this.Document[Doc.LayoutDataKey(this.Document)]), GPTCallType.CLASSIFYTEXT).then(desc => (this.Document.$tags_chat as List<string>).push(desc));
-        this.Document._layout_showTags = true;
-        //or... then(desc => this.Document.$tags_chat = desc);
-    };
+        gptAPICall(RTFCast(this.Document[Doc.LayoutDataKey(this.Document)])?.Text ?? StrCast(this.Document[Doc.LayoutDataKey(this.Document)]), GPTCallType.CLASSIFYTEXTMINIMAL).then(desc => {
+            (this.Document.$tags_chat as List<string>).push(desc);
+        });
+    } else {
+        this.Document.$tags_chat = new List<string>();
+        gptAPICall(RTFCast(this.Document[Doc.LayoutDataKey(this.Document)])?.Text ?? StrCast(this.Document[Doc.LayoutDataKey(this.Document)]), GPTCallType.CLASSIFYTEXTFULL).then(desc => {
+            (this.Document.$tags_chat as List<string>).push(desc);
+        })};
+    // 4) make sure the UI will show tags
+    this.Document._layout_showTags = true;*/
+    
+};
 
     leafText = (node: Node) => {
         if (node.type === this.EditorView?.state.schema.nodes.dashField) {
diff --git a/src/client/views/nodes/scrapbook/AIPresetGenerator.ts b/src/client/views/nodes/scrapbook/AIPresetGenerator.ts
new file mode 100644
index 000000000..1f159222b
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/AIPresetGenerator.ts
@@ -0,0 +1,31 @@
+import { ScrapbookItemConfig } from './ScrapbookPreset';
+import { GPTCallType, gptAPICall } from '../../../apis/gpt/GPT';
+
+// Represents the descriptor for each document
+export interface DocumentDescriptor {
+  type: string;
+  tags: string[];
+}
+
+// Main function to request AI-generated presets
+export async function requestAiGeneratedPreset(descriptors: DocumentDescriptor[]): Promise<ScrapbookItemConfig[]> {
+    const prompt = createPrompt(descriptors);
+    let aiResponse = await gptAPICall(prompt, GPTCallType.GENERATESCRAPBOOK);
+            // Strip out ```json and ``` if the model wrapped its answer in fences
+    aiResponse = aiResponse
+            .trim()
+            .replace(/^```(?:json)?\s*/, "")   // remove leading ``` or ```json
+            .replace(/\s*```$/, "");           // remove trailing ```
+    const parsedPreset = JSON.parse(aiResponse) as ScrapbookItemConfig[];
+    return parsedPreset;
+}
+
+// Helper to generate prompt text for AI
+function createPrompt(descriptors: DocumentDescriptor[]): string {
+    let prompt = "";
+    descriptors.forEach((desc, index) => {
+        prompt += `${index + 1}. Type: ${desc.type}, Tags: ${desc.tags.join(', ')}\n`;
+    });
+
+    return prompt;
+}
diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
index 391dcb83d..5dd02295c 100644
--- a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
+++ b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
@@ -24,20 +24,72 @@ import { ImageCast } from '../../../../fields/Types';
 import { SnappingManager } from '../../../util/SnappingManager';
 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';
 import { getPresetNames, createPreset } from './ScrapbookPresetRegistry';
 
 
-enum ScrapbookPresetType {
-    Classic = 'Classic',
-    Default = 'Default',
-    Collage = 'Collage',
-    Spotlight = 'Spotlight',
-}
+export function buildPlaceholdersFromConfigs(configs: ScrapbookItemConfig[]): Doc[] {
+  const placeholders: Doc[] = [];
+
+  for (const cfg of configs) {
+    if (cfg.children && cfg.children.length) {
+      // --- nested container ---
+      const childDocs = cfg.children.map(child => {
+        const doc = Docs.Create.TextDocument("[placeholder] " + child.tag);
+        doc.accepts_docType = child.type;
+
+        const ph = new Doc();
+        ph.proto    = doc;
+        ph.original = doc;
+        ph.x        = child.x;
+        ph.y        = child.y;
+        if (child.width  != null) ph._width  = child.width;
+        if (child.height != null) ph._height = child.height;
+        return ph;
+      });
+
+      // wrap those children in a stacking container
+      const protoW = cfg.containerWidth ?? cfg.width;
+      const protoH = cfg.containerHeight ?? cfg.height;
+      const containerProto = Docs.Create.StackingDocument(
+        childDocs,
+        {
+          ...(protoW != null ? { _width:  protoW } : {}),
+          ...(protoH != null ? { _height: protoH } : {}),
+          title: cfg.tag
+        }
+      );
+
+      const ph = new Doc();
+      ph.proto    = containerProto;
+      ph.original = containerProto;
+      ph.x        = cfg.x;
+      ph.y        = cfg.y;
+      if (cfg.width  != null) ph._width  = cfg.width;
+      if (cfg.height != null) ph._height = cfg.height;
+      placeholders.push(ph);
+
+    } else {
+      // --- flat placeholder ---
+      const doc = Docs.Create.TextDocument("[placeholder] " + cfg.tag);
+      doc.accepts_docType = cfg.type;
+      doc.accepts_tagType = cfg.acceptTag ?? cfg.tag;
+
+      const ph = new Doc();
+      ph.proto    = doc;
+      ph.original = doc;
+      ph.x        = cfg.x;
+      ph.y        = cfg.y;
+      if (cfg.width  != null) ph._width  = cfg.width;
+      if (cfg.height != null) ph._height = cfg.height;
+      placeholders.push(ph);
+    }
+  }
 
+  return placeholders;
+}
 // Scrapbook view: a container that lays out its child items in a grid/template
 @observer
 export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@@ -55,14 +107,22 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     constructor(props: FieldViewProps) {
         super(props);
         makeObservable(this);
-    // whenever the preset changes, rebuild the layout
-    reaction(
+        const existingItems = DocListCast(this.dataDoc[this.fieldKey] as List<Doc>);
+    if (!existingItems || existingItems.length === 0) {
+      // Only wire up reaction/setTitle if it's truly a brand-new, empty Scrapbook
+      reaction(
         () => this.selectedPreset,
         presetName => this.initScrapbook(presetName),
         { fireImmediately: true }
-    );
-        this.createdDate = this.getFormattedDate();
-
+      );
+
+      this.createdDate = this.getFormattedDate();
+      this.setTitle();
+    } else {
+      // If items are already present, just preserve whatever was injected.
+      // We still want `createdDate` set so that the UI title bar can show it if needed.
+      this.createdDate = this.getFormattedDate();
+    }
         //this.configs = 
         //ScrapbookPreset.createPreset(presetType);
 
@@ -70,9 +130,7 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         if (!this.dataDoc[this.fieldKey]) {
             this.dataDoc[this.fieldKey] = new List<Doc>();
         }
-        this.createdDate = this.getFormattedDate();
         //this.initScrapbook(ScrapbookPresetType.Default);
-        this.setTitle();
         //this.setLayout(ScrapbookPreset.Spotlight);
     }
 
@@ -99,175 +157,11 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
       }
     
       // 2) build placeholders from the preset
+      const placeholders = buildPlaceholdersFromConfigs(configs);
 
-      const placeholders: Doc[] = [];
-    
-      for (const cfg of configs) {
-        if (cfg.children) {
-          // --- nested container ---
-          const childDocs = cfg.children.map(child => {
-            const doc = Docs.Create.TextDocument(child.tag);
-            doc.accepts_docType = child.type;
-            doc.accepts_tagType = child.acceptTag ?? child.tag;
-    
-            const ph = new Doc();
-            ph.proto    = doc;
-            ph.original = doc;
-            ph.x        = child.x;
-            ph.y        = child.y;
-            if (child.width  != null) ph._width  = child.width;
-            if (child.height != null) ph._height = child.height;
-            return ph;
-          });
-    
-          const protoW = cfg.containerWidth ?? cfg.width;
-          const protoH = cfg.containerHeight ?? cfg.height;
-          const containerProto = Docs.Create.StackingDocument(
-            childDocs,
-            {
-              ...(protoW != null ? { _width:  protoW } : {}),
-              ...(protoH != null ? { _height: protoH } : {}),
-              title: cfg.tag
-            }
-          );
-    
-          const ph = new Doc();
-          ph.proto    = containerProto;
-          ph.original = containerProto;
-          ph.x        = cfg.x;
-          ph.y        = cfg.y;
-          if (cfg.width  != null) ph._width  = cfg.width;
-          if (cfg.height != null) ph._height = cfg.height;
-          placeholders.push(ph);
-    
-        } else {
-          // --- flat placeholder ---
-          const doc = Docs.Create.TextDocument(cfg.tag);
-          doc.accepts_docType = cfg.type;
-          doc.accepts_tagType = cfg.acceptTag ?? cfg.tag;
-    
-          const ph = new Doc();
-          ph.proto    = doc;
-          ph.original = doc;
-          ph.x        = cfg.x;
-          ph.y        = cfg.y;
-          if (cfg.width  != null) ph._width  = cfg.width;
-          if (cfg.height != null) ph._height = cfg.height;
-          placeholders.push(ph);
-        }
-      }
-    
       // 3) commit them into the field
       this.dataDoc[this.fieldKey] = new List<Doc>(placeholders);
     }
-    @action
-    //INACTIVE VER ignore!! not in use rn, implementation ver 1
-    setLayout(preset: ScrapbookPreset) {
-        // helper to wrap a TextDocument proto in a Doc with positioning
-        function makePlaceholder(
-            proto: Doc, x: number, y: number,
-            width: number, height: number
-        ): Doc {
-            const d = new Doc();
-            d.proto = proto;
-            d.original = proto;
-            d.x = x;
-            d.y = y;
-            d._width = width;
-            d._height = height;
-            return d;
-        }
-    
-        let placeholders: Doc[];
-    
-        switch (preset) {
-            case ScrapbookPresetType.Classic:
-                // One large landscape image on top, caption below, sidebar at right
-                const imgClassic = Docs.Create.TextDocument('image');
-                imgClassic.accepts_docType = DocumentType.IMG;
-                imgClassic.accepts_tagType = 'LANDSCAPE';
-                const phImageClassic = makePlaceholder(imgClassic, 0, -120, 300, 180);
-    
-                const captionClassic = Docs.Create.TextDocument('caption');
-                captionClassic.accepts_docType = DocumentType.RTF;
-                captionClassic.accepts_tagType = 'caption';
-                const phCaptionClassic = makePlaceholder(captionClassic, 0, 80, 300, 60);
-    
-                const sidebarClassic = Docs.Create.TextDocument('sidebar');
-                sidebarClassic.accepts_docType = DocumentType.RTF;
-                sidebarClassic.accepts_tagType = 'lengthy description';
-                const phSidebarClassic = makePlaceholder(sidebarClassic, 320, -50, 80, 200);
-    
-                placeholders = [phImageClassic, phCaptionClassic, phSidebarClassic];
-                break;
-    
-            case ScrapbookPresetType.Collage:
-                // Grid of four person images, small captions under each
-                const personDocs: Doc[] = [];
-                for (let i = 0; i < 4; i++) {
-                    const img = Docs.Create.TextDocument(`person ${i+1}`);
-                    img.accepts_docType = DocumentType.IMG;
-                    img.accepts_tagType = 'PERSON';
-                    // position in 2x2 grid
-                    const x = (i % 2) * 160 - 80;
-                    const y = Math.floor(i / 2) * 160 - 80;
-                    personDocs.push(makePlaceholder(img, x, y, 150, 120));
-    
-                    const cap = Docs.Create.TextDocument(`caption ${i+1}`);
-                    cap.accepts_docType = DocumentType.RTF;
-                    cap.accepts_tagType = 'caption';
-                    personDocs.push(makePlaceholder(cap, x, y + 70, 150, 30));
-                }
-                placeholders = personDocs;
-                break;
-    
-            case ScrapbookPresetType.Spotlight:
-                // Full-width title, then a stacking of an internal person image + landscape, then description
-                const titleSpot = Docs.Create.TextDocument('title');
-                titleSpot.accepts_docType = DocumentType.RTF;
-                titleSpot.accepts_tagType = 'title';
-                const phTitleSpot = makePlaceholder(titleSpot, 0, -180, 400, 60);
-    
-                const internalImg = Docs.Create.TextDocument('<person>');
-                internalImg.accepts_docType = DocumentType.IMG;
-                internalImg.accepts_tagType = 'PERSON';
-                const phInternal = makePlaceholder(internalImg, -100, -120, 120, 160);
-    
-                const landscapeImg = Docs.Create.TextDocument('<landscape>');
-                landscapeImg.accepts_docType = DocumentType.IMG;
-                landscapeImg.accepts_tagType = 'LANDSCAPE';
-                const phLandscape = makePlaceholder(landscapeImg, 50, 0, 200, 160);
-    
-                const stack = Docs.Create.StackingDocument(
-                    [phInternal, phLandscape],
-                    { _width: 360, _height: 180, title: 'spotlight stack' }
-                );
-                const phStack = (() => {
-                    const d = new Doc();
-                    d.proto = stack;
-                    d.original = stack;
-                    d.x = 8;
-                    d.y = -84;
-                    d._width = 360;
-                    d._height = 180;
-                    return d;
-                })();
-    
-                const descSpot = Docs.Create.TextDocument('description');
-                descSpot.accepts_docType = DocumentType.RTF;
-                descSpot.accepts_tagType = 'lengthy description';
-                const phDescSpot = makePlaceholder(descSpot, 0, 140, 400, 100);
-    
-                placeholders = [phTitleSpot, phStack, phDescSpot];
-                break;
-    
-            default:
-                placeholders = [];
-        }
-    
-        // finally assign into the dataDoc
-        this.dataDoc[this.fieldKey] = new List<Doc>(placeholders);
-    }
 
     
 
@@ -276,8 +170,8 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         const title = `Scrapbook - ${this.createdDate}`;
         if (this.dataDoc.title !== title) {
             this.dataDoc.title = title;
-
-            const image = Docs.Create.TextDocument('person image');
+            if (!this.dataDoc[this.fieldKey]){
+            const image = Docs.Create.TextDocument('[placeholder] person image');
             image.accepts_docType = DocumentType.IMG;
             image.accepts_tagType = 'PERSON' //should i be writing fields on this doc? clarify diff between this and proto, original
             const placeholder = new Doc();
@@ -289,7 +183,7 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             placeholder.y = -100;
             //placeholder.overrideFields = new List<string>(['x', 'y']);  // shouldn't need to do this for layout fields since the placeholder already overrides its protos
             
-            const summary = Docs.Create.TextDocument('long summary');
+            const summary = Docs.Create.TextDocument('[placeholder] long summary');
             summary.accepts_docType = DocumentType.RTF;
             summary.accepts_tagType = 'lengthy description';
             //summary.$tags_chat = new List<string>(['lengthy description']); //we need to go back and set this
@@ -301,7 +195,7 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             placeholder2._width = 250;
             //placeholder2.overrideFields = new List<string>(['x', 'y', '_width']); // shouldn't need to do this for layout fields since the placeholder already overrides its protos
             
-            const sidebar = Docs.Create.TextDocument('brief sidebar');
+            const sidebar = Docs.Create.TextDocument('[placeholder] brief sidebar');
             sidebar.accepts_docType = DocumentType.RTF;
             sidebar.accepts_tagType = 'title'; //accepts_textType = 'lengthy description'
             const placeholder3 = new Doc();
@@ -314,7 +208,7 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
           
 
-            const internalImg = Docs.Create.TextDocument('landscape internal');
+            const internalImg = Docs.Create.TextDocument('[placeholder] landscape internal');
             internalImg.accepts_docType = DocumentType.IMG;
             internalImg.accepts_tagType = 'LANDSCAPE' //should i be writing fields on this doc? clarify diff between this and proto, original
             const placeholder5 = new Doc();
@@ -350,7 +244,7 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
            difference between passing a new List<Doc> versus just the raw array?
            */
            this.dataDoc[this.fieldKey] = new List<Doc>([placeholder, placeholder2, placeholder3, placeholder4]);
-
+            }
           //this.dataDoc[this.fieldKey] = this.dataDoc[this.fieldKey] ?? new List<Doc>([placeholder, placeholder2, placeholder3, placeholder4]);
 
           
diff --git a/src/client/views/nodes/scrapbook/ScrapbookPreset.tsx b/src/client/views/nodes/scrapbook/ScrapbookPreset.tsx
index fc69552c0..87821c7bf 100644
--- a/src/client/views/nodes/scrapbook/ScrapbookPreset.tsx
+++ b/src/client/views/nodes/scrapbook/ScrapbookPreset.tsx
@@ -47,22 +47,22 @@ export class ScrapbookPreset {
     private static createClassicPreset(): ScrapbookItemConfig[] {
         return [
             { type: DocumentType.IMG,
-              tag: 'LANDSCAPE',
+              tag: '[placeholder] LANDSCAPE',
               acceptTag: 'LANDSCAPE',
               x: 0, y: -100, width: 250, height: 200
             },
             { type: DocumentType.RTF,
-              tag: 'caption',
+              tag: '[placeholder] caption',
               acceptTag: 'caption',
               x: 0, y: 200, width: 250, height: 50
             },
             { type: DocumentType.RTF,
-              tag: 'lengthy description',
+              tag: '[placeholder] lengthy description',
               acceptTag: 'lengthy description',
               x: 280, y: -50, width: 50, height: 200
             },
             { type: DocumentType.IMG,
-              tag: 'PERSON',
+              tag: '[placeholder] PERSON',
               acceptTag: 'PERSON',
               x: -200, y: -100, width: 100, height: 200
             },
diff --git a/src/client/views/nodes/scrapbook/ScrapbookPresetRegistry.ts b/src/client/views/nodes/scrapbook/ScrapbookPresetRegistry.ts
index f7ddd70ab..d6fd3620c 100644
--- a/src/client/views/nodes/scrapbook/ScrapbookPresetRegistry.ts
+++ b/src/client/views/nodes/scrapbook/ScrapbookPresetRegistry.ts
@@ -6,6 +6,9 @@ type PresetGenerator = () => ScrapbookItemConfig[];
 // Internal map of preset name to generator
 const presetRegistry = new Map<string, PresetGenerator>();
 
+
+
+
 /**
  * Register a new scrapbook preset under the given name.
  */
-- 
cgit v1.2.3-70-g09d2


From 42b35b687f081e579cbec524426105df3ac695ef Mon Sep 17 00:00:00 2001
From: sharkiecodes <lanyi_stroud@brown.edu>
Date: Thu, 5 Jun 2025 22:48:33 -0400
Subject: attempting marqueeview gen of multiple scrapbooks

---
 src/client/apis/gpt/GPT.ts                         |  15 +-
 .../collectionFreeForm/MarqueeView.scss            |   2 +-
 .../collections/collectionFreeForm/MarqueeView.tsx | 191 +++++++++++++++++++--
 src/client/views/nodes/ImageBox.tsx                |   6 +
 src/client/views/nodes/VideoBox.tsx                |   3 +-
 src/client/views/nodes/scrapbook/ScrapbookBox.tsx  | 165 +++++++++---------
 .../views/nodes/scrapbook/ScrapbookPicker.scss     |  40 +++++
 .../views/nodes/scrapbook/ScrapbookPicker.tsx      |  84 +++++++++
 .../views/nodes/scrapbook/ScrapbookPreset.tsx      |  44 ++---
 .../views/nodes/scrapbook/scrapbookleftover.ts     |  46 +++++
 10 files changed, 474 insertions(+), 122 deletions(-)
 create mode 100644 src/client/views/nodes/scrapbook/ScrapbookPicker.scss
 create mode 100644 src/client/views/nodes/scrapbook/ScrapbookPicker.tsx
 create mode 100644 src/client/views/nodes/scrapbook/scrapbookleftover.ts

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 03fce21f7..4642d79eb 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -14,7 +14,7 @@ export const DocSeperator = '------';
 export enum TextClassifications {
     Title = 'title', //a few words 
     Caption = 'caption', //few sentences
-    LengthyDescription = 'lengthy description' }
+    LengthyDescription = 'lengthy' }
 
 enum GPTCallType {
     SUMMARY = 'summary',
@@ -106,8 +106,10 @@ const callTypeMap: { [type in GPTCallType]: GPTCallOpts } = {
         model: 'gpt-4o',
         maxTokens: 2048,
         temp: 0.25,
-        prompt: `Based on the content of the text, provide six descriptive tags (single words) separated by spaces. 
-            Finally, include a seventh more detailed summary phrase using underscores.`
+        prompt: `Based on the content of the the text, classify it into the  
+                most appropriate category: '${TextClassifications.Title}', '${TextClassifications.Caption}', or '${TextClassifications.LengthyDescription}'. 
+               Then provide five more descriptive tags (single words) separated by spaces. 
+            Finally, include a more detailed summary phrase tag using underscores, for a total of seven tags.`
     },
     describe: { model: 'gpt-4-vision-preview', maxTokens: 2048, temp: 0, prompt: 'Describe these images in 3-5 words' },
     flashcard: {
@@ -175,14 +177,15 @@ const callTypeMap: { [type in GPTCallType]: GPTCallOpts } = {
          prompt: `Generate an aesthetically pleasing scrapbook layout preset based on these items.
     Return your response as JSON in the format:
     [{
-        "type": DocumentType.RTF or DocumentType.IMG or DocumentType.PDF
+        "type": rich text or image or pdf or video or collection
         "tag": a singular tag summarizing the document
+        "acceptTags": [a list of all relevant tags that this document accepts, like ['PERSON', 'LANDSCAPE']]
         "x": number,
         "y": number,
-        "width": number,
+        "width": number, **note: if it is in an image, please respect existing aspect ratio if it is provided
         "height": number
     }, ...]
-    If there are mutliple documents, you may include 
+    If there are mutliple documents and you wish to nest documents into a collection for aesthetic purposes, you may include 
     "children": [
                     { type: 
                       tag: 
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.scss b/src/client/views/collections/collectionFreeForm/MarqueeView.scss
index 7c9d0f6e1..b514b0911 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.scss
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.scss
@@ -28,4 +28,4 @@
     .marquee-legend::after {
         content: 'Press <space> for lasso';
     }
-}
+}
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 0b91d628b..05d4cd81d 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -22,6 +22,7 @@ import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { MarqueeViewBounds } from '../../PinFuncs';
 import { PreviewCursor } from '../../PreviewCursor';
 import { DocumentView } from '../../nodes/DocumentView';
+import { OverlayDisposer } from '../../OverlayView';
 import { OpenWhere } from '../../nodes/OpenWhere';
 import { pasteImageBitmap } from '../../nodes/WebBoxRenderer';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
@@ -30,8 +31,15 @@ import { ImageLabelBoxData } from './ImageLabelBox';
 import { MarqueeOptionsMenu } from './MarqueeOptionsMenu';
 import { StrListCast } from '../../../../fields/Doc';
 import { requestAiGeneratedPreset, DocumentDescriptor } from '../../nodes/scrapbook/AIPresetGenerator';
+import { ScrapbookItemConfig } from '../../nodes/scrapbook/ScrapbookPreset';
+import { OverlayView } from '../../OverlayView';
+import { runInAction } from 'mobx';
+import { ScrapbookPicker } from '../../nodes/scrapbook/ScrapbookPicker';
+import { buildPlaceholdersFromConfigs, slotRealDocIntoPlaceholders } from '../../nodes/scrapbook/ScrapbookBox';
 import './MarqueeView.scss';
 
+import { build } from 'xregexp';
+
 interface MarqueeViewProps {
     Doc: Doc;
     getContainerTransform: () => Transform;
@@ -78,6 +86,16 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
     @observable _labelsVisibile: boolean = false;
     @observable _lassoPts: [number, number][] = [];
     @observable _lassoFreehand: boolean = false;
+      // ─── New Observables for “Pick 1 of N AI Scrapbook” ───
+    @observable aiChoices: Doc[] = [];      // temporary hidden Scrapbook docs
+    @observable pickerX = 0;                // popup x coordinate
+    @observable pickerY = 0;                // popup y coordinate
+    @observable pickerVisible = false;      // show/hide ScrapbookPicker
+    // This will hold the “disposer” function returned by addWindow()
+    private _overlayDisposer: OverlayDisposer | null = null;
+
+
+    
 
     @computed get Transform() {
         return this._props.getTransform();
@@ -277,7 +295,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
             MarqueeOptionsMenu.Instance.createCollection = this.collection;
             MarqueeOptionsMenu.Instance.delete = this.delete;
             MarqueeOptionsMenu.Instance.summarize = this.summary;
-            MarqueeOptionsMenu.Instance.generateScrapbook = this.generateScrapbook;
+            MarqueeOptionsMenu.Instance.generateScrapbook = this.generateAiScrapbooks;
             MarqueeOptionsMenu.Instance.showMarquee = this.showMarquee;
             MarqueeOptionsMenu.Instance.hideMarquee = this.hideMarquee;
             MarqueeOptionsMenu.Instance.jumpTo(e.clientX, e.clientY);
@@ -521,6 +539,17 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
     });
 
 
+    getAiPresetsDescriptors(): DocumentDescriptor[] {
+    const selected = this.marqueeSelect(false);
+    return selected.map((doc) => ({
+      type: typeof doc.$type === 'string' ? doc.$type : 'UNKNOWN',
+      tags: (() => {
+        const s = new Set<string>();
+        StrListCast(doc.$tags_chat ?? new List<string>()).forEach((t) => s.add(t));
+        return Array.from(s);
+      })(),
+    }));
+  }
    
     
     generateScrapbook = action(async () => {
@@ -528,28 +557,23 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
         const selectedDocs = this.marqueeSelect(false);
         if (!selectedDocs.length) return;
 
-       const descriptors: DocumentDescriptor[] = selectedDocs.map(doc => ({
-            type: typeof doc.$type === 'string' ? doc.$type : 'UNKNOWN',
-            tags: (() => {
-                const internalTagsSet = new Set<string>();
-                StrListCast(doc.$tags_chat ?? new List<string>()).forEach(tag => {
-                internalTagsSet.add(tag);
-                });
-                return Array.from(internalTagsSet);
-            })()
-            }));
-
+    const descriptors = this.getAiPresetsDescriptors();
+    if (descriptors.length === 0) {
+      alert('No documents selected to generate a scrapbook from!');
+      return;
+    }
 
         const aiPreset = await requestAiGeneratedPreset(descriptors);
         if (!aiPreset.length) {
             alert("Failed to generate preset");
             return;
         }
-
+        const scrapbookPlaceholders: Doc[] = buildPlaceholdersFromConfigs(aiPreset);
+        /*
         const scrapbookPlaceholders: Doc[] = aiPreset.map(cfg => {
             const placeholderDoc = Docs.Create.TextDocument(cfg.tag);
             placeholderDoc.accepts_docType = cfg.type as DocumentType;
-            placeholderDoc.accepts_tagType = cfg.acceptTag ?? cfg.tag;
+            placeholderDoc.accepts_tagType = new List<string>(cfg.acceptTags ?? [cfg.tag]);
 
             const placeholder = new Doc();
             placeholder.proto = placeholderDoc;
@@ -560,7 +584,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
             if (cfg.height != null) placeholder._height = cfg.height;
 
             return placeholder;
-        });
+        });*/
 
         const scrapbook = Docs.Create.ScrapbookDocument(scrapbookPlaceholders, {
             backgroundColor: '#e2ad32',
@@ -570,6 +594,25 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
             _height: 500,
             title: 'AI-generated Scrapbook'
         });
+
+
+
+        // 3) Now grab that new scrapbook’s flat placeholders
+        const flatPl = DocListCast(scrapbook[Doc.LayoutDataKey(scrapbook)]) as Doc[];
+        const unwrap = (items: Doc[]): Doc[] =>
+            items.flatMap(d =>
+            d.$type === DocumentType.COL
+                ? unwrap(DocListCast(d[Doc.LayoutDataKey(d)]))
+                : [d]
+            );
+        const allPlaceholders = unwrap(flatPl);
+
+        // 4) Slot each selectedDocs[i] into the first matching placeholder
+        selectedDocs.forEach(realDoc => {
+            slotRealDocIntoPlaceholders(realDoc, allPlaceholders
+            );
+        });
+
         const selected = this.marqueeSelect(false).map(d => {
             this._props.removeDocument?.(d);
             d.x = NumCast(d.x) - this.Bounds.left;
@@ -589,6 +632,102 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
     });
 
 
+  
+
+  /** Called when the user clicks one of the N thumbnails */
+  @action
+  onScrapbookChoice(idx: number) {
+    const chosenDoc = this.aiChoices[idx];
+    if (!chosenDoc) return;
+
+    // 1) Move chosenDoc from off‐screen to the marquee area
+    const bounds = this.Bounds;
+    chosenDoc.x = bounds.left;
+    chosenDoc.y = bounds.top;
+    chosenDoc._width = NumCast(bounds.width || chosenDoc._width);
+    chosenDoc._height = NumCast(bounds.height || chosenDoc._height);
+    chosenDoc.$title = 'AI‐chosen scrapbook';
+
+    // 2) Remove the other temp docs
+    this.aiChoices.forEach((doc, i) => {
+      if (i !== idx) {
+        this.props.removeDocument?.(doc);
+      }
+    });
+
+    // 3) Clear state and close the popup
+    this.aiChoices = [];
+    this.pickerVisible = false;
+  }
+
+  /** Called when user clicks outside or the “×” in ScrapbookPicker */
+  @action
+  cancelScrapbookChoice() {
+    // 1) Remove all temp scrapbooks
+    this.aiChoices.forEach((doc) => {
+      this.props.removeDocument?.(doc);
+    });
+
+    // 2) Clear array and hide popup
+    this.aiChoices = [];
+    this.pickerVisible = false;
+  }
+  @action
+  generateAiScrapbooks = async () => {
+    const n = 3; // Number of AI scrapbook presets
+    const descriptors = this.getAiPresetsDescriptors();
+    if (descriptors.length === 0) {
+      alert('No documents selected to generate a scrapbook from!');
+      return;
+    }
+
+    // 1) Start N parallel requests for JSON configs
+    const calls: Promise<ScrapbookItemConfig[]>[] = [];
+    for (let i = 0; i < n; i++) {
+      calls.push(requestAiGeneratedPreset(descriptors));
+    }
+
+    // 2) Optionally show a “spinner” overlay in‐line here if you like…
+    //    (But for brevity, let’s omit that.)
+
+    try {
+      const allConfigsArrays = await Promise.all(calls);
+
+      runInAction(() => {
+        // 3) For each returned config array, build placeholders and create _hidden_ Scrapbook doc
+        this.aiChoices = allConfigsArrays.map((cfgArr, i) => {
+          const placeholders = buildPlaceholdersFromConfigs(cfgArr);
+          // Off‐screen ScrapbookDocument:
+          const tempSb: Doc = Docs.Create.ScrapbookDocument(placeholders, {
+            title: `AI Preset (temp ${i + 1})`,
+            x: -10000, // far off screen
+            y: -10000,
+            _width: 600,
+            _height: 600,
+            backgroundColor: 'transparent',
+            _layout_showFlash: false, // keep it hidden until chosen
+          });
+          this.props.addDocument?.(tempSb);
+          tempSb.$tags_chat = new List<string>(['@ai_preset']);
+          return tempSb;
+        });
+
+        // 4) Compute where to show the popup in screen coords
+        const bounds = this.Bounds;
+        const screenTopLeft = this._props
+          .getContainerTransform()
+          .transformPoint(bounds.left, bounds.top);
+        this.pickerX = screenTopLeft[0] + 20;
+        this.pickerY = screenTopLeft[1] + 20;
+        this.pickerVisible = true;
+      });
+    } catch (err) {
+      console.error('Error generating AI scrapbooks:', err);
+      alert('Failed to generate presets. Please try again.');
+    }
+  };
+
+
     @action
     marqueeCommand = (e: KeyboardEvent) => {
         const ee = e as unknown as KeyboardEvent & { propagationIsStopped?: boolean };
@@ -755,6 +894,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
     };
     render() {
         return (
+            <>
             <div
                 className="marqueeView"
                 ref={r => {
@@ -774,6 +914,27 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
                 {this._visible ? this.marqueeDiv : null}
                 {this.props.children}
             </div>
+            {this.pickerVisible && (
+  <div
+    className="marqueeView-scrapbook-overlay"
+    style={{
+      position: 'absolute',
+      top: this.pickerY,
+      left: this.pickerX,
+      zIndex: 2000,         // just ensure it floats above
+    }}
+  >
+    <ScrapbookPicker
+      choices={this.aiChoices}
+      x={this.pickerX}
+      y={this.pickerY}
+      onSelect={(i) => this.onScrapbookChoice(i)}
+      onCancel={() => this.cancelScrapbookChoice()}
+    />
+  </div>
+)}
+        </>
+    
         );
     }
 }
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 9067f7e0c..2473f1c0a 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -141,6 +141,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         that describes the image.`
       );
 
+    const { nativeWidth, nativeHeight } = this.nativeSize;
+    const aspectRatio = nativeWidth && nativeHeight
+      ? (nativeWidth / nativeHeight).toFixed(2)
+      : '1.00';
+
       // 4) normalize and prefix
       const label = raw
         .trim()
@@ -152,6 +157,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
       this.Document.$tags_chat = new List<string>();
       tokens.forEach(tok => {
         (this.Document.$tags_chat as List<string>).push(tok)});
+        (this.Document.$tags_chat as List<string>).push(`ASPECT_${aspectRatio}`);  
       //!!! changed may 11 (this.Document.$tags_chat as List<string>).push(label);
 
       // 6) flip on “show tags” in the layout 
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 0e7afbab1..404be6a1b 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -151,7 +151,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         const tokens = label.split(/\s+/);
         this.Document.$tags_chat = new List<string>();
         tokens.forEach(tok => (this.Document.$tags_chat as List<string>).push(tok));
-
+        const aspect = this.player!.videoWidth / (this.player!.videoHeight || 1);
+        (this.Document.$tags_chat as List<string>).push(`ASPECT_${aspect}`);  
         // 5) Turn on tag display in layout
         this.Document._layout_showTags = true;
 
diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
index 5dd02295c..eb997024b 100644
--- a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
+++ b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
 import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc';
 import { List } from '../../../../fields/List';
 import { emptyFunction } from '../../../../Utils';
-import axios from 'axios';
 import { Docs } from '../../../documents/Documents';
 import { DocumentType } from '../../../documents/DocumentTypes';
 import { CollectionView } from '../../collections/CollectionView';
@@ -35,54 +34,51 @@ export function buildPlaceholdersFromConfigs(configs: ScrapbookItemConfig[]): Do
 
   for (const cfg of configs) {
     if (cfg.children && cfg.children.length) {
-      // --- nested container ---
       const childDocs = cfg.children.map(child => {
         const doc = Docs.Create.TextDocument("[placeholder] " + child.tag);
         doc.accepts_docType = child.type;
+        doc.accepts_tagType = new List<string>(child.acceptTags ?? [child.tag]);
 
         const ph = new Doc();
-        ph.proto    = doc;
+        ph.proto = doc;
         ph.original = doc;
-        ph.x        = child.x;
-        ph.y        = child.y;
-        if (child.width  != null) ph._width  = child.width;
+        ph.x = child.x;
+        ph.y = child.y;
+        if (child.width != null) ph._width = child.width;
         if (child.height != null) ph._height = child.height;
         return ph;
       });
 
-      // wrap those children in a stacking container
       const protoW = cfg.containerWidth ?? cfg.width;
       const protoH = cfg.containerHeight ?? cfg.height;
-      const containerProto = Docs.Create.StackingDocument(
-        childDocs,
-        {
-          ...(protoW != null ? { _width:  protoW } : {}),
-          ...(protoH != null ? { _height: protoH } : {}),
-          title: cfg.tag
-        }
-      );
+      // Create a stacking document with the child placeholders
+      const containerProto = Docs.Create.StackingDocument(childDocs, {
+        ...(protoW != null ? { _width: protoW } : {}),
+        ...(protoH != null ? { _height: protoH } : {}),
+        title: cfg.tag,
+      });
 
       const ph = new Doc();
-      ph.proto    = containerProto;
+      ph.proto = containerProto;
       ph.original = containerProto;
-      ph.x        = cfg.x;
-      ph.y        = cfg.y;
-      if (cfg.width  != null) ph._width  = cfg.width;
+      ph.x = cfg.x;
+      ph.y = cfg.y;
+      if (cfg.width != null) ph._width = cfg.width;
       if (cfg.height != null) ph._height = cfg.height;
       placeholders.push(ph);
-
-    } else {
-      // --- flat placeholder ---
+    } 
+    
+    else {
       const doc = Docs.Create.TextDocument("[placeholder] " + cfg.tag);
       doc.accepts_docType = cfg.type;
-      doc.accepts_tagType = cfg.acceptTag ?? cfg.tag;
+      doc.accepts_tagType = new List<string>(cfg.acceptTags ?? [cfg.tag]);
 
       const ph = new Doc();
-      ph.proto    = doc;
+      ph.proto = doc;
       ph.original = doc;
-      ph.x        = cfg.x;
-      ph.y        = cfg.y;
-      if (cfg.width  != null) ph._width  = cfg.width;
+      ph.x = cfg.x;
+      ph.y = cfg.y;
+      if (cfg.width != null) ph._width = cfg.width;
       if (cfg.height != null) ph._height = cfg.height;
       placeholders.push(ph);
     }
@@ -90,7 +86,54 @@ export function buildPlaceholdersFromConfigs(configs: ScrapbookItemConfig[]): Do
 
   return placeholders;
 }
-// Scrapbook view: a container that lays out its child items in a grid/template
+export function slotRealDocIntoPlaceholders(
+  realDoc: Doc,
+  placeholders: Doc[]
+): boolean {
+ const realTags = new Set<string>(
+  StrListCast(realDoc.$tags_chat ?? new List<string>())
+    .map(t => t.toLowerCase())
+);
+
+  // Find placeholder with most matching tags
+  let bestMatch: Doc | null = null;
+  let maxMatches = 0;
+/*
+                 (d.accepts_docType === docs[0].$type ||   // match fields based on type, or by analyzing content .. simple example of matching text in placeholder to dropped doc's type
+                  RTFCast(d[Doc.LayoutDataKey(d)])?.Text.includes(StrCast(docs[0].$type)))*/
+
+  placeholders.forEach(ph => {
+    // 1) Enforce that placeholder.accepts_docType === realDoc.$type
+    if (ph.accepts_docType !== realDoc.$type) {
+      // Skip this placeholder entirely if types do not match.
+      return;
+    };
+    const phTagTypes = StrListCast(ph.accepts_tagType ?? new List<string>())
+  .map(t => t.toLowerCase());
+    console.log({ realTags, phTagTypes });
+    const matches = phTagTypes.filter(tag => realTags.has(tag));
+
+    if (matches.length > maxMatches) {
+      maxMatches = matches.length;
+      bestMatch = ph;
+    }
+
+  });
+
+  if (bestMatch && maxMatches > 0) {
+    setTimeout(
+      undoable(() => {
+        bestMatch!.proto = realDoc;
+      }, 'Scrapbook add'),
+      0
+    );
+    return true;
+  }
+
+  return false;
+}
+
+// Scrapbook view: a container that lays out its child items in a template
 @observer
 export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     @observable selectedPreset = getPresetNames()[0];
@@ -406,56 +449,19 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
         // 3) produce a flat list of every doc, unwrapping any number of nested COLs
         const allDocs: Doc[] = unwrap(slots);
-     
+          if (docs?.length === 1) {
+        return slotRealDocIntoPlaceholders(
+            docs[0],
+            allDocs,
+        )
+            ? false
+            : false;
+    }
 
-        if (docs?.length === 1) {
-            const placeholder = allDocs.filter(d =>
+    return false;
+};
+     
 
-                 (d.accepts_docType === docs[0].$type ||   // match fields based on type, or by analyzing content .. simple example of matching text in placeholder to dropped doc's type
-                  RTFCast(d[Doc.LayoutDataKey(d)])?.Text.includes(StrCast(docs[0].$type)))
-            ); // prettier-ignore
-
-            //DocListCast(this.Document.items).map(doc => DocListCast(doc[Doc.LayoutDataKey(doc)])
-
-            if (placeholder) {
-                /**Look at the autotags and see what matches*RTFCast(d[Doc.LayoutDataKey(d)])?.Text*/
-                // ugh.  we have to tell the underlying view not to add the Doc so that we can add it where we want it.
-                // However, returning 'false' triggers an undo. so this settimeout is needed to make the assignment happen after the undo.
-                setTimeout(
-                    undoable(() => {
-
-                        const slotTagsList: Set<string>[] = placeholder.map(doc =>
-                            new Set<string>(StrListCast(doc.$tags_chat))
-                          );
-                          // turn docs[0].$tags_chat into a Set
-                        const targetTags = new Set(StrListCast(docs[0].$tags_chat));
-
-                        //StrListCast(placeholder.overrideFields).map(field => (docs[0][field] = placeholder[field])); // // shouldn't need to do this for layout fields since the placeholder already overrides its protos
-                        
-                            // find the first placeholder that shares *any* tag
-                        const match = placeholder.find(ph =>
-                            ph.accepts_tagType != null &&          // make sure it actually has one
-                            targetTags.has(StrCast(ph.accepts_tagType))     // test membership in the Set
-                            //StrListCast(ph.$tags_chat).some(tag => targetTags.has(tag))
-                        );
-                        if (match) {
-                            match.proto = docs[0];
-                          }
-
-                        /*const chosenPlaceholder = placeholder.find(d => 
-                            pl = new Set<string>(StrListCast(d.$tags_chat)
-                            
-                            d.$tags_chat && d.$tags_chat[0].equals(docs[0].$tags_chat)); //why [0]
-                        if (chosenPlaceholder){
-                            chosenPlaceholder.proto = docs[0];}*/
-                         //excess if statement??   
-                    }, 'Scrapbook add')
-                );
-                return false;
-            }
-        }
-        return false;
-    };
 
 
 
@@ -474,10 +480,15 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         
         allDocs.forEach(doc => {
             const tags = StrListCast(doc.$tags_chat ?? new List<string>());
-            tags.forEach(tag => internalTagsSet.add(tag));
+            tags.forEach(tag => 
+                 {if (!tag.startsWith("ASPECT_")) {
+            internalTagsSet.add(tag);
+            }
+    });
         });
     
         const internalTags = Array.from(internalTagsSet).join(', ');
+      
     
         return internalTags
             ? `Create a new scrapbook background featuring: ${internalTags}`
diff --git a/src/client/views/nodes/scrapbook/ScrapbookPicker.scss b/src/client/views/nodes/scrapbook/ScrapbookPicker.scss
new file mode 100644
index 000000000..237274433
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/ScrapbookPicker.scss
@@ -0,0 +1,40 @@
+/* ScrapbookPicker.scss */
+
+.scrapbook-picker-popup {
+    background: rgba(255, 0, 0, 0.5);  /* semi-transparent red */
+  position: absolute;       /* ← make it float */
+  z-index: 10000;           /* so it sits above the overlay‐window’s background */
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  padding: 8px;
+  min-width: 200px;         /* at least give it some size */
+}
+
+.scrapbook-picker-close {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.scrapbook-picker-thumbnails {
+  margin-top: 24px;   /* room under the close button */
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.scrapbook-picker-thumb {
+  cursor: pointer;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  padding: 4px;
+  background: #f9f9f9;
+}
+
+.scrapbook-picker-thumb-inner {
+  font-size: 12px;
+  text-align: center;
+}
diff --git a/src/client/views/nodes/scrapbook/ScrapbookPicker.tsx b/src/client/views/nodes/scrapbook/ScrapbookPicker.tsx
new file mode 100644
index 000000000..6054cb98d
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/ScrapbookPicker.tsx
@@ -0,0 +1,84 @@
+// src/client/views/nodes/scrapbook/ScrapbookPicker.tsx
+import * as React from 'react';
+import { observer } from 'mobx-react';
+import { Doc } from '../../../../fields/Doc';
+import { Id } from '../../../../fields/FieldSymbols';
+import { StrCast } from '../../../../fields/Types';
+import './ScrapbookPicker.scss';
+
+export interface ScrapbookPickerProps {
+  choices: Doc[];
+  x: number;
+  y: number;
+  onSelect: (index: number) => void;
+  onCancel: () => void;
+}
+
+/**
+ * A floating popup that shows N “temporary” Scrapbook documents.  
+ * When the user clicks one thumbnail, we call onSelect(i).  
+ * When the user clicks × or outside, we call onCancel(). 
+ *
+ * This component itself does not control its own visibility; MarqueeView / OverlayView will mount/unmount it.
+ */
+@observer
+export class ScrapbookPicker extends React.Component<ScrapbookPickerProps> {
+  containerRef = React.createRef<HTMLDivElement>();
+
+  // Close when user clicks outside the popup
+  handleClickOutside = (e: MouseEvent) => {
+    if (
+      this.containerRef.current &&
+      !this.containerRef.current.contains(e.target as Node)
+    ) {
+      this.props.onCancel();
+    }
+  };
+
+  componentDidMount() {
+    document.addEventListener('mousedown', this.handleClickOutside);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('mousedown', this.handleClickOutside);
+  }
+
+  render() {
+    const { choices, x, y, onSelect, onCancel } = this.props;
+    return (
+      <div
+        className="scrapbook-picker-popup"
+        ref={this.containerRef}
+        style={{
+          top: `${y}px`,
+          left: `${x}px`,
+        }}
+      >
+        {/* close icon */}
+        <div className="scrapbook-picker-close" onClick={onCancel}>
+          ×
+        </div>
+        <div className="scrapbook-picker-thumbnails">
+          {choices.map((doc, i) => {
+            // We simply show a small thumbnail representation of each temp scrapbook
+            // You could replace this with DocumentThumbnail or a custom mini‐preview.
+            return (
+              <div
+                key={`${doc[Id]}_${i}`}
+                className="scrapbook-picker-thumb"
+                onClick={() => onSelect(i)}
+              >
+                {/* 
+                  For a minimal example, use the document’s title or ID as a placeholder.
+                  In a real version, you might render a proper thumbnail/view of doc.
+                */}
+                <div className="scrapbook-picker-thumb-inner">
+                  {StrCast(doc.title)}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/client/views/nodes/scrapbook/ScrapbookPreset.tsx b/src/client/views/nodes/scrapbook/ScrapbookPreset.tsx
index 87821c7bf..96a8e9b5f 100644
--- a/src/client/views/nodes/scrapbook/ScrapbookPreset.tsx
+++ b/src/client/views/nodes/scrapbook/ScrapbookPreset.tsx
@@ -13,7 +13,7 @@ export interface ScrapbookItemConfig {
     /** text shown in the placeholder bubble */
     tag: string;
     /** what this slot actually accepts (defaults to `tag`) */
-    acceptTag?: string;
+    acceptTags?: string[];
 
     x: number;
     y: number;
@@ -48,22 +48,22 @@ export class ScrapbookPreset {
         return [
             { type: DocumentType.IMG,
               tag: '[placeholder] LANDSCAPE',
-              acceptTag: 'LANDSCAPE',
+              acceptTags: ['LANDSCAPE'],
               x: 0, y: -100, width: 250, height: 200
             },
             { type: DocumentType.RTF,
               tag: '[placeholder] caption',
-              acceptTag: 'caption',
+              acceptTags: ['caption'],
               x: 0, y: 200, width: 250, height: 50
             },
             { type: DocumentType.RTF,
               tag: '[placeholder] lengthy description',
-              acceptTag: 'lengthy description',
+              acceptTags: ['lengthy description'],
               x: 280, y: -50, width: 50, height: 200
             },
             { type: DocumentType.IMG,
               tag: '[placeholder] PERSON',
-              acceptTag: 'PERSON',
+              acceptTags: ['PERSON'],
               x: -200, y: -100, width: 100, height: 200
             },
         ];
@@ -71,12 +71,12 @@ export class ScrapbookPreset {
 
     private static createGalleryPreset(): ScrapbookItemConfig[] {
         return [
-          { type: DocumentType.IMG, tag: 'Gallery 1', acceptTag: 'LANDSCAPE', x: -150, y: -150, width: 150, height: 150 },
-          { type: DocumentType.IMG, tag: 'Gallery 2', acceptTag: 'LANDSCAPE', x:   0, y: -150, width: 150, height: 150 },
-          { type: DocumentType.IMG, tag: 'Gallery 3', acceptTag: 'LANDSCAPE', x: 150, y: -150, width: 150, height: 150 },
-          { type: DocumentType.IMG, tag: 'Gallery 4', acceptTag: 'LANDSCAPE', x: -150, y:   0, width: 150, height: 150 },
-          { type: DocumentType.IMG, tag: 'Gallery 5', acceptTag: 'LANDSCAPE', x:   0, y:   0, width: 150, height: 150 },
-          { type: DocumentType.IMG, tag: 'Gallery 6', acceptTag: 'LANDSCAPE', x: 150, y:   0, width: 150, height: 150 },
+          { type: DocumentType.IMG, tag: 'Gallery 1', acceptTags: ['LANDSCAPE'], x: -150, y: -150, width: 150, height: 150 },
+          { type: DocumentType.IMG, tag: 'Gallery 2', acceptTags: ['LANDSCAPE'], x:   0, y: -150, width: 150, height: 150 },
+          { type: DocumentType.IMG, tag: 'Gallery 3', acceptTags: ['LANDSCAPE'], x: 150, y: -150, width: 150, height: 150 },
+          { type: DocumentType.IMG, tag: 'Gallery 4', acceptTags: ['LANDSCAPE'], x: -150, y:   0, width: 150, height: 150 },
+          { type: DocumentType.IMG, tag: 'Gallery 5', acceptTags: ['LANDSCAPE'], x:   0, y:   0, width: 150, height: 150 },
+          { type: DocumentType.IMG, tag: 'Gallery 6', acceptTags: ['LANDSCAPE'], x: 150, y:   0, width: 150, height: 150 },
         ];
       }
       
@@ -85,17 +85,17 @@ export class ScrapbookPreset {
         return [
             { type: DocumentType.IMG,
               tag: 'image',
-              acceptTag: 'LANDSCAPE',
+              acceptTags: ['LANDSCAPE'],
               x: 0, y: -100, width: 250, height: 200
             },
             { type: DocumentType.RTF,
               tag: 'summary',
-              acceptTag: 'caption',
+              acceptTags: ['caption'],
               x: 0, y: 200, width: 250
             },
             { type: DocumentType.RTF,
               tag: 'sidebar',
-              acceptTag: 'lengthy description',
+              acceptTags: ['lengthy description'],
               x: 280, y: -50, width: 50, height: 200
             },
             {
@@ -106,7 +106,7 @@ export class ScrapbookPreset {
               children: [
                 { type: DocumentType.IMG,
                   tag: 'image internal',
-                  acceptTag: 'PERSON',
+                  acceptTags: ['PERSON'],
                   x: 0, y: 0, width: 50, height: 100
                 }
               ]
@@ -118,22 +118,22 @@ export class ScrapbookPreset {
         return [
             { type: DocumentType.IMG,
               tag: 'LANDSCAPE',
-              acceptTag: 'LANDSCAPE',
+              acceptTags: ['LANDSCAPE'],
               x: -150, y: -150, width: 150, height: 150
             },
             { type: DocumentType.IMG,
               tag: 'PERSON',
-              acceptTag: 'PERSON',
+              acceptTags: ['PERSON'],
               x: 0, y: -150, width: 150, height: 150
             },
             { type: DocumentType.RTF,
               tag: 'caption',
-              acceptTag: 'caption',
+              acceptTags: ['caption'],
               x: -150, y: 0, width: 300, height: 100
             },
             { type: DocumentType.RTF,
               tag: 'lengthy description',
-              acceptTag: 'lengthy description',
+              acceptTags: ['lengthy description'],
               x: 0, y: 100, width: 300, height: 100
             }
         ];
@@ -143,17 +143,17 @@ export class ScrapbookPreset {
         return [
             { type: DocumentType.RTF,
               tag: 'title',
-              acceptTag: 'title',
+              acceptTags: ['title'],
               x: 0, y: -180, width: 300, height: 40
             },
             { type: DocumentType.IMG,
               tag: 'LANDSCAPE',
-              acceptTag: 'LANDSCAPE',
+              acceptTags: ['LANDSCAPE'],
               x: 0, y: 0, width: 300, height: 200
             },
             { type: DocumentType.RTF,
               tag: 'caption',
-              acceptTag: 'caption',
+              acceptTags: ['caption'],
               x: 0, y: 230, width: 300, height: 50
             }
         ];
diff --git a/src/client/views/nodes/scrapbook/scrapbookleftover.ts b/src/client/views/nodes/scrapbook/scrapbookleftover.ts
new file mode 100644
index 000000000..2f381ab95
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/scrapbookleftover.ts
@@ -0,0 +1,46 @@
+
+   
+
+
+            //DocListCast(this.Document.items).map(doc => DocListCast(doc[Doc.LayoutDataKey(doc)])
+
+            if (placeholder) {
+                /**Look at the autotags and see what matches*RTFCast(d[Doc.LayoutDataKey(d)])?.Text*/
+                // ugh.  we have to tell the underlying view not to add the Doc so that we can add it where we want it.
+                // However, returning 'false' triggers an undo. so this settimeout is needed to make the assignment happen after the undo.
+                setTimeout(
+                    undoable(() => {
+
+                        const slotTagsList: Set<string>[] = placeholder.map(doc =>
+                            new Set<string>(StrListCast(doc.$tags_chat))
+                          );
+                          // turn docs[0].$tags_chat into a Set
+                        const targetTags = new Set(StrListCast(docs[0].$tags_chat));
+
+                        //StrListCast(placeholder.overrideFields).map(field => (docs[0][field] = placeholder[field]));
+                        //  // // shouldn't need to do this for layout fields since the placeholder already overrides its protos
+                        
+                            // find the first placeholder that shares *any* tag
+                        const match = placeholder.find(ph =>
+                            ph.accepts_tagType != null &&          // make sure it actually has one
+                            targetTags.has(StrCast(ph.accepts_tagType))     // test membership in the Set
+                            //StrListCast(ph.$tags_chat).some(tag => targetTags.has(tag))
+                        );
+                        if (match) {
+                            match.proto = docs[0];
+                          }
+
+                        /*const chosenPlaceholder = placeholder.find(d => 
+                            pl = new Set<string>(StrListCast(d.$tags_chat)
+                            
+                            d.$tags_chat && d.$tags_chat[0].equals(docs[0].$tags_chat)); //why [0]
+                        if (chosenPlaceholder){
+                            chosenPlaceholder.proto = docs[0];}*/
+                         //excess if statement??   
+                    }, 'Scrapbook add')
+                );
+                return false;
+            }
+        }
+        return false;
+    };
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 08b40f21d9295f36277827ac33085f82c9ee1646 Mon Sep 17 00:00:00 2001
From: sharkiecodes <lanyi_stroud@brown.edu>
Date: Fri, 6 Jun 2025 11:07:59 -0400
Subject: clean-up

---
 .../collections/collectionFreeForm/MarqueeView.tsx |   4 +-
 src/client/views/nodes/ImageBox.tsx                |   8 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |  23 ---
 src/client/views/nodes/scrapbook/ScrapbookBox.scss |  63 ++++++
 src/client/views/nodes/scrapbook/ScrapbookBox.tsx  | 216 +++++----------------
 .../nodes/scrapbook/ScrapbookSettingsPanel.tsx     |  60 ------
 .../views/nodes/scrapbook/ScrapbookSlot.scss       |  85 --------
 src/client/views/nodes/scrapbook/ScrapbookSlot.tsx |  28 ---
 .../views/nodes/scrapbook/ScrapbookSlotTypes.ts    |  25 ---
 .../views/nodes/scrapbook/scrapbookleftover.ts     |   6 +-
 10 files changed, 114 insertions(+), 404 deletions(-)
 create mode 100644 src/client/views/nodes/scrapbook/ScrapbookBox.scss
 delete mode 100644 src/client/views/nodes/scrapbook/ScrapbookSettingsPanel.tsx
 delete mode 100644 src/client/views/nodes/scrapbook/ScrapbookSlot.scss
 delete mode 100644 src/client/views/nodes/scrapbook/ScrapbookSlot.tsx
 delete mode 100644 src/client/views/nodes/scrapbook/ScrapbookSlotTypes.ts

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index b8d203cf6..9f96163cd 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -16,7 +16,7 @@ import { DocumentType } from '../../../documents/DocumentTypes';
 import { Docs, DocumentOptions } from '../../../documents/Documents';
 import { SnappingManager, freeformScrollMode } from '../../../util/SnappingManager';
 import { Transform } from '../../../util/Transform';
-import { UndoManager, undoBatch } from '../../../util/UndoManager';
+import { UndoManager, undoBatch, undoable } from '../../../util/UndoManager';
 import { ContextMenu } from '../../ContextMenu';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { MarqueeViewBounds } from '../../PinFuncs';
@@ -548,7 +548,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
     }));
   }
    
-    
+
     generateScrapbook = action(async () => {
    
         const selectedDocs = this.marqueeSelect(false);
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 2473f1c0a..79a218e45 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -46,7 +46,6 @@ import { FocusViewOptions } from './FocusViewOptions';
 import './ImageBox.scss';
 import { OpenWhere } from './OpenWhere';
 import { gptImageLabel } from '../../apis/gpt/GPT';
-import { ImageLabelBox } from '../collections/collectionFreeForm/ImageLabelBox';
 
 const DefaultPath = '/assets/unknown-file-icon-hi.png';
 export class ImageEditorData {
@@ -157,13 +156,10 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
       this.Document.$tags_chat = new List<string>();
       tokens.forEach(tok => {
         (this.Document.$tags_chat as List<string>).push(tok)});
-        (this.Document.$tags_chat as List<string>).push(`ASPECT_${aspectRatio}`);  
-      //!!! changed may 11 (this.Document.$tags_chat as List<string>).push(label);
+        (this.Document.$tags_chat as List<string>).push(`ASPECT_${aspectRatio}`); 
 
       // 6) flip on “show tags” in the layout 
       //    (same flag that ImageLabelBox.toggleDisplayInformation uses)
-      //note to self: What if i used my own field (ex: Document.$auto_description or something
-      //Would i still have to toggle it on for it to show in the metadata? 
       this.Document._layout_showTags = true;
 
     } catch (err) {
@@ -172,8 +168,6 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     }
   };
       
-        //Doc.getDescription(this.Document).then(desc => this.desc = desc)
-    
 
 
 
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 04a14a15f..ad75d320a 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -329,29 +329,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             this.Document._layout_showTags = true;
         });
     });
-        /*this.Document.$tags_chat = new List<string>();
-        gptAPICall(RTFCast(this.Document[Doc.LayoutDataKey(this.Document)])?.Text ?? StrCast(this.Document[Doc.LayoutDataKey(this.Document)]), GPTCallType.CLASSIFYTEXTMINIMAL).then(desc => (this.Document.$tags_chat as List<string>).push(desc));
-        this.Document._layout_showTags = true;*/
-
-
-    // 2) grab whatever’s actually in the field (either RTF or plain string)
-/*
-    const rawText = RTFCast(this.Document[Doc.LayoutDataKey(this.Document)])?.Text ?? StrCast(this.Document[Doc.LayoutDataKey(this.Document)])
-
-    // 3) pick minimal vs. full classification based on "[placeholder]" substring
-    if (rawText.includes("[placeholder]")) {
-        this.Document.$tags_chat = new List<string>();
-        gptAPICall(RTFCast(this.Document[Doc.LayoutDataKey(this.Document)])?.Text ?? StrCast(this.Document[Doc.LayoutDataKey(this.Document)]), GPTCallType.CLASSIFYTEXTMINIMAL).then(desc => {
-            (this.Document.$tags_chat as List<string>).push(desc);
-        });
-    } else {
-        this.Document.$tags_chat = new List<string>();
-        gptAPICall(RTFCast(this.Document[Doc.LayoutDataKey(this.Document)])?.Text ?? StrCast(this.Document[Doc.LayoutDataKey(this.Document)]), GPTCallType.CLASSIFYTEXTFULL).then(desc => {
-            (this.Document.$tags_chat as List<string>).push(desc);
-        })};
-    // 4) make sure the UI will show tags
-    this.Document._layout_showTags = true;*/
-    
 };
 
     leafText = (node: Node) => {
diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.scss b/src/client/views/nodes/scrapbook/ScrapbookBox.scss
new file mode 100644
index 000000000..8dc93df60
--- /dev/null
+++ b/src/client/views/nodes/scrapbook/ScrapbookBox.scss
@@ -0,0 +1,63 @@
+
+.scrapbook-box {
+  /* Make sure the container fills its parent, and set a base background */
+  position: relative; /* so that absolute children (loading overlay, etc.) are positioned relative to this */
+  width: 100%;
+  height: 100%;
+  background: beige;
+  overflow: hidden; /* prevent scrollbars if children overflow */
+}
+
+/* Loading overlay that covers the entire scrapbook while AI-generation is in progress */
+.scrapbook-box-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.8);
+  z-index: 10; /* sits above the ImageBox and other content */
+}
+
+/* The <select> dropdown for choosing presets */
+.scrapbook-box-preset-select {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 20;
+  padding: 4px 8px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: white;
+}
+
+/* Container for the “Regenerate Background” button */
+.scrapbook-box-ui {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 20;
+}
+
+/* The button itself */
+.scrapbook-box-ui-button {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  font-size: 14px;
+  color: black;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.scrapbook-box-ui-button:hover {
+  background: #f5f5f5;
+}
diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
index eb997024b..e910f2fa7 100644
--- a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
+++ b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
@@ -27,6 +27,7 @@ import { runInAction } from 'mobx';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRedoAlt }   from '@fortawesome/free-solid-svg-icons';
 import { getPresetNames, createPreset } from './ScrapbookPresetRegistry';
+import './ScrapbookBox.scss';
 
 
 export function buildPlaceholdersFromConfigs(configs: ScrapbookItemConfig[]): Doc[] {
@@ -294,30 +295,6 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         }
     }
 
-    async generateAiImage() {
-        this.setState({ loading: true });
-    
-        const prompt = 'A serene mountain landscape at sunrise, ultra-wide, pastel sky, abstract, scrapbook background';
-        //'A serene mountain landscape at sunrise, ultra-wide, pastel sky';
-        const dimensions = FireflyImageDimensions.Square; // or whichever suits your scenario
-    
-        SmartDrawHandler.CreateWithFirefly(prompt, dimensions)
-            .then(action(doc => {
-                if (doc instanceof Doc) {
-                    const imgField = ImageCast(doc.data);
-                    this.setState({ src: imgField?.url.href });
-                } else {
-                    alert('Failed to generate the image.');
-                }
-            }))
-            .catch(e => {
-                alert(`Image generation error: ${e}`);
-            })
-            .finally(() => {
-                this.setState({ loading: false });
-            });
-    }
-
     componentDidMount() {
         //this.initScrapbook(ScrapbookPresetType.Default);
         this.setTitle();
@@ -346,38 +323,9 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 ;(this.imageBoxRef.current as any).layoutDoc._width  = dims.w
                 ;(this.imageBoxRef.current as any).layoutDoc._height = dims.h
           
-                // tell the imageDoc to resize itself to the *new* scrapbook size
-                //this.imgDoc._width  = dims.w;
-                //this.imgDoc._height = dims.h;
-                //Doc.SetNativeWidth(this.imgDoc,  dims.w);
-                //Doc.SetNativeHeight(this.imgDoc, dims.h);
               });
             }
         );
-        /*
-        this._disposers.propagateResize = reaction(
-            () => ({ w: this.layoutDoc._width, h: this.layoutDoc._height }),
-            ({ w, h }, prev) => {
-              // only when shift is held (i.e. outpaint mode)
-              if (SnappingManager.ShiftKey && this.imgDoc) {
-                const key = this.imageBoxRef.current!.props.fieldKey; // “data”
-                // record original size on the *image* doc:
-                this.imgDoc[key + '_outpaintOriginalWidth']  = this.imgDoc._width;
-                this.imgDoc[key + '_outpaintOriginalHeight'] = this.imgDoc._height;
-              }
-            }
-          );*/
-        
-
-        //   this._disposers.outpaint = reaction(
-        //     () => this.imgDoc?.[this.imgDoc.fieldKey + '_outpaintOriginalWidth'],
-        //     originalWidth => {
-        //         if (originalWidth !== undefined && !SnappingManager.ShiftKey) {
-        //             this.imageBoxRef.current?.openOutpaintPrompt(); // ✅ CORRECT!
-        //         }
-        //     }
-        // );
-        
     }
 
 
@@ -462,9 +410,6 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 };
      
 
-
-
-
     @computed get regenPrompt() {
         const slots = DocListCast(this.dataDoc[this.fieldKey]);
         
@@ -495,129 +440,62 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             : '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(' ');*/
-
-        
-        return (
-        <div style={{ background: 'beige', width: '100%', height: '100%' }}>
-          {this.loading && (
-          <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', 
-                        display: 'flex', justifyContent: 'center', alignItems: 'center',
-                        background: 'rgba(255,255,255,0.8)' }}>
+   render() {
+    return (
+      <div className="scrapbook-box">
+        {this.loading && (
+          <div className="scrapbook-box-loading-overlay">
             <ReactLoading type="spin" width={50} height={50} />
           </div>
         )}
-          {this.loading && (
-                <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', 
-                              display: 'flex', justifyContent: 'center', alignItems: 'center',
-                              background: 'rgba(255,255,255,0.8)', zIndex: 10 }}>
-                    <ReactLoading type="spin" width={50} height={50} />
-                </div>
-            )}
-            {/* Render AI-generated background */}
-            {this.src && this.imgDoc && (
-        <ImageBox
-        ref={this.imageBoxRef}
-          {...this._props}
-          Document={this.imgDoc}
-          fieldKey="data"
-        />)}
-          
-        
-                <select
-        value={this.selectedPreset}
-        onChange={e => (this.selectedPreset = e.currentTarget.value)}
-        style={{ position: 'absolute', top: 8, left: 8, zIndex: 20 }}
+
+        {this.src && this.imgDoc && (
+          <ImageBox
+            ref={this.imageBoxRef}
+            {...this._props}
+            Document={this.imgDoc}
+            fieldKey="data"
+          />
+        )}
+
+        <select
+          className="scrapbook-box-preset-select"
+          value={this.selectedPreset}
+          onChange={e => (this.selectedPreset = e.currentTarget.value)}
         >
-        {getPresetNames().map(name => (
-            <option key={name} value={name}>{name}</option>
-        ))}
-        </select>  
+          {getPresetNames().map(name => (
+            <option key={name} value={name}>
+              {name}
+            </option>
+          ))}
+        </select>
+
         {this._props.isContentActive() && (
-            <div
-              className="scrapbookBox-ui"
-              style={{
-                position: 'absolute',
-                top: 8,
-                right: 8,
-                zIndex: 20,
-              }}
-              onPointerDown={e => e.stopPropagation()}
-            >
+          <div className="scrapbook-box-ui">
             <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',
-            }}
+              type="button"
+              title="Regenerate Background"
+              onClick={() => this.generateAiImageCorrect(this.regenPrompt)}
+              className="scrapbook-box-ui-button"
             >
-            <FontAwesomeIcon icon={faRedoAlt} />
-            <span>Regenerate Background</span>
+              <FontAwesomeIcon icon={faRedoAlt} />
+              <span>Regenerate Background</span>
             </button>
-            </div>
-          )}
-
-                    <CollectionView
-                    {...this._props} //
-                    setContentViewBox={emptyFunction}
-                    rejectDrop={this.rejectDrop}
-                    childRejectDrop={this.childRejectDrop}
-                    filterAddDocument={this.filterAddDocument}
-                />
-                {/* <div style={{ border: '1px black', borderStyle: 'dotted', position: 'absolute', top: '50%', width: '100%', textAlign: 'center' }}>Drop an image here</div> */}
-            </div>
-        );
-    }
-}
-
-
-
-//function extractScrapbookConfigs(docs: Doc[]): ScrapbookItemConfig[] {
-    //return docs.map(doc => extractConfig(doc));
-//}
-
-// function extractConfig(doc: Doc): ScrapbookItemConfig {
-//     const layoutKey = Doc.LayoutDataKey(doc);
-//     const childDocs = doc[layoutKey] ? DocListCast(doc[layoutKey]) : [];
-
-//     const isContainer = childDocs.length > 0;
-
-//     const cfg: ScrapbookItemConfig = {
-//         type: isContainer ? DocumentType.COL : doc.$type,
-//         tag: 
-//         acceptTag: doc.accepts_tagType,
-//         x: doc.x || 0,
-//         y: doc.y || 0,
-//         width: doc._width,
-//         height: doc._height,
-//     };
-
-//     if (isContainer) {
-//         cfg.containerWidth = doc.proto._width;
-//         cfg.containerHeight = doc.proto._height;
-//         cfg.children = childDocs.map(child => extractConfig(child));
-//     }
+          </div>
+        )}
 
-//     return cfg;
-// }
+        <CollectionView
+          {...this._props}
+          setContentViewBox={emptyFunction}
+          rejectDrop={this.rejectDrop}
+          childRejectDrop={this.childRejectDrop}
+          filterAddDocument={this.filterAddDocument}
+        />
+      </div>
+    );
+  }
+}
 
-// Register scrapbook
 
 
 Docs.Prototypes.TemplateMap.set(DocumentType.SCRAPBOOK, {
diff --git a/src/client/views/nodes/scrapbook/ScrapbookSettingsPanel.tsx b/src/client/views/nodes/scrapbook/ScrapbookSettingsPanel.tsx
deleted file mode 100644
index 5808ab4d1..000000000
--- a/src/client/views/nodes/scrapbook/ScrapbookSettingsPanel.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faRedoAlt } from '@fortawesome/free-solid-svg-icons';
-import { action } from 'mobx';
-
-export default class ScrapbookSettingsPanel extends React.Component {
-    
-    constructor(props) {
-        super(props);
-        this.state = { regenerating: false };
-    }
-
-    regenerateScrapbook = async () => {
-        this.setState({ regenerating: true });
-        try {
-            // Example API call or method invoking ChatGPT for JSON
-            const newLayout = await fetch('/api/generate-scrapbook-layout', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ currentLayout: this.props.currentLayout })
-            }).then(res => res.json());
-
-            action(() => {
-                // Apply new layout
-                this.props.applyNewLayout(newLayout);
-            })();
-        } catch (err) {
-            console.error('Failed to regenerate layout:', err);
-        } finally {
-            this.setState({ regenerating: false });
-        }
-    };
-
-    render() {
-        const { regenerating } = this.state;
-
-        return (
-            <div className="scrapbook-settings-panel" style={{ display: 'flex', alignItems: 'center', padding: '8px', backgroundColor: '#f0f0f0', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }}>
-                <button
-                    className="regenerate-scrapbook-btn"
-                    title="Regenerate Scrapbook"
-                    onClick={this.regenerateScrapbook}
-                    disabled={regenerating}
-                    style={{
-                        padding: '8px 12px',
-                        background: regenerating ? '#ccc' : '#007bff',
-                        color: 'white',
-                        border: 'none',
-                        borderRadius: '4px',
-                        cursor: regenerating ? 'default' : 'pointer',
-                        display: 'flex',
-                        alignItems: 'center'
-                    }}>
-                    <FontAwesomeIcon icon={faRedoAlt} style={{ marginRight: '6px' }} />
-                    {regenerating ? 'Regenerating...' : 'Regenerate Scrapbook'}
-                </button>
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/scrapbook/ScrapbookSlot.scss b/src/client/views/nodes/scrapbook/ScrapbookSlot.scss
deleted file mode 100644
index ae647ad36..000000000
--- a/src/client/views/nodes/scrapbook/ScrapbookSlot.scss
+++ /dev/null
@@ -1,85 +0,0 @@
-//IGNORE FOR NOW, CURRENTLY NOT USED IN SCRAPBOOK IMPLEMENTATION
-.scrapbook-slot {
-  position: absolute;
-  background-color: rgba(245, 245, 245, 0.7);
-  border: 2px dashed #ccc;
-  border-radius: 5px;
-  box-sizing: border-box;
-  transition: all 0.2s ease;
-  overflow: hidden;
-
-  &.scrapbook-slot-over {
-    border-color: #4a90e2;
-    background-color: rgba(74, 144, 226, 0.1);
-  }
-
-  &.scrapbook-slot-filled {
-    border-style: solid;
-    border-color: rgba(0, 0, 0, 0.1);
-    background-color: transparent;
-
-    &.scrapbook-slot-over {
-      border-color: #4a90e2;
-      background-color: rgba(74, 144, 226, 0.1);
-    }
-  }
-
-  .scrapbook-slot-empty {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-  }
-
-  .scrapbook-slot-placeholder {
-    text-align: center;
-    color: #888;
-  }
-
-  .scrapbook-slot-title {
-    font-weight: bold;
-    margin-bottom: 5px;
-  }
-
-  .scrapbook-slot-instruction {
-    font-size: 0.9em;
-    font-style: italic;
-  }
-
-  .scrapbook-slot-content {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-
-  .scrapbook-slot-controls {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    z-index: 10;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-
-    .scrapbook-slot-remove-btn {
-      background-color: rgba(255, 255, 255, 0.8);
-      border: 1px solid #ccc;
-      border-radius: 50%;
-      width: 20px;
-      height: 20px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      font-size: 10px;
-      
-      &:hover {
-        background-color: rgba(255, 0, 0, 0.1);
-      }
-    }
-  }
-
-  &:hover .scrapbook-slot-controls {
-    opacity: 1;
-  }
-}
\ No newline at end of file
diff --git a/src/client/views/nodes/scrapbook/ScrapbookSlot.tsx b/src/client/views/nodes/scrapbook/ScrapbookSlot.tsx
deleted file mode 100644
index 2c8f93778..000000000
--- a/src/client/views/nodes/scrapbook/ScrapbookSlot.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-
-//IGNORE FOR NOW, CURRENTLY NOT USED IN SCRAPBOOK IMPLEMENTATION
-export interface SlotDefinition {
-    id: string;
-    x: number; y: number;
-    defaultWidth: number;
-    defaultHeight: number;
-  }
-  
-  export interface SlotContentMap {
-    slotId: string;
-    docId?: string;
-  }
-  
-  export interface ScrapbookConfig {
-    slots: SlotDefinition[];
-    contents?: SlotContentMap[];
-  }
-  
-  export const DEFAULT_SCRAPBOOK_CONFIG: ScrapbookConfig = {
-    slots: [
-      { id: "slot1", x: 10, y: 10, defaultWidth: 180, defaultHeight: 120 },
-      { id: "slot2", x: 200, y: 10, defaultWidth: 180, defaultHeight: 120 },
-      // …etc
-    ],
-    contents: []
-  };
-  
\ No newline at end of file
diff --git a/src/client/views/nodes/scrapbook/ScrapbookSlotTypes.ts b/src/client/views/nodes/scrapbook/ScrapbookSlotTypes.ts
deleted file mode 100644
index 686917d9a..000000000
--- a/src/client/views/nodes/scrapbook/ScrapbookSlotTypes.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-// ScrapbookSlotTypes.ts
-export interface SlotDefinition {
-    id: string;
-    title: string;
-    x: number;
-    y: number;
-    defaultWidth: number;
-    defaultHeight: number;
-  }
-  
-  export interface ScrapbookConfig {
-    slots: SlotDefinition[];
-    contents?: { slotId: string; docId: string }[];
-  }
-  
-  // give it three slots by default:
-  export const DEFAULT_SCRAPBOOK_CONFIG: ScrapbookConfig = {
-    slots: [
-      { id: "main",      title: "Main Content", x: 20,  y: 20,  defaultWidth: 360, defaultHeight: 200 },
-      { id: "notes",     title: "Notes",        x: 20,  y: 240, defaultWidth: 360, defaultHeight: 160 },
-      { id: "resources", title: "Resources",    x: 400, y: 20,  defaultWidth: 320, defaultHeight: 380 },
-    ],
-    contents: [],
-  };
-  
\ No newline at end of file
diff --git a/src/client/views/nodes/scrapbook/scrapbookleftover.ts b/src/client/views/nodes/scrapbook/scrapbookleftover.ts
index 2f381ab95..ee7a858e4 100644
--- a/src/client/views/nodes/scrapbook/scrapbookleftover.ts
+++ b/src/client/views/nodes/scrapbook/scrapbookleftover.ts
@@ -1,8 +1,4 @@
-
-   
-
-
-            //DocListCast(this.Document.items).map(doc => DocListCast(doc[Doc.LayoutDataKey(doc)])
+ //DocListCast(this.Document.items).map(doc => DocListCast(doc[Doc.LayoutDataKey(doc)])
 
             if (placeholder) {
                 /**Look at the autotags and see what matches*RTFCast(d[Doc.LayoutDataKey(d)])?.Text*/
-- 
cgit v1.2.3-70-g09d2


From bf33580a66c1f8ce87e85bea701415788a887401 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 11 Jun 2025 11:50:45 -0400
Subject: change how autoTag is triggered for images to not use a reaction

---
 src/client/views/nodes/ImageBox.tsx                | 83 +++++++++-------------
 src/client/views/search/FaceRecognitionHandler.tsx |  5 +-
 2 files changed, 34 insertions(+), 54 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 1e16bbfc9..d7e21b0a6 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -142,56 +142,39 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     autoTag = async () => {
-
-    try {
-      // 1) grab the full-size URL
-      const layoutKey = Doc.LayoutDataKey(this.Document);
-      const url = ImageCastWithSuffix(this.Document[layoutKey], '_o') ?? '';
-      if (!url) throw new Error('No image URL found');
-
-      // 2) convert to base64
-      const base64 = await imageUrlToBase64(url);
-      if (!base64) throw new Error('Failed to load image data');
-
-      // 3) ask GPT for labels one label: PERSON or LANDSCAPE
-      const raw = await gptImageLabel(
-        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. For example: "LANDSCAPE BUNNY NATURE FOREST PEACEFUL OUTDOORS". Then add one final lengthier summary tag (separated by underscores)
-        that describes the image.`
-      );
-
-    const { nativeWidth, nativeHeight } = this.nativeSize;
-    const aspectRatio = nativeWidth && nativeHeight
-      ? (nativeWidth / nativeHeight).toFixed(2)
-      : '1.00';
-
-      // 4) normalize and prefix
-      const label = raw
-        .trim()
-        .toUpperCase()
-
-      // 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>();
-      tokens.forEach(tok => {
-        (this.Document.$tags_chat as List<string>).push(tok)});
-        (this.Document.$tags_chat as List<string>).push(`ASPECT_${aspectRatio}`); 
-
-      // 6) flip on “show tags” in the layout 
-      //    (same flag that ImageLabelBox.toggleDisplayInformation uses)
-      this.Document._layout_showTags = true;
-
-    } catch (err) {
-      console.error('autoTag failed:', err);
-    } finally {
-    }
-  };
-      
-
-
+        if (this.Document.$tags_chat) return;
+        try {
+            // 1) grab the full-size URL
+            const layoutKey = Doc.LayoutDataKey(this.Document);
+            const url = ImageCastWithSuffix(this.Document[layoutKey], '_o');
+            if (!url) throw new Error('No image URL found');
+
+            // 2) convert to base64
+            const base64 = await imageUrlToBase64(url);
+            if (!base64) throw new Error('Failed to load image data');
+
+            // 3) ask GPT for labels one label: PERSON or LANDSCAPE
+            const label = await gptImageLabel(
+                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. 
+                For example: "LANDSCAPE BUNNY NATURE FOREST PEACEFUL OUTDOORS". 
+                Then add one final lengthier summary tag (separated by underscores) that describes the image.`
+            ).then(raw => raw.trim().toUpperCase());
+
+            const { nativeWidth, nativeHeight } = this.nativeSize;
+            const aspectRatio = ((nativeWidth || 1) / (nativeHeight || 1)).toFixed(2);
+
+            // 5) stash it on the Doc
+            //    overwrite any old tags so re-runs still work
+            this.Document.$tags_chat = new List<string>([...label.split(/\s+/), `ASPECT_${aspectRatio}`]);
+
+            // 6) flip on “show tags” in the layout
+            this.Document._layout_showTags = true;
+        } catch (err) {
+            console.error('autoTag failed:', err);
+        }
+    };
 
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
         const visibleAnchor = this._getAnchor?.(this._savedAnnotations, true); // use marquee anchor, otherwise, save zoom/pan as anchor
diff --git a/src/client/views/search/FaceRecognitionHandler.tsx b/src/client/views/search/FaceRecognitionHandler.tsx
index 256e68afd..dac91b89a 100644
--- a/src/client/views/search/FaceRecognitionHandler.tsx
+++ b/src/client/views/search/FaceRecognitionHandler.tsx
@@ -9,7 +9,6 @@ import { ImageField } from '../../../fields/URLField';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
 import { DocumentManager } from '../../util/DocumentManager';
-import { reaction } from 'mobx';
 import { DocumentView } from '../nodes/DocumentView';
 
 /**
@@ -210,9 +209,7 @@ export class FaceRecognitionHandler {
         } else if (imgDoc.type === DocumentType.LOADING && !imgDoc.loadingError) {
             setTimeout(() => this.classifyFacesInImage(imgDocView), 1000);
         } else {
-            reaction(() => ({sel:imgDocView.isSelected()}), ({sel}) => !sel &&
-             imgDocView.ComponentView?.autoTag?.(), {fireImmediately: true} 
-        )
+            imgDocView.ComponentView?.autoTag?.();
             const imgUrl = ImageCast(imgDoc[Doc.LayoutDataKey(imgDoc)]);
             if (imgUrl && !DocListCast(Doc.MyFaceCollection?.examinedFaceDocs).includes(imgDoc[DocData])) {
                 // only examine Docs that have an image and that haven't already been examined.
-- 
cgit v1.2.3-70-g09d2


From b4db1e2467337468139d0e92ef94799c4143a0fc Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 11 Jun 2025 12:43:16 -0400
Subject: added outpaintable method to streamline determining which docs can be
 outpainted.

---
 src/client/views/DocumentDecorations.tsx          |  8 ++++----
 src/client/views/ViewBoxInterface.ts              |  1 +
 src/client/views/nodes/ImageBox.tsx               | 10 ++++------
 src/client/views/nodes/scrapbook/ScrapbookBox.tsx |  2 ++
 4 files changed, 11 insertions(+), 10 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index f36312056..383960444 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -1,7 +1,7 @@
+import { IconButton } from '@dash/components';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
-import { IconButton } from '@dash/components';
 import { action, computed, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -27,6 +27,7 @@ import './DocumentDecorations.scss';
 import { InkStrokeProperties } from './InkStrokeProperties';
 import { InkingStroke } from './InkingStroke';
 import { ObservableReactComponent } from './ObservableReactComponent';
+import { TagsView } from './TagsView';
 import { CollectionDockingView } from './collections/CollectionDockingView';
 import { CollectionFreeFormView } from './collections/collectionFreeForm';
 import { Colors } from './global/globalEnums';
@@ -35,7 +36,6 @@ import { DocumentView } from './nodes/DocumentView';
 import { ImageBox } from './nodes/ImageBox';
 import { OpenWhere, OpenWhereMod } from './nodes/OpenWhere';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
-import { TagsView } from './TagsView';
 import { ScrapbookBox } from './nodes/scrapbook/ScrapbookBox';
 
 interface DocumentDecorationsProps {
@@ -431,7 +431,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
     onPointerDown = (e: React.PointerEvent): void => {
         SnappingManager.SetIsResizing(DocumentView.Selected().lastElement()?.Document[Id]); // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them
         DocumentView.Selected()
-            .filter(dv => e.shiftKey && dv.ComponentView instanceof ImageBox || dv.ComponentView instanceof ScrapbookBox)
+            .filter(dv => e.shiftKey && dv.ComponentView?.isOutpaintable?.())
             .forEach(dv => {
                 dv.Document[dv.ComponentView!.fieldKey + '_outpaintOriginalWidth'] = NumCast(dv.Document._width);
                 dv.Document[dv.ComponentView!.fieldKey + '_outpaintOriginalHeight'] = NumCast(dv.Document._height);
@@ -487,7 +487,7 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
                 this._interactionLock = true;
                 this._snapPt = thisPt;
 
-                const outpainted = e.shiftKey ? DocumentView.Selected().filter(dv => dv.ComponentView instanceof ImageBox || dv.ComponentView instanceof ScrapbookBox) : [];
+                const outpainted = e.shiftKey ? DocumentView.Selected().filter(dv => dv.ComponentView?.isOutpaintable?.()) : [];
                 const notOutpainted = e.shiftKey ? DocumentView.Selected().filter(dv => !outpainted.includes(dv)) : DocumentView.Selected();
 
                 // Special handling for shift-drag resize (outpainting of Images by resizing without scaling content - fill in with firefly GAI)
diff --git a/src/client/views/ViewBoxInterface.ts b/src/client/views/ViewBoxInterface.ts
index b532dfe35..83e395867 100644
--- a/src/client/views/ViewBoxInterface.ts
+++ b/src/client/views/ViewBoxInterface.ts
@@ -25,6 +25,7 @@ export abstract class ViewBoxInterface<P> extends ObservableReactComponent<React
     hasChildDocs?: () => Doc[];
     docEditorView?: () => void;
     autoTag?: () => void; // auto tag the document
+    isOutpaintable?: () => boolean; // can document be resized and outpainted
     showSmartDraw?: (x: number, y: number, regenerate?: boolean) => void;
     updateIcon?: (usePanelDimensions?: boolean) => Promise<void>; // updates the icon representation of the document
     getAnchor?: (addAsAnnotation: boolean, pinData?: PinProps) => Doc; // returns an Anchor Doc that represents the current state of the doc's componentview (e.g., the current playhead location of a an audio/video box)
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index d7e21b0a6..a99421f6d 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -262,9 +262,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     };
 
-    handleSelection = async (selection: string) => {
-        this._searchInput = selection;
-    };
+    handleSelection = async (selection: string) => (this._searchInput = selection);
 
     drop = undoable(
         action((e: Event, de: DragManager.DropEvent) => {
@@ -429,9 +427,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     @action
-    handlePromptChange = (val: string | number) => {
-        this._outpaintPromptInput = '' + val;
-    };
+    handlePromptChange = (val: string | number) => (this._outpaintPromptInput = '' + val);
 
     @action
     submitOutpaintPrompt = () => {
@@ -532,6 +528,8 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return this._props.PanelWidth() / this._props.PanelHeight() < this.nativeSize.nativeWidth / this.nativeSize.nativeHeight;
     }
 
+    isOutpaintable = () => true;
+
     componentUI = (/* boundsLeft: number, boundsTop: number*/) =>
         !this._showOutpaintPrompt ? null : (
             <div
diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
index 94522c979..2db76c76f 100644
--- a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
+++ b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
@@ -174,6 +174,8 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         );
     }
 
+    isOutpaintable = () => true;
+
     @action
     generateAiImage = (prompt: string) => {
         this._loading = true;
-- 
cgit v1.2.3-70-g09d2


From dd84952de3381049aca6742054f28bf502df2e16 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 19 Jun 2025 15:21:53 -0400
Subject: removing references to Box types from documentdecorations - added
 showBorderRounding to viewBoxInterface.

---
 src/client/views/ViewBoxInterface.ts                                  | 1 +
 .../views/collections/collectionFreeForm/CollectionFreeFormView.tsx   | 3 ++-
 src/client/views/nodes/ImageBox.tsx                                   | 3 ++-
 src/client/views/nodes/formattedText/FormattedTextBox.tsx             | 3 ++-
 src/client/views/nodes/scrapbook/ScrapbookBox.tsx                     | 4 +++-
 5 files changed, 10 insertions(+), 4 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/views/ViewBoxInterface.ts b/src/client/views/ViewBoxInterface.ts
index 83e395867..514dc4ae8 100644
--- a/src/client/views/ViewBoxInterface.ts
+++ b/src/client/views/ViewBoxInterface.ts
@@ -26,6 +26,7 @@ export abstract class ViewBoxInterface<P> extends ObservableReactComponent<React
     docEditorView?: () => void;
     autoTag?: () => void; // auto tag the document
     isOutpaintable?: () => boolean; // can document be resized and outpainted
+    showBorderRounding?: () => boolean; // can document borders be rounded
     showSmartDraw?: (x: number, y: number, regenerate?: boolean) => void;
     updateIcon?: (usePanelDimensions?: boolean) => Promise<void>; // updates the icon representation of the document
     getAnchor?: (addAsAnnotation: boolean, pinData?: PinProps) => Doc; // returns an Anchor Doc that represents the current state of the doc's componentview (e.g., the current playhead location of a an audio/video box)
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 3571dab1a..32ace463d 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -8,7 +8,7 @@ import { computedFn } from 'mobx-utils';
 import * as React from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
 import ReactLoading from 'react-loading';
-import { ClientUtils, DashColor, lightOrDark, OmitKeys, returnFalse, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../../ClientUtils';
+import { ClientUtils, DashColor, lightOrDark, OmitKeys, returnFalse, returnTrue, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../../ClientUtils';
 import { DateField } from '../../../../fields/DateField';
 import { Doc, DocListCast, Field, FieldType, Opt, StrListCast } from '../../../../fields/Doc';
 import { DocData, DocLayout, Height, Width } from '../../../../fields/DocSymbols';
@@ -2065,6 +2065,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         }
         this.childDocs.some(doc => !this._renderCutoffData.get(doc[Id])) && setTimeout(this.incrementalRender, 1);
     });
+    showBorderRounding = returnTrue;
     showPresPaths = () => SnappingManager.ShowPresPaths;
     brushedView = () => this._brushedView;
     gridColor = () => DashColor(lightOrDark(this.backgroundColor)).fade(0.5).toString(); // prettier-ignore
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 356f9e13f..4d8d486b1 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -8,7 +8,7 @@ import { extname } from 'path';
 import * as React from 'react';
 import { AiOutlineSend } from 'react-icons/ai';
 import ReactLoading from 'react-loading';
-import { ClientUtils, imageUrlToBase64, DashColor, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, UpdateIcon } from '../../../ClientUtils';
+import { ClientUtils, imageUrlToBase64, DashColor, returnEmptyString, returnFalse, returnOne, returnZero, setupMoveUpEvents, UpdateIcon, returnTrue } from '../../../ClientUtils';
 import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
@@ -994,6 +994,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return { width, height };
     };
     savedAnnotations = () => this._savedAnnotations;
+    showBorderRounding = returnTrue;
     rejectDrop = (de: DragManager.DropEvent, subView?: DocumentView | undefined) => (this.dataDoc[this.fieldKey] === undefined ? true : (this._props.rejectDrop?.(de, subView) ?? false));
     render() {
         TraceMobx();
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index d700ce9f8..07cb795f1 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -13,7 +13,7 @@ import { EditorState, NodeSelection, Plugin, Selection, TextSelection, Transacti
 import { EditorView, NodeViewConstructor } from 'prosemirror-view';
 import * as React from 'react';
 import { BsMarkdownFill } from 'react-icons/bs';
-import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, ClientUtils, DivWidth, removeStyleSheet, returnFalse, returnZero, setupMoveUpEvents, simMouseEvent, smoothScroll, StopEvent } from '../../../../ClientUtils';
+import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, ClientUtils, DivWidth, removeStyleSheet, returnFalse, returnTrue, returnZero, setupMoveUpEvents, simMouseEvent, smoothScroll, StopEvent } from '../../../../ClientUtils';
 import { DateField } from '../../../../fields/DateField';
 import { CreateLinkToActiveAudio, Doc, DocListCast, Field, FieldType, Opt, StrListCast } from '../../../../fields/Doc';
 import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, DocCss, ForceServerWrite, UpdatingFromServer } from '../../../../fields/DocSymbols';
@@ -1088,6 +1088,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         return anchorDoc ?? this.Document;
     }
 
+    showBorderRounding = returnTrue;
     getView = (doc: Doc, options: FocusViewOptions) => {
         if (DocListCast(this.dataDoc[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) {
             return SidebarAnnos.getView(this._sidebarRef.current, this.SidebarShown, () => this.toggleSidebar(false), doc, options);
diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
index ff757af88..d0ae6194f 100644
--- a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
+++ b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
@@ -24,6 +24,7 @@ import { ScrapbookItemConfig } from './ScrapbookPreset';
 import { createPreset, getPresetNames } from './ScrapbookPresetRegistry';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { DocUtils } from '../../../documents/DocUtils';
+import { returnTrue } from '../../../../ClientUtils';
 
 function createPlaceholder(cfg: ScrapbookItemConfig, doc: Doc) {
     const placeholder = new Doc();
@@ -175,7 +176,8 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         );
     }
 
-    isOutpaintable = () => true;
+    isOutpaintable = returnTrue;
+    showBorderRounding = returnTrue;
 
     @action
     generateAiImage = (prompt: string) => {
-- 
cgit v1.2.3-70-g09d2


From c0daf8b6aff92b71662d9791aeaa4bb63076dd02 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 19 Jun 2025 15:30:38 -0400
Subject: from last

---
 src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 4 ++--
 src/client/views/nodes/ImageBox.tsx                             | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 128606675..ff78b332a 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -589,8 +589,8 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
         });
 
         this._props.addDocument?.(scrapbook);
-        const portal = Docs.Create.FreeformDocument(selected, { title: 'summarized documents', x: this.Bounds.left + 200, y: this.Bounds.top, isGroup: true, backgroundColor: 'transparent' });
-        DocUtils.MakeLink(scrapbook, portal, { link_relationship: 'summary of:summarized by' });
+        const portal = Docs.Create.FreeformDocument(selected, { title: 'docs in scrapbook', x: this.Bounds.left + 200, y: this.Bounds.top, isGroup: true, backgroundColor: 'transparent' });
+        DocUtils.MakeLink(scrapbook, portal, { link_relationship: 'scrapbook of:in scrapbook' });
 
         portal.hidden = true;
         this._props.addDocument?.(portal);
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 4d8d486b1..5b738ee19 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -262,7 +262,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     };
 
-    handleSelection = async (selection: string) => (this._searchInput = selection);
+    handleSelection = (selection: string) => (this._searchInput = selection);
 
     drop = undoable(
         action((e: Event, de: DragManager.DropEvent) => {
-- 
cgit v1.2.3-70-g09d2

