gpt stylization

1 files changed, 51 insertions, 0 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 0c3033579..002ebf1ae 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -52,6 +52,7 @@ import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCurso
 import './CollectionFreeFormView.scss';
 import { MarqueeView } from './MarqueeView';
 import React = require('react');
+import { generatePalette } from '../../../apis/gpt/customization';
 
 export type collectionFreeformViewProps = {
     NativeWidth?: () => number;
@@ -1573,6 +1574,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     @action
     componentDidMount() {
+        this.printDoc(this.rootDoc);
         this.props.setContentView?.(this);
         super.componentDidMount?.();
         this.props.setBrushViewer?.(this.brushView);
@@ -1787,6 +1789,53 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         }
     };
 
+    printDoc = (doc: Doc) => {
+        console.log('Printing keys');
+        Object.keys(doc).forEach(key => {
+            console.log(key, ':', doc[key]);
+        });
+    };
+
+    // gpt styling
+    @action
+    gptStyling = async () => {
+        console.log('Title', this.rootDoc.title);
+        console.log('bgcolor', this.layoutDoc._backgroundColor);
+        // doc.backgroundColor
+        console.log('styling');
+        const inputDocs = this.childDocs.filter(doc => doc.type == 'rich text');
+        const gptInput = inputDocs.map((doc, i) => ({
+            id: i,
+            textContent: (doc.text as RichTextField)?.Text,
+            textSize: 16,
+        }));
+
+        // inputDocs[0].backgroundColor = '#3392ff';
+
+        const collectionDescription = StrCast(this.rootDoc.title);
+
+        console.log({
+            collectionDescription,
+            documents: gptInput,
+        });
+
+        try {
+            const res = await generatePalette({
+                collectionDescription,
+                documents: gptInput,
+            });
+            console.log('done');
+            if (typeof res === 'string') {
+                const resObj = JSON.parse(res);
+                console.log('Result ', resObj);
+                this.rootDoc.backgroundColor = resObj.collectionBackgroundColor;
+                (resObj.documentsWithColors as any[]).forEach((elem, i) => (inputDocs[i].backgroundColor = elem.color));
+            }
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
     onContextMenu = (e: React.MouseEvent) => {
         if (this.props.isAnnotationOverlay || !ContextMenu.Instance) return;
 
@@ -1826,6 +1875,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             optionItems.push({ description: (this._showAnimTimeline ? 'Close' : 'Open') + ' Animation Timeline', event: action(() => (this._showAnimTimeline = !this._showAnimTimeline)), icon: 'eye' });
         this.props.renderDepth && optionItems.push({ description: 'Use Background Color as Default', event: () => (Cast(Doc.UserDoc().emptyCollection, Doc, null)._backgroundColor = StrCast(this.layoutDoc._backgroundColor)), icon: 'palette' });
         this.props.renderDepth && optionItems.push({ description: 'Fit Content Once', event: this.fitContentOnce, icon: 'object-group' });
+        // gpt styling
+        this.props.renderDepth && optionItems.push({ description: 'Style with AI', event: this.gptStyling, icon: 'paint-brush' });
         if (!Doc.noviceMode) {
             optionItems.push({ description: (!Doc.NativeWidth(this.layoutDoc) || !Doc.NativeHeight(this.layoutDoc) ? 'Freeze' : 'Unfreeze') + ' Aspect', event: this.toggleNativeDimensions, icon: 'snowflake' });
         }