From 6900008b1bb89cca1eab7b95f17ee33fa335282f Mon Sep 17 00:00:00 2001 From: sharkiecodes 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() { 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 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() { 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() { 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 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() { 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() { }; 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(); + (this.Document.$tags_chat as List).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 { + this.Document.$tags_chat = new List(); + 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).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 Doc.IsSearchMatch(this.Document), @@ -1269,6 +1279,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent ({ 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() }; 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[] = placeholder.map(doc => + new Set(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(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 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 { 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 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() { - 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(); + // @observable configs : ScrapbookItemConfig[] constructor(props: FieldViewProps) { @@ -337,7 +342,7 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent() } } - + async generateAiImage() { this.setState({ loading: true }); @@ -365,10 +370,98 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent() 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() }; render() { - const { loading, src } = this.state; + return (
- {loading && ( + {this.loading && (
)} - {loading && ( + {this.loading && (
@@ -465,15 +558,14 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent()
)} {/* Render AI-generated background */} - {src && ( - - )} - - + )} 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() { // 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 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() { 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() { // 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(); - (this.Document.$tags_chat as List).push(label); + tokens.forEach(tok => { + (this.Document.$tags_chat as List).push(tok)}); + //!!! changed may 11 (this.Document.$tags_chat as List).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() } - 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() 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 (
@@ -564,8 +591,37 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent() {...this._props} Document={this.imgDoc} fieldKey="data" - /> - )} )} + + {this._props.isContentActive() && ( +
e.stopPropagation()} + > + +
+ )} + + Date: Tue, 27 May 2025 11:37:51 -0400 Subject: fixed image rengerate to hide ui buttons first. --- src/client/views/nodes/ImageBox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 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 f7ad5c7e2..7d130b4fb 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -689,7 +689,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { @computed get overlayImageIcon() { const usePath = this.layoutDoc[`_${this.fieldKey}_usePath`]; - return ( + return this._regenerateLoading ? null : ( @@ -731,7 +731,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { ); } @computed get regenerateImageIcon() { - return ( + return this._regenerateLoading ? null : (
Date: Tue, 27 May 2025 14:27:51 -0400 Subject: canceling image outpaiting cancels outpaint ui from showing up now. --- src/client/views/nodes/ImageBox.tsx | 1 + 1 file changed, 1 insertion(+) (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 7d130b4fb..6380dec17 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -369,6 +369,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { this.Document._width = origWidth; this.Document._height = origHeight; this._outpaintingInProgress = false; + this.Document[this.fieldKey + '_outpaintOriginalWidth'] = undefined; this.closeOutpaintPrompt(); }; -- cgit v1.2.3-70-g09d2 From 76a21badf70c82388872ec5485858ab06e303bca Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 30 May 2025 09:57:46 -0400 Subject: fixed using empty images in templates to support assigning a new image and getting native dimensions right. fixed native dimensions of images within templates to not use native dims of template. fixed undo for text templates that don't have a text box. fixed image dropping on images that are empty (to assign the dropped image). --- src/client/documents/DocUtils.ts | 20 +++--- .../collections/collectionFreeForm/MarqueeView.tsx | 1 + src/client/views/nodes/EquationBox.tsx | 9 +-- src/client/views/nodes/ImageBox.tsx | 84 +++++++++++++--------- src/client/views/nodes/LabelBox.tsx | 8 ++- .../views/nodes/formattedText/FormattedTextBox.tsx | 11 +-- src/fields/Doc.ts | 4 +- 7 files changed, 80 insertions(+), 57 deletions(-) (limited to 'src/client/views/nodes/ImageBox.tsx') diff --git a/src/client/documents/DocUtils.ts b/src/client/documents/DocUtils.ts index 41a61b154..5aae50ee8 100644 --- a/src/client/documents/DocUtils.ts +++ b/src/client/documents/DocUtils.ts @@ -642,27 +642,27 @@ export namespace DocUtils { return dd; } - export function assignUploadInfo(result: Upload.FileInformation, protoIn: Doc) { + export function assignUploadInfo(result: Upload.FileInformation, protoIn: Doc, fieldKey: string = 'data') { const proto = protoIn; if (Upload.isTextInformation(result)) { proto.text = result.rawText; } if (Upload.isVideoInformation(result)) { - proto.data_duration = result.duration; + proto[`${fieldKey}_duration`] = result.duration; } if (Upload.isImageInformation(result)) { const maxNativeDim = Math.max(result.nativeHeight, result.nativeWidth); const exifRotation = StrCast(result.exifData?.data?.Orientation).toLowerCase(); - proto.data_nativeOrientation = result.exifData?.data?.image?.Orientation ?? (exifRotation.includes('rotate 90') || exifRotation.includes('rotate 270') ? 5 : undefined); - proto.data_nativeWidth = result.nativeWidth < result.nativeHeight ? (maxNativeDim * result.nativeWidth) / result.nativeHeight : maxNativeDim; - proto.data_nativeHeight = result.nativeWidth < result.nativeHeight ? maxNativeDim : maxNativeDim / (result.nativeWidth / result.nativeHeight); - if (NumCast(proto.data_nativeOrientation) >= 5) { - proto.data_nativeHeight = result.nativeWidth < result.nativeHeight ? (maxNativeDim * result.nativeWidth) / result.nativeHeight : maxNativeDim; - proto.data_nativeWidth = result.nativeWidth < result.nativeHeight ? maxNativeDim : maxNativeDim / (result.nativeWidth / result.nativeHeight); + proto[`${fieldKey}_nativeOrientation`] = result.exifData?.data?.image?.Orientation ?? (exifRotation.includes('rotate 90') || exifRotation.includes('rotate 270') ? 5 : undefined); + proto[`${fieldKey}_nativeWidth`] = result.nativeWidth < result.nativeHeight ? (maxNativeDim * result.nativeWidth) / result.nativeHeight : maxNativeDim; + proto[`${fieldKey}_nativeHeight`] = result.nativeWidth < result.nativeHeight ? maxNativeDim : maxNativeDim / (result.nativeWidth / result.nativeHeight); + if (NumCast(proto[`${fieldKey}_nativeOrientation`]) >= 5) { + proto[`${fieldKey}_nativeHeight`] = result.nativeWidth < result.nativeHeight ? (maxNativeDim * result.nativeWidth) / result.nativeHeight : maxNativeDim; + proto[`${fieldKey}_nativeWidth`] = result.nativeWidth < result.nativeHeight ? maxNativeDim : maxNativeDim / (result.nativeWidth / result.nativeHeight); } - proto.data_exif = JSON.stringify(result.exifData?.data); - proto.data_contentSize = result.contentSize; + proto[`${fieldKey}_exif`] = JSON.stringify(result.exifData?.data); + proto[`${fieldKey}_contentSize`] = result.contentSize; // exif gps data coordinates are stored in DMS (Degrees Minutes Seconds), the following operation converts that to decimal coordinates const latitude = result.exifData?.data?.GPSLatitude; const latitudeDirection = result.exifData?.data?.GPSLatitudeRef; diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 37959a5f0..c120cddf0 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -190,6 +190,7 @@ export class MarqueeView extends ObservableReactComponent FormattedTextBox.LiveTextUndo?.end(), 100); e.stopPropagation(); } }; diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx index 3cacb6692..8e48a0b54 100644 --- a/src/client/views/nodes/EquationBox.tsx +++ b/src/client/views/nodes/EquationBox.tsx @@ -6,7 +6,7 @@ import { TraceMobx } from '../../../fields/util'; import { DocUtils } from '../../documents/DocUtils'; import { DocumentType } from '../../documents/DocumentTypes'; import { Docs } from '../../documents/Documents'; -import { undoBatch } from '../../util/UndoManager'; +import { undoBatch, UndoManager } from '../../util/UndoManager'; import { ViewBoxBaseComponent } from '../DocComponent'; import { StyleProp } from '../StyleProp'; import { DocumentView } from './DocumentView'; @@ -21,6 +21,7 @@ export class EquationBox extends ViewBoxBaseComponent() { return FieldView.LayoutString(EquationBox, fieldKey); } _ref: React.RefObject = React.createRef(); + _liveTextUndo: UndoManager.Batch | undefined; // captured undo batch when typing a new text note into a collection constructor(props: FieldViewProps) { super(props); @@ -30,6 +31,8 @@ export class EquationBox extends ViewBoxBaseComponent() { componentDidMount() { this._props.setContentViewBox?.(this); if (DocumentView.SelectOnLoad === this.Document && (!DocumentView.LightboxDoc() || DocumentView.LightboxContains(this.DocumentView?.()))) { + this._liveTextUndo = FormattedTextBox.LiveTextUndo; + FormattedTextBox.LiveTextUndo = undefined; this._props.select(false); this._ref.current?.mathField.focus(); @@ -113,9 +116,7 @@ export class EquationBox extends ViewBoxBaseComponent() { className="equationBox-cont" onKeyDown={e => e.stopPropagation()} onPointerDown={e => !e.ctrlKey && e.stopPropagation()} - onBlur={() => { - FormattedTextBox.LiveTextUndo?.end(); - }} + onBlur={() => this._liveTextUndo?.end()} style={{ transform: `scale(${scale})`, minWidth: `${100 / scale}%`, diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 6380dec17..30fc44f62 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -112,6 +112,28 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { this._props.setContentViewBox?.(this); } + @computed get oupaintOriginalSize(): { width: number; height: number } { + return { + width: NumCast(this.Document[this.fieldKey + '_outpaintOriginalWidth']), + height: NumCast(this.Document[this.fieldKey + '_outpaintOriginalHeight']), + }; + } + set outpaintOriginalSize(prop: { width: number; height: number } | undefined) { + this.Document[this.fieldKey + '_outpaintOriginalWidth'] = prop?.width; + this.Document[this.fieldKey + '_outpaintOriginalHeight'] = prop?.height; + } + + @computed get imgNativeSize() { + return { + nativeWidth: NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth'], 500)), + nativeHeight: NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], NumCast(this.layoutDoc[this.fieldKey + '_nativeHeight'], 500)), + }; + } + set imgNativeSize(prop: { nativeWidth: number; nativeHeight: number }) { + this.dataDoc[this.fieldKey + '_nativeWidth'] = prop.nativeWidth; + this.dataDoc[this.fieldKey + '_nativeHeight'] = prop.nativeHeight; + } + protected createDropTarget = (ele: HTMLDivElement) => { this._mainCont = ele; this._dropDisposer?.(); @@ -153,7 +175,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { () => ({ nativeSize: this.nativeSize, width: NumCast(this.layoutDoc._width), height: this.layoutDoc._height }), ({ nativeSize, width, height }) => { if (!this.layoutDoc._layout_nativeDimEditable || !height || this.layoutDoc.layout_resetNativeDim) { - this.layoutDoc.layout_resetNativeDim = undefined; // template images need to reset their dimensions when they are rendered with content. afterwards, remove this flag. + this.layoutDoc.layout_resetNativeDim = undefined; // reset dimensions of templates rendered with content or if image changes. afterwards, remove this flag. this.layoutDoc._height = (width * nativeSize.nativeHeight) / nativeSize.nativeWidth; } }, @@ -170,7 +192,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { { fireImmediately: true } ); this._disposers.outpaint = reaction( - () => this.Document[this.fieldKey + '_outpaintOriginalWidth'] !== undefined && !SnappingManager.ShiftKey, + () => this.outpaintOriginalSize?.width && !SnappingManager.ShiftKey, complete => complete && this.openOutpaintPrompt(), { fireImmediately: true } ); @@ -231,14 +253,15 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { DrawingFillHandler.drawingToImage(this.Document, 90, newPrompt(descText), drag)?.then(action(() => (this._regenerateLoading = false))); added = false; } else if (de.altKey || !this.dataDoc[this.fieldKey]) { - const layoutDoc = de.complete.docDragData?.draggedDocuments[0]; - const targetField = Doc.LayoutDataKey(layoutDoc); - const targetDoc = layoutDoc[DocData]; - if (targetDoc[targetField] instanceof ImageField) { + const dropDoc = de.complete.docDragData?.draggedDocuments[0]; + const dropDocFieldKey = Doc.LayoutDataKey(dropDoc); + const dropDataDoc = dropDoc[DocData]; + if (dropDataDoc[dropDocFieldKey] instanceof ImageField) { added = true; - this.dataDoc[this.fieldKey] = ObjectField.MakeCopy(targetDoc[targetField] as ImageField); - Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(targetDoc), this.fieldKey); - Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(targetDoc), this.fieldKey); + this.dataDoc.layout_resetNativeDim = true; + this.dataDoc[this.fieldKey] = ObjectField.MakeCopy(dropDataDoc[dropDocFieldKey] as ImageField); + Doc.SetNativeWidth(this.dataDoc, Doc.NativeWidth(dropDataDoc), this.fieldKey); + Doc.SetNativeHeight(this.dataDoc, Doc.NativeHeight(dropDataDoc), this.fieldKey); } } added === false && e.preventDefault(); @@ -257,18 +280,17 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { @undoBatch setNativeSize = action(() => { - const oldnativeWidth = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']); + const oldnativeWidth = this.imgNativeSize.nativeWidth; const nscale = NumCast(this._props.PanelWidth()) * NumCast(this.layoutDoc._freeform_scale, 1); const nw = nscale / oldnativeWidth; - this.dataDoc[this.fieldKey + '_nativeHeight'] = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight']) * nw; - this.dataDoc[this.fieldKey + '_nativeWidth'] = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']) * nw; + this.imgNativeSize = { nativeWidth: this.imgNativeSize.nativeWidth * nw, nativeHeight: this.imgNativeSize.nativeHeight * nw }; this.dataDoc.freeform_panX = nw * NumCast(this.dataDoc.freeform_panX); this.dataDoc.freeform_panY = nw * NumCast(this.dataDoc.freeform_panY); this.dataDoc.freeform_panX_max = this.dataDoc.freeform_panX_max ? nw * NumCast(this.dataDoc.freeform_panX_max) : undefined; this.dataDoc.freeform_panX_min = this.dataDoc.freeform_panX_min ? nw * NumCast(this.dataDoc.freeform_panX_min) : undefined; this.dataDoc.freeform_panY_max = this.dataDoc.freeform_panY_max ? nw * NumCast(this.dataDoc.freeform_panY_max) : undefined; this.dataDoc.freeform_panY_min = this.dataDoc.freeform_panY_min ? nw * NumCast(this.dataDoc.freeform_panY_min) : undefined; - const newnativeWidth = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']); + const newnativeWidth = this.imgNativeSize.nativeWidth; DocListCast(this.dataDoc[this.annotationKey]).forEach(doc => { doc.x = (NumCast(doc.x) / oldnativeWidth) * newnativeWidth; doc.y = (NumCast(doc.y) / oldnativeWidth) * newnativeWidth; @@ -280,13 +302,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { }); @undoBatch rotate = action(() => { - const nw = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']); - const nh = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight']); + const nativeSize = this.imgNativeSize; const w = this.layoutDoc._width; const h = this.layoutDoc._height; this.dataDoc[this.fieldKey + '_rotation'] = (NumCast(this.dataDoc[this.fieldKey + '_rotation']) + 90) % 360; - this.dataDoc[this.fieldKey + '_nativeWidth'] = nh; - this.dataDoc[this.fieldKey + '_nativeHeight'] = nw; + this.imgNativeSize = { nativeWidth: nativeSize.nativeHeight, nativeHeight: nativeSize.nativeWidth }; // swap width and height this.layoutDoc._width = h; this.layoutDoc._height = w; }); @@ -302,7 +322,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { const anchy = NumCast(cropping.y); const anchw = NumCast(cropping._width); const anchh = NumCast(cropping._height); - const viewScale = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth']) / anchw; + const viewScale = this.nativeSize.nativeWidth / anchw; cropping.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width); cropping.y = NumCast(this.Document.y); cropping.onClick = undefined; @@ -364,12 +384,9 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { @action cancelOutpaintPrompt = () => { - const origWidth = NumCast(this.Document[this.fieldKey + '_outpaintOriginalWidth']); - const origHeight = NumCast(this.Document[this.fieldKey + '_outpaintOriginalHeight']); - this.Document._width = origWidth; - this.Document._height = origHeight; + [this.Document._width, this.Document._height] = [this.oupaintOriginalSize.width, this.oupaintOriginalSize.height]; this._outpaintingInProgress = false; - this.Document[this.fieldKey + '_outpaintOriginalWidth'] = undefined; + this.outpaintOriginalSize = undefined; this.closeOutpaintPrompt(); }; @@ -417,8 +434,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { loadingOverlay.innerHTML = '
Generating outpainted image...
'; this._mainCont?.appendChild(loadingOverlay); - const origWidth = NumCast(this.Document[this.fieldKey + '_outpaintOriginalWidth']); - const origHeight = NumCast(this.Document[this.fieldKey + '_outpaintOriginalHeight']); + const { width: origWidth, height: origHeight } = this.oupaintOriginalSize; const response = await Networking.PostToServer('/outpaintImage', { imageUrl: currentPath, prompt: customPrompt, @@ -455,8 +471,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { this.Document.$ai = true; this.Document.$ai_outpainted = true; this.Document.$ai_outpaint_prompt = customPrompt; - this.Document[this.fieldKey + '_outpaintOriginalWidth'] = undefined; - this.Document[this.fieldKey + '_outpaintOriginalHeight'] = undefined; + this.outpaintOriginalSize = undefined; } else { this.cancelOutpaintPrompt(); alert('Failed to receive a valid image URL from server.'); @@ -669,8 +684,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { @computed get nativeSize() { TraceMobx(); if (this.paths.length && this.paths[0].includes(DefaultPath)) return { nativeWidth: NumCast(this.layoutDoc._width), nativeHeight: NumCast(this.layoutDoc._height), nativeOrientation: 0 }; - const nativeWidth = NumCast(this.dataDoc[this.fieldKey + '_nativeWidth'], NumCast(this.layoutDoc[this.fieldKey + '_nativeWidth'], 500)); - const nativeHeight = NumCast(this.dataDoc[this.fieldKey + '_nativeHeight'], NumCast(this.layoutDoc[this.fieldKey + '_nativeHeight'], 500)); + const { nativeWidth, nativeHeight } = this.imgNativeSize; const nativeOrientation = NumCast(this.dataDoc[this.fieldKey + '_nativeOrientation'], 1); return { nativeWidth, nativeHeight, nativeOrientation }; } @@ -821,7 +835,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { transform, transformOrigin, width: this._outpaintAlign ? 'max-content' : this._outpaintAlign ? '100%' : undefined, - height: this._outpaintVAlign ? 'max-content' : this.Document[this.fieldKey + '_outpaintOriginalWidth'] !== undefined ? '100%' : undefined, + height: this._outpaintVAlign ? 'max-content' : this.outpaintOriginalSize?.width ? '100%' : undefined, }} onError={action(e => (this._error = e.toString()))} draggable={false} @@ -944,6 +958,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { return { width, height }; }; savedAnnotations = () => this._savedAnnotations; + rejectDrop = (de: DragManager.DropEvent, subView?: DocumentView | undefined) => (this.dataDoc[this.fieldKey] === undefined ? true : (this._props.rejectDrop?.(de, subView) ?? false)); render() { TraceMobx(); const borderRad = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BorderRounding) as string; @@ -987,7 +1002,7 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { ScreenToLocalTransform={this.screenToLocalTransform} select={emptyFunction} focus={this.focus} - rejectDrop={this._props.rejectDrop} + rejectDrop={this.rejectDrop} getScrollHeight={this.getScrollHeight} NativeDimScaling={returnOne} isAnyChildContentActive={returnFalse} @@ -1049,8 +1064,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent() { if (result instanceof Error) { alert('Error uploading files - possibly due to unsupported file types'); } else { - this.dataDoc[this.fieldKey] = new ImageField(result.accessPaths.agnostic.client); - !(result instanceof Error) && DocUtils.assignUploadInfo(result, this.dataDoc); + runInAction(() => { + this.dataDoc.layout_resetNativeDim = true; + !(result instanceof Error) && DocUtils.assignUploadInfo(result, this.dataDoc, this.fieldKey); + this.dataDoc[this.fieldKey] = new ImageField(result.accessPaths.agnostic.client); + }); } disposer(); } else { diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx index 4cbe01b82..e1ecc2018 100644 --- a/src/client/views/nodes/LabelBox.tsx +++ b/src/client/views/nodes/LabelBox.tsx @@ -9,7 +9,7 @@ import { TraceMobx } from '../../../fields/util'; import { DocumentType } from '../../documents/DocumentTypes'; import { Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; -import { undoable } from '../../util/UndoManager'; +import { undoable, UndoManager } from '../../util/UndoManager'; import { ViewBoxBaseComponent } from '../DocComponent'; import { PinDocView, PinProps } from '../PinFuncs'; import { StyleProp } from '../StyleProp'; @@ -28,6 +28,7 @@ export class LabelBox extends ViewBoxBaseComponent() { private _timeout: NodeJS.Timeout | undefined; private _divRef: HTMLDivElement | null = null; private _disposers: { [key: string]: IReactionDisposer } = {}; + private _liveTextUndo: UndoManager.Batch | undefined; // captured undo batch when typing a new text note into a collection constructor(props: FieldViewProps) { super(props); @@ -220,8 +221,7 @@ export class LabelBox extends ViewBoxBaseComponent() { this.setText(this._divRef?.innerText ?? ''); if (!FormattedTextBox.tryKeepingFocus(e.relatedTarget, () => this._divRef?.focus())) { RichTextMenu.Instance?.updateMenu(undefined, undefined, undefined, undefined); - FormattedTextBox.LiveTextUndo?.end(); - FormattedTextBox.LiveTextUndo = undefined; + this._liveTextUndo?.end(); } }} dangerouslySetInnerHTML={{ @@ -236,6 +236,8 @@ export class LabelBox extends ViewBoxBaseComponent() { if (DocumentView.SelectOnLoad === this.Document) { DocumentView.SetSelectOnLoad(undefined); + this._liveTextUndo = FormattedTextBox.LiveTextUndo; + FormattedTextBox.LiveTextUndo = undefined; this._divRef.focus(); } this.fitTextToBox(this._divRef); diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 1827cd2dc..c8df6e50f 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -98,7 +98,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent { [key: string]: NodeViewConstructor }; private _curHighlights = new ObservableSet(['Audio Tags']); @@ -1536,6 +1537,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent disposer?.()); this.endUndoTypingBatch(); - FormattedTextBox.LiveTextUndo?.end(); - FormattedTextBox.LiveTextUndo = undefined; + this._liveTextUndo?.end(); this.unhighlightSearchTerms(); this.EditorView?.destroy(); RichTextMenu.Instance?.TextView === this && RichTextMenu.Instance.updateMenu(undefined, undefined, undefined, undefined); @@ -1795,8 +1797,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent !this.ProseRef?.contains(document.activeElement) && this._props.onBlur?.()); diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts index 366dc6a20..25e70d950 100644 --- a/src/fields/Doc.ts +++ b/src/fields/Doc.ts @@ -1202,12 +1202,12 @@ export namespace Doc { } export function NativeWidth(doc?: Doc, dataDoc?: Doc, useWidth?: boolean) { // if this is a field template, then don't use the doc's nativeWidth/height - return !doc ? 0 : NumCast(doc._nativeWidth, NumCast((dataDoc || doc)[Doc.LayoutDataKey(doc) + '_nativeWidth'], useWidth ? NumCast(doc._width) : 0)); + return !doc ? 0 : NumCast(doc._nativeWidth, doc[DocLayout].isTemplateDoc ? 0 : NumCast((dataDoc || doc)[Doc.LayoutDataKey(doc) + '_nativeWidth'], useWidth ? NumCast(doc._width) : 0)); } export function NativeHeight(doc?: Doc, dataDoc?: Doc, useHeight?: boolean) { if (!doc) return 0; const nheight = (Doc.NativeWidth(doc, dataDoc, useHeight) / NumCast(doc._width)) * NumCast(doc._height); // divide before multiply to avoid floating point errrorin case nativewidth = width - const dheight = NumCast((dataDoc || doc)[Doc.LayoutDataKey(doc) + '_nativeHeight'], useHeight ? NumCast(doc._height) : 0); + const dheight = doc[DocLayout].isTemplateDoc ? 0 : NumCast((dataDoc || doc)[Doc.LayoutDataKey(doc) + '_nativeHeight'], useHeight ? NumCast(doc._height) : 0); // if this is a field template, then don't use the doc's nativeWidth/height return NumCast(doc._nativeHeight, nheight || dheight); } -- cgit v1.2.3-70-g09d2 From 215f874c5f7f28964a3428909fcee0f667388bae Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 1 Jun 2025 16:07:30 -0400 Subject: a number of fixes to document creator to fix preview of templates and templates with images. --- src/client/views/collections/TabDocView.tsx | 4 +- .../DocCreatorMenu/Backend/TemplateManager.ts | 79 ++---- .../DocCreatorMenu/Backend/TemplateMenuAIUtils.ts | 34 ++- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.scss | 183 +++++++------- .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx | 206 ++++++--------- .../DocCreatorMenu/Menu/TemplateEditingWindow.tsx | 277 ++++++++++----------- .../Menu/TemplateMenuFieldOptions.tsx | 252 +++++++++---------- .../DocCreatorMenu/Menu/TemplatePreviewBox.tsx | 113 ++++----- .../Menu/TemplateRenderPreviewWindow.tsx | 97 ++++---- .../nodes/DataVizBox/DocCreatorMenu/Template.ts | 132 ++++------ .../TemplateFieldTypes/TemplateField.ts | 7 +- src/client/views/nodes/ImageBox.tsx | 1 + 12 files changed, 621 insertions(+), 764 deletions(-) (limited to 'src/client/views/nodes/ImageBox.tsx') diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index c4373aaa7..897a86e7f 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -584,9 +584,7 @@ export class TabDocView extends ObservableReactComponent { miniMapColor = () => Colors.MEDIUM_GRAY; tabView = () => this._view; disableMinimap = () => !this._document; - whenChildContentActiveChanges = (isActive: boolean) => { - this._isAnyChildContentActive = isActive; - }; + whenChildContentActiveChanges = (isActive: boolean) => (this._isAnyChildContentActive = isActive); isContentActiveFunc = () => this.isContentActive; waitForDoubleClick = () => (SnappingManager.ExploreMode ? 'never' : undefined); renderDocView = (doc: Doc) => ( diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts index 78235d000..526fcf9c4 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateManager.ts @@ -14,87 +14,64 @@ export type Conditional = { target: string; attribute: string; value: string; -} +}; export class TemplateManager { + _templates: Template[] = []; - templates: Template[] = []; - - conditionalFieldLogic: Record = {}; + _conditionalFieldLogic: Record = {}; constructor(templateSettings: FieldSettings[]) { makeAutoObservable(this); - this.templates = this.initializeTemplates(templateSettings); + this._templates = templateSettings.map(settings => new Template(settings)); } - initializeTemplates = (templateSettings: FieldSettings[]) => templateSettings.map(settings => { - return new Template(settings)}); - - getValidTemplates = (cols: Col[]) => this.templates.filter(template => template.isValidTemplate(cols)); + getValidTemplates = (cols: Col[]) => this._templates.filter(template => template.isValidTemplate(cols)); - addTemplate = (newTemplate: Template) => this.templates.push(newTemplate); + addTemplate = (newTemplate: Template) => this._templates.push(newTemplate); removeTemplate = (template: Template) => { - this.templates.splice(this.templates.indexOf(template), 1); + if (this._templates.includes(template)) { + this._templates.splice(this._templates.indexOf(template), 1); + } template.cleanup(); }; addFieldCondition = (fieldTitle: string, condition: Conditional) => { - if (this.conditionalFieldLogic[fieldTitle] === undefined) { - this.conditionalFieldLogic[fieldTitle] = [condition]; + if (this._conditionalFieldLogic[fieldTitle] === undefined) { + this._conditionalFieldLogic[fieldTitle] = [condition]; } else { - this.conditionalFieldLogic[fieldTitle].push(condition); + this._conditionalFieldLogic[fieldTitle].push(condition); } - } + }; - removeFieldCondition = (fieldTitle: string, condition: Conditional) => { - if (this.conditionalFieldLogic[fieldTitle]) { - this.conditionalFieldLogic[fieldTitle] = this.conditionalFieldLogic[fieldTitle].filter(cond => cond !== condition); - } - } + removeFieldCondition = (fieldTitle: string, condition: Conditional) => (this._conditionalFieldLogic[fieldTitle] = this._conditionalFieldLogic[fieldTitle]?.filter(cond => cond !== condition)); - addDataField = (title: string) => { - this.templates.forEach(template => template.addDataField(title)); - } + addDataField = (title: string) => this._templates.forEach(template => template.addDataField(title)); - removeDataField = (title: string) => { - this.templates.forEach(template => template.removeDataField(title)); - } + removeDataField = (title: string) => this._templates.forEach(template => template.removeDataField(title)); createDocsFromTemplate = action((dv: DataVizBox, template: Template, cols: Col[], debug: boolean = false) => { const csvFields = Array.from(Object.keys(dv.records[0])); - const processContent = async (content: { [title: string]: string }) => { + const processContent = (content: { [title: string]: string }) => { const templateCopy = template.clone(); csvFields .filter(title => title) .forEach(title => { const field = templateCopy.getFieldByTitle(title); - field && field.setContent(content[title], field.viewType); + field?.setContent(content[title], field.viewType); }); const gptFunc = (type: TemplateFieldType) => (type === TemplateFieldType.VISUAL ? TemplateMenuAIUtils.renderGPTImageCall : TemplateMenuAIUtils.renderGPTTextCall); - const applyGPTContent = async () => { - const promises = cols - .filter(field => field.AIGenerated) - .map(field => { - const templateField: TemplateField = templateCopy.getFieldByTitle(field.title) as TemplateField; - if (templateField !== undefined) { - return gptFunc(field.type)(templateCopy, field, templateField.getID); - } - return null; - }) - .filter(p => p !== null); - - await Promise.all(promises); - }; - - await applyGPTContent(); - - templateCopy.applyConditionalLogic(this.conditionalFieldLogic); - - return templateCopy.getRenderedDoc(); + + const generateGptContent = cols + .map(field => ({ field, templateField: field?.AIGenerated && templateCopy.getFieldByTitle(field.title) })) + .filter(({ templateField }) => templateField instanceof TemplateField) + .map(({ field, templateField }) => gptFunc(field.type)(templateCopy, field, (templateField as TemplateField).getID)); + + return Promise.all(generateGptContent).then(() => templateCopy.applyConditionalLogic(this._conditionalFieldLogic)); }; const rowContents = debug @@ -109,10 +86,6 @@ export class TemplateManager { ) ); - return Promise.all(rowContents.map(processContent)).then( - action(renderedDocs => { - return renderedDocs; - }) - ); + return Promise.all(rowContents.map(processContent)); }); } diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts index 162b7a1b1..08818dd6c 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Backend/TemplateMenuAIUtils.ts @@ -1,13 +1,13 @@ -import { ClientUtils } from "../../../../../../ClientUtils"; -import { Networking } from "../../../../../Network"; -import { gptImageCall, gptAPICall, GPTCallType } from "../../../../../apis/gpt/GPT"; -import { Col } from "../DocCreatorMenu"; -import { TemplateFieldSize, TemplateFieldType } from "../TemplateBackend"; -import { TemplateField, ViewType } from "../TemplateFieldTypes/TemplateField"; -import { Template } from "../Template"; +import { ClientUtils } from '../../../../../../ClientUtils'; +import { Networking } from '../../../../../Network'; +import { gptImageCall, gptAPICall, GPTCallType } from '../../../../../apis/gpt/GPT'; +import { Col } from '../DocCreatorMenu'; +import { TemplateFieldSize, TemplateFieldType } from '../TemplateBackend'; +import { ViewType } from '../TemplateFieldTypes/TemplateField'; +import { Template } from '../Template'; +import { Upload } from '../../../../../../server/SharedMediaTypes'; export class TemplateMenuAIUtils { - public static generateGPTImage = async (prompt: string): Promise => { try { const res = await gptImageCall(prompt); @@ -24,13 +24,10 @@ export class TemplateMenuAIUtils { public static renderGPTImageCall = async (template: Template, col: Col, fieldNumber: number): Promise => { const generateAndLoadImage = async (id: number, prompt: string) => { + const field = template.getFieldByID(id); const url = await this.generateGPTImage(prompt); - // eslint-disable-next-line - var field: TemplateField = template.getFieldByID(id); - - field.setContent(url ?? '', ViewType.IMG); - field = template.getFieldByID(id); - field.setTitle(col.title); + field?.setContent(url ?? '', ViewType.IMG); + field?.setTitle(col.title); }; const fieldContent: string = template.compiledContent; @@ -81,10 +78,10 @@ export class TemplateMenuAIUtils { if (res) { const assignments: { [title: string]: { number: string; content: string } } = JSON.parse(res); Object.entries(assignments).forEach(([, /* title */ info]) => { - const field: TemplateField = template.getFieldByID(Number(info.number)); + const field = template.getFieldByID(Number(info.number)); - field.setContent(info.content ?? '', ViewType.TEXT); - field.setTitle(col.title); + field?.setContent(info.content ?? '', ViewType.TEXT); + field?.setTitle(col.title); }); } } catch (err) { @@ -122,5 +119,4 @@ export class TemplateMenuAIUtils { return template; }; - -} \ No newline at end of file +} diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss index 463e69c67..6eb7fa96a 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.scss @@ -9,10 +9,10 @@ position: absolute; z-index: 1000; // box-shadow: 0px 3px 4px rgba(0, 0, 0, 30%); - // background: whitesmoke; + // background: whitesmoke; // color: black; border-radius: 3px; -} +} .docCreatorMenu-menu { display: flex; @@ -24,7 +24,7 @@ .docCreatorMenu-menu-button { width: 25px; height: 25px; - background: whitesmoke; + background: whitesmoke; background-color: rgb(50, 50, 50); border-radius: 5px; padding: 0px; @@ -53,8 +53,8 @@ position: absolute; right: 0px; } - - &.right{ + + &.right { margin-left: 0px; font-size: 12px; } @@ -103,12 +103,12 @@ } } - &:hover::before{ + &:hover::before { border-bottom: 20px solid rgb(82, 82, 82); } &::before { - content: ""; + content: ''; position: absolute; top: 0; left: 0; @@ -120,7 +120,7 @@ } &::after { - content: ""; + content: ''; position: absolute; top: -1px; left: -1px; @@ -143,7 +143,7 @@ color: white; } -.docCreatorMenu-menu-hr{ +.docCreatorMenu-menu-hr { margin-top: 0px; margin-bottom: 0px; color: rgb(180, 180, 180); @@ -173,14 +173,14 @@ align-items: center; width: 40px; height: 40px; - background-color: rgb(99, 148, 238); + background-color: rgb(99, 148, 238); border: 2px solid rgb(80, 107, 152); border-radius: 5px; margin-bottom: 20px; font-size: 25px; - &:hover{ - background-color: rgb(59, 128, 255); + &:hover { + background-color: rgb(59, 128, 255); border: 2px solid rgb(53, 80, 127); } } @@ -188,7 +188,7 @@ .docCreatorMenu-create-docs-button { width: 40px; height: 40px; - background-color: rgb(176, 229, 149); + background-color: rgb(176, 229, 149); border: 2px solid rgb(126, 219, 80); border-radius: 5px; padding: 0px; @@ -199,7 +199,7 @@ &:hover { background-color: rgb(129, 223, 83); - border: 2px solid rgb(80, 185, 28); + border: 2px solid rgb(80, 185, 28); } } @@ -230,17 +230,22 @@ position: absolute; background-color: none; - &.top, &.bottom { + &.top, + &.bottom { height: 10px; cursor: ns-resize; } - &.right, &.left { + &.right, + &.left { width: 10px; cursor: ew-resize; } - &.topRight, &.topLeft, &.bottomRight, &.bottomLeft { + &.topRight, + &.topLeft, + &.bottomRight, + &.bottomLeft { height: 15px; width: 15px; background-color: none; @@ -263,7 +268,7 @@ height: calc(100% - 30px); border: 1px solid rgb(180, 180, 180); border-radius: 5px; - -ms-overflow-style: none; + -ms-overflow-style: none; scrollbar-width: none; } @@ -277,7 +282,7 @@ height: 100%; flex-grow: 1; - .top-panel{ + .top-panel { width: 100%; height: 10px; } @@ -302,13 +307,14 @@ justify-content: center; align-items: center; height: 100%; + width: 100%; aspect-ratio: 1; color: none; border: 1px solid rgb(163, 163, 163); border-radius: 5px; box-shadow: 5px 5px rgb(29, 29, 31); - &:hover{ + &:hover { background-color: rgb(72, 72, 73); } @@ -353,20 +359,18 @@ &:hover .option-button { display: block; } - } -.docCreatorMenu-preview-image{ +.docCreatorMenu-preview-image { background-color: transparent; height: 100%; display: block; object-fit: contain; border-radius: 5px; - } .docCreatorMenu-variations-tab { - flex-grow: .5; + flex-grow: 0.5; } .docCreatorMenu-section { @@ -400,7 +404,7 @@ display: grid; justify-content: space-evenly; row-gap: 2rem; - grid-template-columns: repeat(auto-fill, minmax(150px, 30%)); + grid-template-columns: repeat(auto-fill, minmax(150px, 50%)); margin: 5px; width: calc(100% - 10px); height: 100%; @@ -413,7 +417,7 @@ } } -.divvv{ +.div { width: 200; height: 200; border: solid 1px white; @@ -448,7 +452,7 @@ .docCreatorMenu-GPT-generate { height: 30px; width: 30px; - background-color: rgb(176, 229, 149); + background-color: rgb(176, 229, 149); border: 1px solid rgb(126, 219, 80); border-radius: 5px; padding: 0px; @@ -459,7 +463,7 @@ &:hover { background-color: rgb(129, 223, 83); - border: 2px solid rgb(80, 185, 28); + border: 2px solid rgb(80, 185, 28); } } @@ -477,7 +481,7 @@ // DocCreatorMenu options CSS //-------------------------------------------------------------------------------------------------------------------------------------------- -.docCreatorMenu-option-container{ +.docCreatorMenu-option-container { display: flex; width: 180px; height: 30px; @@ -487,16 +491,16 @@ margin-top: 10px; margin-bottom: 10px; - &.layout{ + &.layout { z-index: 5; } } -.docCreatorMenu-option-title{ +.docCreatorMenu-option-title { display: flex; width: 140px; height: 30px; - background: whitesmoke; + background: whitesmoke; background-color: rgb(34, 34, 37); border-radius: 5px; border: 1px solid rgb(180, 180, 180); @@ -513,7 +517,7 @@ border-radius: 0px; width: auto; text-transform: none; - + &.small { height: 20px; transform: translateY(-5px); @@ -607,38 +611,38 @@ height: calc(100% - 30px); border: 1px solid rgb(180, 180, 180); border-radius: 5px; - -ms-overflow-style: none; + -ms-overflow-style: none; scrollbar-width: none; - .docCreatorMenu-option-container{ + .docCreatorMenu-option-container { width: 180px; height: 30px; .docCreatorMenu-dropdown-hoverable { width: 140px; height: 30px; - + &:hover .docCreatorMenu-dropdown-content { display: block; } - + &:hover .docCreatorMenu-option-title { border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } - + .docCreatorMenu-dropdown-content { display: none; min-width: 100px; height: 75px; overflow-y: scroll; - -ms-overflow-style: none; + -ms-overflow-style: none; scrollbar-width: none; border-bottom: 1px solid rgb(180, 180, 180); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; - - .docCreatorMenu-dropdown-option{ + + .docCreatorMenu-dropdown-option { display: flex; background-color: rgb(42, 42, 46); border-left: 1px solid rgb(180, 180, 180); @@ -649,13 +653,13 @@ justify-content: center; justify-items: center; padding-top: 3px; - + &:hover { background-color: rgb(68, 68, 74); cursor: pointer; } } - } + } } } } @@ -710,7 +714,7 @@ border: 1px solid rgb(180, 180, 180); border-radius: 5px; background-color: rgb(34, 34, 37); - -ms-overflow-style: none; + -ms-overflow-style: none; scrollbar-width: none; &.small { @@ -742,10 +746,10 @@ z-index: 999; } - .docCreatorMenu-zoom-button{ + .docCreatorMenu-zoom-button { width: 15px; height: 15px; - background: whitesmoke; + background: whitesmoke; background-color: rgb(34, 34, 37); border-radius: 3px; border: 1px solid rgb(180, 180, 180); @@ -759,8 +763,6 @@ } } - - //------------------------------------------------------------------------------------------------------------------------------------------ // DocCreatorMenu dashboard CSS //-------------------------------------------------------------------------------------------------------------------------------------------- @@ -778,7 +780,7 @@ height: calc(100% - 30px); border: 1px solid rgb(180, 180, 180); border-radius: 5px; - -ms-overflow-style: none; + -ms-overflow-style: none; scrollbar-width: none; .panels-container { @@ -836,8 +838,8 @@ background-color: rgb(72, 72, 72); cursor: pointer; } - } - + } + .opts-bar { display: flex; flex-direction: row; @@ -880,11 +882,11 @@ flex-direction: row; align-items: flex-start; } - + &:hover .type-display { display: none; } - + .bubble { margin: 3px; } @@ -919,7 +921,7 @@ flex-direction: row; align-items: center; } - + .bubble { margin: 3px; margin-right: 4px; @@ -942,10 +944,8 @@ border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; resize: none; - } } - } .conditionals-section { @@ -972,7 +972,7 @@ flex-direction: row; justify-content: flex-start; align-items: flex-start; - color: whitesmoke; + color: whitesmoke; width: 100%; height: fit-content; margin-bottom: 15px; @@ -1041,7 +1041,6 @@ overflow-y: scroll; white-space: nowrap; } - } .form { @@ -1057,10 +1056,8 @@ align-items: center; margin: 3px; cursor: pointer; - } } - } //------------------------------------------------------------------------------------------------------------------------------------------ @@ -1113,38 +1110,38 @@ display: flex; align-items: center; justify-content: center; - gap: 2rem; + gap: 2rem; padding: 0.5rem 1rem; background: rgb(50, 50, 50); color: whitesmoke; font-family: system-ui, sans-serif; font-size: 0.9rem; - flex-wrap: wrap; - } - - .menu‑item { + flex-wrap: wrap; +} + +.menu‑item { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; - } - - .menu‑item input[type="range"] { +} + +.menu‑item input[type='range'] { width: 7rem; - accent-color: whitesmoke; - } - - .value { + accent-color: whitesmoke; +} + +.value { min-width: 2ch; text-align: right; - } - - .switch { +} + +.switch { gap: 0.75rem; margin-bottom: 0px; - } - - .switch .slider { +} + +.switch .slider { position: relative; width: 2.2rem; height: 1.1rem; @@ -1152,9 +1149,9 @@ border-radius: 1rem; cursor: pointer; transition: background 0.2s; - } - - .switch .slider::before { +} + +.switch .slider::before { content: ''; position: absolute; top: 0.1rem; @@ -1164,27 +1161,25 @@ background: rgb(50, 50, 50); border-radius: 50%; transition: transform 0.2s; - } - - .switch input { +} + +.switch input { display: none; - } - - .switch input:checked + .slider { +} + +.switch input:checked + .slider { background: #78c2f1; - } - - .switch input:checked + .slider::before { +} + +.switch input:checked + .slider::before { transform: translateX(1.1rem); - } +} .firefly-option-label { - padding: .2em .6em .3em; + padding: 0.2em 0.6em 0.3em; font-size: 100%; color: whitesmoke; text-align: center; margin-bottom: 0px; font-weight: 500; } - - diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx index ebfa3fc65..fb083ea75 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx @@ -1,4 +1,3 @@ - import { IconProp } from '@fortawesome/fontawesome-svg-core'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, makeObservable, observable, runInAction } from 'mobx'; @@ -22,7 +21,7 @@ import { ViewType } from './TemplateFieldTypes/TemplateField'; import { Template } from './Template'; import { TemplateFieldSize, TemplateFieldType, TemplateLayouts } from './TemplateBackend'; import { TemplateManager } from './Backend/TemplateManager'; -import { TemplateMenuAIUtils } from './Backend/TemplateMenuAIUtils' +import { TemplateMenuAIUtils } from './Backend/TemplateMenuAIUtils'; import { TemplatePreviewGrid } from './Menu/TemplatePreviewGrid'; import { FireflyStructureOptions, TemplateEditingWindow } from './Menu/TemplateEditingWindow'; import { DocCreatorMenuButton } from './Menu/DocCreatorMenuButton'; @@ -158,18 +157,12 @@ export class DocCreatorMenu extends ObservableReactComponent return bounds; } - setUpButtonClick = (e: React.PointerEvent, func: (...args: any) => void) => { - setupMoveUpEvents( - this, - e, - returnFalse, - emptyFunction, - undoable(clickEv => { - clickEv.stopPropagation(); - clickEv.preventDefault(); - func(); - }, 'create docs') - ); + setUpButtonClick = (e: React.PointerEvent, func: () => void) => { + setupMoveUpEvents(this, e, returnFalse, emptyFunction, clickEv => { + clickEv.stopPropagation(); + clickEv.preventDefault(); + undoable(func, 'create docs')(); + }); }; @action @@ -301,16 +294,13 @@ export class DocCreatorMenu extends ObservableReactComponent this._pageX = x + translation.x; this._pageY = y + translation.y; }; - - async createDocsForPreview(): Promise { return this._dataViz && this._selectedTemplate ? ((await this.templateManager.createDocsFromTemplate(this._dataViz, this._selectedTemplate, this.fieldsInfos, this.DEBUG_MODE)).filter(doc => doc).map(doc => doc!) ?? []) as unknown as Doc[] : []; } - @action updateSelectedTemplate = async (template: Template) => { - if (this._selectedTemplate === template) { - this._selectedTemplate = undefined; - return; - } else { - this._selectedTemplate = template; - } + async createDocsForPreview() { + return this._dataViz && this._selectedTemplate ? ((await this.templateManager.createDocsFromTemplate(this._dataViz, this._selectedTemplate, this.fieldsInfos, this.DEBUG_MODE)).filter(doc => doc).map(doc => doc!) ?? []) : []; + } + + @action updateSelectedTemplate = (template: Template) => { + this._selectedTemplate = this._selectedTemplate === template ? undefined : template; // toggle selection }; // testTemplate = async () => { @@ -318,27 +308,16 @@ export class DocCreatorMenu extends ObservableReactComponent // }; @action addField = () => { - const newFields: Col[] = this._userCreatedFields.concat([{ title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [], AIGenerated: true }]); - this._userCreatedFields = newFields; + this._userCreatedFields = this._userCreatedFields.concat([{ title: '', type: TemplateFieldType.UNSET, desc: '', sizes: [], AIGenerated: true }]); }; @action removeField = (field: { title: string; type: string; desc: string }) => { if (this._dataViz?.axes.includes(field.title)) { this._dataViz.selectAxes(this._dataViz.axes.filter(col => col !== field.title)); } else { - const toRemove = this._userCreatedFields.filter(f => f === field); - if (!toRemove) return; - - if (toRemove.length > 1) { - while (toRemove.length > 1) { - toRemove.pop(); - } - } - - if (this._userCreatedFields.length === 1) { - this._userCreatedFields = []; - } else { - this._userCreatedFields.splice(this._userCreatedFields.indexOf(toRemove[0]), 1); + const toRemove = this._userCreatedFields.findIndex(f => f === field); + if (toRemove !== -1) { + this._userCreatedFields.splice(toRemove, 1); } } }; @@ -390,35 +369,22 @@ export class DocCreatorMenu extends ObservableReactComponent this.forceUpdate(); }; - compileFieldDescriptions = (templates: Template[]): string => { - let descriptions: string = ''; - templates.forEach(template => { - descriptions += `---------- NEW TEMPLATE TO INCLUDE: The title is: ${template.title}. Its fields are: `; - descriptions += template.descriptionSummary; - }); - - return descriptions; - }; - - compileColDescriptions = (cols: Col[]): string => { - let descriptions: string = ' ------------- COL DESCRIPTIONS START HERE:'; - cols.forEach(col => (descriptions += `{title: ${col.title}, sizes: ${String(col.sizes)}, type: ${col.type}, descreiption: ${col.desc}} `)); + compileFieldDescriptions = (templates: Template[]) => + templates.map(template => `---------- NEW TEMPLATE TO INCLUDE: The title is: ${template.title}. Its fields are: ` + template.descriptionSummary).join(''); // prettier-ignore - return descriptions; - }; + compileColDescriptions = (cols: Col[]) => + ' ------------- COL DESCRIPTIONS START HERE:' + cols.map(col => `{title: ${col.title}, sizes: ${String(col.sizes)}, type: ${col.type}, descreiption: ${col.desc}} `).join(''); // prettier-ignore - getColByTitle = (title: string) => { - return this.fieldsInfos.filter(col => col.title === title)[0]; - }; + getColByTitle = (title: string): Col | undefined => this.fieldsInfos.filter(col => col.title === title)[0]; @action assignColsToFields = async (templates: Template[], cols: Col[]): Promise<[Template, { [field: number]: Col }][]> => { - const fieldDescriptions: string = this.compileFieldDescriptions(templates); - const colDescriptions: string = this.compileColDescriptions(cols); + const fieldDescriptions = this.compileFieldDescriptions(templates); + const colDescriptions = this.compileColDescriptions(cols); const inputText = fieldDescriptions.concat(colDescriptions); - const prompt: string = `(${Math.random() * 100000}) ${inputText}`; + const prompt = `(${Math.random() * 100000}) ${inputText}`; this._GPTLoading = true; @@ -431,23 +397,25 @@ export class DocCreatorMenu extends ObservableReactComponent Object.entries(assignments).forEach(([tempTitle, assignment]) => { const template = templates.filter(temp => temp.title === tempTitle)[0]; - if (!template) return; - const toObj = Object.entries(assignment).reduce( - (a, [fieldID, colTitle]) => { - const col = this.getColByTitle(colTitle); - if (!col.AIGenerated) { - var field = template.getFieldByID(Number(fieldID)); - field.setContent(col.defaultContent ?? '', col.type === TemplateFieldType.VISUAL ? ViewType.IMG : ViewType.TEXT); - field = template.getFieldByID(Number(fieldID)); - field.setTitle(col.title); - } else { - a[Number(fieldID)] = this.getColByTitle(colTitle); - } - return a; - }, - {} as { [field: number]: Col } - ); - brokenDownAssignments.push([template, toObj]); + if (template) { + const toObj = Object.entries(assignment).reduce( + (a, [fieldID, colTitle]) => { + const col = this.getColByTitle(colTitle); + if (col) { + if (!col.AIGenerated) { + const field = template.getFieldByID(Number(fieldID)); + field?.setContent(col.defaultContent ?? '', col.type === TemplateFieldType.VISUAL ? ViewType.IMG : ViewType.TEXT); + field?.setTitle(col.title); + } else { + a[Number(fieldID)] = col; + } + } + return a; + }, + {} as { [field: number]: Col } + ); + brokenDownAssignments.push([template, toObj]); + } }); return brokenDownAssignments; @@ -459,39 +427,32 @@ export class DocCreatorMenu extends ObservableReactComponent return []; }; - generatePresetTemplates = async () => { - const templates: Template[] = []; - + generatePresetTemplates = action(() => { if (this.DEBUG_MODE) { - templates.push(...this.templateManager.templates); + this.setSuggestedTemplates(this.templateManager._templates); + this._GPTLoading = false; } else { this._dataViz?.updateColDefaults(); - const contentFields = this.fieldsInfos.filter(field => field.type !== TemplateFieldType.DATA); - - templates.push(...this.templateManager.getValidTemplates(contentFields)); - - const assignments = await this.assignColsToFields(templates, contentFields); - - const renderedTemplatePromises = assignments.map(([template, assgns]) => TemplateMenuAIUtils.applyGPTContentToTemplate(template, assgns)); - - await Promise.all(renderedTemplatePromises); + const templates = this.templateManager.getValidTemplates(contentFields); + + return this.assignColsToFields(templates, contentFields) + .then(pairs => + Promise.all(pairs.map(([templ, assgns]) => TemplateMenuAIUtils.applyGPTContentToTemplate(templ, assgns)))) + .then(action(() => { + this.setSuggestedTemplates(templates); + this._GPTLoading = false; + })); // prettier-ignore } + }); - setTimeout( - action(() => { - this.setSuggestedTemplates(templates); - this._GPTLoading = false; - }) - ); - }; - - generateVariations = async (onDoc: Doc, prompt: string, options: FireflyStructureOptions): Promise => { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + generateVariations = async (onDoc: Doc, prompt: string, options: FireflyStructureOptions) => { // const { numVariations, temperature, useStyleRef } = options; this.variations = []; const mainCollection = this._dataViz?.DocumentView?.().containerViewPath?.().lastElement()?.ComponentView as CollectionFreeFormView; - const clone: Doc = (await Doc.MakeClone(onDoc)).clone; + const clone = Doc.MakeClone(onDoc).clone; mainCollection.addDocument(clone); clone.x = 10000; clone.y = 10000; @@ -499,13 +460,13 @@ export class DocCreatorMenu extends ObservableReactComponent // await DrawingFillHandler.drawingToImage(clone, 100 - temperature, prompt, useStyleRef ? clone : undefined, this, numVariations) return this.variations; - } + }; - variations: string[] = [] + variations: string[] = []; @action addVariation = (url: string) => { this.variations.push(url); - } + }; addRenderedCollectionToMainview = (collection: Doc) => { if (collection) { @@ -517,10 +478,11 @@ export class DocCreatorMenu extends ObservableReactComponent } }; - @action editLastTemplate = () => { if (this._editedTemplateTrail.length) this._currEditingTemplate = this._editedTemplateTrail.pop()} + @action editLastTemplate = () => { + if (this._editedTemplateTrail.length) this._currEditingTemplate = this._editedTemplateTrail.pop(); + }; @action setExpandedView = (template: Template | undefined) => { - if (template) { this._menuContent = 'templateEditing'; this._currEditingTemplate && this._editedTemplateTrail.push(this._currEditingTemplate); @@ -533,27 +495,23 @@ export class DocCreatorMenu extends ObservableReactComponent //Docs.Create.FreeformDocument([doc], { _height: NumListCast(doc._height)[0], _width: NumListCast(doc._width)[0], title: ''}); }; - @computed - get templatesView() { return ( -
-
- -
-
- + @computed + get templatesView() { + return ( +
+
+ +
+
+ +
-
- )}; - - private optionsButtonOpts: [IconProp, () => any] = ['gear', () => (this._menuContent = 'dashboard')]; + ); + } + + private optionsButtonOpts: [IconProp, () => void] = ['gear', () => (this._menuContent = 'dashboard')]; get renderSelectedViewType() { switch (this._menuContent) { @@ -634,7 +592,7 @@ export class DocCreatorMenu extends ObservableReactComponent {topButton('magnifying-glass', 'options', onOptionsSelected, 'middle')} {topButton('bars', 'saved', onSavedSelected, 'right')}
- +
{this.renderSelectedViewType}
@@ -642,4 +600,4 @@ export class DocCreatorMenu extends ObservableReactComponent
); } -} \ No newline at end of file +} diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx index b50fff9e0..c35099e82 100644 --- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx +++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/Menu/TemplateEditingWindow.tsx @@ -1,25 +1,25 @@ -import { action, makeObservable, observable, reaction, runInAction } from "mobx"; -import React from "react"; -import { returnFalse, returnEmptyFilter } from "../../../../../../ClientUtils"; -import { emptyFunction } from "../../../../../../Utils"; -import { Doc, returnEmptyDoclist } from "../../../../../../fields/Doc"; -import { DefaultStyleProvider } from "../../../../StyleProvider"; -import { DocumentView, DocumentViewInternal } from "../../../DocumentView"; -import { DocCreatorMenu } from "../DocCreatorMenu"; -import { TemplatePreviewGrid } from "./TemplatePreviewGrid"; -import { observer } from "mobx-react"; -import { Transform } from "../../../../../util/Transform"; -import { Template } from "../Template"; -import { ObservableReactComponent } from "../../../../ObservableReactComponent"; -import { IDisposer } from "mobx-utils"; -import { DocCreatorMenuButton } from "./DocCreatorMenuButton"; -import { IconProp } from "@fortawesome/fontawesome-svg-core"; +import { action, makeObservable, observable, reaction } from 'mobx'; +import React from 'react'; +import { returnFalse, returnEmptyFilter } from '../../../../../../ClientUtils'; +import { emptyFunction } from '../../../../../../Utils'; +import { returnEmptyDoclist } from '../../../../../../fields/Doc'; +import { DefaultStyleProvider } from '../../../../StyleProvider'; +import { DocumentView, DocumentViewInternal } from '../../../DocumentView'; +import { DocCreatorMenu } from '../DocCreatorMenu'; +import { TemplatePreviewGrid } from './TemplatePreviewGrid'; +import { observer } from 'mobx-react'; +import { Transform } from '../../../../../util/Transform'; +import { Template } from '../Template'; +import { ObservableReactComponent } from '../../../../ObservableReactComponent'; +import { IDisposer } from 'mobx-utils'; +import { DocCreatorMenuButton } from './DocCreatorMenuButton'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; export type FireflyStructureOptions = { numVariations: number; temperature: number; useStyleRef: boolean; -} +}; interface FireflyVariationsTabProps { menu: DocCreatorMenu; @@ -28,112 +28,93 @@ interface FireflyVariationsTabProps { @observer export class FireflyVariationsTab extends ObservableReactComponent { + private _prompt: string = 'Use this template to generate an empty baseball card template.'; + private _optionsButtonOpts: [IconProp, () => void] = ['gear', emptyFunction]; + private _previewBoxRightButtonOpts: [IconProp, () => void] = ['gear', () => this.forceUpdate()]; - private prompt: string = 'Use this template to generate an empty baseball card template.'; - - @observable private promptInput: HTMLTextAreaElement | null = null; - + @observable _fireflyOptions: FireflyStructureOptions = { numVariations: 3, temperature: 0, useStyleRef: false }; + @observable _promptInput: HTMLTextAreaElement | null = null; @observable _loading: boolean = false; @observable _variationsTabOpen: boolean = false; @observable _variationURLs: string[] = []; - @observable private fireflyOptions: FireflyStructureOptions = {numVariations: 3, temperature: 0, useStyleRef: false}; - constructor(props: FireflyVariationsTabProps) { super(props); makeObservable(this); } - generateVariations = async () => { + generateVariations = action(async () => { this._props.menu._variations = []; this._loading = true; const cloneTemplate = this._props.template.clone(false); cloneTemplate.setMatteBackground(); - const doc: Doc = cloneTemplate.getRenderedDoc()!; - this._variationURLs = await this._props.menu.generateVariations(doc, this.prompt, this.fireflyOptions); - this._variationURLs.forEach(() => { - const newTemplate: Template = this._props.template.clone(true); - this._props.menu._variations.push(newTemplate); - }); - setTimeout(() => { - this._variationURLs.forEach((url, i) => { - this._props.menu._variations[i].setImageAsBackground(url, true); - }); - this._loading = false; - }); - } - - setPromptInputRef: React.LegacyRef = (node) => { - this.promptInput = node; - } - - // eslint-disable-next-line - private optionsButtonOpts: [IconProp, () => any] = ['gear', () => {}]; - // eslint-disable-next-line - private previewBoxRightButtonOpts: [IconProp, () => any] = ['gear', () => this.forceUpdate()]; + const doc = cloneTemplate.getRenderedDoc()!; + this._props.menu.generateVariations(doc, this._prompt, this._fireflyOptions).then( + action((urls: string[]) => { + (this._variationURLs = urls).forEach(url => { + const template = this._props.template.clone(true); + template.setImageAsBackground(url, true); + this._props.menu._variations.push(template); + }); + this._loading = false; + }) + ); + }); render() { return ( -
-
+
+