aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/scrapbook/ScrapbookBox.tsx100
1 files changed, 84 insertions, 16 deletions
diff --git a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
index 731715964..ced2df6c5 100644
--- a/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
+++ b/src/client/views/nodes/scrapbook/ScrapbookBox.tsx
@@ -12,7 +12,13 @@ import { FieldView, FieldViewProps } from '../FieldView';
import { DragManager } from '../../../util/DragManager';
import { RTFCast, StrCast, toList } from '../../../../fields/Types';
import { undoable } from '../../../util/UndoManager';
+import ReactLoading from 'react-loading';
import { ScrapbookItemConfig, ScrapbookPreset } from './ScrapbookPreset';
+import { ImageBox } from '../ImageBox';
+import { FireflyImageDimensions } from '../../smartdraw/FireflyConstants';
+import { SmartDrawHandler } from '../../smartdraw/SmartDrawHandler';
+import { ImageCast } from '../../../../fields/Types';
+import { lengthToDegrees } from '@turf/turf';
enum ScrapbookPresetType {
Classic = 'Classic',
@@ -23,16 +29,24 @@ enum ScrapbookPresetType {
// Scrapbook view: a container that lays out its child items in a grid/template
export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+
+
+ state = {
+ loading: false,
+ src: '',
+ };
+
+
@observable createdDate: string;
- @observable configs : ScrapbookItemConfig[]
+ // @observable configs : ScrapbookItemConfig[]
constructor(props: FieldViewProps) {
super(props);
makeObservable(this);
this.createdDate = this.getFormattedDate();
- this.configs =
- ScrapbookPreset.createPreset(presetType);
+ //this.configs =
+ //ScrapbookPreset.createPreset(presetType);
// ensure we always have a List<Doc> in dataDoc['items']
if (!this.dataDoc[this.fieldKey]) {
@@ -244,9 +258,9 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
if (this.dataDoc.title !== title) {
this.dataDoc.title = title;
- const image = Docs.Create.TextDocument('image');
+ const image = Docs.Create.TextDocument('person image');
image.accepts_docType = DocumentType.IMG;
- image.accepts_tagType = 'LANDSCAPE' //should i be writing fields on this doc? clarify diff between this and proto, original
+ image.accepts_tagType = 'PERSON' //should i be writing fields on this doc? clarify diff between this and proto, original
const placeholder = new Doc();
placeholder.proto = image;
placeholder.original = image;
@@ -256,9 +270,9 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
placeholder.y = -100;
//placeholder.overrideFields = new List<string>(['x', 'y']); // shouldn't need to do this for layout fields since the placeholder already overrides its protos
- const summary = Docs.Create.TextDocument('summary');
+ const summary = Docs.Create.TextDocument('long summary');
summary.accepts_docType = DocumentType.RTF;
- summary.accepts_tagType = 'caption';
+ summary.accepts_tagType = 'lengthy description';
//summary.$tags_chat = new List<string>(['lengthy description']); //we need to go back and set this
const placeholder2 = new Doc();
placeholder2.proto = summary;
@@ -268,9 +282,9 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
placeholder2._width = 250;
//placeholder2.overrideFields = new List<string>(['x', 'y', '_width']); // shouldn't need to do this for layout fields since the placeholder already overrides its protos
- const sidebar = Docs.Create.TextDocument('sidebar');
+ const sidebar = Docs.Create.TextDocument('brief sidebar');
sidebar.accepts_docType = DocumentType.RTF;
- sidebar.accepts_tagType = 'lengthy description'; //accepts_textType = 'lengthy description'
+ sidebar.accepts_tagType = 'title'; //accepts_textType = 'lengthy description'
const placeholder3 = new Doc();
placeholder3.proto = sidebar;
placeholder3.original = sidebar;
@@ -281,9 +295,9 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
- const internalImg = Docs.Create.TextDocument('image internal');
+ const internalImg = Docs.Create.TextDocument('landscape internal');
internalImg.accepts_docType = DocumentType.IMG;
- internalImg.accepts_tagType = 'PERSON' //should i be writing fields on this doc? clarify diff between this and proto, original
+ internalImg.accepts_tagType = 'LANDSCAPE' //should i be writing fields on this doc? clarify diff between this and proto, original
const placeholder5 = new Doc();
placeholder5.proto = internalImg;
placeholder5.original = internalImg;
@@ -316,16 +330,43 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
/*note-to-self
difference between passing a new List<Doc> versus just the raw array?
*/
+ this.dataDoc[this.fieldKey] = new List<Doc>([placeholder, placeholder2, placeholder3, placeholder4]);
- this.dataDoc[this.fieldKey] = this.dataDoc[this.fieldKey] ?? new List<Doc>([placeholder, placeholder2, placeholder3, placeholder4]);
+ //this.dataDoc[this.fieldKey] = this.dataDoc[this.fieldKey] ?? new List<Doc>([placeholder, placeholder2, placeholder3, placeholder4]);
}
}
+
+ async generateAiImage() {
+ this.setState({ loading: true });
+
+ const prompt = 'A serene mountain landscape at sunrise, ultra-wide, pastel sky, abstract, scrapbook background';
+ //'A serene mountain landscape at sunrise, ultra-wide, pastel sky';
+ const dimensions = FireflyImageDimensions.Square; // or whichever suits your scenario
+
+ SmartDrawHandler.CreateWithFirefly(prompt, dimensions)
+ .then(action(doc => {
+ if (doc instanceof Doc) {
+ const imgField = ImageCast(doc.data);
+ this.setState({ src: imgField?.url.href });
+ } else {
+ alert('Failed to generate the image.');
+ }
+ }))
+ .catch(e => {
+ alert(`Image generation error: ${e}`);
+ })
+ .finally(() => {
+ this.setState({ loading: false });
+ });
+ }
componentDidMount() {
//this.initScrapbook(ScrapbookPresetType.Default);
this.setTitle();
+ this.generateAiImage();
+
}
childRejectDrop = (de: DragManager.DropEvent, subView?: DocumentView) => {
@@ -405,8 +446,33 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
};
render() {
+ const { loading, src } = this.state;
+
return (
- <div style={{ background: 'beige', width: '100%', height: '100%' }}>
+ <div style={{ background: 'beige', width: '100%', height: '100%' }}>
+ {loading && (
+ <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%',
+ display: 'flex', justifyContent: 'center', alignItems: 'center',
+ background: 'rgba(255,255,255,0.8)' }}>
+ <ReactLoading type="spin" width={50} height={50} />
+ </div>
+ )}
+ {loading && (
+ <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%',
+ display: 'flex', justifyContent: 'center', alignItems: 'center',
+ background: 'rgba(255,255,255,0.8)', zIndex: 10 }}>
+ <ReactLoading type="spin" width={50} height={50} />
+ </div>
+ )}
+ {/* Render AI-generated background */}
+ {src && (
+ <ImageBox
+ {...this._props}
+ Document={Docs.Create.ImageDocument(src, { title: 'Generated Background' })}
+ fieldKey="data"
+ />
+ )}
+
<CollectionView
{...this._props} //
setContentViewBox={emptyFunction}
@@ -422,9 +488,9 @@ export class ScrapbookBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
-function extractScrapbookConfigs(docs: Doc[]): ScrapbookItemConfig[] {
- return docs.map(doc => extractConfig(doc));
-}
+//function extractScrapbookConfigs(docs: Doc[]): ScrapbookItemConfig[] {
+ //return docs.map(doc => extractConfig(doc));
+//}
// function extractConfig(doc: Doc): ScrapbookItemConfig {
// const layoutKey = Doc.LayoutDataKey(doc);
@@ -452,6 +518,8 @@ function extractScrapbookConfigs(docs: Doc[]): ScrapbookItemConfig[] {
// }
// Register scrapbook
+
+
Docs.Prototypes.TemplateMap.set(DocumentType.SCRAPBOOK, {
layout: { view: ScrapbookBox, dataField: 'items' },
options: {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-31 21:18:21 +0000