use image toggle

1 files changed, 24 insertions, 21 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index b0be060bd..f5ba0de96 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1819,8 +1819,11 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     // gpt styling
     @action
     gptStyling = async () => {
+        // clear it in properties instead
+        if (!PropertiesView.Instance) return;
         this.openProperties();
-        PropertiesView.Instance?.setGeneratedStyles([]);
+        PropertiesView.Instance.setGeneratedStyles([]);
+        PropertiesView.Instance.selectedStyle = -1;
         console.log('Title', this.rootDoc.title);
         console.log('bgcolor', this.layoutDoc._backgroundColor);
         // doc.backgroundColor
@@ -1847,29 +1850,29 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
         const collectionDescription = StrCast(this.rootDoc.title);
 
-        console.log({
+        const styleInput = {
             collectionDescription,
             documents: gptInput,
-        });
+            imageColors: colorHexes,
+        };
 
-        try {
-            const res = await generatePalette({
-                collectionDescription,
-                documents: gptInput,
-                imageColors: colorHexes,
-            });
-            if (typeof res === 'string') {
-                console.log(res);
-                const resObj = JSON.parse(res) as GeneratedResponse[];
-                PropertiesView.Instance?.setGeneratedStyles(resObj);
-                // const resObj = JSON.parse(res) as GeneratedResponse;
-                // console.log('Result ', resObj);
-                // this.rootDoc.backgroundColor = resObj.collectionBackgroundColor;
-                // (resObj.documentsWithColors).forEach((elem, i) => (inputDocs[i].backgroundColor = elem.color));
-            }
-        } catch (err) {
-            console.error(err);
-        }
+        PropertiesView.Instance.styleInput = styleInput;
+        PropertiesView.Instance.gptStyling();
+
+        // try {
+        //     const res = await generatePalette(styleInput);
+        //     if (typeof res === 'string') {
+        //         console.log(res);
+        //         const resObj = JSON.parse(res) as GeneratedResponse[];
+        //         PropertiesView.Instance.setGeneratedStyles(resObj);
+        //         // const resObj = JSON.parse(res) as GeneratedResponse;
+        //         // console.log('Result ', resObj);
+        //         // this.rootDoc.backgroundColor = resObj.collectionBackgroundColor;
+        //         // (resObj.documentsWithColors).forEach((elem, i) => (inputDocs[i].backgroundColor = elem.color));
+        //     }
+        // } catch (err) {
+        //     console.error(err);
+        // }
     };
 
     onContextMenu = (e: React.MouseEvent) => {