1 files changed, 56 insertions, 2 deletions

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 8ed59c6e1..1e16bbfc9 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, 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 +16,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';
@@ -45,6 +45,7 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { FocusViewOptions } from './FocusViewOptions';
 import './ImageBox.scss';
 import { OpenWhere } from './OpenWhere';
+import { gptImageLabel } from '../../apis/gpt/GPT';
 
 const DefaultPath = '/assets/unknown-file-icon-hi.png';
 export class ImageEditorData {
@@ -139,6 +140,59 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._dropDisposer?.();
         ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this), this.Document));
     };
+
+    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 {
+    }
+  };
+      
+
+
+
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
         const visibleAnchor = this._getAnchor?.(this._savedAnnotations, true); // use marquee anchor, otherwise, save zoom/pan as anchor
         const anchor =